/* =========================================================
   TaengRak 内页共用样式（在 premium.css 之后引入）
   适用：process / environment / lovely-member / member-detail /
         detail / sweet-stories / events / events-detail /
         activity / contact / 404
   所有规则均需在 375px 宽下成立
   ========================================================= */

/* ---------- 横幅 ---------- */
.tr-page-banner .tr-section-head { margin-bottom: 0; max-width: 760px; }
.tr-page-banner .tr-title { overflow-wrap: anywhere; }
.tr-page-banner__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin-top: 18px; font-family: var(--tr-sans); font-size: 14px; color: var(--tr-gold-text); }

/* 紧接上一区块时去掉顶部留白 */
.tr-section--flush-top { padding-top: 0; }
/* hidden 属性兜底（部分组件设置了 display） */
main [hidden] { display: none !important; }

/* 居中的按钮组 */
.tr-actions--center { justify-content: center; margin-top: 48px; }
.tr-actions--tight { margin-top: 8px; }
.tr-profile__actions { margin-top: 32px; }
/* 列表区块在翻页滚动时留出页头空间 */
.tr-list-anchor { scroll-margin-top: calc(var(--tr-nav-h-compact, 80px) + 16px); }

/* ---------- 下载区（tr-cta-band 的内部排版） ---------- */
.tr-cta-band__text { flex: 1 1 360px; min-width: 0; max-width: 660px; }
.tr-cta-band__kicker { font-family: var(--tr-sans); font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--tr-gold-text); margin: 0 0 6px; }
.tr-cta-band .tr-lead { font-size: 16px; }
.tr-btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
@media (max-width: 480px) {
  .tr-cta-band > .tr-actions { width: 100%; }
}

/* ---------- 分页 ---------- */
.tr-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 40px 0 0; }
.tr-pager button {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 0;
  border: 1px solid var(--tr-rose-200); background: var(--tr-surface); color: var(--tr-ink);
  font-family: var(--tr-sans); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.tr-pager button:hover:not(:disabled):not([aria-current]) { background: var(--tr-surface); border-color: var(--tr-rose-700); }
.tr-pager button[aria-current="page"] { background: var(--tr-rose-700); border-color: var(--tr-rose-700); color: #F9F7FC; cursor: default; }
.tr-pager button:disabled { opacity: .4; cursor: default; }
.tr-pager button:focus-visible { outline: 2px solid var(--tr-rose-600); outline-offset: 2px; }
.tr-pager__gap { min-width: 16px; text-align: center; color: var(--tr-muted); font-family: var(--tr-sans); }
@media (max-width: 480px) { .tr-pager { gap: 4px; } }

/* ---------- 卡片补充 ---------- */
.tr-member__badge svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
.tr-post__cover--empty { display: grid; place-items: center; }
.tr-post__cover--empty span { font-family: var(--tr-accent); font-style: italic; font-weight: 500; font-size: 32px; color: var(--tr-rose-700); }
.tr-grid[aria-busy="true"] { min-height: 240px; }
.tr-grid > .tr-empty { grid-column: 1 / -1; }

/* ---------- 性别切换（lovely-member） ---------- */
.tr-tabs-wrap { display: flex; justify-content: center; margin: 0 0 32px; }
.tr-tabs { display: inline-flex; gap: 0; padding: 4px; border-radius: 0; background: var(--tr-surface); border: 1px solid var(--tr-line); }
.tr-tab {
  min-height: 44px; min-width: 150px; padding: 0 22px; border: 0; border-radius: 0;
  background: transparent; color: var(--tr-muted); font-family: var(--tr-sans); font-size: 16px; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tr-tab:hover { color: var(--tr-rose-700); }
.tr-tab[aria-selected="true"] { background: var(--tr-rose-700); color: #F9F7FC; font-weight: 500; box-shadow: none; }
.tr-tab:focus-visible { outline: 2px solid var(--tr-rose-600); outline-offset: 2px; }
@media (max-width: 575px) { .tr-tabs-wrap .tr-tabs { display: flex; width: 100%; } .tr-tab { flex: 1 1 0; min-width: 0; padding: 0 12px; } }

/* ---------- 服务流程（process） ---------- */
.tr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tr-step { background: var(--tr-surface); border: 1px solid var(--tr-line); border-top-color: var(--tr-gold); border-radius: var(--tr-radius); padding: 26px 24px; box-shadow: var(--tr-shadow); }
.tr-step__num {
  display: block; margin-bottom: 14px; padding-top: 0;
  background: none; color: var(--tr-gold);
  font-family: var(--tr-accent); font-style: normal; font-weight: 500; font-size: 40px; line-height: 1;
}
.tr-step__title { font-family: var(--tr-serif) !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--tr-ink); margin: 0 0 8px; }
.tr-step__text { font-family: var(--tr-sans); font-size: 15px; line-height: 1.8; color: var(--tr-muted); margin: 0; }
/* 9 个步骤：桌面 3×3，平板 2 列，避免最后一行孤卡 */
@media (min-width: 992px) { .tr-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 576px) and (max-width: 991px) {
  .tr-steps { grid-template-columns: repeat(2, 1fr); }
  .tr-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .tr-steps { grid-template-columns: 1fr; gap: 14px; }
  .tr-step { padding: 22px 20px; }
}

/* ---------- 文章 / 详情 ---------- */
.tr-article { max-width: 820px; margin: 0 auto; }
.tr-article .tr-prose { max-width: none; overflow-wrap: anywhere; }
.tr-article__cover { position: relative; margin: 0 0 32px; border-radius: var(--tr-radius); overflow: hidden; background: var(--tr-blush-100); }
.tr-article__cover img { display: block; width: 100%; height: auto; }
.tr-article__cover--portrait { max-width: 420px; margin-left: auto; margin-right: auto; border: 1px solid var(--tr-line); }
.tr-article__video { margin: 32px 0 0; }
.tr-article__video video { display: block; width: 100%; height: auto; border-radius: var(--tr-radius); background: #000; }
.tr-article__gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 32px 0 0; }
.tr-article__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; display: block; }
.tr-article__back { margin-top: 40px; }
@media (max-width: 575px) {
  .tr-article__cover { margin-bottom: 24px; }
  .tr-article__gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* 会员详情：照片 + 简介 */
.tr-profile { display: grid; gap: 40px; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; max-width: 1040px; margin: 0 auto; }
.tr-profile__photo { position: relative; border-radius: var(--tr-radius); overflow: hidden; background: var(--tr-blush-100); aspect-ratio: 4 / 5; box-shadow: var(--tr-shadow); }
.tr-profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tr-profile .tr-prose { max-width: none; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .tr-profile { grid-template-columns: 1fr; gap: 24px; }
  .tr-profile__photo { max-width: 340px; width: 100%; margin: 0 auto; }
}

/* 相关内容 */
.tr-related-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.tr-related-head .tr-title { font-size: clamp(24px, 2.4vw, 32px) !important; margin: 0; }
.tr-link-more { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--tr-sans); font-size: 15px; color: var(--tr-rose-600) !important; text-decoration: underline; text-decoration-color: var(--tr-gold); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tr-link-more:hover { color: var(--tr-rose-700) !important; }

/* ---------- 办公环境（environment） ---------- */
.tr-env-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.tr-env-list { margin-top: 56px; }
@media (max-width: 575px) { .tr-env-list { margin-top: 40px; } }
.tr-env-block + .tr-env-block { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--tr-line); }
.tr-env-block .tr-section-head { margin-bottom: 28px; }
.tr-env-gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 0 0 32px; }
.tr-env-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; display: block; background: var(--tr-blush-100); }
.tr-env-block .tr-prose { margin: 0 auto; overflow-wrap: anywhere; }
@media (max-width: 575px) {
  .tr-env-gallery { grid-template-columns: 1fr; gap: 12px; }
  .tr-env-block + .tr-env-block { margin-top: 48px; padding-top: 48px; }
}

/* ---------- 联系我们（contact） ---------- */
.tr-contact-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tr-contact-card { background: var(--tr-surface); border: 1px solid var(--tr-line); border-radius: var(--tr-radius); padding: 26px 24px; box-shadow: var(--tr-shadow); min-width: 0; }
.tr-contact-card__icon { width: 48px; height: 48px; border-radius: 0; display: grid; place-items: center; background: transparent; border: 1px solid var(--tr-line); color: var(--tr-rose-600); margin-bottom: 16px; }
.tr-contact-card__icon svg { width: 22px; height: 22px; fill: currentColor; }
.tr-contact-card__title { font-family: var(--tr-serif) !important; font-size: 19px !important; font-weight: 500 !important; line-height: 1.45 !important; color: var(--tr-ink); margin: 0 0 10px; }
.tr-contact-card p { font-family: var(--tr-sans); font-size: 15px; line-height: 1.8; color: var(--tr-muted); margin: 0; overflow-wrap: anywhere; }
.tr-contact-card a:not(.tr-btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--tr-rose-600) !important; font-weight: 500; text-decoration: underline; text-decoration-color: var(--tr-gold); text-underline-offset: 4px; }
.tr-contact-card a:not(.tr-btn):hover { color: var(--tr-rose-700) !important; }
.tr-contact-card dl { margin: 0; }
.tr-contact-card__address { font-style: normal; margin: 0 0 4px; }
.tr-contact-card dt { font-family: var(--tr-sans); font-size: 13px; font-weight: 500; color: var(--tr-gold-text); margin: 0; }
.tr-contact-card dd { margin: 0 0 4px; }
.tr-map { margin-top: 40px; border-radius: var(--tr-radius); overflow: hidden; border: 1px solid var(--tr-line); box-shadow: var(--tr-shadow); background: var(--tr-blush-100); }
.tr-map iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 575px) {
  .tr-map { margin-top: 28px; }
  .tr-map iframe { height: 320px; }
}

/* ---------- 404 ---------- */
.tr-404 { padding: 110px 0 110px; text-align: center; background: var(--tr-blush-50); }
.tr-404__code { display: block; font-family: var(--tr-accent); font-style: italic; font-size: clamp(88px, 16vw, 160px); line-height: 1; color: var(--tr-gold); margin: 0 0 8px; }
.tr-404 .tr-lead { max-width: 560px; margin: 0 auto 32px; }
.tr-404 .tr-actions { justify-content: center; }
@media (max-width: 767px) { .tr-404 { padding: 64px 0 64px; } }

/* ---------- 相关推荐：横向滑动列表（恢复原站展示全部条目） ---------- */
.tr-related-tools { display: flex; align-items: center; gap: 16px; }
.tr-rail-nav { display: flex; gap: 8px; }
.tr-rail-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--tr-line-strong); border-radius: 0; background: #fff; color: var(--tr-aubergine); cursor: pointer; transition: border-color .2s, color .2s, opacity .2s; }
.tr-rail-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tr-rail-btn:hover { border-color: var(--tr-violet); color: var(--tr-violet); }
.tr-rail-btn:focus-visible { outline: 2px solid var(--tr-violet); outline-offset: 2px; }
.tr-rail-btn:disabled { opacity: .35; cursor: default; border-color: var(--tr-line-strong); color: var(--tr-aubergine); }
.tr-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: var(--tr-line-strong) transparent; }
.tr-rail--3 { grid-auto-columns: calc((100% - 48px) / 3); }
.tr-rail > * { min-width: 0; scroll-snap-align: start; }
.tr-rail::-webkit-scrollbar { height: 4px; }
.tr-rail::-webkit-scrollbar-thumb { background: var(--tr-line-strong); }
.tr-rail::-webkit-scrollbar-track { background: var(--tr-line); }
.tr-rail:focus-visible { outline: 2px solid var(--tr-violet); outline-offset: 4px; }
@media (max-width: 991px) {
  .tr-rail { grid-auto-columns: calc((100% - 32px) / 2.4); gap: 16px; }
  .tr-rail--3 { grid-auto-columns: calc((100% - 16px) / 1.6); }
}
@media (max-width: 575px) {
  .tr-rail { grid-auto-columns: 46%; gap: 12px; }
  .tr-rail--3 { grid-auto-columns: 84%; }
  .tr-rail-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tr-rail { scroll-behavior: auto; } }

/* ---------- 办公环境：空间亮点（设计插画 + 品牌发光墙） ---------- */
.tr-space__feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--tr-line); margin-bottom: 32px; }
.tr-space__wall {
  position: relative; display: grid; place-items: center; min-height: 380px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 38%, #EEEBEF 0%, #D9D5DC 48%, #B9B4BE 100%);
}
.tr-space__wall::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(46,36,73,.12)); }
.tr-space__glow { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,244,222,.95) 0%, rgba(255,236,205,.55) 38%, rgba(255,236,205,0) 70%); filter: blur(6px); }
.tr-space__wall img { position: relative; width: min(56%, 260px); height: auto; filter: drop-shadow(0 0 10px rgba(255,238,210,.9)) drop-shadow(0 0 28px rgba(255,226,180,.55)); }
.tr-space__info { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.tr-space__info .tr-title { margin: 0; }
.tr-space__info .tr-lead { margin: 0; }
.tr-space__facts { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 10px; }
.tr-space__facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.7; color: var(--tr-ink); }
.tr-space__facts svg { flex: none; width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: var(--tr-violet); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tr-space__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tr-space__card { background: #fff; border: 1px solid var(--tr-line); padding: 28px 28px 30px; }
.tr-space__art { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 0 18px; fill: none; stroke: var(--tr-lavender); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tr-space__art .tr-space__heart { fill: #F4D6DF; stroke: var(--tr-pink); }
.tr-space__art .tr-space__dot { fill: var(--tr-mist); stroke: var(--tr-line-strong); }
.tr-space__card h3 { font-family: var(--tr-serif) !important; font-weight: 400; font-size: 21px; line-height: 1.45; color: var(--tr-ink); margin: 0 0 8px; }
.tr-space__card p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--tr-muted); }
@media (max-width: 991px) {
  .tr-space__feature { grid-template-columns: 1fr; }
  .tr-space__wall { min-height: 280px; }
  .tr-space__info { padding: 32px 28px; }
  .tr-space__cards { grid-template-columns: 1fr; gap: 16px; }
  .tr-space__card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 20px; align-items: start; padding: 22px; }
  .tr-space__art { grid-row: span 2; margin: 0; }
}
@media (max-width: 575px) {
  .tr-space__wall { min-height: 220px; }
  .tr-space__info { padding: 26px 20px; }
  .tr-space__info .tr-actions .tr-btn { width: 100%; }
  .tr-space__card { grid-template-columns: 1fr; }
  .tr-space__art { max-width: 160px; margin-bottom: 12px; }
}

/* 404 插画 */
.tr-404__art { display: block; width: min(260px, 70%); height: auto; margin: 0 auto 20px; fill: none; stroke: var(--tr-lavender); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tr-404__art .tr-404__inner { stroke: var(--tr-line-strong); }
.tr-404__art .tr-404__ground { stroke: var(--tr-line-strong); }
.tr-404__art .tr-404__string { stroke: var(--tr-line-strong); stroke-dasharray: 3 5; }
.tr-404__art .tr-404__heart { fill: #F4D6DF; stroke: var(--tr-pink); animation: tr-404-float 4s ease-in-out infinite; transform-origin: 166px 50px; }
.tr-404__art .tr-404__dot { fill: var(--tr-mist); stroke: var(--tr-line-strong); }
.tr-404__art .tr-404__spark { stroke: var(--tr-pink); stroke-width: 1.2; }
.tr-404__code { font-size: clamp(64px, 11vw, 112px); }
@keyframes tr-404-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .tr-404__art .tr-404__heart { animation: none; } }