* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #ffffff;
  color: #19314d;
  line-height: 1.8;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 24px;
}
a { color: inherit; text-decoration: none; }
.container { width: min(1140px, calc(100% - 32px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e4ebf5;
  backdrop-filter: blur(10px);
}
.header-inner,
.top-nav,
.hero-grid,
.relation-grid,
.brand-head,
.action-row,
.note-board div,
.faq-grid,
.tag-list,
.dual-copy,
.icon-grid {
  display: flex;
}
.header-inner,
.hero-grid,
.relation-grid {
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.header-inner { padding: 18px 0; }
.brand-logo,
.logo-wrap,
.header-logo,
.nav-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 12px;
  background: #10172a;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.site-logo,
.brand-logo img,
.logo-wrap img,
.header-logo img,
.nav-brand img,
.logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 36px;
  max-width: 190px;
  object-fit: contain;
}
.top-nav {
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #47617d;
}
.hero,
.section,
.faq-section,
.search-section,
.cta-section { padding: 72px 0; }
.hero {
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}
.hero-copy,
.hero-visual,
.relation-copy,
.relation-visual { flex: 1; }
.hero-visual { display: grid; gap: 18px; }
.eyebrow {
  margin: 0 0 12px;
  color: #2d6cc9;
  font-weight: 700;
  letter-spacing: 0.08em;
}
h1, h2, h3 { margin-top: 0; line-height: 1.3; }
h1 {
  margin-bottom: 18px;
  font-size: clamp(34px, 5vw, 50px);
  color: #14315b;
}
h2 {
  margin-bottom: 20px;
  font-size: 30px;
  color: #12365f;
}
.action-row { gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
}
.btn-primary { background: #184f9a; color: #fff; }
.btn-secondary { background: #dfeafc; color: #184f9a; }
.brand-card,
.icon-card,
.note-board,
.faq-grid article,
.cta-box {
  border-radius: 24px;
  border: 1px solid #dce7f6;
  background: #fff;
  box-shadow: 0 18px 42px rgba(21, 52, 97, 0.09);
}
.brand-card,
.icon-card,
.faq-grid article,
.cta-box { padding: 24px; }
.brand-head,
.note-board div {
  align-items: center;
  gap: 14px;
}
.brand-head span,
.icon-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 700;
}
.brand-head span {
  width: 58px;
  height: 58px;
  background: #e3efff;
  color: #194f99;
  font-size: 22px;
}
.brand-card ul,
.path-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.brand-card li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #e7eef8;
}
.brand-card li:last-child { border-bottom: 0; }
.dual-copy { gap: 24px; }
.dual-copy p,
.relation-copy p { flex: 1; }
.alt { background: #f8fbff; }
.icon-grid {
  gap: 18px;
  flex-wrap: wrap;
}
.icon-card { flex: 1 1 calc(25% - 18px); }
.icon-mark {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  background: #153f77;
  color: #fff;
}
.note-board { display: grid; gap: 14px; padding: 22px; margin-top: 18px; }
.note-board div {
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 18px;
  background: #f3f7ff;
}
.path-list { padding-left: 20px; list-style: disc; }
.faq-grid,
.tag-list {
  gap: 18px;
  flex-wrap: wrap;
}
.faq-grid article { flex: 1 1 calc(50% - 18px); }
.tag-list span {
  flex: 1 1 calc(33.333% - 18px);
  padding: 14px 18px;
  border-radius: 999px;
  background: #eff5ff;
  color: #1a4f95;
  text-align: center;
}
.cta-box {
  text-align: center;
  background: linear-gradient(135deg, #163761 0%, #25599e 100%);
  color: #fff;
}
.cta-box h2,
.cta-box .eyebrow { color: #fff; }
.cta-box .btn-primary { margin-top: 10px; background: #fff; color: #163761; }
@media (max-width: 900px) {
  .header-inner,
  .hero-grid,
  .relation-grid,
  .dual-copy { flex-direction: column; align-items: stretch; }
  .icon-card,
  .faq-grid article,
  .tag-list span { flex-basis: calc(50% - 18px); }
}
@media (max-width: 640px) {
  .hero,
  .section,
  .faq-section,
  .search-section,
  .cta-section { padding: 56px 0; }
  .top-nav { gap: 12px; }
  .icon-card,
  .faq-grid article,
  .tag-list span { flex-basis: 100%; }
  h2 { font-size: 26px; }
}
/* v11 visual repair */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

img,
picture,
svg {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

figure {
  margin: 0;
}

.hero img,
.hero-media img,
.hero-visual img,
.hero-side img,
.hero-right img,
.hero-card img,
.brand-card img,
.visual img,
.visual-card img,
.media-card img,
.image-card img,
.device-card img,
.phone-card img,
.feature-image img,
.section-image img,
.mockup img,
.showcase img,
.panel img,
.split-panel img,
.mobile-section img,
.mobile-grid img,
.split-layout img,
.relation-layout img,
.notice-layout img,
.types-layout img,
.guide-grid img,
.club-grid img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.hero-media,
.hero-visual,
.hero-side,
.hero-right,
.hero-card,
.brand-card,
.visual,
.visual-card,
.media-card,
.image-card,
.device-card,
.phone-card,
.feature-image,
.section-image,
.mockup,
.showcase,
.panel,
.split-panel,
.mobile-section,
.mobile-grid,
.split-layout,
.relation-layout,
.notice-layout,
.types-layout,
.guide-grid,
.club-grid {
  min-width: 0;
  overflow: hidden;
}

.hero-media img,
.hero-visual img,
.hero-side img,
.hero-right img,
.visual-card img,
.media-card img,
.image-card img,
.device-card img,
.phone-card img,
.brand-card img,
.hero-card img {
  max-height: 520px;
  margin-left: auto;
  margin-right: auto;
}

.phone-card img,
.device-card img,
.mobile-panel img,
.mobile-section img,
.mobile-grid img {
  max-height: 460px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.banner img,
.hero-banner img,
.cover img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  object-position: center;
}

.site-logo,
.brand-logo img,
.logo-wrap img,
.header-logo img,
.nav-brand img,
.logo img {
  width: auto;
  max-height: 36px;
  object-fit: contain;
}

/* v11 text column repair */
.container,
.wrap,
.wrapper,
.frame,
.shell,
.page-wrap,
.section-inner,
.hero-inner,
.content-wrap {
  width: min(1120px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}

.hero-grid,
.hero-layout,
.hero-shell,
.hero-wrap,
.split,
.two-col,
.content-grid,
.feature-grid,
.info-grid,
.panel-grid,
.route-grid,
.device-grid,
.card-grid,
.split-grid,
.split-layout,
.relation-grid,
.relation-layout,
.mobile-grid,
.steps-layout,
.types-layout,
.roles-layout,
.notice-layout,
section .section-grid,
.guide-grid,
.club-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.hero-grid > *,
.hero-layout > *,
.hero-shell > *,
.hero-wrap > *,
.split > *,
.two-col > *,
.content-grid > *,
.feature-grid > *,
.info-grid > *,
.panel-grid > *,
.route-grid > *,
.device-grid > *,
.card-grid > *,
.split-grid > *,
.split-layout > *,
.relation-grid > *,
.relation-layout > *,
.mobile-grid > *,
.steps-layout > *,
.types-layout > *,
.roles-layout > *,
.notice-layout > *,
.section-grid > *,
.guide-grid > *,
.club-grid > * {
  min-width: 0;
}

p,
li,
.card,
.step-card,
.info-card,
.feature-card,
.copy,
.text,
.section-copy,
.hero-copy,
.text-col,
.hero-panel,
.hero-left,
.relation-copy,
.notice-copy,
.steps-copy {
  writing-mode: horizontal-tb;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.75;
}

.step-card,
.info-card,
.feature-card,
.route-card,
.check-card,
.faq-card,
.panel,
.card,
.center-card,
.flow-card,
.warn-card,
.index-card,
.dashboard-card,
.settings-card,
.member-board,
.lobby-panel {
  min-width: 0;
}

.side-steps,
.steps-rail,
.right-rail,
.timeline-rail,
.flow-steps,
.trophy-list,
.notice-list,
.guide-list {
  width: 100%;
  max-width: 360px;
  justify-self: end;
}

.side-steps .step-card,
.steps-rail .step-card,
.right-rail .step-card,
.timeline-rail .step-card,
.flow-steps > *,
.trophy-list > *,
.notice-list > *,
.guide-list > * {
  width: 100%;
  min-width: 220px;
}

@media (max-width: 900px) {
  .hero-grid,
  .hero-layout,
  .hero-shell,
  .hero-wrap,
  .split,
  .two-col,
  .content-grid,
  .feature-grid,
  .info-grid,
  .panel-grid,
  .route-grid,
  .device-grid,
  .card-grid,
  .split-grid,
  .split-layout,
  .relation-grid,
  .relation-layout,
  .mobile-grid,
  .steps-layout,
  .types-layout,
  .roles-layout,
  .notice-layout,
  section .section-grid,
  .guide-grid,
  .club-grid {
    grid-template-columns: 1fr;
  }

  .side-steps,
  .steps-rail,
  .right-rail,
  .timeline-rail,
  .flow-steps,
  .trophy-list,
  .notice-list,
  .guide-list {
    max-width: none;
    justify-self: stretch;
  }

  .side-steps .step-card,
  .steps-rail .step-card,
  .right-rail .step-card,
  .timeline-rail .step-card,
  .flow-steps > *,
  .trophy-list > *,
  .notice-list > *,
  .guide-list > * {
    min-width: 0;
  }
}