:root {
  --samsung-blue: #1428a0;
  --link-blue: #1769e0;
  --deep-blue: #07175f;
  --sky: #dff2ff;
  --ice: #f3f7fc;
  --white: #ffffff;
  --graphite: #111827;
  --muted: #64748b;
  --line: #dfe6ef;
  --line-soft: #edf1f6;
  --gold: #c39a45;
  --shell-width: 480px;
  --shadow: 0 24px 70px rgba(14, 31, 75, 0.14);
  --shadow-card: 0 13px 36px rgba(24, 39, 76, 0.06);
  /* 국내 시장 관례(상승 빨강 / 하락 파랑). 관리자 테마로 바뀌면 안 되는 값이다. */
  --market-up: #d92d20;
  --market-down: #1769e0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #e8edf4;
}

body {
  margin: 0;
  color: var(--graphite);
  background: #e8edf4;
  /* Arial 을 앞세우지 않는다. Arial 에는 한글이 없어 한글만 다음 폰트로 넘어가고
     영문·숫자는 Arial 로 남아 한 화면에 두 폰트가 섞인다. */
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

body.nav-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video,
svg {
  display: block;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 1000;
  padding: 10px 16px;
  color: var(--white);
  background: var(--deep-blue);
  border-radius: 8px;
  transform: translate(-50%, -150%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

:focus-visible {
  outline: 3px solid #54c7ff;
  outline-offset: 3px;
}

.site-shell {
  position: relative;
  width: min(100%, var(--shell-width));
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
}

.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  display: flex;
  width: min(100%, var(--shell-width));
  height: 68px;
  padding: 0 18px 0 20px;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(219, 226, 237, 0.82);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.brand-lockup,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 24px;
  color: var(--white);
  background: var(--samsung-blue);
  border-radius: 50%;
  place-items: center;
  transform: skew(-10deg);
}

.brand-mark span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.05em;
  transform: skew(10deg);
}

/* 헤더·푸터 워드마크. 원본 135x39 를 높이 19px 로 쓰면 DPR2 에서도 2배가 넘어 또렷하다.
   기존 글자 락업(63x22)과 자리 차지가 비슷해 상단바 높이가 흔들리지 않는다. */
.brand-wordmark {
  display: block;
  width: auto;
  height: 19px;
}

/* 푸터는 글자가 14.6px(높이 16)로 더 작았다. 그 크기에 맞춰 줄인다. */
.brand-wordmark--footer {
  height: 16px;
}

.brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--graphite);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  place-items: center;
}

.icon-button:hover {
  background: var(--ice);
}

.icon-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.icon-button[href] svg {
  fill: none;
  stroke-width: 1.7;
}

.drawer-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.drawer-layer[hidden] {
  display: none;
}

.drawer-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(4, 11, 38, 0.48);
  border: 0;
  opacity: 0;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: opacity 240ms ease;
}

.site-drawer {
  position: absolute;
  top: 0;
  right: max(0px, calc((100vw - var(--shell-width)) / 2));
  width: min(88vw, 410px);
  height: 100%;
  padding: 0 24px 30px;
  overflow-y: auto;
  background: var(--white);
  box-shadow: -20px 0 54px rgba(5, 19, 68, 0.2);
  transform: translateX(105%);
  transition: transform 280ms cubic-bezier(0.22, 0.82, 0.3, 1);
}

.drawer-layer.is-open .drawer-scrim {
  opacity: 1;
}

.drawer-layer.is-open .site-drawer {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  height: 76px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.drawer-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.drawer-home {
  display: grid;
  min-height: 72px;
  margin-top: 14px;
  padding: 0 14px;
  align-items: center;
  color: var(--deep-blue);
  border-radius: 16px;
  grid-template-columns: 38px 1fr 22px;
  font-size: 18px;
  font-weight: 800;
}

.drawer-home:hover,
.drawer-home.is-current {
  background: #edf4ff;
}

.drawer-home > svg,
.drawer-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.drawer-home-icon {
  display: grid;
  width: 30px;
  height: 30px;
  color: var(--white);
  background: var(--samsung-blue);
  border-radius: 10px;
  place-items: center;
}

.drawer-home-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.drawer-section-label {
  display: flex;
  margin: 26px 0 7px;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.drawer-section-label::after {
  height: 1px;
  background: var(--line);
  content: "";
  flex: 1;
}

.drawer-event-list {
  display: grid;
}

.drawer-link {
  display: grid;
  min-height: 56px;
  padding: 0 12px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  font-size: 17px;
  font-weight: 700;
  gap: 8px;
  grid-template-columns: 1fr 20px;
}

.drawer-link:hover,
.drawer-link.is-current {
  color: var(--samsung-blue);
}

.drawer-link.is-current span::after {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0 3px 7px;
  background: var(--link-blue);
  border-radius: 50%;
  content: "";
}

.drawer-menu-group {
  border-bottom: 1px solid #edf1f6;
}

.drawer-menu-group summary {
  display: grid;
  min-height: 60px;
  padding: 0 12px;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 800;
  gap: 8px;
  grid-template-columns: 1fr 20px;
  list-style: none;
  transition: color 180ms ease, background 180ms ease;
}

.drawer-menu-group summary::-webkit-details-marker {
  display: none;
}

.drawer-menu-group summary:hover,
.drawer-menu-group[open] summary {
  color: var(--samsung-blue);
  background: #f4f7fc;
}

.drawer-menu-group summary i {
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms cubic-bezier(.22, .61, .36, 1), margin 200ms ease;
}

.drawer-menu-group[open] summary i {
  margin-top: 5px;
  margin-bottom: 0;
  transform: rotate(225deg);
}

.drawer-menu-group-list {
  margin: 0 6px 8px;
  overflow: hidden;
  background: #f7f9fc;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  animation: drawer-submenu-in 200ms cubic-bezier(.22, .61, .36, 1) both;
}

.drawer-menu-group-list .drawer-link {
  min-height: 48px;
  padding: 0 10px 0 14px;
  border-bottom-color: #e8edf5;
  font-size: 15px;
}

.drawer-menu-group-list .drawer-link:last-child {
  border-bottom: 0;
}

.drawer-menu-group-list .drawer-link svg {
  width: 17px;
  height: 17px;
}

@keyframes drawer-submenu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-menu-group summary,
  .drawer-menu-group summary i {
    transition: none;
  }

  .drawer-menu-group-list {
    animation: none;
  }
}

.drawer-note {
  margin: 24px 8px 0;
  color: #8a95a8;
  font-size: 12px;
  line-height: 1.65;
}

.preview-ribbon {
  position: fixed;
  top: 76px;
  left: 50%;
  z-index: 90;
  margin-left: min(180px, calc(50vw - 66px));
  padding: 6px 9px;
  color: var(--white);
  background: #0c183c;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  transform: translateX(-50%);
}

.content-text {
  margin: 0;
  white-space: normal;
}

.content-text strong,
.is-bold strong,
.is-bold {
  font-weight: 800;
}

/* 스택 정의는 renderer.js 의 fontStacks 한 곳뿐이다.
   여기는 리치 텍스트에서 구간별로 폰트를 지정할 때만 쓰는 클래스다. */
.run-font-system {
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

.run-font-modern {
  font-family: "Pretendard", "Aptos", "Segoe UI", "Malgun Gothic", sans-serif;
}

.run-font-friendly {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.run-font-serif {
  font-family: "Noto Serif KR", Georgia, "Batang", serif;
}

.run-font-samsung {
  font-family: "SamsungGothicCondensed", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

/* 제목 계열은 --font-heading 을 따른다. 리치 텍스트에서 구간별 폰트를 지정한
   경우(.run-font-*)는 그 지정이 더 구체적이라 그대로 유지된다. */
.rendered-site h1,
.rendered-site h2,
.rendered-site h3,
.hero-heading,
.section-title,
.award-crest-text,
.award-category,
.block-badge-value,
.block-step-title,
.block-compare dt,
.ranking-index,
.ranking-panel-head,
.ranking-tab,
.ranking-flow-item strong,
.event-title,
.event-subtitle,
.benefit-amount,
.floating-cta,
.inline-cta,
.brand-name {
  font-family: var(--font-heading, inherit);
}

.run-font-inherit { font-family: inherit; }
.text-run { white-space: pre-wrap; }
.run-size-inherit { font-size: inherit; }
.run-size-xs { font-size: .64em; }
.run-size-sm { font-size: .8em; }
.run-size-md { font-size: 1em; }
.run-size-lg { font-size: 1.22em; }
.run-size-xl { font-size: 1.48em; }
.run-color-inherit { color: inherit; }
.run-color-primary { color: var(--samsung-blue); }
.run-color-accent { color: var(--link-blue); }
.run-color-ink { color: #111827; }
.run-color-muted { color: #7b879a; }
.run-color-white { color: #fff; }
.run-color-red { color: #d92d20; }
.run-color-gold { color: #b77800; }
.run-color-green { color: #087a55; }

.text-sm {
  font-size: 13px;
  line-height: 1.75;
}

.text-md {
  font-size: 18px;
  line-height: 1.55;
}

.text-lg {
  font-size: clamp(29px, 8.2vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.052em;
}

.text-xl {
  font-size: clamp(41px, 11.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.064em;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.section-kicker::before {
  width: 18px;
  height: 2px;
  background: currentColor;
  content: "";
}

.section-kicker--blue {
  color: var(--link-blue);
}

.hero-shortcut-rail {
  display: flex;
  width: 100%;
  margin: 0 0 20px;
  padding: 2px 0 4px;
  overflow-x: auto;
  gap: 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.hero-shortcut-rail::-webkit-scrollbar {
  display: none;
}

.hero-shortcut {
  display: inline-flex;
  min-width: min(78%, 278px);
  min-height: 54px;
  padding: 0 10px 0 16px;
  align-items: center;
  justify-content: space-between;
  color: #0f1b3d;
  background: #ffffff;
  border: 1.5px solid #d6deec;
  border-radius: 14px;
  box-shadow: 0 9px 20px -10px rgba(20, 40, 120, .30);
  flex: 0 0 auto;
  gap: 12px;
  scroll-snap-align: start;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.hero-shortcut-label {
  white-space: nowrap;
}

.hero-shortcut-arrow {
  display: grid;
  width: 26px;
  height: 26px;
  color: #fff;
  background: var(--samsung-blue);
  border-radius: 999px;
  flex: 0 0 auto;
  place-items: center;
}

.hero-shortcut svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.hero-shortcut:hover,
.hero-shortcut:focus-visible {
  border-color: var(--samsung-blue);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(20, 40, 120, .42);
}

.hero-tone-light .hero-shortcut {
  color: #0f1b3d;
  background: #ffffff;
  border-color: #d6deec;
  box-shadow: 0 9px 20px -10px rgba(20, 40, 120, .30);
}

.home-hero {
  position: relative;
  min-height: 800px;
  padding: 126px 28px 74px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 84% 31%, rgba(65, 176, 255, 0.32), transparent 31%),
    linear-gradient(153deg, #091861 0%, var(--samsung-blue) 52%, #0a52b9 100%);
}

.home-hero::before,
.home-hero::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.home-hero::before {
  top: 230px;
  right: -150px;
  width: 430px;
  height: 430px;
}

.home-hero::after {
  top: 268px;
  right: -91px;
  width: 312px;
  height: 312px;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

/* 기획안: 씰 바로 아래 붙는 29px 대 제목. line-height 1.22 */
.hero-heading {
  margin-top: 9px;
  line-height: 1.22;
  letter-spacing: -.04em;
  text-shadow: 0 8px 26px rgba(2, 10, 51, 0.2);
}

.hero-sub {
  max-width: 350px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.65;
}

.media-slot {
  margin: 0;
}

.hero-media {
  position: relative;
  z-index: 1;
  width: calc(100% + 24px);
  height: 358px;
  margin: 20px -12px 0;
}

.slot-media {
  width: 100%;
  height: 100%;
}

.media-slot--hero .slot-media {
  object-fit: contain;
}

.hero-media figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(3, 15, 75, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: -0.02em;
  backdrop-filter: blur(8px);
}

.media-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 240px;
  padding: 24px;
  align-items: center;
  justify-content: center;
  color: #74829a;
  background: repeating-linear-gradient(135deg, #f4f6f9, #f4f6f9 12px, #edf1f5 12px, #edf1f5 24px);
  border: 1px dashed #aab6c8;
  border-radius: 28px;
  flex-direction: column;
  text-align: center;
}

.media-placeholder svg {
  width: 36px;
  height: 36px;
  margin-bottom: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.media-placeholder strong {
  font-size: 15px;
}

.media-placeholder span {
  max-width: 245px;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.5;
}

.scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.scroll-cue i {
  position: relative;
  display: block;
  width: 46px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
}

.scroll-cue i::after {
  position: absolute;
  inset: 0;
  background: var(--white);
  content: "";
  animation: scroll-line 2.3s ease-in-out infinite;
  transform: translateX(-100%);
}

@keyframes scroll-line {
  50%, 100% { transform: translateX(100%); }
}

.why-section {
  padding: 82px 24px 88px;
  background: var(--ice);
}

.section-heading-block {
  padding: 0 4px;
}

.section-title {
  margin-top: 16px;
}

.why-list {
  display: grid;
  margin-top: 34px;
  gap: 14px;
}

.why-card {
  position: relative;
  min-height: 184px;
  padding: 28px 24px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(216, 224, 235, 0.8);
  border-radius: 24px;
  box-shadow: 0 13px 36px rgba(24, 39, 76, 0.06);
}

.why-card:nth-child(2) {
  color: var(--white);
  background: linear-gradient(135deg, #182da6, #0c68cf);
  border-color: transparent;
}

.why-number {
  display: block;
  color: var(--link-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.why-card:nth-child(2) .why-number {
  color: #a9d8ff;
}

.why-icon {
  position: absolute;
  top: 23px;
  right: 22px;
  display: flex;
  width: 51px;
  height: 51px;
  align-items: end;
  justify-content: center;
  gap: 4px;
  background: #edf5ff;
  border-radius: 16px;
}

.why-card:nth-child(2) .why-icon {
  background: rgba(255, 255, 255, 0.13);
}

.why-icon i {
  width: 5px;
  background: var(--link-blue);
  border-radius: 4px 4px 0 0;
}

.why-icon i:nth-child(1) { height: 13px; margin-bottom: 12px; }
.why-icon i:nth-child(2) { height: 23px; margin-bottom: 12px; }
.why-icon i:nth-child(3) { height: 31px; margin-bottom: 12px; }
.why-card:nth-child(2) .why-icon i { background: var(--white); }

.why-copy {
  max-width: 272px;
  margin-top: 52px;
  font-size: 19px;
  line-height: 1.48;
  letter-spacing: -0.035em;
}

.ranking-section {
  position: relative;
  min-height: 730px;
  padding: 86px 24px 82px;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(155deg, #06134f 0%, #10278f 54%, #075da9 100%);
}

.ranking-orbit {
  position: absolute;
  top: -115px;
  right: -177px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(105, 198, 255, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 47px rgba(79, 181, 255, 0.035), 0 0 0 94px rgba(79, 181, 255, 0.025);
}

.section-heading-block--light {
  position: relative;
  z-index: 1;
}

.ranking-panel {
  position: relative;
  z-index: 1;
  margin-top: 36px;
  padding: 8px 18px 10px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(2, 8, 44, 0.25);
  backdrop-filter: blur(12px);
}

.ranking-panel-head {
  display: flex;
  height: 54px;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.67);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 700;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.live-badge i {
  width: 6px;
  height: 6px;
  background: #5de3b4;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(93, 227, 180, 0.12);
}

.ranking-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-list li {
  display: grid;
  min-height: 91px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 12px;
  grid-template-columns: 24px 1fr 42px;
}

.ranking-list li:last-child {
  border-bottom: 0;
}

.ranking-index {
  color: #7cc8ff;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ranking-copy {
  font-size: 14px;
  line-height: 1.55;
}

.ranking-trend {
  display: flex;
  height: 28px;
  align-items: end;
  justify-content: end;
  gap: 3px;
}

.ranking-trend i {
  width: 4px;
  background: #63ceff;
  border-radius: 2px;
}

.ranking-trend i:nth-child(1) { height: 8px; opacity: .4; }
.ranking-trend i:nth-child(2) { height: 15px; opacity: .55; }
.ranking-trend i:nth-child(3) { height: 12px; opacity: .75; }
.ranking-trend i:nth-child(4) { height: 24px; }

.ranking-caption {
  position: relative;
  z-index: 1;
  margin: 24px 4px 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.event-main {
  padding-bottom: 14px;
  background: #f7f9fc;
}

.event-hero {
  position: relative;
  min-height: 845px;
  padding: 90px 24px 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 23%, rgba(65, 173, 255, 0.24), transparent 34%),
    linear-gradient(180deg, #edf6ff 0%, #fff 50%, #fff 100%);
}

.event-aura {
  position: absolute;
  top: 104px;
  left: 50%;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(20, 40, 160, 0.09);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(23, 105, 224, 0.025), 0 0 0 68px rgba(23, 105, 224, 0.018);
  transform: translateX(-50%);
}

.event-object {
  position: relative;
  z-index: 1;
  width: calc(100% + 10px);
  height: 350px;
  margin: 4px -5px 0;
}

.media-slot--event .slot-media {
  object-fit: contain;
}

.event-copy {
  position: relative;
  z-index: 2;
  margin-top: -7px;
  text-align: center;
}

/* 제목·부제는 콘텐츠에 줄바꿈이 박혀 있고 white-space: pre-wrap 으로 그린다.
   브라우저를 확대하면 CSS 폭이 좁아져 그 한 줄이 또 접히는데, 그때 마지막 어절
   하나만 다음 줄로 떨어져 "시" 같은 한 글자 줄이 생긴다(110% 부터 관찰됨).
   pretty 는 줄 수를 늘리지 않으면서 고아 줄이 안 생기게 단어를 끌어내린다.
   390px(심의안 기준 폭)에서는 렌더 결과가 픽셀까지 동일함을 확인했고,
   지원하지 않는 브라우저는 이 속성을 무시하므로 지금과 같이 보인다. */
.event-copy h2,
.event-copy h3,
.event-copy p,
.hero-copy h1,
.hero-copy p,
.section-heading-block h2,
.section-heading-block p,
.event-detail-body p,
.notice-copy p {
  text-wrap: pretty;
}

/* 상시 블록 본문은 "…참고할 수 / 있습니다." 처럼 마지막 어절이 혼자 떨어진다.
   여기에 pretty 를 걸면 390px 에서도 줄이 다시 나뉘어 심의안과 달라지므로,
   심의 기준 폭은 손대지 않고 그보다 좁은 폭에서만 적용한다. */
@media (max-width: 389.98px) {
  .block-body,
  .content-text,
  /* 오늘의 투자 루틴 설명. 줄바꿈을 넣어 뒀지만 아주 좁은 폭에서는 그 줄이 또 접힌다. */
  .ti-desc {
    text-wrap: pretty;
  }
}

.event-title {
  margin-top: 0;
  font-size: clamp(39px, 10.5vw, 50px);
}

.event-title strong {
  color: var(--samsung-blue);
}

.event-intro {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.inline-cta,
.floating-cta {
  display: flex;
  align-items: center;
  font-weight: 800;
}

.inline-cta {
  position: relative;
  z-index: 2;
  justify-content: space-between;
  width: min(100%, 340px);
  min-height: 56px;
  margin: 33px auto 0;
  padding: 9px 10px 9px 18px;
  gap: 14px;
  color: #0b286f;
  background: linear-gradient(135deg, #f3f8ff 0%, #e8f3ff 100%);
  border: 1px solid #bfd8f7;
  border-radius: 18px 18px 18px 7px;
  box-shadow: 0 9px 22px rgba(20, 56, 119, 0.08);
  font-size: 16px;
  text-align: left;
  touch-action: manipulation;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.inline-cta span {
  flex: 1 1 auto;
  line-height: 1.25;
}

.floating-cta svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.inline-cta svg {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 9px;
  color: var(--white);
  background: var(--samsung-blue);
  border-radius: 50%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.event-align-left .inline-cta {
  margin-right: auto;
  margin-left: 0;
}

.event-cta-outline .inline-cta {
  background: var(--white);
  border-color: #a9c9ef;
  box-shadow: 0 8px 20px rgba(20, 56, 119, 0.06);
}

.event-cta-solid .inline-cta {
  color: var(--white);
  background: linear-gradient(120deg, #203fb7, #1769e0);
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(20, 40, 160, 0.2);
}

.event-cta-solid .inline-cta svg {
  color: var(--samsung-blue);
  background: var(--white);
}

@media (hover: hover) {
  .inline-cta:hover {
    background: linear-gradient(135deg, #f7fbff 0%, #deedff 100%);
    border-color: #8fbae9;
    box-shadow: 0 13px 28px rgba(20, 56, 119, 0.13);
    transform: translateY(-2px);
  }

  .event-cta-outline .inline-cta:hover {
    background: #f7fbff;
  }

  .event-cta-solid .inline-cta:hover {
    background: linear-gradient(120deg, #1835ad, #0f5fd5);
    border-color: transparent;
  }
}

.inline-cta:active {
  transform: translateY(0);
}

.benefit-section {
  padding: 82px 24px 78px;
  scroll-margin-top: 68px;
  background: var(--white);
}

.benefit-heading {
  margin: 16px 0 0;
}

.benefit-list {
  display: grid;
  margin-top: 34px;
  gap: 12px;
}

.benefit-card {
  display: grid;
  min-height: 110px;
  padding: 22px 19px;
  align-items: center;
  background: #f6f9fd;
  border: 1px solid #e5ebf3;
  border-radius: 20px;
  gap: 14px;
  grid-template-columns: 42px 1fr;
}

.benefit-check {
  display: grid;
  width: 42px;
  height: 42px;
  color: var(--white);
  background: var(--link-blue);
  border-radius: 14px;
  place-items: center;
  box-shadow: 0 8px 18px rgba(23, 105, 224, 0.18);
}

.benefit-check svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.benefit-label {
  display: block;
  margin-bottom: 6px;
  color: #7a89a0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.benefit-copy {
  font-size: 15px;
  line-height: 1.48;
  letter-spacing: -0.025em;
}

.benefit-ticket {
  position: relative;
  display: grid;
  min-height: 155px;
  margin-top: 22px;
  padding: 27px 28px;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(135deg, #0a185e, #1635aa 58%, #0874cb);
  border-radius: 24px;
  grid-template-columns: 1fr auto;
}

.benefit-ticket::before,
.benefit-ticket::after {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  background: var(--white);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.benefit-ticket::before { left: -17px; }
.benefit-ticket::after { right: -17px; }

.benefit-ticket span {
  align-self: start;
  color: #b5d7ff;
  font-size: 12px;
  font-weight: 700;
}

.benefit-ticket strong {
  align-self: center;
  font-size: 44px;
  letter-spacing: -0.055em;
  grid-column: 1;
}

.benefit-ticket em {
  align-self: end;
  color: #83caff;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.notice-section {
  padding: 24px 24px 68px;
  background: #f3f6fa;
}

.notice-details {
  border-top: 1px solid #dce3ed;
  border-bottom: 1px solid #dce3ed;
}

.notice-details summary {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

.notice-details summary::-webkit-details-marker {
  display: none;
}

.notice-details summary i {
  position: relative;
  width: 16px;
  height: 16px;
}

.notice-details summary i::before,
.notice-details summary i::after {
  position: absolute;
  top: 7px;
  left: 2px;
  width: 12px;
  height: 1px;
  background: var(--graphite);
  content: "";
}

.notice-details summary i::after {
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.notice-details[open] summary i::after {
  transform: rotate(0);
}

.notice-body {
  padding: 0 0 22px;
  color: var(--muted);
}

.notice-copy {
  font-size: 12px;
  line-height: 1.75;
}

.anchor-target {
  display: block;
  scroll-margin-top: 80px;
}

.floating-cta-wrap {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 80;
  width: min(100%, var(--shell-width));
  padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.93) 25%, #fff 58%);
  transform: translateX(-50%);
}

.floating-cta {
  justify-content: center;
  height: 64px;
  border-radius: 18px;
  gap: 9px;
  color: var(--white);
  background: linear-gradient(120deg, var(--samsung-blue), var(--link-blue));
  box-shadow: 0 14px 30px rgba(20, 40, 160, 0.24);
  font-size: 18px;
  /* 이 버튼만 눌러도 아무 반응이 없었다. 인라인 CTA 와 같은 결로 맞춘다. */
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* 마우스가 있는 환경에서만 뜬다. 터치 기기에서 hover 가 눌린 채 남는 것을 막는다. */
@media (hover: hover) {
  .floating-cta:hover {
    box-shadow: 0 18px 36px rgba(20, 40, 160, 0.3);
    filter: brightness(1.06);
    transform: translateY(-2px);
  }
}

.floating-cta:active {
  box-shadow: 0 8px 18px rgba(20, 40, 160, 0.22);
  filter: brightness(.96);
  transform: translateY(1px) scale(.985);
}

.floating-cta:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .85);
  outline-offset: -5px;
}

/* 화살표가 눌릴 때 살짝 앞으로 나간다. 이동한다는 느낌을 준다. */
.floating-cta svg {
  transition: transform .18s ease;
}

@media (hover: hover) {
  .floating-cta:hover svg { transform: translateX(2px); }
}

.floating-cta:active svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .floating-cta,
  .floating-cta svg {
    transition: none;
  }

  .floating-cta:hover,
  .floating-cta:active,
  .floating-cta:hover svg,
  .floating-cta:active svg {
    transform: none;
  }
}

.site-footer {
  padding: 34px 28px 38px;
  color: #8490a4;
  background: #e9eef5;
  font-size: 11px;
}

.event-page .site-footer {
  padding-bottom: 126px;
  /* 수정본 하단 영역은 흰색이다(기존 #e9eef5). */
  background: #ffffff;
}

.footer-brand {
  color: #354157;
  font-size: 13px;
}

.brand-mark--footer {
  width: 27px;
  height: 19px;
}

.brand-mark--footer span {
  font-size: 11px;
}

.site-footer p {
  margin: 13px 0 0;
}

@media (max-width: 360px) {
  .home-hero { padding-right: 22px; padding-left: 22px; }
  .hero-media { height: 320px; }
  .event-object { height: 310px; }
  .event-hero { min-height: 805px; }
  .why-section,
  .ranking-section,
  .blocks-section,
  .benefit-section { padding-right: 20px; padding-left: 20px; }
}

@media (min-width: 481px) {
  .site-shell {
    border-right: 1px solid rgba(157, 171, 195, 0.24);
    border-left: 1px solid rgba(157, 171, 195, 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Builder-driven design variants */
/* 삼성긴고딕(= Samsung Gothic Condensed). 광고주 웹 사용 허가 확인 후 반영.
   원본 OTF 1.9MB 를 한글 전체 + 라틴 범위로 서브셋해 woff2 로 변환한 파일이다.
   CSS 의 굵기 사용이 400(본문)과 800(강조)으로 갈려 있어 두 웨이트만 싣는다.
   600·700 은 800 로, 500 은 400 으로 브라우저가 근사한다.
   swap 이므로 폰트 도착 전에는 시스템 고딕으로 즉시 렌더된다. */
@font-face {
  font-family: "SamsungGothicCondensed";
  src: url("/assets/fonts/SamsungGothicCondensed-400.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: "SamsungGothicCondensed";
  src: url("/assets/fonts/SamsungGothicCondensed-800.woff2") format("woff2");
  font-weight: 600 900;
  font-display: swap;
}

.rendered-site {
  --page-gutter: 24px;
  /* renderTheme 이 --font-heading / --font-body 를 심는다. 아래는 안전망. */
  font-family: var(--font-body, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif);
  /* --brand-surface / --brand-text 는 renderTheme 이 .rendered-site 에만 심는다.
     :root 에서 color-mix 하면 관리자 테마를 무시하므로 파생 토큰은 반드시 여기서 선언한다. */
  --gold-soft: color-mix(in srgb, var(--gold) 42%, #ffffff);
  --tint-surface: color-mix(in srgb, var(--brand-text, #111827) 4%, var(--brand-surface, #ffffff));
  min-height: 100svh;
  color: var(--brand-text, var(--graphite));
  background: var(--brand-surface, var(--white));
}

.rendered-site.page-pad-sm { --page-gutter: 18px; }
.rendered-site.page-pad-md { --page-gutter: 24px; }
.rendered-site.page-pad-lg { --page-gutter: 32px; }

.rendered-site .home-hero,
.rendered-site .why-section,
.rendered-site .ranking-section,
.rendered-site .blocks-section,
.rendered-site .event-hero,
.rendered-site .benefit-section,
.rendered-site .notice-section {
  padding-right: var(--page-gutter);
  padding-left: var(--page-gutter);
}

.rendered-site .home-hero {
  display: flex;
  background: var(--home-hero-bg, var(--brand-surface));
  flex-direction: column;
}

.rendered-site .topbar {
  color: var(--brand-text);
  background: color-mix(in srgb, var(--brand-surface) 92%, transparent);
}

.rendered-site .brand-mark,
.rendered-site .drawer-home-icon {
  background: var(--samsung-blue);
}

.brand-mark--image {
  overflow: hidden;
  background: transparent !important;
  border-radius: 7px;
  transform: none;
}

.brand-mark--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drawer-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-mark--drawer {
  width: 30px;
  height: 22px;
}

.rendered-site.radius-square .why-card,
.rendered-site.radius-square .ranking-panel,
.rendered-site.radius-square .benefit-card,
.rendered-site.radius-square .benefit-ticket,
.rendered-site.radius-square .inline-cta,
.rendered-site.radius-square .floating-cta,
.rendered-site.radius-square .section-media,
.rendered-site.radius-square .media-placeholder,
.rendered-site.radius-square .media-slot--hero-video,
.rendered-site.radius-square .block-badge,
.rendered-site.radius-square .block-accordion-item,
.rendered-site.radius-square .block-compare {
  border-radius: 2px;
}

.rendered-site.radius-soft .why-card,
.rendered-site.radius-soft .ranking-panel,
.rendered-site.radius-soft .benefit-card,
.rendered-site.radius-soft .section-media,
.rendered-site.radius-soft .media-slot--hero-video,
.rendered-site.radius-soft .block-badge,
.rendered-site.radius-soft .block-accordion-item,
.rendered-site.radius-soft .block-compare {
  border-radius: 20px;
}

.rendered-site.radius-round .why-card,
.rendered-site.radius-round .ranking-panel,
.rendered-site.radius-round .benefit-card,
.rendered-site.radius-round .benefit-ticket,
.rendered-site.radius-round .section-media,
.rendered-site.radius-round .media-placeholder,
.rendered-site.radius-round .media-slot--hero-video,
.rendered-site.radius-round .block-badge,
.rendered-site.radius-round .block-accordion-item,
.rendered-site.radius-round .block-compare {
  border-radius: 32px;
}

.type-scale-compact .text-xl { font-size: clamp(36px, 9.8vw, 47px); }
.type-scale-compact .text-lg { font-size: clamp(26px, 7.2vw, 33px); }
.type-scale-compact .text-md { font-size: 16px; }
.type-scale-large .text-xl { font-size: clamp(46px, 12.6vw, 59px); }
.type-scale-large .text-lg { font-size: clamp(33px, 9vw, 42px); }
.type-scale-large .text-md { font-size: 20px; }

.content-width-narrow .hero-copy,
.content-width-narrow .section-heading-block,
.content-width-narrow .why-list,
.content-width-narrow .ranking-panel,
.content-width-narrow .block-body,
.content-width-narrow .block-badge-list,
.content-width-narrow .block-step-list,
.content-width-narrow .block-accordion,
.content-width-narrow .event-copy,
.content-width-narrow .benefit-list,
.content-width-narrow .benefit-ticket {
  width: 100%;
  max-width: 350px;
  margin-right: auto;
  margin-left: auto;
}

.content-width-wide .hero-copy,
.content-width-wide .section-heading-block,
.content-width-wide .why-list,
.content-width-wide .ranking-panel,
.content-width-wide .block-body,
.content-width-wide .block-badge-list,
.content-width-wide .block-step-list,
.content-width-wide .block-accordion,
.content-width-wide .event-copy,
.content-width-wide .benefit-list,
.content-width-wide .benefit-ticket {
  max-width: none;
}

.home-hero.space-sm { min-height: 650px; padding-top: 102px; padding-bottom: 56px; }
.home-hero.space-md { min-height: 720px; padding-top: 116px; padding-bottom: 66px; }
.home-hero.space-lg { min-height: 780px; padding-top: 126px; padding-bottom: 76px; }
.home-hero.space-xl { min-height: 860px; padding-top: 148px; padding-bottom: 96px; }
.why-section.space-sm,
.blocks-section.space-sm,
.ranking-section.space-sm { padding-top: 52px; padding-bottom: 56px; }
.why-section.space-md,
.blocks-section.space-md,
.ranking-section.space-md { padding-top: 68px; padding-bottom: 72px; }
.why-section.space-lg,
.blocks-section.space-lg,
.ranking-section.space-lg { padding-top: 84px; padding-bottom: 88px; }
.why-section.space-xl,
.blocks-section.space-xl,
.ranking-section.space-xl { padding-top: 112px; padding-bottom: 118px; }

/* 관리자는 위·아래 여백을 따로 고를 수 있다. inherit는 기존 space-* 값을 유지한다. */
.why-section.space-before-none,
.blocks-section.space-before-none,
.ranking-section.space-before-none { padding-top: 0; }
.why-section.space-before-xs,
.blocks-section.space-before-xs,
.ranking-section.space-before-xs { padding-top: 8px; }
.why-section.space-before-sm,
.blocks-section.space-before-sm,
.ranking-section.space-before-sm { padding-top: 16px; }
.why-section.space-before-md,
.blocks-section.space-before-md,
.ranking-section.space-before-md { padding-top: 24px; }
.why-section.space-before-lg,
.blocks-section.space-before-lg,
.ranking-section.space-before-lg { padding-top: 40px; }
.why-section.space-before-xl,
.blocks-section.space-before-xl,
.ranking-section.space-before-xl { padding-top: 56px; }

.why-section.space-after-none,
.blocks-section.space-after-none,
.ranking-section.space-after-none { padding-bottom: 0; }
.why-section.space-after-xs,
.blocks-section.space-after-xs,
.ranking-section.space-after-xs { padding-bottom: 8px; }
.why-section.space-after-sm,
.blocks-section.space-after-sm,
.ranking-section.space-after-sm { padding-bottom: 16px; }
.why-section.space-after-md,
.blocks-section.space-after-md,
.ranking-section.space-after-md { padding-bottom: 24px; }
.why-section.space-after-lg,
.blocks-section.space-after-lg,
.ranking-section.space-after-lg { padding-bottom: 40px; }
.why-section.space-after-xl,
.blocks-section.space-after-xl,
.ranking-section.space-after-xl { padding-bottom: 56px; }

.event-hero.space-sm { padding-top: 86px; padding-bottom: 48px; }
.event-hero.space-md { padding-top: 94px; padding-bottom: 62px; }
.event-hero.space-lg { padding-top: 104px; padding-bottom: 78px; }
.event-hero.space-xl { padding-top: 128px; padding-bottom: 104px; }

.align-center .hero-copy,
.align-center .section-heading-block,
.align-center .ranking-caption,
.align-center .block-body,
.align-center .block-footnote {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.align-center .section-kicker {
  justify-content: center;
}

.media-slot--hero-video {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  margin: 30px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0d1422;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 48px rgba(1, 8, 38, .28);
}

.hero-media-top .hero-media {
  margin-top: 0;
  margin-bottom: 30px;
  order: -1;
}

.hero-media-bottom .hero-media {
  order: 2;
}

.media-height-sm .media-slot--hero-video { aspect-ratio: 2 / 1; }
.media-height-md .media-slot--hero-video { aspect-ratio: 16 / 9; }
.media-height-lg .media-slot--hero-video { aspect-ratio: 4 / 3; }
/* 보유 영상이 전부 정방형(1:1) 이라 잘림 없이 담기는 옵션. 4:3 슬롯에
   1:1 영상을 cover 로 넣으면 상하 25% 가 잘려나간다. */
.media-height-square .media-slot--hero-video { aspect-ratio: 1 / 1; }

.media-slot--hero-video .slot-media {
  filter: none;
}

.media-placeholder--video {
  min-height: 0;
  color: #98a6bc;
  background: linear-gradient(145deg, #101827, #080d17);
  border-color: rgba(255,255,255,.2);
  border-radius: inherit;
}

.media-placeholder--video strong {
  color: #f7f9fc;
}

.slot-media.fit-cover { object-fit: cover; }
.slot-media.fit-contain { object-fit: contain; }
.slot-media.object-x-left { object-position: left center; }
.slot-media.object-x-center { object-position: center center; }
.slot-media.object-x-right { object-position: right center; }
.slot-media.object-y-top.object-x-left { object-position: left top; }
.slot-media.object-y-top.object-x-center { object-position: center top; }
.slot-media.object-y-top.object-x-right { object-position: right top; }
.slot-media.object-y-bottom.object-x-left { object-position: left bottom; }
.slot-media.object-y-bottom.object-x-center { object-position: center bottom; }
.slot-media.object-y-bottom.object-x-right { object-position: right bottom; }

.section-media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 230px;
  margin: 0 0 34px;
  overflow: hidden;
  background: #e8edf5;
  box-shadow: 0 18px 40px rgba(15, 32, 72, .1);
}

.section-media .slot-media {
  width: 100%;
  height: 100%;
}

.section-media + .ranking-caption,
.why-list + .section-media,
.ranking-panel + .section-media {
  margin-top: 34px;
  margin-bottom: 0;
}

.why-style-dividers {
  background: var(--brand-surface);
}

.why-style-dividers .why-list {
  gap: 0;
}

.why-style-dividers .why-card,
.why-style-dividers .why-card:nth-child(2) {
  min-height: 138px;
  color: var(--brand-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.why-style-dividers .why-card:nth-child(2) .why-number { color: var(--link-blue); }
.why-style-dividers .why-card:nth-child(2) .why-icon { background: #edf5ff; }
.why-style-dividers .why-card:nth-child(2) .why-icon i { background: var(--link-blue); }
.why-style-minimal .why-number,
.why-style-minimal .why-icon { display: none; }
.why-style-minimal .why-card,
.why-style-minimal .why-card:nth-child(2) {
  min-height: auto;
  padding: 22px 0;
  color: var(--brand-text);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.why-style-minimal .why-copy { margin-top: 0; }

.ranking-style-plain .ranking-panel {
  padding: 0;
  background: transparent;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.ranking-style-cards .ranking-panel {
  padding: 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ranking-style-cards .ranking-list {
  display: grid;
  gap: 10px;
}

.ranking-style-cards .ranking-list li {
  padding: 0 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
}

.event-hero {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.event-object-gallery {
  position: relative;
  z-index: 2;
  width: 100%;
  order: 1;
}

.event-object-gallery .event-object {
  position: relative;
  width: 100%;
  height: 350px;
  margin: 0;
}

.event-object-gallery .slot-media {
  width: 100%;
  height: 100%;
}

.event-copy { order: 2; }
.event-hero .inline-cta { order: 3; }
.event-order-text-first .event-copy { margin-top: 8px; order: 1; }
.event-order-text-first .event-object-gallery { margin-top: 30px; order: 2; }
.event-order-text-first .inline-cta { order: 3; }
.event-align-left .event-copy { text-align: left; }

.object-layout-carousel {
  display: flex;
  overflow-x: auto;
  gap: 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.object-layout-carousel::-webkit-scrollbar { display: none; }
.object-layout-carousel .event-object { min-width: 100%; scroll-snap-align: center; }

.object-layout-layered {
  height: 370px;
}

.object-layout-layered .event-object {
  position: absolute;
  top: 0;
  left: 50%;
  width: 88%;
  transform: translateX(-50%);
}

.object-layout-layered .event-object:nth-child(2) { top: 22px; left: 43%; transform: translateX(-50%) rotate(-6deg) scale(.84); }
.object-layout-layered .event-object:nth-child(3) { top: 30px; left: 58%; transform: translateX(-50%) rotate(7deg) scale(.75); }
.object-layout-layered .event-object:first-child { z-index: 3; }

.object-layout-stacked {
  display: grid;
  gap: 16px;
}

.object-layout-stacked .event-object { height: 270px; }
.object-size-sm { max-width: 250px; margin-right: auto !important; margin-left: auto !important; }
.object-size-md { max-width: 330px; margin-right: auto !important; margin-left: auto !important; }
.object-size-lg { max-width: none; }

.object-sequence {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  display: none;
  padding: 6px 8px;
  color: var(--samsung-blue);
  background: rgba(255,255,255,.88);
  border-radius: 7px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
}

.event-object-gallery:has(.event-object:nth-child(2)) .object-sequence { display: block; }

.event-preset-premium {
  background: linear-gradient(180deg, #fbfcff, #f2f5fa 60%, #fff);
}

.event-preset-premium .event-aura { opacity: .35; }
.event-preset-editorial { background: #fff; }
.event-preset-editorial .event-aura { display: none; }
.event-preset-editorial .event-title strong {
  color: var(--brand-text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.benefit-style-list .benefit-list { gap: 0; }
.benefit-style-list .benefit-card {
  min-height: 92px;
  padding-right: 0;
  padding-left: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.benefit-style-numbers .benefit-check {
  color: var(--samsung-blue);
  background: #eaf2ff;
  box-shadow: none;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 360px) {
  .rendered-site.page-pad-lg { --page-gutter: 24px; }
  .event-object-gallery .event-object { height: 310px; }
  .object-layout-layered { height: 330px; }
}

/* Explicit content controls: nothing decorative appears unless an editor enables it. */
.rendered-site .home-hero::before,
.rendered-site .home-hero::after {
  display: none;
}

.rendered-site .home-hero.hero-decoration-rings::before,
.rendered-site .home-hero.hero-decoration-rings::after {
  display: block;
}

.home-hero.hero-background-transparent { background: transparent; }
.home-hero.hero-background-solid,
.home-hero.hero-background-image { background: var(--home-hero-bg, #fff); }
.home-hero.hero-background-gradient {
  background: linear-gradient(
    178deg,
    var(--home-hero-bg, #fff),
    var(--home-hero-bg-mid, var(--home-hero-bg, #fff)) 58%,
    var(--home-hero-bg-end, var(--home-hero-bg, #fff))
  );
}

.hero-background-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-background-media::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero-background-media .slot-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay-light .hero-background-media::after { background: rgba(255, 255, 255, .48); }
.hero-overlay-dark .hero-background-media::after { background: rgba(5, 13, 34, .48); }

.home-hero.hero-tone-dark { color: var(--brand-text); }
.home-hero.hero-tone-dark .hero-heading { color: var(--brand-text); text-shadow: none; }
.home-hero.hero-tone-dark .hero-sub { color: color-mix(in srgb, var(--brand-text) 72%, transparent); }
.home-hero.hero-tone-dark .section-kicker,
.home-hero.hero-tone-dark .scroll-cue { color: color-mix(in srgb, var(--brand-text) 62%, transparent); }
.home-hero.hero-tone-dark .scroll-cue i { background: color-mix(in srgb, var(--brand-text) 18%, transparent); }
.home-hero.hero-tone-dark .scroll-cue i::after { background: var(--brand-text); }

.home-hero.hero-tone-light { color: #fff; }
.home-hero.hero-tone-light .hero-heading { color: #fff; }
.home-hero.hero-tone-light .hero-sub { color: rgba(255, 255, 255, .78); }

.brand-mark.brand-size-sm:not(.brand-mark--image) { width: 28px; height: 20px; }
.brand-mark.brand-size-md:not(.brand-mark--image) { width: 34px; height: 24px; }
.brand-mark.brand-size-lg:not(.brand-mark--image) { width: 44px; height: 30px; }
.brand-mark--image.brand-size-sm { width: 68px; height: 22px; }
.brand-mark--image.brand-size-md { width: 92px; height: 28px; }
.brand-mark--image.brand-size-lg { width: 120px; height: 36px; }

.why-style-cards .why-card:nth-child(2),
.why-card.item-surface-box,
.why-card.item-surface-box:nth-child(2) {
  min-height: 184px;
  color: var(--brand-text);
  background: var(--brand-surface);
  border: 1px solid rgba(216, 224, 235, .8);
  border-radius: 24px;
  box-shadow: 0 13px 36px rgba(24, 39, 76, .06);
}

.why-card.item-surface-line,
.why-card.item-surface-line:nth-child(2) {
  min-height: auto;
  padding: 24px 0;
  color: var(--brand-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.why-card.item-surface-none,
.why-card.item-surface-none:nth-child(2) {
  min-height: auto;
  padding: 18px 0;
  color: var(--brand-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.why-card:nth-child(2) .why-number { color: var(--link-blue); }
.why-card:nth-child(2) .why-icon { background: #edf5ff; }
.why-card:nth-child(2) .why-icon i { background: var(--link-blue); }
.why-style-minimal .why-card .why-icon { display: flex; }

.why-visual-image {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 64px;
  height: 64px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
}

.why-visual-image .slot-media { width: 100%; height: 100%; }
.why-card:has(.why-icon, .why-visual-image) .why-copy { margin-top: 52px; }
.why-card:not(:has(.why-number, .why-icon, .why-visual-image)) .why-copy { margin-top: 0; }
.why-card:has(.why-number):not(:has(.why-icon, .why-visual-image)) .why-copy { margin-top: 34px; }
.ranking-list li:not(:has(.ranking-trend)) { grid-template-columns: 24px 1fr; }

/* Event proposal v1: compact welcome hero, disclosure accordion, responsive app CTA */
.event-page .event-main {
  background: #fff;
}

.event-overview {
  position: relative;
  display: flex;
  height: clamp(420px, 52svh, 450px);
  min-height: 420px;
  padding: 78px 0 18px;
  overflow: hidden;
  flex-direction: column;
  background:
    radial-gradient(circle at 90% 18%, rgba(0, 174, 239, .1), transparent 29%),
    linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.event-overview-stage {
  position: relative;
  min-height: 174px;
  padding: 18px 22px 0;
  flex: 1;
}

.event-overview-stage::before {
  position: absolute;
  right: -45px;
  bottom: -30px;
  width: 205px;
  height: 205px;
  background: rgba(229, 244, 255, .72);
  border-radius: 50%;
  content: "";
}

.event-overview-heading {
  position: relative;
  z-index: 2;
  width: 64%;
}

.event-overview-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--link-blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.event-overview-title {
  margin: 0;
  color: #11151c;
  font-size: clamp(28px, 7.7vw, 34px);
  line-height: 1.1;
  letter-spacing: -.06em;
}

.event-overview-mascot {
  position: absolute;
  right: 10px;
  bottom: -3px;
  z-index: 1;
  width: 145px;
  height: 170px;
  margin: 0;
}

.event-overview-mascot .slot-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.event-overview-grid {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 130px;
  margin-top: auto;
  padding: 15px 22px 14px;
  overflow-x: auto;
  background: rgba(255, 255, 255, .88);
  border-top: 1px solid #e4eaf2;
  border-bottom: 1px solid #edf1f6;
  gap: 0;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.event-overview-grid::-webkit-scrollbar {
  display: none;
}

.event-overview-feature {
  display: grid;
  min-width: 150px;
  padding: 2px 16px 0 0;
  align-content: center;
  align-items: start;
  text-align: left;
  gap: 0 10px;
  grid-template-columns: 36px 1fr;
  scroll-snap-align: start;
}

.event-overview-feature + .event-overview-feature {
  padding-left: 16px;
  border-left: 1px solid #e7ebf1;
}

.event-overview-icon {
  display: grid;
  width: 36px;
  height: 36px;
  color: #fff;
  background: linear-gradient(145deg, #00b8f0, #1769e0);
  border-radius: 12px;
  place-items: center;
  grid-row: 1 / span 2;
}

.event-overview-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.event-overview-feature h2 {
  margin: 0;
  color: #15181e;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.event-overview-feature p {
  margin: 5px 0 0;
  color: #5e6877;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: -.04em;
}

.event-campaign-list {
  background: #fff;
}

.event-category-head {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 76px 24px 10px;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 86% 15%, rgba(101, 197, 255, .42), transparent 34%),
    linear-gradient(145deg, #0b1d69 0%, #1428a0 58%, #1769e0 100%);
  column-gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  row-gap: 3px;
}

.event-category-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.event-category-head h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(30px, 8.5vw, 38px);
  line-height: 1;
  letter-spacing: -.055em;
}

.event-category-description {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(9.5px, 2.7vw, 11px);
  line-height: 1.35;
  letter-spacing: -.045em;
  grid-column: 1 / -1;
  text-overflow: clip;
  white-space: nowrap;
}

.event-category-object {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 68px;
  margin: 0 0 0 auto;
  align-self: center;
  grid-column: 2;
  grid-row: 1;
  pointer-events: none;
}

.event-category-object--sm { width: 64px; height: 60px; }
.event-category-object--lg { width: 88px; height: 76px; }
.event-category-object--empty {
  width: 0;
  height: 0;
  margin: 0;
  visibility: hidden;
}

.event-category-object .slot-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(3, 14, 66, .28));
}

.event-empty {
  padding: 80px 24px;
  text-align: center;
}

.event-empty strong { display: block; color: #17213a; font-size: 20px; }
.event-empty p { margin: 10px 0 0; color: #708097; font-size: 13px; line-height: 1.6; }

.event-page .event-hero {
  padding-top: 92px;
  padding-bottom: 38px;
  /* 이벤트 페이지 배경 흰색 고정(미래에셋식). 오브제 흰 배경 MP4가 이음새 없이 붙게. */
  background: #fff;
}

.event-page .event-campaign {
  padding-top: 52px;
  /* 광고에서 #skip-<이벤트id> 로 바로 들어오는 링크가 상단바(68px) 뒤로 가리지
     않도록 여유를 둔다. 66px 이면 카드 윗변이 상단바에 2px 물린다. */
  scroll-margin-top: 78px;
}

.event-page .event-campaign + .event-campaign {
  border-top: 10px solid #f3f6fa;
}

.event-group-marker {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(100%, 340px);
  margin: 0 auto 14px;
  align-items: center;
  color: var(--samsung-blue);
  gap: 10px;
  order: 0;
}

.event-group-marker span {
  display: inline-flex;
  min-height: 28px;
  padding: 0 12px;
  align-items: center;
  background: #edf4ff;
  border: 1px solid #cfe0fa;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.event-group-marker i {
  display: none;
  height: 1px;
  background: #cbd8ea;
  flex: 1;
}

.event-group-marker.is-group-start {
  margin-top: -18px;
  margin-bottom: 22px;
}

.event-group-marker.is-group-start span {
  min-height: 0;
  padding: 0;
  color: #111827;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.045em;
}

.event-group-marker.is-group-start i {
  display: block;
}

.event-align-left .event-group-marker {
  margin-right: auto;
  margin-left: 0;
}

/* 2026-08 디자인팀 시안(Figma 12417:2): 이벤트 카드는 전부 흰 카드로 통일한다.
   이벤트별 그라디언트 배경은 카드 모델과 충돌하므로 흰색으로 고정. */
.event-page #skip-domestic-customer-appreciation,
.event-page .event-category-domestic-stock #skip-commission {
  background: #fff;
}

.event-page .event-aura {
  /* 이벤트페이지 흰색 배경 클린룩: 오브제 뒤 장식 링 제거. */
  display: none;
}

.event-page .event-object-gallery {
  width: min(72%, 280px);
  margin-right: auto;
  margin-left: auto;
}

.event-page .event-object-gallery .event-object,
.event-page .object-layout-stacked .event-object {
  height: 170px;
}

/* Wide reward cards imported from the 2026 pension/ISA planning slides. */
.event-page #skip-pension-contribution-2026 .event-object-gallery .event-object,
.event-page #skip-pension-contribution-restart-2026 .event-object-gallery .event-object,
.event-page #skip-pension-contribution-transfer-2026 .event-object-gallery .event-object,
.event-page #skip-irp-reward-2026 .event-object-gallery .event-object,
.event-page #skip-irp-restart-2026 .event-object-gallery .event-object,
.event-page #skip-irp-transfer-retirement-2026 .event-object-gallery .event-object,
.event-page #skip-isa-reward-2026 .event-object-gallery .event-object,
.event-page #skip-isa-restart-2026 .event-object-gallery .event-object,
.event-page #skip-isa-transfer-2026 .event-object-gallery .event-object,
.event-page #skip-isa-reopen-2026 .event-object-gallery .event-object,
.event-page #skip-isa-pension-conversion-2026 .event-object-gallery .event-object {
  /* 시안 규격(오브제 300x180)으로 통일. object-fit: contain 이라 가로형 이미지도 안전하다. */
  height: clamp(130px, 37.5vw, 180px);
}

.event-page .object-layout-layered {
  height: 205px;
}

.event-page .object-layout-layered .event-object {
  width: 100%;
}

.event-page .object-size-sm {
  max-width: 280px;
}

.event-page .media-slot--event .slot-media {
  /* 그림자 제거: 흰 배경 MP4가 네모 박스로 보이지 않게. */
}

.event-page .event-copy {
  margin-top: 6px;
}

.event-page .event-title {
  max-width: 340px;
  margin: 17px auto 0;
  font-size: clamp(32px, 8.8vw, 39px);
  line-height: 1.08;
  letter-spacing: -.055em;
}

.event-page .event-subtitle {
  max-width: 330px;
  margin: 16px auto 0;
  color: #5f6f87;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.025em;
}

/* 수수료 이벤트 서브타이틀 특례는 제거한다. 시안은 모든 카드가 같은 텍스트 규격을 쓴다. */

.event-page .inline-cta {
  margin-top: 28px;
}

.event-detail-accordion {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce5f1;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(27, 48, 91, .045);
  order: 4;
  text-align: left;
}

.event-detail-accordion summary {
  display: flex;
  min-height: 56px;
  padding: 0 18px;
  align-items: center;
  justify-content: space-between;
  color: #24324a;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

.event-detail-accordion summary::-webkit-details-marker {
  display: none;
}

.event-detail-accordion summary i {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid #cbd7e8;
  border-radius: 50%;
}

.event-detail-accordion summary i::before,
.event-detail-accordion summary i::after {
  position: absolute;
  top: 8px;
  left: 4px;
  width: 8px;
  height: 1px;
  background: var(--samsung-blue);
  content: "";
}

.event-detail-accordion summary i::after {
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.event-campaign > .event-detail-accordion {
  width: min(100%, 340px);
  margin-right: auto;
  margin-left: auto;
}

.event-align-left > .event-detail-accordion {
  margin-right: auto;
  margin-left: 0;
}

.event-campaign > .event-detail-accordion > summary {
  min-height: 54px;
  padding: 9px 10px 9px 18px;
  gap: 14px;
  font-size: 16px;
  line-height: 1.25;
  touch-action: manipulation;
}

.event-campaign > .event-detail-accordion > summary i {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: #f3f8ff;
  border-color: #bfd8f7;
}

.event-campaign > .event-detail-accordion > summary i::before,
.event-campaign > .event-detail-accordion > summary i::after {
  top: 16px;
  left: 10px;
  width: 14px;
  height: 2px;
}

.event-detail-accordion[open] summary i::after {
  transform: rotate(0);
}

.event-detail-content {
  padding: 18px 18px 20px;
  border-top: 1px solid #edf1f6;
}

.event-detail-group + .event-detail-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf1f6;
}

.event-detail-heading {
  margin: 0 0 9px;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.event-detail-content .event-detail-body,
.event-detail-content .event-detail-body .text-run,
.event-detail-content .event-detail-body strong {
  color: #2e3b50;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.025em;
}

.event-benefit-table-wrap {
  margin-top: 11px;
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #d9e5f3;
  border-radius: 12px;
}

.event-detail-heading + .event-benefit-table-wrap,
.event-detail-copy + .event-benefit-table-wrap {
  margin-top: 9px;
}

.event-benefit-table {
  width: 100%;
  border-collapse: collapse;
  color: #26364f;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  line-height: 1.35;
  table-layout: fixed;
}

.event-benefit-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.event-benefit-table-condition { width: 68%; }
.event-benefit-table-reward { width: 32%; }

/* 3열(조건 두 칸 + 혜택) 표. 소재 원본처럼 조건 칸을 좁게 나누고 혜택을 오른쪽에 세운다.
   조건 문구는 짧아 여백이 남으므로 폭과 좌우 패딩을 줄여 그만큼 혜택 칸으로 넘긴다. */
.event-benefit-table--split .event-benefit-table-condition { width: 29%; }
.event-benefit-table--split .event-benefit-table-reward { width: 42%; }

.event-benefit-table--split th,
.event-benefit-table--split td { padding: 9px 5px; }

.event-benefit-table--split thead tr + tr th { border-top: 1px solid rgba(255, 255, 255, .35); }
.event-benefit-table--split .event-benefit-table-group { letter-spacing: -.02em; }

/* 두 행에 걸친 혜택 머리칸. 넓어진 폭에 맞춰 글자도 한 급 올린다. */
.event-benefit-table--split thead th[rowspan] {
  padding: 9px 8px;
  font-size: 11.5px;
  text-align: center;
  vertical-align: middle;
}

/* 조건 칸은 두 칸 모두 같은 톤·가운데 정렬(원본과 동일)로 두고, 강조는 혜택 칸에만 남긴다.
   아래 `.event-benefit-table tbody th`(좌측 정렬)가 같은 특이성으로 뒤에 오므로
   클래스를 두 번 걸어 특이성을 올린다. */
.event-benefit-table.event-benefit-table--split tbody th,
.event-benefit-table.event-benefit-table--split tbody .event-benefit-table-condition-cell {
  color: #31435d;
  background: #f8fbff;
  font-weight: 500;
  text-align: center;
}

.event-benefit-table--split tbody .event-benefit-table-condition-cell,
.event-benefit-table--split tbody td:last-child { border-left: 1px solid #dce6f2; }

.event-benefit-table--split tbody td:last-child {
  padding: 9px 8px;
  font-size: 12.5px;
}

.event-benefit-table th,
.event-benefit-table td {
  padding: 9px 9px;
  vertical-align: middle;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.event-benefit-table thead th {
  color: #fff;
  background: #6e83a3;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.event-benefit-table thead th + th {
  border-left: 1px solid rgba(255, 255, 255, .35);
}

.event-benefit-table tbody tr + tr > * {
  border-top: 1px solid #dce6f2;
}

.event-benefit-table tbody th {
  color: #31435d;
  background: #f8fbff;
  font-weight: 500;
  text-align: left;
}

.event-benefit-table tbody td {
  color: var(--samsung-blue);
  background: #edf5ff;
  font-weight: 800;
  text-align: center;
  white-space: normal;
}

@media (max-width: 360px) {
  .event-benefit-table {
    font-size: 10.5px;
  }

  .event-benefit-table th,
  .event-benefit-table td {
    padding: 8px 6px;
  }

  .event-benefit-table thead th {
    font-size: 10px;
  }
}

.event-detail-notes {
  display: grid;
  margin-top: 12px;
  gap: 3px;
}

.event-detail-content .event-detail-note,
.event-detail-content .event-detail-note .text-run,
.event-detail-content .event-detail-note strong {
  padding-left: 0;
  color: var(--link-blue);
  font-size: 11px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.55;
}

.event-page .notice-copy,
.event-page .notice-copy .text-run,
.event-page .notice-copy strong {
  font-size: 12px;
  font-family: inherit;
  font-weight: 400;
}

.event-page .notice-section {
  padding-top: 18px;
  background: #f6f8fb;
}

.notice-group + .notice-group {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #dfe5ed;
}

.notice-group h2 {
  margin: 0 0 8px;
  color: #1a2740;
  font-size: 13px;
  line-height: 1.45;
}

.notice-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 6px;
}

/* 예금자 비보호 마크. 원 소재에서 720폭 기준 약 100px 로 쓰이고 에셋은 2배라 절반으로 고정한다. */
.notice-image[src*="deposit-unprotected"] {
  width: 103px;
  border-radius: 0;
}

.notice-copy + .notice-copy { margin-top: 8px; }

.app-qr-dialog {
  width: min(360px, calc(100% - 40px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  color: #111827;
  background: #fff;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(7, 23, 95, .28);
}

.app-qr-dialog::backdrop {
  background: rgba(7, 15, 38, .58);
  backdrop-filter: blur(5px);
}

.app-qr-card {
  position: relative;
  padding: 31px 28px 28px;
  text-align: center;
}

.app-qr-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #59677b;
  background: #f2f5f9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  place-items: center;
}

.app-qr-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.app-qr-card h2 {
  margin: 0;
  color: var(--samsung-blue);
  font-family: "SamsungGothicCondensed", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
}

.app-qr-card h2 span {
  display: block;
}

.app-qr-description {
  max-width: 270px;
  margin: 10px auto 0;
  color: #68768b;
  font-size: 13px;
  line-height: 1.55;
}

/* 구버전 QR 마크업이 캐시에서 섞여 들어오는 경우까지 전역 차단한다. */
.app-qr-kicker,
.app-qr-help {
  display: none !important;
}

.app-qr-image {
  width: 190px;
  height: 190px;
  margin: 22px auto 0;
  border: 8px solid #fff;
  box-shadow: 0 0 0 1px #e2e8f0;
}

@media (max-width: 360px) {
  .event-page .event-object-gallery {
    width: min(70%, 240px);
  }

  .event-page .event-object-gallery .event-object,
  .event-page .object-layout-stacked .event-object {
    height: 150px;
  }

  /* 아래 .event-page .event-title / .event-subtitle 은 같은 특이성의 뒤 규칙에 밀려
     실제로는 적용되지 않는다(죽은 규칙). 크기 조정은 그 뒤 규칙에서 한다.
     id 가 붙은 #skip-commission 만 특이성이 높아 살아 있으므로 여기서 같이 줄인다. */
  .event-page .event-title {
    font-size: 30px;
  }

  .event-page #skip-commission .event-title {
    font-size: clamp(19px, 7.2vw, 25px);
  }

  .event-page .event-subtitle {
    font-size: 15px;
  }
}

/* ============================================================
   Home content blocks (sangsi.blocks[])
   ============================================================ */

.blocks-section {
  position: relative;
  background: var(--brand-surface, var(--white));
}

.blocks-surface-tint {
  background: var(--tint-surface);
}

/* 오브제 슬롯은 투명 배경 SVG 를 담으므로 섹션 이미지의 회색 판을 쓰지 않는다. */
.section-media--block {
  display: grid;
  height: 150px;
  margin-bottom: 22px;
  background: none;
  box-shadow: none;
  place-items: center;
}

/* .slot-media 의 height:100% 를 되돌린다. 오브제는 고유 비율을 유지해야 한다. */
.section-media--block .slot-media {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.block-body {
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--brand-text) 62%, transparent);
  font-size: 14px;
  line-height: 1.72;
  letter-spacing: -.02em;
}

.block-footnote {
  margin: 18px 0 0;
  color: color-mix(in srgb, var(--brand-text) 44%, transparent);
  font-size: 11px;
  line-height: 1.66;
  letter-spacing: -.01em;
}

/* ── badges: 큰 숫자 + 두 줄 설명 3열 ───────────────────────── */
.block-badge-list {
  display: grid;
  margin: 22px 0 0;
  padding: 0;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.block-badge {
  display: flex;
  min-width: 0;
  padding: 16px 10px 14px;
  flex-direction: column;
  align-items: center;
  background: var(--brand-surface, var(--white));
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  gap: 6px;
  text-align: center;
}

.block-badge-value {
  color: var(--samsung-blue);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.block-badge-label {
  color: color-mix(in srgb, var(--brand-text) 55%, transparent);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.02em;
}

/* ── steps: 번호는 CSS 카운터라 순서 변경에 데이터가 필요 없다 ── */
.block-step-list {
  display: grid;
  margin: 22px 0 0;
  padding: 0;
  gap: 10px;
  counter-reset: block-step;
  list-style: none;
}

.block-step {
  position: relative;
  display: grid;
  padding: 15px 16px 15px 52px;
  background: var(--brand-surface, var(--white));
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  gap: 4px;
  counter-increment: block-step;
}

.block-step::before {
  position: absolute;
  top: 15px;
  left: 16px;
  display: grid;
  width: 24px;
  height: 24px;
  color: var(--samsung-blue);
  background: color-mix(in srgb, var(--samsung-blue) 11%, transparent);
  border-radius: 8px;
  content: counter(block-step);
  font-size: 11px;
  font-weight: 800;
  place-items: center;
}

.block-step-title {
  color: var(--brand-text);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.block-step-description {
  color: color-mix(in srgb, var(--brand-text) 56%, transparent);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: -.02em;
}

/* ── accordion / faq: 이벤트 페이지의 details 를 재사용한다 ──── */
.block-accordion {
  display: grid;
  margin-top: 20px;
  gap: 8px;
}

/* .event-detail-accordion 은 이벤트 히어로의 flex 문맥을 가정한 order/margin 을
   갖고 있어 여기서 중화한다. 원본 룰은 건드리지 않는다. */
.block-accordion-item {
  margin-top: 0;
  order: initial;
  border-color: var(--line-soft);
  box-shadow: var(--shadow-card);
}

.block-accordion-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.block-accordion-number {
  display: grid;
  width: 21px;
  height: 21px;
  color: var(--samsung-blue);
  background: color-mix(in srgb, var(--samsung-blue) 11%, transparent);
  border-radius: 7px;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

/* ── 비교표: 시맨틱 dl + grid 행 (테이블 대신 기존 grid 행 관례) ── */
.block-compare {
  display: grid;
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

.block-compare-row {
  display: grid;
  padding: 10px 12px;
  gap: 3px;
}

.block-compare-row + .block-compare-row {
  border-top: 1px solid var(--line-soft);
}

.block-compare dt {
  color: var(--samsung-blue);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.block-compare dd {
  margin: 0;
  color: color-mix(in srgb, var(--brand-text) 60%, transparent);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: -.02em;
}

/* ── 히어로 K-BPI 씰. 문구는 실제 HTML 텍스트, 장식만 CSS ───── */
.hero-award:empty {
  display: none;
}

/* 기획안 값: padding 8px 0 32px, 중앙 정렬 */
.hero-award {
  padding: 8px 0 24px;
}

.align-center .hero-award {
  text-align: center;
}

.align-center .award-crest {
  margin-inline: auto;
}

.award-crest {
  position: relative;
  display: grid;
  width: min(100%, 226px);
  height: 104px;
  place-items: center;
}

.award-crest-laurel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.award-crest-text {
  position: relative;
  display: grid;
  justify-items: center;
}

.award-crest-eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.award-crest-rank {
  margin-top: 2px;
  color: var(--gold);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.award-crest-mark {
  margin-top: 3px;
  color: color-mix(in srgb, var(--gold) 84%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
}

.award-crest--image {
  width: min(100%, 240px);
  padding: 0;
}

.award-crest--image::before,
.award-crest--image::after {
  content: none;
}

.award-crest--image .slot-media {
  width: 100%;
  height: 104px;
  object-fit: contain;
}

/* 기획안: 씰 바로 아래 골드 소구 문구 12.5px */
.award-category {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--brand-text) 52%, transparent);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.hero-tone-light .award-crest-eyebrow,
.hero-tone-light .award-crest-rank {
  color: var(--gold-soft);
}

.hero-tone-light .award-crest-laurel {
  stroke: var(--gold-soft);
}

.hero-tone-light .award-crest-laurel g {
  stroke: var(--gold-soft);
}

.hero-tone-light .award-crest-mark {
  color: color-mix(in srgb, var(--gold-soft) 82%, transparent);
}

/* 어두운 히어로에서는 카테고리도 골드 계열 (기획안 --gold-lt) */
.hero-tone-light .award-category {
  color: var(--gold-soft);
}

/* 기획안: 출처 문구는 11px / 31ch 폭 제한 / 중앙 */
.hero-tone-light .hero-sub,
.home-hero .hero-sub {
  max-width: 31ch;
  font-size: 11px;
  line-height: 1.65;
}

.align-center .home-hero .hero-sub {
  margin-inline: auto;
}

/* ── 숏컷 레일 D안: 낮은 가로 아이콘 타일 + 중앙 3점 인디케이터 ── */
.hero-shortcuts {
  position: relative;
  z-index: 2;
  margin: 0 calc(var(--page-gutter) * -1) 4px;
}

.hero-shortcuts-label {
  display: block;
  padding: 0 var(--page-gutter);
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--brand-text) 46%, transparent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.hero-shortcuts .hero-shortcut-rail {
  margin: 0;
  padding: 2px var(--page-gutter) 4px;
}

/* 기획안 D안 타일: min 112px / 64px 높이 / 반투명 흰 배경.
   max-width 가 없으면 긴 라벨이 줄바꿈하지 않고 타일이 200px 넘게 늘어난다. */
.hero-shortcuts .hero-shortcut {
  min-width: 112px;
  max-width: 164px;
  min-height: 64px;
  padding: 12px 14px;
  justify-content: flex-start;
  border-radius: 14px;
  flex-direction: row;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
}

/* 이벤트 숏컷: 화이트 입체 버튼(안 B). 아이콘 칩 없이 라벨 + 원형 화살표. */
.hero-shortcuts .hero-shortcut::before {
  content: none;
}

.hero-shortcuts .hero-shortcut-label {
  margin-right: 0;
  white-space: normal;
}

.hero-tone-light .hero-shortcuts-label {
  color: rgba(255, 255, 255, .48);
}

/* 어두운 히어로 위에서도 흰 버튼으로 또렸하게 뜼다. */
.hero-tone-light .hero-shortcuts .hero-shortcut {
  color: #0f1b3d;
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(3, 8, 32, .5);
}

/* ── 상시 시안(12755:213) 숏컷 칩 ────────────────────────────────
   142x64 · 모서리 8px · 칩 간격 9px · 문구 11px 2줄 ·
   칩 색 3종(#3598E6 / #2673DA / #2342A6)이 순환한다. */
.hero-shortcuts .hero-shortcut {
  min-width: 142px;
  max-width: 142px;
  min-height: 64px;
  padding: 0 12px;
  border-radius: 8px;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: -.03em;
}

.hero-shortcuts .hero-shortcut-rail {
  gap: 9px;
}

/* 시안의 칩 상·하단 하이라이트(입체감). */
.hero-tone-light .hero-shortcuts .hero-shortcut {
  color: #ffffff;
  border-color: transparent;
  box-shadow:
    inset 0 1.632px 0 0 rgba(255, 255, 255, .28),
    inset 0 -1.632px 0 0 rgba(0, 0, 0, .3),
    0 8px 18px -10px rgba(3, 8, 32, .45);
}

.hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-1 { background: #3598e6; }
.hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-2 { background: #2673da; }
.hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-3 { background: #2342a6; }

.hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-1:hover,
.hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-1:focus-visible { background: #2b8ad8; }
.hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-2:hover,
.hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-2:focus-visible { background: #1f66c8; }
.hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-3:hover,
.hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-3:focus-visible { background: #1c3893; }

.hero-shortcuts .hero-shortcut .hero-shortcut-arrow svg,
.hero-shortcuts .hero-shortcut .hero-shortcut-arrow {
  color: #ffffff;
}

.hero-tone-light .hero-shortcuts .hero-shortcut:hover,
.hero-tone-light .hero-shortcuts .hero-shortcut:focus-visible {
  background: #ffffff;
  border-color: var(--samsung-blue);
  box-shadow: 0 13px 26px -10px rgba(3, 8, 32, .6);
}

.rail-indicator {
  display: flex;
  padding: 0 var(--page-gutter);
  margin-top: 9px;
  align-items: center;
  justify-content: center;
}

/* display:flex 가 [hidden] 을 이기므로 명시적으로 되돌린다. */
.rail-indicator[hidden] {
  display: none;
}

.rail-indicator-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rail-indicator-dots i {
  position: relative;
  display: block;
  width: 16px;
  height: 5px;
  overflow: hidden;
}

/* width 대신 transform 만 변형해 매 프레임 레이아웃 계산을 피한다. */
.rail-indicator-dots i::after {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--brand-text) 22%, transparent);
  border-radius: 3px;
  content: "";
  transform: scaleX(.34);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1), background 220ms ease;
}

.rail-indicator-dots i.is-active::after {
  background: var(--samsung-blue);
  transform: scaleX(1);
}

.hero-tone-light .rail-indicator-dots i::after {
  background: rgba(255, 255, 255, .24);
}

.hero-tone-light .rail-indicator-dots i.is-active::after {
  background: rgba(255, 255, 255, .82);
}

/* ── 랭킹 패널: 티커 마퀴 · 항목 스트립 · TIP 흐름 ──────────── */
.ranking-panel {
  --ranking-panel-pad: 18px;
  overflow: hidden;
}

.ranking-style-plain .ranking-panel { --ranking-panel-pad: 0px; }
.ranking-style-cards .ranking-panel { --ranking-panel-pad: 14px; }

.ranking-ticker {
  margin: 8px calc(var(--ranking-panel-pad) * -1) 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  contain: paint;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* 트랙을 두 벌 복제해 -50% 로 이동시킨다. gap 과 padding-right 를 각 half 안에
   두어 두 half 폭이 정확히 같아지므로 루프 이음선이 보이지 않는다. */
.ranking-ticker-track {
  display: flex;
  width: max-content;
  padding: 9px 0;
  animation: ranking-ticker-slide 26s linear infinite;
  will-change: transform;
}

.ranking-ticker-half {
  display: flex;
  align-items: center;
  padding-right: 18px;
  gap: 18px;
}

@keyframes ranking-ticker-slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.ranking-tick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.ranking-tick-bar {
  height: 7px;
  background: rgba(255, 255, 255, .26);
  border-radius: 3px;
}

.ranking-tick-delta {
  font-size: 11px;
  font-weight: 800;
}

.ranking-tick-delta.is-up { color: #ff8a85; }
.ranking-tick-delta.is-down { color: #8fc4ff; }

/* 이 페이지에서 전환되지 않는 시각 요소다. 포커스 가능한 컨트롤이 아니다. */
.ranking-tab-strip {
  display: flex;
  margin: 0 calc(var(--ranking-panel-pad) * -1);
  padding: 11px var(--ranking-panel-pad) 2px;
  overflow-x: auto;
  gap: 4px;
  list-style: none;
  scrollbar-width: none;
}

.ranking-tab-strip::-webkit-scrollbar {
  display: none;
}

.ranking-tab {
  padding: 6px 11px;
  color: rgba(255, 255, 255, .58);
  border-radius: 100px;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.ranking-tab.is-current {
  color: var(--deep-blue);
  background: rgba(255, 255, 255, .9);
  font-weight: 800;
}

.ranking-flow {
  display: grid;
  margin: 18px 0 0;
  padding: 0;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.ranking-flow-item {
  display: grid;
  min-width: 0;
  padding: 13px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  gap: 4px;
}

.ranking-flow-item strong {
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ranking-flow-item span {
  color: rgba(255, 255, 255, .62);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: -.015em;
}

/* 홈에도 플로팅 CTA 가 생겼으므로 이벤트와 같은 하단 여백을 확보한다. */
.home-page .site-footer {
  padding-bottom: 126px;
}

@media (max-width: 360px) {
  .block-badge { padding: 14px 7px 12px; }
  .block-badge-value { font-size: 17px; }
  .block-badge-label { font-size: 9.5px; }
  .block-step { padding-left: 48px; }
  .hero-shortcuts .hero-shortcut { min-width: 122px; }
  .ranking-flow { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-ticker-track {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .rail-indicator-dots i::after {
    transition: none;
  }
}

/* ── 랭킹 섹션 밝은 톤 (기획안 기준) ──────────────────────────
   기본값인 네이비 톤은 그대로 두고, tone=light 일 때만 덮어쓴다. */
.ranking-section.ranking-tone-light {
  min-height: 0;
  color: var(--brand-text, var(--graphite));
  background: var(--brand-surface, var(--white));
}

.ranking-tone-light .ranking-panel {
  background: var(--brand-surface, var(--white));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}

.ranking-tone-light .ranking-panel-head {
  color: var(--brand-text);
}

.ranking-tone-light .ranking-list li {
  border-bottom-color: var(--line-soft);
}

.ranking-tone-light .ranking-index {
  color: color-mix(in srgb, var(--brand-text) 52%, transparent);
}

/* 상위 3위만 브랜드 컬러로 강조 (기획안 규칙) */
.ranking-tone-light .ranking-list li:nth-child(-n + 3) .ranking-index {
  color: var(--samsung-blue);
}

.ranking-tone-light .ranking-copy {
  color: var(--brand-text);
}

.ranking-tone-light .ranking-caption {
  color: color-mix(in srgb, var(--brand-text) 55%, transparent);
}

.ranking-tone-light .live-badge {
  color: var(--market-up);
  background: color-mix(in srgb, var(--market-up) 10%, transparent);
}

.ranking-tone-light .ranking-ticker {
  background: color-mix(in srgb, var(--samsung-blue) 4%, var(--brand-surface, #fff));
  border-color: var(--line-soft);
}

.ranking-tone-light .ranking-tick-bar {
  background: #ccd5e2;
}

.ranking-tone-light .ranking-tick-delta.is-up { color: var(--market-up); }
.ranking-tone-light .ranking-tick-delta.is-down { color: var(--market-down); }

/* 밝은 톤 탭은 밑줄형 (기획안). 알약형은 네이비 톤 전용. */
.ranking-tone-light .ranking-tab-strip {
  border-bottom: 1px solid var(--line-soft);
}

.ranking-tone-light .ranking-tab {
  padding: 7px 11px 9px;
  color: color-mix(in srgb, var(--brand-text) 55%, transparent);
  background: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.ranking-tone-light .ranking-tab.is-current {
  color: var(--samsung-blue);
  background: none;
  border-bottom-color: var(--samsung-blue);
}

.ranking-tone-light .ranking-flow-item {
  background: var(--tint-surface);
  border: 0;
}

.ranking-tone-light .ranking-flow-item strong {
  color: var(--brand-text);
}

.ranking-tone-light .ranking-flow-item span {
  color: color-mix(in srgb, var(--brand-text) 55%, transparent);
}

/* Scroll guidance and section reveal motion */
html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.scroll-cue {
  position: relative;
  bottom: auto;
  left: auto;
  z-index: 3;
  display: grid;
  width: 100px;
  min-height: 72px;
  margin: 18px auto 0;
  align-content: center;
  justify-items: center;
  color: color-mix(in srgb, var(--link-blue) 68%, transparent);
  flex: none;
  order: 3;
  transform: none;
}

.scroll-cue-motion {
  position: relative;
  display: block;
  width: 38px;
  height: 50px;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--link-blue) 34%, transparent));
}

.scroll-cue .scroll-cue-motion i {
  position: absolute;
  left: 7px;
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
  background: transparent;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .18;
  animation: scroll-chevron-flow 1.8s cubic-bezier(.22, .61, .36, 1) infinite;
  transform: rotate(45deg) translate3d(-3px, -3px, 0);
}

.scroll-cue .scroll-cue-motion i::after { content: none; }
.scroll-cue .scroll-cue-motion i:nth-child(1) { top: 0; animation-delay: 0s; }
.scroll-cue .scroll-cue-motion i:nth-child(2) { top: 11px; animation-delay: .18s; }
.scroll-cue .scroll-cue-motion i:nth-child(3) { top: 22px; animation-delay: .36s; }

.home-hero.hero-tone-light .scroll-cue {
  color: rgba(154, 223, 255, .82);
}

@keyframes scroll-chevron-flow {
  0% { opacity: .1; transform: rotate(45deg) translate3d(-5px, -5px, 0); }
  45% { opacity: .82; }
  100% { opacity: .08; transform: rotate(45deg) translate3d(2px, 2px, 0); }
}

.scroll-reveal {
  opacity: 0;
  transition:
    opacity .72s cubic-bezier(.16, 1, .3, 1),
    transform .78s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

.scroll-reveal.reveal-from-up { transform: translate3d(0, 24px, 0); }
.scroll-reveal.reveal-from-left { transform: translate3d(-20px, 10px, 0); }
.scroll-reveal.reveal-from-right { transform: translate3d(20px, 10px, 0); }
.scroll-reveal.reveal-from-scale { transform: translate3d(0, 16px, 0) scale(.975); }
.scroll-reveal.reveal-delay-0 { transition-delay: 0s; }
.scroll-reveal.reveal-delay-1 { transition-delay: .08s; }
.scroll-reveal.reveal-delay-2 { transition-delay: .16s; }
.scroll-reveal.reveal-delay-3 { transition-delay: .24s; }

.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* 관리자에서 고르는 오브제 모션. 미디어 파일을 새로 내려받지 않고 GPU 합성
   transform만 사용하며, 화면 밖에서는 site.js가 animation을 멈춘다. */
.slot-media.motion-float,
.slot-media.motion-orbit,
.slot-media.motion-drift,
.slot-media.motion-tilt,
.slot-media.motion-pulse {
  animation-duration: 5.2s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.45, .05, .55, .95);
  backface-visibility: hidden;
  transform-origin: 50% 54%;
  will-change: transform;
}

.slot-media.motion-float { animation-name: object-motion-float; }
.slot-media.motion-orbit { animation-name: object-motion-orbit; }
.slot-media.motion-drift { animation-name: object-motion-drift; }
.slot-media.motion-tilt { animation-name: object-motion-tilt; }
.slot-media.motion-pulse { animation-name: object-motion-pulse; }
.slot-media.motion-speed-slow { animation-duration: 7.2s; }
.slot-media.motion-speed-normal { animation-duration: 5.2s; }
.slot-media.motion-speed-fast { animation-duration: 3.6s; }

.slot-media.is-motion-active {
  animation-play-state: running;
}

@keyframes object-motion-float {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(-.35deg); }
  50% { transform: translate3d(0, -9px, 0) rotate(.55deg); }
}

@keyframes object-motion-orbit {
  0%, 100% { transform: translate3d(-4px, 1px, 0) rotate(-.45deg); }
  25% { transform: translate3d(1px, -7px, 0) rotate(.2deg); }
  50% { transform: translate3d(5px, -2px, 0) rotate(.5deg); }
  75% { transform: translate3d(0, 4px, 0) rotate(-.15deg); }
}

@keyframes object-motion-drift {
  0%, 100% { transform: translate3d(-7px, 0, 0); }
  50% { transform: translate3d(7px, -3px, 0); }
}

@keyframes object-motion-tilt {
  0%, 100% { transform: translate3d(0, 1px, 0) rotate(-1.4deg); }
  50% { transform: translate3d(0, -4px, 0) rotate(1.4deg); }
}

@keyframes object-motion-pulse {
  0%, 100% { transform: scale(.985); }
  50% { transform: scale(1.018); }
}

.environment-ribbon {
  position: fixed;
  top: 76px;
  left: calc(50% + min(50vw, 240px) - 54px);
  z-index: 95;
  display: grid;
  min-width: 42px;
  height: 24px;
  padding: 0 9px;
  color: #4a2d00;
  background: #ffca65;
  border: 1px solid #e6a936;
  border-radius: 7px;
  box-shadow: 0 7px 18px rgba(104, 68, 0, .18);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  place-items: center;
  transform: translateX(-100%);
}

@media (max-width: 420px) {
  .scroll-reveal.reveal-from-left { transform: translate3d(-14px, 8px, 0); }
  .scroll-reveal.reveal-from-right { transform: translate3d(14px, 8px, 0); }
  .scroll-reveal.is-revealed { transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .slot-media.motion-float,
  .slot-media.motion-orbit,
  .slot-media.motion-drift,
  .slot-media.motion-tilt,
  .slot-media.motion-pulse {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .scroll-reveal,
  .scroll-reveal.is-revealed {
    opacity: 1;
    transition: none;
    transform: none;
  }

  .scroll-cue .scroll-cue-motion i {
    opacity: .48;
    animation: none;
  }
}

/* Mobile home typography tune-up
   상시 페이지 본문을 반 단계 키우되, 360px에서도 기존 줄 수가 늘지 않도록
   큰 제목은 소폭만 올리고 작은 본문·설명 위주로 1px씩 보강한다. */
@media (max-width: 480px) {
  .home-page .align-center .hero-award,
  .home-page .align-center .hero-copy,
  .home-page .align-center .hero-copy > div,
  .home-page .align-center .hero-heading,
  .home-page .align-center .hero-sub,
  .home-page .align-center .award-category {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .home-page .align-center .hero-copy {
    display: grid;
    align-self: stretch;
    justify-items: center;
  }

  .home-page .align-center .hero-heading {
    text-wrap: balance;
  }

  .home-page .brand-name { font-size: 18.5px; }
  .home-page .section-kicker,
  .home-page .hero-shortcuts-label { font-size: 10.5px; }
  /* 상시 시안(12755:213) 칩 문구 11px. */
  .home-page .hero-shortcuts .hero-shortcut { font-size: 11px; }
  .home-page .award-crest-eyebrow { font-size: 12.5px; }
  .home-page .award-crest-rank { font-size: 42.5px; }
  .home-page .award-crest-mark { font-size: 11px; }
  .home-page .award-category { font-size: 13px; }
  .home-page .hero-tone-light .hero-sub,
  .home-page .home-hero .hero-sub { font-size: 11.5px; }

  .home-page .type-scale-large .text-xl {
    font-size: clamp(46.5px, 12.7vw, 59.5px);
  }

  .home-page .type-scale-large .text-lg {
    font-size: clamp(33.5px, 9.1vw, 42.5px);
  }

  .home-page .type-scale-large .text-md { font-size: 20.5px; }
  .home-page .text-sm { font-size: 13.5px; }
  .home-page .why-number { font-size: 11.5px; }
  .home-page .why-copy { font-size: 19.5px; }
  .home-page .block-body { font-size: 14.5px; }
  .home-page .block-footnote { font-size: 11.5px; }
  .home-page .block-badge-value { font-size: clamp(17.5px, 4.5vw, 19.5px); }
  .home-page .block-badge-label { font-size: clamp(10px, 2.55vw, 11px); }
  .home-page .block-step::before { font-size: 11.5px; }
  .home-page .block-step-title { font-size: 14px; }
  .home-page .block-step-description { font-size: 12.5px; }
  .home-page .block-accordion-item summary { font-size: 14.5px; }
  .home-page .block-accordion-number { font-size: 11px; }
  .home-page .block-accordion-item .event-detail-body { font-size: 13.5px; }
  .home-page .block-accordion-item .event-detail-note { font-size: 11.5px; }
  .home-page .block-compare dt,
  .home-page .block-compare dd { font-size: 12px; }
  .home-page .ranking-panel-head { font-size: 12.5px; }
  .home-page .live-badge { font-size: 9.5px; }
  .home-page .ranking-index { font-size: 15.5px; }
  .home-page .ranking-copy {
    font-size: 14.5px;
    letter-spacing: -.02em;
  }
  .home-page .ranking-caption { font-size: 12.5px; }
  .home-page .ranking-tick-delta { font-size: 11.5px; }
  .home-page .ranking-tab { font-size: 12px; }
  .home-page .ranking-flow-item strong { font-size: 13px; }
  .home-page .ranking-flow-item span { font-size: 11px; }
  .home-page .notice-details summary { font-size: 14.5px; }
  .home-page .notice-copy { font-size: 12.5px; }
  .home-page .site-footer { font-size: 11.5px; }
  .home-page .footer-brand { font-size: 13.5px; }
}

/* ── 오늘의 투자정보(routine) 블록: 아치(해 굤적, 고정 장식) + 좌 시간축 타임라인. 시안 v6 규격 ── */
.blocks-variant-routine .ti-name{font-family:var(--font-heading);font-weight:800;font-size:33px;line-height:1.1;letter-spacing:-.025em;color:#0f1b3d;margin:0;}
.blocks-variant-routine .ti-name::after{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--samsung-blue);margin:12px 0 0;}
.blocks-variant-routine .ti-sub{font-weight:800;font-size:15px;color:var(--samsung-blue);letter-spacing:-.01em;margin:12px 0 0;}
.blocks-variant-routine .ti-arcwrap{margin:20px 0 0;}
.blocks-variant-routine .ti-arc{display:block;width:100%;height:auto;}
.blocks-variant-routine .ti-arc-ends{display:flex;justify-content:space-between;margin-top:-4px;padding:0 6px;}
.blocks-variant-routine .ti-arc-ends span{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;}
.blocks-variant-routine .ti-rail{display:grid;grid-template-columns:70px 1fr;margin:20px 0 0;}
.blocks-variant-routine .ti-time{position:relative;padding:16px 12px 16px 0;border-right:2px solid #e6eefb;}
.blocks-variant-routine .ti-t{display:block;font-size:12px;font-weight:800;color:var(--samsung-blue);letter-spacing:.04em;}
.blocks-variant-routine .ti-w{display:block;font-size:9.5px;color:#94a3b8;margin-top:2px;}
.blocks-variant-routine .ti-time::after{content:"";position:absolute;right:-6px;top:20px;width:11px;height:11px;border-radius:999px;background:var(--samsung-blue);border:2px solid var(--white);box-shadow:0 0 0 2px #cfe0f7;}
.blocks-variant-routine .ti-body{padding:16px 0 18px 16px;border-bottom:1px solid var(--line-soft);}
.blocks-variant-routine .ti-rail > .ti-body:last-child{border-bottom:0;padding-bottom:0;}
.blocks-section.blocks-variant-routine.space-lg{padding-bottom:44px;}
.blocks-variant-routine .ti-tt{font-weight:800;font-size:15px;color:var(--graphite);margin:0;}
.blocks-variant-routine .ti-desc{font-size:12px;color:var(--muted);margin:5px 0 0;line-height:1.55;}
.blocks-variant-routine .ti-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.blocks-variant-routine .ti-chip{font-weight:800;font-size:10.5px;color:var(--deep-blue);background:#f4f8ff;border:1px solid #dce8fb;border-radius:999px;padding:4px 9px;}

/* ══════════════════════════════════════════════════════════════════════
   이벤트 페이지 카드 리디자인 — 디자인팀 Figma 시안 반영
   파일: SydgU8OQSmt7Sed4G2tBXw / 프레임 12417:2 (480 x 변동)
   기준 규격(프레임 480 기준): 카드 424 x 680, 좌우 여백 28, 카드 간격 12,
   라운딩 30, 오브제 300x180(top 60), 타이틀 340(top 276), CTA 320(top 504),
   CTA 간격 16, 카드 하단 여백 60.
   360px 화면까지 같은 비율로 줄도록 clamp(최소, 480기준vw, 최대) 로 적었다.
   ══════════════════════════════════════════════════════════════════════ */
.event-page {
  --fg-blue: #0056ff;      /* 버튼 블루 (수정본에서도 유지) */
  --fg-title: #145edb;     /* 혜택 문구 — 수정본에서 버튼 색과 분리됐다 */
  --fg-navy: #111111;      /* 본문 (수정본: #011547 → #111) */
  --fg-card-line: #cad7e9; /* 카드 테두리 (수정본 신규) */
  --fg-period: #83a2cd;    /* 기간 텍스트 */
  --fg-line: #dbe8ff;      /* 아웃라인/구분선 */
  --fg-canvas: #e8edf4;    /* 카드 뒤 캔버스 (최종본 12866:2) */
  --fg-band: #0039d0;      /* 카테고리 상단 띠 — 버튼(#0056FF)과 다른 값 */
  --fg-font: "SamsungGothicCondensed", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

/* 캔버스: 흰 카드가 떠 보이도록 페이지 바탕을 회색으로 */
.event-page .event-main,
.event-page .event-campaign-list {
  background: var(--fg-canvas);
}

.event-page .event-campaign-list {
  padding: 12px clamp(16px, 5.83vw, 28px) 24px;
}

/* 카드 */
.event-page .event-campaign.event-hero {
  min-height: 0;
  padding: clamp(40px, 12.5vw, 60px) clamp(16px, 8.75vw, 42px) clamp(36px, 12.5vw, 60px);
  background: #fff;
  border: 1px solid var(--fg-card-line);
  border-radius: 30px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .02);
  font-family: var(--fg-font);
  scroll-margin-top: 78px;
}

.event-page .event-campaign.event-hero + .event-campaign.event-hero {
  margin-top: 12px;
  border-top: 0;
}

/* 오브제 300 x 180 */
.event-page .event-campaign .event-object-gallery {
  width: min(300px, 100%);
  margin: 0 auto;
}

.event-page .event-campaign .event-object-gallery .event-object {
  height: clamp(130px, 37.5vw, 180px);
}

/* 모션(MP4) 오브제는 정사각형이라 높이에 걸려 가로 여유가 120px 이상 남는다.
   게다가 전달본 영상들이 캔버스 안에 여백을 크게 두고 있어(그림이 가로 30~87%만
   차지) 실제로는 더 작게 보인다. 모션 슬롯만 높이를 키워 보정한다.
   정지 이미지 오브제는 가로형이 많아 기존 180px 을 유지한다. */
.event-page .event-campaign .event-object-gallery:has(video) .event-object {
  /* 정사각 모션은 높이에 걸리므로, 슬롯 폭(255~300px)의 92% 까지 높이를 올려
     오브제를 최대한 크게 보여준다. 이 이상 올리면 좌우 여백이 사라진다. */
  height: clamp(235px, 65vw, 276px);
}

/* 그룹 라벨(시안에는 없는 우리 요소)은 카드 폭에 맞춘다 */
.event-page .event-campaign > .event-group-marker {
  width: 100%;
  margin: 0 auto 14px;
}

/* 타이틀 영역 — 오브제 아래 36px */
.event-page .event-copy {
  margin-top: clamp(24px, 7.5vw, 36px);
  text-align: center;
}

/* clamp 하한이 30px 이라 360px 아래로는 폭이 좁아져도 글자가 줄지 않았다. 그래서
   콘텐츠에 박아 둔 줄이 또 접히며 "입금하면" 처럼 어절 하나가 떨어져 나갔다
   (배율 110% 부터 관찰). 하한을 낮춰 좁은 폭에서도 같이 줄어들게 한다.
   8.33vw 가 30px 을 넘는 폭(=360px 이상)에서는 계산값이 그대로라, 심의안 기준
   폭 390px 의 렌더는 달라지지 않는다. */
.event-page .event-title {
  max-width: none;
  margin: 0;
  color: var(--fg-title);
  font-family: var(--fg-font);
  font-size: clamp(21px, 8.33vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.04em;
}

/* 시안은 제목 두 줄을 같은 크기·같은 파랑으로 쓴다 */
.event-page .event-title .text-run {
  color: var(--fg-title);
  font-size: 1em;
  font-weight: 800;
}

/* 서브타이틀 세 줄: 기간(14) / 대상(18) / 핵심 혜택(24) */
.event-page .event-subtitle {
  max-width: none;
  margin: clamp(11px, 3.33vw, 16px) auto 0;
  color: var(--fg-navy);
  font-family: var(--fg-font);
  font-size: clamp(15px, 3.75vw, 18px);
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: -.04em;
}

/* 부제도 좁은 폭에서 같이 줄어야 줄이 안 깨진다. 다만 제목처럼 clamp 하한만 낮추면
   390px 에서도 값이 달라진다(3.75vw = 13.8px 로 하한 15px 아래다). 심의안 기준 폭은
   건드리면 안 되므로 390px 미만에서만 따로 준다. */
@media (max-width: 389.98px) {
  .event-page .event-subtitle {
    font-size: clamp(11.5px, 3.9vw, 15px);
  }
}

/* 기간 줄만 작게. 예전엔 :first-child 도 같이 잡았는데, 기간이 없는 카드
   (RIA·연금수수료·선물옵션·ISA 평생수수료 등)에서는 첫 줄이 "조건" 이라
   조건 줄만 11.7px 로 쪼그라들었다. 기간은 전 카드 muted 로 통일돼 있어
   색 기준만으로 충분하다. */
.event-page .event-subtitle .run-color-muted {
  color: var(--fg-period);
  font-size: .78em;
  font-weight: 500;
  line-height: 2.4;
}

.event-page .event-subtitle .run-color-primary,
.event-page .event-subtitle .run-color-ink {
  color: var(--fg-navy);
}

.event-page .event-subtitle .run-size-xl {
  font-size: 1.33em;
  font-weight: 800;
  line-height: 1.15;
}

/* CTA 1 — 이벤트 혜택 알아보기 (솔리드) */
.event-page .event-campaign .inline-cta {
  width: min(100%, 320px);
  min-height: 50px;
  margin: clamp(24px, 7.5vw, 36px) auto 0;
  padding: 0 24px;
  gap: 12px;
  color: #fff;
  background: var(--fg-blue);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-family: var(--fg-font);
  font-size: clamp(15px, 3.75vw, 18px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.event-page .event-campaign .inline-cta svg {
  width: 24px;
  height: 24px;
  padding: 5px;
  color: var(--fg-blue);
  background: #fff;
}

@media (hover: hover) {
  .event-page .event-campaign .inline-cta:hover {
    background: #0049d8;
    box-shadow: none;
    transform: none;
  }
}

/* CTA 2 — 자세히 알아보기 (아웃라인 + 펼침) */
.event-page .event-campaign > .event-detail-accordion {
  width: min(100%, 320px);
  margin: 16px auto 0;
  background: #fff;
  border: 1.5px solid var(--fg-line);
  border-radius: 8px;
  box-shadow: none;
}

.event-page .event-campaign > .event-detail-accordion[open] {
  border-color: var(--fg-blue);
}

.event-page .event-campaign > .event-detail-accordion > summary {
  min-height: 50px;
  padding: 0 24px;
  gap: 12px;
  color: var(--fg-blue);
  font-family: var(--fg-font);
  font-size: clamp(15px, 3.75vw, 18px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.event-page .event-campaign > .event-detail-accordion > summary i {
  width: 24px;
  height: 24px;
  background: #fff;
  border-color: var(--fg-blue);
}

.event-page .event-campaign > .event-detail-accordion > summary i::before,
.event-page .event-campaign > .event-detail-accordion > summary i::after {
  top: 10.5px;
  left: 6px;
  width: 11px;
  height: 1.5px;
  background: var(--fg-blue);
}

/* 펼친 내용: 기간 / 신규 고객 / 휴면 고객 블록 */
.event-page .event-campaign > .event-detail-accordion .event-detail-content {
  padding: 20px 24px 24px;
  border-top-color: var(--fg-line);
}

.event-page .event-detail-group + .event-detail-group {
  margin-top: 20px;
  padding-top: 20px;
  border-top-color: var(--fg-line);
}

.event-page .event-detail-heading {
  margin: 0 0 8px;
  color: var(--fg-navy);
  font-family: var(--fg-font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.event-page .event-detail-copy,
.event-page .event-detail-body {
  color: var(--fg-navy);
  font-size: 14px;
  line-height: 1.57;
  letter-spacing: -.045em;
}

.event-page .event-detail-notes .event-detail-note,
.event-page .event-detail-notes .text-run {
  color: var(--fg-blue);
  font-size: 12px;
  line-height: 1.83;
  letter-spacing: -.05em;
}

/* 카테고리 헤더 — 단색 블루 */
/* 시안(12417:139): 파란 띠 480x86 = 위아래 여백 10 + 내용 66, 내용은 세로 중앙.
   우리 페이지는 상단바(68px 고정)가 위에 겹치므로 그만큼을 더한다.
   → 띠 전체 = 68 + 86, 내용 영역 = 66px 로 시안과 같아진다. */
.event-page .event-category-head {
  --topbar-h: 68px;
  min-height: calc(var(--topbar-h) + 86px);
  padding: calc(var(--topbar-h) + 10px) clamp(16px, 5.83vw, 28px) 10px;
  align-content: center;
  background: var(--fg-band);
  row-gap: 10px;
}

.event-page .event-category-head h1 {
  font-family: var(--fg-font);
  font-size: clamp(23px, 5.83vw, 28px);
  line-height: 1;
  letter-spacing: -.04em;
}

.event-page .event-category-description {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(13px, 3.33vw, 16px);
  line-height: 1.2;
  letter-spacing: -.04em;
  white-space: normal;
}

/* ══════════════════════════════════════════════════════════════════════
   상시 페이지 최종 시안 (Figma 12842:36, 480x5474)
   섹션마다 배경이 다르다. 기존 규칙이 그라디언트를 쓰는 곳이 있어
   background-image: none 으로 함께 끈다.
   ══════════════════════════════════════════════════════════════════════ */
.home-page {
  --sg-sky: #e2f2fe;   /* 브랜드지표 · 오늘의 투자정보 */
  --sg-mist: #e8edf4;  /* 랭킹 서비스 */
  --sg-gray: #f2f2f2;  /* 4단계 · 자주 묻는 질문 */
}

.home-page .blocks-section.blocks-variant-badges,
.home-page .blocks-section.blocks-variant-routine {
  background: var(--sg-sky);
  background-image: none;
}

.home-page .blocks-section.blocks-variant-object,
.home-page .blocks-section.blocks-variant-accordion {
  background: #ffffff;
  background-image: none;
}

.home-page .ranking-section {
  background: var(--sg-mist);
  background-image: none;
}

.home-page .blocks-section.blocks-variant-steps,
.home-page .blocks-section.blocks-variant-faq {
  background: var(--sg-gray);
  background-image: none;
}

.home-page .notice-section {
  background: #ffffff;
  background-image: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   상시 최종 시안 전면 반영 — Figma 12842:36 (480 × 5474)
   시안 좌표를 그대로 옮기기 위해 "시안 1px = var(--su)" 로 환산한다.
   화면이 480 보다 좁으면 비례 축소, 480 이상은 시안 실측값 그대로 고정.
   ═══════════════════════════════════════════════════════════════════ */
.home-page .rendered-site {
  --su: min(1px, 0.20833333vw);
  --sg-ink: #111111;
  --sg-blue: #2a6cdb;       /* 배지 · 킥커 · 하단 CTA */
  --sg-accent: #145edb;     /* 제목 강조 */
  --sg-navy: #122f9c;       /* 랭킹 번호 · 활성 탭 */
  --sg-body: #444444;
  --sg-desc: #666666;
  --sg-dim: #888888;
  --sg-card-line: #cad7e9;
  --sg-row-line: #e8edf4;
  --sg-panel: #cfdced;
}

/* 시안의 유의사항 띠는 흰색이 아니라 회색이다(하단 흰 블록과 구분). */
.home-page .notice-section {
  background: #dfdfdf;
}

/* ── 섹션 여백: 시안 실측 ─────────────────────────────────────────── */
.home-page .blocks-section,
.home-page .ranking-section {
  padding-right: calc(18 * var(--su));
  padding-left: calc(18 * var(--su));
}

.home-page .blocks-variant-badges { padding-top: calc(51 * var(--su)); padding-bottom: calc(47 * var(--su)); }
.home-page .blocks-variant-routine { padding-top: calc(46 * var(--su)); padding-bottom: calc(50 * var(--su)); }
.home-page .blocks-variant-object { padding-top: calc(21 * var(--su)); padding-bottom: calc(51 * var(--su)); }
.home-page .ranking-section { padding-top: calc(50 * var(--su)); padding-bottom: calc(52 * var(--su)); }

.home-page .blocks-variant-steps,
.home-page .blocks-variant-accordion,
.home-page .blocks-variant-faq {
  padding-top: calc(50 * var(--su));
  padding-bottom: calc(50 * var(--su));
  padding-right: calc(41 * var(--su));
  padding-left: calc(41 * var(--su));
}

/* ── 공통 타이포: 섹션 제목 32 / 킥커 배지 / 각주 ─────────────────── */
.home-page .blocks-section .section-title,
.home-page .ranking-section .section-title {
  margin: 0;
  color: var(--sg-ink);
  font-size: calc(32 * var(--su));
  font-weight: 700;
  line-height: calc(42 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-section .section-title .run-color-accent,
.home-page .ranking-section .section-title .run-color-accent {
  color: var(--sg-accent);
}

/* 지표 · 거래상위 · 랭킹은 파란 알약 배지, 4단계 · 진단 · FAQ 는 대시 킥커 */
.home-page .blocks-variant-badges .section-kicker,
.home-page .blocks-variant-object .section-kicker,
.home-page .ranking-section .section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(29 * var(--su));
  padding: 0 calc(18 * var(--su));
  margin-bottom: calc(16 * var(--su));
  color: #ffffff;
  background: var(--sg-blue);
  border-radius: 500px;
  font-size: calc(12 * var(--su));
  font-weight: 500;
  line-height: calc(20 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-steps .section-kicker,
.home-page .blocks-variant-accordion .section-kicker,
.home-page .blocks-variant-faq .section-kicker {
  display: flex;
  gap: calc(5 * var(--su));
  align-items: center;
  padding: 0;
  margin-bottom: calc(6 * var(--su));
  color: var(--sg-blue);
  background: none;
  font-family: "Pretendard", "SamsungGothicCondensed", sans-serif;
  font-size: calc(14.4 * var(--su));
  font-weight: 600;
  line-height: calc(20 * var(--su));
  letter-spacing: -.03em;
  text-transform: none;
}

.home-page .blocks-variant-steps .section-kicker::before,
.home-page .blocks-variant-accordion .section-kicker::before,
.home-page .blocks-variant-faq .section-kicker::before {
  width: calc(18 * var(--su));
  height: 1px;
  background: var(--sg-blue);
  content: "";
}

.home-page .blocks-section .block-footnote,
.home-page .ranking-caption {
  color: var(--sg-dim);
  font-size: calc(10 * var(--su));
  font-weight: 300;
  line-height: calc(16 * var(--su));
  letter-spacing: -.04em;
}

.home-page .blocks-section .section-heading-block {
  margin: 0;
}

/* ── 1. 히어로 ────────────────────────────────────────────────────── */
.home-page .home-hero {
  min-height: 0;
  padding: calc(130 * var(--su)) calc(18 * var(--su)) calc(131 * var(--su));
  align-items: flex-start;
}

.home-page .home-hero.hero-background-image {
  background: #081142;
}

.home-page .home-hero .hero-background-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-page .home-hero .hero-background-media .slot-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* 시안: 정방형 영상 444 → 숏컷 31 → 킥커 62 → 제목 → 출처 → 씰 */
.home-page .hero-media-top .hero-media {
  width: 100%;
  margin: 0 0 calc(31 * var(--su));
  border: 0;
  border-radius: calc(8 * var(--su));
  box-shadow: none;
}

.home-page .hero-shortcuts {
  margin: 0 calc(-18 * var(--su)) calc(62 * var(--su));
}

.home-page .hero-shortcuts .hero-shortcut-rail {
  padding: 0 calc(18 * var(--su));
}

.home-page .hero-shortcuts .hero-shortcut {
  min-width: calc(142 * var(--su));
  max-width: calc(142 * var(--su));
  min-height: calc(64 * var(--su));
}

/* 킥커(수상 부문)는 제목 바로 위 골드 한 줄 */
.home-page .home-hero .award-category {
  margin: 0 0 calc(6 * var(--su));
  color: #ddc184;
  font-size: calc(15.4 * var(--su));
  font-weight: 500;
  line-height: calc(20 * var(--su));
  letter-spacing: -.03em;
  text-align: left;
}

.home-page .home-hero .hero-copy {
  width: 100%;
}

.home-page .home-hero .hero-heading {
  margin: 0;
  font-size: calc(48.4 * var(--su));
  font-weight: 700;
  line-height: calc(59.4 * var(--su));
  letter-spacing: -.03em;
  text-shadow: none;
}

/* 1행은 은빛, 2행은 골드 그라디언트 (시안 12842:406 / 12842:407) */
.home-page .home-hero .hero-heading .run-color-inherit,
.home-page .home-hero .hero-heading .run-color-gold {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-page .home-hero .hero-heading .run-color-inherit {
  background-image: linear-gradient(90deg, #ffffff 0%, #cecece 48.6%, #ffffff 100%);
}

.home-page .home-hero .hero-heading .run-color-gold {
  background-image: linear-gradient(180deg, #ffebbe 0%, #b89342 100%);
}

.home-page .home-hero .hero-sub {
  max-width: none;
  margin: calc(18 * var(--su)) 0 0;
  color: rgba(255, 255, 255, .7);
  font-size: calc(12.1 * var(--su));
  font-weight: 400;
  line-height: calc(20.9 * var(--su));
  letter-spacing: -.03em;
}

/* K-BPI 월계관 씰: 시안 77×53 */
.home-page .home-hero .hero-award {
  padding: calc(24 * var(--su)) 0 0;
}

.home-page .home-hero .award-crest {
  width: calc(142 * var(--su));
  height: calc(53 * var(--su));
  margin-inline: 0;
}

.home-page .home-hero .award-crest-eyebrow {
  color: #cead6a;
  font-size: calc(6.6 * var(--su));
  font-weight: 500;
  letter-spacing: -.03em;
}

.home-page .home-hero .award-crest-rank {
  margin-top: 0;
  background-image: linear-gradient(180deg, #ffebbe 0%, #b89342 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: calc(31.68 * var(--su));
  font-weight: 700;
  line-height: calc(34 * var(--su));
  letter-spacing: -.03em;
}

.home-page .home-hero .award-crest-mark {
  color: #d1ad71;
  font-size: calc(6.6 * var(--su));
  font-weight: 500;
  letter-spacing: -.03em;
}

/* ── 2. 브랜드 지표 ───────────────────────────────────────────────── */
.home-page .blocks-variant-badges .section-title {
  font-size: calc(40 * var(--su));
  line-height: calc(52 * var(--su));
}

.home-page .blocks-variant-badges .section-title .run-size-sm {
  font-size: calc(32 * var(--su));
  line-height: calc(40 * var(--su));
  letter-spacing: -.02em;
}

.home-page .blocks-variant-badges .block-badge-list {
  display: grid;
  gap: calc(13 * var(--su));
  padding: 0;
  margin: calc(28 * var(--su)) 0 calc(19 * var(--su));
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}

.home-page .blocks-variant-badges .block-badge {
  display: flex;
  height: calc(179 * var(--su));
  padding: calc(14 * var(--su)) calc(6 * var(--su)) calc(20 * var(--su));
  align-items: center;
  background: rgba(255, 255, 255, .5);
  border: 1px solid #ffffff;
  border-radius: calc(8 * var(--su));
  box-shadow: 0 2px 0 0 rgba(56, 106, 144, .2);
  flex-direction: column;
  gap: 0;
}

.home-page .blocks-variant-badges .block-badge-value {
  font-size: calc(24 * var(--su));
  font-weight: 700;
  line-height: calc(36 * var(--su));
  letter-spacing: -.03em;
  text-align: center;
  white-space: nowrap;
}

.home-page .blocks-variant-badges .block-badge:nth-child(1) .block-badge-value { color: #122f9c; }
.home-page .blocks-variant-badges .block-badge:nth-child(2) .block-badge-value { color: #c88d36; }
.home-page .blocks-variant-badges .block-badge:nth-child(3) .block-badge-value { color: #ab734b; }

.home-page .blocks-variant-badges .block-badge-label {
  color: #333333;
  font-size: calc(14 * var(--su));
  font-weight: 500;
  line-height: calc(20 * var(--su));
  letter-spacing: -.03em;
  text-align: center;
}

/* 카드별 일러스트는 시안 원본(12842:363 / 368 / 375). */
.home-page .blocks-variant-badges .block-badge::after {
  width: 100%;
  height: calc(64 * var(--su));
  margin-top: auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

.home-page .blocks-variant-badges .block-badge:nth-child(1)::after { background-image: url("/assets/sangsi/proof-brandpower.webp"); }
.home-page .blocks-variant-badges .block-badge:nth-child(2)::after { background-image: url("/assets/sangsi/proof-satisfaction.webp"); }
.home-page .blocks-variant-badges .block-badge:nth-child(3)::after { background-image: url("/assets/sangsi/proof-isa.webp"); }

/* ── 3. 오늘의 투자정보 ───────────────────────────────────────────── */
.home-page .blocks-variant-routine .ti-name {
  margin: 0;
  color: var(--sg-ink);
  font-size: calc(32 * var(--su));
  font-weight: 700;
  line-height: calc(42 * var(--su));
  letter-spacing: -.03em;
  text-align: center;
}

.home-page .blocks-variant-routine .ti-sub {
  margin: calc(8 * var(--su)) 0 0;
  color: var(--sg-accent);
  font-size: calc(12 * var(--su));
  font-weight: 500;
  line-height: calc(20 * var(--su));
  letter-spacing: -.03em;
  text-align: center;
}

.home-page .blocks-variant-routine .ti-arcwrap {
  margin: calc(6 * var(--su)) auto calc(31 * var(--su));
}

.home-page .blocks-variant-routine .ti-rail {
  padding: calc(27 * var(--su)) calc(20 * var(--su)) calc(27 * var(--su)) calc(21 * var(--su));
  background: #ffffff;
  border: 1.5px solid var(--sg-card-line);
  border-radius: calc(8 * var(--su));
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .03);
}

.home-page .blocks-variant-routine .ti-time {
  font-size: calc(12 * var(--su));
  font-weight: 700;
  line-height: calc(15 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-routine .ti-time b,
.home-page .blocks-variant-routine .ti-time strong {
  color: #212d98;
}

.home-page .blocks-variant-routine .ti-time small,
.home-page .blocks-variant-routine .ti-time span {
  color: var(--sg-dim);
  font-size: calc(10 * var(--su));
  font-weight: 300;
  letter-spacing: -.03em;
}

.home-page .blocks-variant-routine .ti-tt {
  margin: 0;
  color: var(--sg-ink);
  font-size: calc(19 * var(--su));
  font-weight: 700;
  line-height: calc(22 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-routine .ti-desc {
  margin: calc(4 * var(--su)) 0 0;
  color: var(--sg-dim);
  font-size: calc(14 * var(--su));
  font-weight: 400;
  line-height: calc(17 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-routine .ti-chips {
  gap: calc(6 * var(--su));
  margin-top: calc(8 * var(--su));
}

.home-page .blocks-variant-routine .ti-chips > * {
  height: calc(23 * var(--su));
  padding: 0 calc(13 * var(--su));
  color: #212d98;
  background: #f4f8fe;
  border: 1px solid #d1dff4;
  border-radius: 500px;
  font-size: calc(11.495 * var(--su));
  font-weight: 700;
  line-height: calc(21 * var(--su));
  letter-spacing: -.03em;
}

/* ── 4. 고수의 거래상위 ───────────────────────────────────────────── */
.home-page .blocks-variant-object .section-media--block {
  margin: 0 auto calc(-5 * var(--su));
}

.home-page .blocks-variant-object .section-media--block .slot-media {
  width: calc(164 * var(--su));
  height: calc(153 * var(--su));
  object-fit: contain;
}

.home-page .blocks-variant-object .section-title {
  letter-spacing: -.03em;
}

.home-page .blocks-variant-object .block-body {
  max-width: none;
  margin: calc(10 * var(--su)) 0 0;
  color: var(--sg-body);
  font-size: calc(18 * var(--su));
  font-weight: 400;
  line-height: calc(26.1 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-object .block-footnote {
  margin: calc(10 * var(--su)) 0 0;
  line-height: calc(15 * var(--su));
}

/* ── 5. 랭킹 서비스 ───────────────────────────────────────────────── */
.home-page .ranking-section .section-title {
  margin-bottom: calc(22 * var(--su));
}

.home-page .ranking-section .ranking-panel {
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1.5px solid var(--sg-card-line);
  border-radius: calc(8 * var(--su));
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .03);
}

.home-page .ranking-section .ranking-panel-head {
  display: flex;
  height: calc(41 * var(--su));
  padding: 0 calc(20 * var(--su));
  align-items: center;
  justify-content: space-between;
  color: var(--sg-ink);
  background: var(--sg-panel);
  border: 0;
  border-radius: 0;
  font-size: calc(14 * var(--su));
  font-weight: 700;
  letter-spacing: -.03em;
}

.home-page .ranking-section .ranking-panel-head .live-badge {
  gap: calc(5 * var(--su));
  color: #eb2113;
  font-family: "Pretendard", "SamsungGothicCondensed", sans-serif;
  font-size: calc(16 * var(--su));
  font-weight: 700;
  letter-spacing: .03em;
}

.home-page .ranking-section .ranking-panel-head .live-badge i {
  width: calc(7 * var(--su));
  height: calc(7 * var(--su));
  background: #eb2113;
}

.home-page .ranking-section .ranking-tab-strip {
  gap: calc(17 * var(--su));
  padding: calc(25 * var(--su)) calc(19 * var(--su)) 0;
  margin: 0;
  border: 0;
}

.home-page .ranking-section .ranking-tab {
  width: calc(57 * var(--su));
  padding: 0 0 calc(7 * var(--su));
  color: var(--sg-dim);
  background: none;
  border: 0;
  border-bottom: calc(2 * var(--su)) solid transparent;
  font-size: calc(16 * var(--su));
  font-weight: 500;
  line-height: calc(20 * var(--su));
  letter-spacing: -.03em;
  text-align: center;
}

.home-page .ranking-section .ranking-tab.is-current {
  color: var(--sg-navy);
  border-bottom-color: var(--sg-navy);
  font-weight: 700;
}

.home-page .ranking-section .ranking-list {
  padding: 0;
  margin: 0;
  border-top: 1.5px solid var(--sg-row-line);
}

.home-page .ranking-section .ranking-list > li {
  display: flex;
  gap: calc(17 * var(--su));
  height: calc(67 * var(--su));
  padding: 0 calc(19 * var(--su));
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--sg-row-line);
  border-radius: 0;
}

.home-page .ranking-section .ranking-list > li:last-child {
  border-bottom: 0;
}

.home-page .ranking-section .ranking-index {
  width: auto;
  height: auto;
  padding: 0;
  margin-left: calc(16 * var(--su));
  color: var(--sg-navy);
  background: none;
  border-radius: 0;
  font-family: "Pretendard", "SamsungGothicCondensed", sans-serif;
  font-size: calc(18 * var(--su));
  font-weight: 700;
  letter-spacing: .03em;
}

.home-page .ranking-section .ranking-index::before { content: "0"; }
.home-page .ranking-section .ranking-index::after { content: "."; }

.home-page .ranking-section .ranking-copy {
  margin: 0;
  color: var(--sg-ink);
  font-size: calc(18 * var(--su));
  font-weight: 500;
  line-height: calc(24 * var(--su));
  letter-spacing: -.03em;
}

.home-page .ranking-section .ranking-flow {
  display: grid;
  gap: calc(10 * var(--su));
  padding: 0;
  margin: calc(21 * var(--su)) 0 calc(21 * var(--su));
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
}

.home-page .ranking-section .ranking-flow-item {
  display: flex;
  height: calc(64 * var(--su));
  padding: calc(16 * var(--su)) calc(20 * var(--su)) 0;
  background: var(--sg-panel);
  border: 0;
  border-radius: calc(8 * var(--su));
  box-shadow:
    inset 0 calc(1.632 * var(--su)) 0 0 rgba(255, 255, 255, .3),
    inset 0 calc(-1.632 * var(--su)) 0 0 rgba(0, 0, 0, .15);
  flex-direction: column;
  gap: calc(8 * var(--su));
}

.home-page .ranking-section .ranking-flow-item::before {
  content: none;
}

.home-page .ranking-section .ranking-flow-item strong {
  color: var(--sg-ink);
  font-size: calc(16 * var(--su));
  font-weight: 500;
  line-height: calc(15 * var(--su));
  letter-spacing: -.03em;
}

.home-page .ranking-section .ranking-flow-item span {
  color: var(--sg-desc);
  font-size: calc(14 * var(--su));
  font-weight: 400;
  line-height: calc(15 * var(--su));
  letter-spacing: -.03em;
}

.home-page .ranking-section .ranking-caption {
  margin: 0;
  text-align: center;
}

/* ── 8. 계좌 개설 4단계 ───────────────────────────────────────────── */
.home-page .blocks-variant-steps .block-step-list {
  display: grid;
  gap: calc(10 * var(--su));
  padding: 0;
  margin: calc(13 * var(--su)) 0 0;
  counter-reset: sg-step;
  list-style: none;
}

.home-page .blocks-variant-steps .block-step {
  display: grid;
  gap: 0 calc(12 * var(--su));
  min-height: calc(74 * var(--su));
  padding: 0 calc(15 * var(--su));
  align-items: center;
  background: #ffffff;
  border: 0;
  border-radius: calc(8 * var(--su));
  box-shadow:
    inset 0 calc(1.632 * var(--su)) 0 0 rgba(255, 255, 255, .3),
    inset 0 calc(-1.632 * var(--su)) 0 0 rgba(0, 0, 0, .15);
  counter-increment: sg-step;
  grid-template-columns: calc(33 * var(--su)) 1fr;
}

.home-page .blocks-variant-steps .block-step::before {
  display: grid;
  width: calc(33 * var(--su));
  height: calc(33 * var(--su));
  color: var(--sg-blue);
  background: #eaf1fc;
  border: 0;
  border-radius: 50%;
  font-family: "Pretendard", "SamsungGothicCondensed", sans-serif;
  font-size: calc(18 * var(--su));
  font-weight: 700;
  place-items: center;
  content: counter(sg-step);
  grid-row: span 2;
}

.home-page .blocks-variant-steps .block-step-title {
  color: var(--sg-ink);
  font-size: calc(16 * var(--su));
  font-weight: 500;
  line-height: calc(15 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-steps .block-step-description {
  margin-top: calc(8 * var(--su));
  color: var(--sg-desc);
  font-size: calc(14 * var(--su));
  font-weight: 400;
  line-height: calc(17 * var(--su));
  letter-spacing: -.05em;
}

/* ── 9. 상황별 진단 · 10. 자주 묻는 질문 ─────────────────────────── */
.home-page .blocks-variant-accordion .block-body {
  max-width: none;
  margin: calc(10 * var(--su)) 0 0;
  color: var(--sg-body);
  font-size: calc(18 * var(--su));
  font-weight: 400;
  line-height: calc(26.1 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-accordion .block-accordion,
.home-page .blocks-variant-faq .block-accordion {
  display: grid;
  gap: calc(10 * var(--su));
  margin-top: calc(22 * var(--su));
}

.home-page .blocks-variant-faq .block-accordion {
  margin-top: calc(12 * var(--su));
}

.home-page .blocks-variant-accordion .block-accordion-item,
.home-page .blocks-variant-faq .block-accordion-item {
  background: #ffffff;
  border: 1.5px solid var(--sg-row-line);
  border-radius: calc(8 * var(--su));
  box-shadow: none;
}

.home-page .blocks-variant-accordion .block-accordion-item > summary,
.home-page .blocks-variant-faq .block-accordion-item > summary {
  min-height: calc(50 * var(--su));
  padding: 0 calc(24 * var(--su));
  color: var(--sg-ink);
  font-weight: 700;
  letter-spacing: -.02em;
}

.home-page .blocks-variant-accordion .block-accordion-item > summary {
  font-size: calc(16 * var(--su));
}

.home-page .blocks-variant-faq .block-accordion-item > summary {
  font-size: calc(12 * var(--su));
}

/* 시안에는 원문자 번호가 없다. */
.home-page .blocks-variant-accordion .block-accordion-number,
.home-page .blocks-variant-faq .block-accordion-number {
  display: none;
}

.home-page .blocks-variant-accordion .block-accordion-item > summary i,
.home-page .blocks-variant-faq .block-accordion-item > summary i {
  width: calc(24 * var(--su));
  height: calc(24 * var(--su));
  flex: 0 0 auto;
}

/* ── 11. 유의사항 + 하단 ─────────────────────────────────────────── */
.home-page .notice-section {
  padding: calc(46 * var(--su)) calc(28 * var(--su)) calc(42 * var(--su));
}

.home-page .notice-section .notice-details > summary {
  min-height: calc(40 * var(--su));
  padding: 0 0 calc(14 * var(--su));
  color: #011547;
  border-bottom: 1.5px solid rgba(1, 21, 71, .25);
  font-size: calc(18 * var(--su));
  font-weight: 700;
  letter-spacing: -.04em;
}

.home-page .site-footer {
  padding: calc(34 * var(--su)) calc(28 * var(--su));
  background: #ffffff;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .02);
}

.home-page .site-footer .brand-name {
  color: #111827;
  font-size: calc(18 * var(--su));
  font-weight: 700;
  letter-spacing: -.04em;
}

.home-page .site-footer > p {
  margin: calc(10 * var(--su)) 0 0;
  color: #111827;
  font-size: calc(14 * var(--su));
  font-weight: 500;
  line-height: calc(18 * var(--su));
  letter-spacing: -.04em;
}

.home-page .floating-cta {
  min-height: calc(64 * var(--su));
  padding: 0 calc(24 * var(--su));
  background: var(--sg-blue);
  border-radius: calc(8 * var(--su));
  font-size: calc(18 * var(--su));
  font-weight: 700;
  letter-spacing: -.02em;
}

.home-page .floating-cta svg {
  width: calc(24 * var(--su));
  height: calc(24 * var(--su));
}

/* 숏컷 칩 hover 가 흰 배경으로 덮여 흰 글자가 사라지던 문제 정리.
   3색 칩은 각 톤의 진한 값으로만 어두워진다. */
.home-page .hero-tone-light .hero-shortcuts .hero-shortcut:hover,
.home-page .hero-tone-light .hero-shortcuts .hero-shortcut:focus-visible {
  color: #ffffff;
  background: inherit;
  border-color: transparent;
}

.home-page .hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-1:hover,
.home-page .hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-1:focus-visible { background: #2b8ad8; }
.home-page .hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-2:hover,
.home-page .hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-2:focus-visible { background: #1f66c8; }
.home-page .hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-3:hover,
.home-page .hero-tone-light .hero-shortcuts .hero-shortcut.shortcut-tone-3:focus-visible { background: #1c3893; }

/* ── 시안 대조 1차 보정 ─────────────────────────────────────────────
   구버전 규칙이 더 구체적이라 덮이던 항목들과, 시안에 없는 장식 정리. */

/* 섹션 여백: 기존 .blocks-section.blocks-variant-x.space-lg (0,3,0) 를 넘어서야 한다. */
.home-page .rendered-site .blocks-section.blocks-variant-badges { padding-top: calc(51 * var(--su)); padding-bottom: calc(47 * var(--su)); }
.home-page .rendered-site .blocks-section.blocks-variant-routine { padding-top: calc(46 * var(--su)); padding-bottom: calc(50 * var(--su)); }
.home-page .rendered-site .blocks-section.blocks-variant-object { padding-top: calc(21 * var(--su)); padding-bottom: calc(51 * var(--su)); }
.home-page .rendered-site .ranking-section { padding-top: calc(50 * var(--su)); padding-bottom: calc(52 * var(--su)); }
.home-page .rendered-site .blocks-section.blocks-variant-steps,
.home-page .rendered-site .blocks-section.blocks-variant-accordion,
.home-page .rendered-site .blocks-section.blocks-variant-faq {
  padding-top: calc(50 * var(--su));
  padding-bottom: calc(50 * var(--su));
}

/* 제목 블록 밑에 붙던 4px 여분 제거 */
.home-page .blocks-section .section-heading-block,
.home-page .ranking-section .section-heading-block {
  padding-bottom: 0;
}

/* 오늘의 투자정보: 시안에는 제목 밑줄이 없고, 아치는 251×27 납작한 선이다. */
.home-page .blocks-variant-routine .ti-name::after {
  display: none;
}

.home-page .blocks-variant-routine .ti-arcwrap {
  width: calc(251 * var(--su));
  height: calc(27 * var(--su));
  margin: calc(6 * var(--su)) auto calc(30 * var(--su));
}

.home-page .blocks-variant-routine .ti-arc {
  width: 100%;
  height: 100%;
}

.home-page .blocks-variant-routine .ti-arc-ends {
  display: none;
}

/* 시간 라벨: 굵은 12 남색 + 작은 10 회색 (시안 12842:276 / 277) */
.home-page .blocks-variant-routine .ti-t {
  color: #212d98;
  font-size: calc(13.794 * var(--su));
  font-weight: 700;
  line-height: calc(15 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-routine .ti-w {
  margin-top: calc(3 * var(--su));
  color: var(--sg-dim);
  font-size: calc(11.495 * var(--su));
  font-weight: 300;
  line-height: calc(14 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-routine .ti-body {
  border-bottom-color: #eef2f7;
}

/* 랭킹: 기존 min-height 91px 이 시안 67 을 덮고 있었다. */
.home-page .ranking-section .ranking-list > li {
  min-height: calc(67 * var(--su));
}

.home-page .ranking-section .ranking-panel {
  margin: calc(22 * var(--su)) 0 0;
}

/* 진단 · FAQ 행: 시안 50 은 1.5px 테두리를 포함한 값이다. */
.home-page .blocks-variant-accordion .block-accordion-item > summary,
.home-page .blocks-variant-faq .block-accordion-item > summary {
  min-height: calc(47 * var(--su));
}

/* 고수의 거래상위 오브제 */
.home-page .blocks-variant-object .section-media--block {
  display: flex;
  justify-content: center;
}

/* ── 시안 대조 2차 보정 ─────────────────────────────────────────────
   지표 제목: 32px 두 줄은 행간 40, 40px 마지막 줄만 52. 부모 행간을 52 로
   두면 앞 두 줄도 52 로 벌어져 24px 이 더 길어진다. */
.home-page .blocks-variant-badges .section-title {
  line-height: calc(40 * var(--su));
}

.home-page .blocks-variant-badges .section-title .run-size-inherit {
  line-height: calc(52 * var(--su));
}

/* 1.5px 테두리가 DPR 에 따라 반올림돼 행이 1px 작게 잡히던 보정 */
.home-page .blocks-variant-accordion .block-accordion-item > summary,
.home-page .blocks-variant-faq .block-accordion-item > summary {
  min-height: calc(48 * var(--su));
}

/* 랭킹 리스트는 시안에서 행 사이 간격 없이 1.5px 구분선으로만 나뉜다. */
.home-page .ranking-section .ranking-list {
  gap: 0;
}

/* 시안 히어로에는 숏컷 레일 라벨이 없다. */
.home-page .hero-shortcuts-label {
  display: none;
}

/* 배경 이미지 레이어(z-index:0)가 스태킹 컨텍스트를 만들어 킥커가 뒤로 가라앉던 문제. */
.home-page .home-hero .award-category {
  position: relative;
  z-index: 2;
}

/* ── 시안 대조 3차 보정 ─────────────────────────────────────────── */

/* 알약형 배지에는 앞쪽 대시가 없다(시안 12842:354 / 266 / 213). */
.home-page .blocks-variant-badges .section-kicker::before,
.home-page .blocks-variant-object .section-kicker::before,
.home-page .ranking-section .section-kicker::before {
  display: none;
  content: none;
}

/* .ti-time span 규칙이 .ti-t 까지 10px 회색으로 덮고 있었다. */
.home-page .blocks-variant-routine .ti-time .ti-t {
  color: #212d98;
  font-size: calc(13.794 * var(--su));
  font-weight: 700;
  line-height: calc(15 * var(--su));
  letter-spacing: -.03em;
}

.home-page .blocks-variant-routine .ti-time .ti-w {
  color: var(--sg-dim);
  font-size: calc(11.495 * var(--su));
  font-weight: 300;
}

/* 히어로 배경: 시안은 609.95×1293.82 이미지를 (-35.89, -126) 에 얹는다.
   cover 로 채우면 왕관 오브제가 문구 위로 올라와 겹친다. */
.home-page .home-hero .hero-background-media .slot-media {
  position: absolute;
  top: calc(-126 * var(--su));
  left: -7.477%;
  width: 127.07%;
  max-width: none;
  height: auto;
  object-fit: fill;
}

/* 4단계 카드: 기존 ::before 가 absolute 라 그리드 항목이 되지 못해 제목이
   번호 칸으로 밀려 겹쳤다. 배치를 명시한다. */
.home-page .blocks-variant-steps .block-step {
  grid-template-rows: auto auto;
  align-content: center;
}

.home-page .blocks-variant-steps .block-step::before {
  position: static;
  top: auto;
  left: auto;
  align-self: center;
  grid-row: 1 / span 2;
  grid-column: 1;
}

.home-page .blocks-variant-steps .block-step-title {
  grid-row: 1;
  grid-column: 2;
}

.home-page .blocks-variant-steps .block-step-description {
  grid-row: 2;
  grid-column: 2;
}

/* 위 300x180 규칙은 기획슬라이드에서 가져온 가로형 이미지용이다. 해당 9개 카드가
   모두 1:1 모션으로 교체된 뒤에도 ID 규칙이 이겨서 오브제가 135px 로 작게
   나오고 있었다. 모션이 들어간 경우에만 다른 카드와 같은 235~276px 로 맞춘다. */
.event-page #skip-pension-contribution-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-pension-contribution-restart-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-pension-contribution-transfer-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-irp-reward-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-irp-restart-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-irp-transfer-retirement-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-isa-reward-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-isa-restart-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-isa-transfer-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-isa-reopen-2026 .event-object-gallery:has(video) .event-object,
.event-page #skip-isa-pension-conversion-2026 .event-object-gallery:has(video) .event-object {
  height: clamp(235px, 65vw, 276px);
}

/* ═══════════════════════════════════════════════════════════════════════
   상시 최종 시안 갱신분 — Figma 12842:36 (480 × 5639) / 13015:2 (펼침)
   섹션 지오메트리는 그대로이고 배경 4종·히어로 씰·유의사항·장식이 바뀌었다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 섹션 배경 교체 (좌측 x=4 픽셀 실측) ─────────────────────────── */
.home-page .blocks-section.blocks-variant-steps {
  background: #ffffff;
  background-image: none;
}

.home-page .blocks-section.blocks-variant-accordion {
  background: var(--sg-gray);
  background-image: none;
}

.home-page .blocks-section.blocks-variant-faq {
  background: #ffffff;
  background-image: none;
}

.home-page .notice-section {
  background: var(--sg-gray);
}

/* ── 히어로: 킥커 색이 골드 → 연블루, 씰이 1.2배 커졌다 ───────────── */
.home-page .home-hero .award-category {
  color: #a5c4f9;
}

.home-page .home-hero .award-crest {
  width: calc(170 * var(--su));
  height: calc(62 * var(--su));
}

.home-page .home-hero .award-crest-eyebrow,
.home-page .home-hero .award-crest-mark {
  font-size: calc(7.92 * var(--su));
}

.home-page .home-hero .award-crest-rank {
  font-size: calc(38.016 * var(--su));
  line-height: calc(41 * var(--su));
}

/* ── 오늘의 투자정보: 아치 → 아침→밤 그라디언트 바 + 해·달 ────────
   시안 13018:554 바 250.88x9.6 r320, 13018:555 아이콘 237.228x13 */
.home-page .blocks-variant-routine .ti-arcwrap {
  position: relative;
  width: calc(250.88 * var(--su));
  height: calc(26.84 * var(--su));
  margin: calc(6 * var(--su)) auto calc(30 * var(--su));
}

.home-page .blocks-variant-routine .ti-arc {
  display: none;
}

.home-page .blocks-variant-routine .ti-arcwrap::before {
  position: absolute;
  top: 0;
  left: calc(7 * var(--su));
  width: calc(237.228 * var(--su));
  height: calc(13 * var(--su));
  background: url("/assets/sangsi/day-night.svg") no-repeat center / contain;
  content: "";
}

.home-page .blocks-variant-routine .ti-arcwrap::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(9.6 * var(--su));
  background: linear-gradient(90deg, #d8a64f 0%, #3a68d7 50%, #212d98 100%);
  border-radius: 320px;
  content: "";
}

/* ── 4단계·진단·FAQ 킥커: 시안은 화살촉 있는 화살표다 ─────────────── */
.home-page .blocks-variant-steps .section-kicker::before,
.home-page .blocks-variant-accordion .section-kicker::before,
.home-page .blocks-variant-faq .section-kicker::before {
  width: calc(18.5 * var(--su));
  height: calc(7.4 * var(--su));
  background: url("/assets/sangsi/kicker-arrow.svg") no-repeat center / contain;
}

/* ── 유의사항: 배경 #F2F2F2 · 본문 12px/16 회색 ─────────────────── */
.home-page .notice-section .notice-body,
.home-page .notice-section .notice-copy {
  color: rgba(102, 102, 102, .53);
  font-size: calc(12 * var(--su));
  font-weight: 400;
  line-height: calc(16 * var(--su));
  letter-spacing: -.03em;
}

/* 랭킹 번호: 기존 "상위 3위만 브랜드 컬러" 규칙(0,3,1)이 시안 남색을 덮었다. */
.home-page .ranking-section .ranking-list > li .ranking-index,
.home-page .ranking-section .ranking-list li:nth-child(-n + 3) .ranking-index {
  color: var(--sg-navy);
}

/* 유의사항 제목 행간 명시 (시안 18/18) + 시안은 기본 펼침 상태다. */
.home-page .notice-section .notice-details > summary {
  line-height: calc(18 * var(--su));
}

.home-page .notice-section .notice-body {
  padding-top: calc(15 * var(--su));
}

/* ── 진단 · FAQ 펼침 상태 (시안 13015:2) ─────────────────────────────
   본문·소제목·주의문구 전부 12px 로 통일. 색은 본문 #444 / 강조 #2A6CDB.
   .event-detail-* 는 이벤트 페이지와 공용이라 .home-page 로 한정한다. */
.home-page .blocks-variant-accordion .event-detail-body,
.home-page .blocks-variant-faq .event-detail-body,
.home-page .blocks-variant-accordion .block-compare dd,
.home-page .blocks-variant-faq .block-compare dd {
  color: #444444;
  font-size: calc(14 * var(--su));
  font-weight: 400;
  line-height: calc(16 * var(--su));
  letter-spacing: -.02em;
}

.home-page .blocks-variant-accordion .block-compare dt,
.home-page .blocks-variant-faq .block-compare dt {
  color: var(--sg-blue);
  font-size: calc(14 * var(--su));
  font-weight: 700;
  line-height: calc(16 * var(--su));
  letter-spacing: -.02em;
}

.home-page .blocks-variant-accordion .event-detail-note,
.home-page .blocks-variant-faq .event-detail-note {
  color: var(--sg-blue);
  font-size: calc(14 * var(--su));
  font-weight: 400;
  line-height: calc(16 * var(--su));
  letter-spacing: -.02em;
}

/* 시안 펼침 상태의 소제목 블록(ISA·연금저축·IRP)은 테두리 박스가 아니라
   그냥 쌓인 텍스트다. 상시에서만 박스를 벗긴다. */
.home-page .blocks-variant-accordion .event-detail-content,
.home-page .blocks-variant-faq .event-detail-content {
  padding: calc(14 * var(--su)) calc(18 * var(--su)) calc(16 * var(--su));
}

.home-page .blocks-variant-accordion .block-compare,
.home-page .blocks-variant-faq .block-compare {
  row-gap: calc(12 * var(--su));
  margin: calc(12 * var(--su)) 0 0;
  border: 0;
  border-radius: 0;
}

.home-page .blocks-variant-accordion .block-compare-row,
.home-page .blocks-variant-faq .block-compare-row {
  padding: 0;
  gap: 0;
}

.home-page .blocks-variant-accordion .block-compare-row + .block-compare-row,
.home-page .blocks-variant-faq .block-compare-row + .block-compare-row {
  border-top: 0;
}

.home-page .blocks-variant-accordion .event-detail-notes,
.home-page .blocks-variant-faq .event-detail-notes {
  margin: calc(12 * var(--su)) 0 0;
  padding: 0;
  border: 0;
}

/* 히어로 배경 v2: 시안 마스크 그룹(12906:10)을 그대로 뽑은 480x1097 이미지라
   좌표 보정 없이 상단 네비(70) 아래에 1:1 로 얹는다. */
.home-page .home-hero .hero-background-media .slot-media {
  top: calc(70 * var(--su));
  left: 0;
  width: 100%;
  height: calc(1097 * var(--su));
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════
   상시 = 시안 전용 레이어 (마지막에 위치)
   구 디자인 시스템의 장식(라운드·테두리·그림자·후광)이 시안 위로 새어나오지
   않도록 여기서 끄고, 시안에 있는 값만 다시 준다. 상시 관련 시안 규칙은
   전부 이 아래에만 추가한다.
   ═══════════════════════════════════════════════════════════════════ */

/* ① 히어로 영상: 시안 12842:476 은 444x444 각진 상자다. 라운드 8px 때문에
      모서리가 깎여 테두리처럼 보였다. */
.home-page .home-hero .hero-media,
.home-page .home-hero .hero-media .slot-media {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ② 히어로 배경: 높이를 1097 로 고정하면 본문 길이에 따라 섹션 아래에
      빈 남색 띠가 생긴다(실측 7px). 네비(70) 아래부터 섹션 끝까지 채운다. */
.home-page .home-hero .hero-background-media .slot-media {
  top: calc(70 * var(--su));
  left: 0;
  width: 100%;
  height: calc(100% - 70 * var(--su));
  object-fit: fill;
}

/* ③ 고수의 거래상위 오브제: 시안엔 컨테이너 장식도 고정 높이도 없다.
      구 규칙의 height:150px 가 164x153 오브제를 잘라내고 있었다. */
.home-page .blocks-variant-object .section-media--block {
  height: auto;
  /* 음수 여백이라 오브제 아래가 킥커 알약과 5px 밖에 안 떨어져 있었다.
     리빌 애니메이션이 오브제를 16px 아래에서 끌어올리는 동안 알약을 4px 덮는다.
     이동량(16)보다 큰 간격을 둔다. */
  margin-bottom: calc(20 * var(--su));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ④ 랭킹 LIVE 점: 시안은 빨간 점 하나다. 구버전의 초록 후광 제거. */
.home-page .ranking-panel-head .live-badge i {
  box-shadow: none;
}

/* ⑤ K-BPI 씰: 시안 값(1위 38.016)보다 크게 — 현장 요청. 1.35배 */
.home-page .home-hero .award-crest {
  width: calc(230 * var(--su));
  height: calc(84 * var(--su));
}

.home-page .home-hero .award-crest-eyebrow,
.home-page .home-hero .award-crest-mark {
  font-size: calc(10.7 * var(--su));
}

.home-page .home-hero .award-crest-rank {
  font-size: calc(51.3 * var(--su));
  line-height: calc(55 * var(--su));
}

/* ⑥ 숏컷 레일: 데스크톱에서 마우스로 끌어 넘기기 */
.home-page .hero-shortcuts .hero-shortcut-rail {
  cursor: grab;
  scroll-behavior: auto;
  touch-action: pan-x;
}

.home-page .hero-shortcuts .hero-shortcut-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* is-dragging 에 pointer-events:none 을 걸면 누르는 순간부터 칩이 이벤트
   대상에서 빠져 짧은 클릭도 링크로 잡히지 않는다. 드래그와 클릭 구분은
   이동 거리 임계값(6px)으로만 한다. */

/* ⑦ 히어로 좌측 정렬을 align-items:flex-start 로 잡았더니 자식들이 콘텐츠
   너비가 돼버려, 숏컷 레일이 1235px 로 늘어나고 스크롤이 아예 안 됐다
   (4번째 이후 칩 접근 불가). 정렬은 기본 stretch + 텍스트 정렬로 처리한다. */
.home-page .home-hero {
  align-items: stretch;
}

.home-page .home-hero .hero-shortcuts,
.home-page .home-hero .hero-copy,
.home-page .home-hero .award-category {
  width: 100%;
}

/* ⑧ 숏컷 칩 정리
   - 칩 폭은 --su 로 줄어드는데 글자만 11px 고정이라, 360px 에서 텍스트가
     넘쳐 줄바꿈이 났다. 글자·간격·화살표도 같이 스케일한다.
   - 화살표는 글자 수와 무관하게 항상 오른쪽 끝에 고정(space-between).
   - 좌우 여백 12 → 16 (문구가 모서리에 붙어 보였다).
   - 라벨에 "이벤트" 가 다시 들어가 시안 142px 로는 부족해 156px 로 넓힌다
     (가장 긴 "자녀자산관리 이벤트" 88.7px + 좌우 16 + 간격 8 + 화살표 26). */
.home-page .hero-shortcuts .hero-shortcut {
  min-width: calc(156 * var(--su));
  max-width: calc(156 * var(--su));
  min-height: calc(64 * var(--su));
  padding: 0 calc(16 * var(--su));
  gap: calc(8 * var(--su));
  justify-content: space-between;
  font-size: calc(11 * var(--su));
  line-height: calc(15 * var(--su));
}

.home-page .hero-shortcuts .hero-shortcut-label {
  flex: 0 1 auto;
  white-space: nowrap;
}

.home-page .hero-shortcuts .hero-shortcut-arrow {
  width: calc(26 * var(--su));
  height: calc(26 * var(--su));
  margin-left: auto;
  flex: 0 0 auto;
}

.home-page .hero-shortcuts .hero-shortcut svg {
  width: calc(13 * var(--su));
  height: calc(13 * var(--su));
}

/* ⑨ 숏컷 칩 재설계
   문제 1) scroll-snap 이 로드 시 첫 칩을 레일 안쪽 끝으로 스냅시켜(scrollLeft=18)
           좌측 padding 18px 를 먹었다. 첫 칩이 화면 끝(x=0)에 붙던 원인.
   문제 2) 11px 한 줄이 64px 칩 안에 떠 있고 라벨~화살표 사이 26px 빈칸이
           남아 허전했다. 시안처럼 왼쪽 원형 아이콘으로 세로를 채운다. */
.home-page .hero-shortcuts .hero-shortcut-rail {
  scroll-snap-type: none;
}

.home-page .hero-shortcuts .hero-shortcut {
  min-width: calc(190 * var(--su));
  max-width: calc(190 * var(--su));
  padding: 0 calc(12 * var(--su));
  gap: calc(8 * var(--su));
  justify-content: flex-start;
}

.home-page .hero-shortcuts .hero-shortcut-icon {
  display: grid;
  width: calc(32.6 * var(--su));
  height: calc(32.6 * var(--su));
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  flex: 0 0 auto;
  place-items: center;
}

.home-page .hero-shortcuts .hero-shortcut-icon svg {
  width: calc(17 * var(--su));
  height: calc(17 * var(--su));
  stroke-width: 1.9;
}

.home-page .hero-shortcuts .hero-shortcut-label {
  flex: 1 1 auto;
  white-space: nowrap;
}

.home-page .hero-shortcuts .hero-shortcut-arrow {
  margin-left: auto;
}

/* ⑩ 히어로 영상 하단 띠 제거
   영상 원본(896x896) 흰 카드 장면 맨 아래에 어두운 회색 12~28px 선이 구워져
   있어 어두운 히어로 위에서 이상한 띠로 보였다. 재인코딩 없이 슬롯에서
   하단만 덜어낸다. 박스를 24px 키우고 cover + top 정렬하면 아래 24px 가
   .hero-media(overflow:hidden) 에 잘린다. 좌우는 12px 씩 줄어든다. */
.home-page .home-hero .hero-media .slot-media {
  height: calc(100% + 24 * var(--su));
  object-fit: cover;
  object-position: center top;
}

/* 질문 문구 크기: 진단 16px / FAQ 14px (시안 13069:928, 기존 둘 다 12px) */
.home-page .blocks-variant-accordion .block-accordion-summary,
.home-page .blocks-variant-accordion .block-accordion-summary > span {
  font-size: calc(16 * var(--su));
}

.home-page .blocks-variant-faq .block-accordion-summary,
.home-page .blocks-variant-faq .block-accordion-summary > span {
  font-size: calc(14 * var(--su));
}

/* 아코디언 본문 안의 인라인 런도 본문과 같은 크기로 맞춘다(기존 13px). */
.home-page .blocks-variant-accordion .event-detail-body .text-run,
.home-page .blocks-variant-faq .event-detail-body .text-run,
.home-page .blocks-variant-accordion .block-compare .text-run,
.home-page .blocks-variant-faq .block-compare .text-run {
  font-size: inherit;
}

/* 고정 헤더(.topbar, 68px)가 앵커로 이동한 섹션의 윗부분을 덮는다.
   #top-traders 로 진입하면 오브제 상단이 헤더에 52px 잘려 보였다.
   스크롤이 멈추는 위치를 헤더 높이만큼 내린다. html 의 scroll-padding-top 까지
   함께 주면 두 값이 더해져 152px 이 밀리므로 scroll-margin-top 하나만 쓴다. */
.rendered-site [id],
.landing-main [id],
main [id] {
  scroll-margin-top: 76px;
}

/* ⑪ 고수의 거래상위 — 오브제가 리빌 중 알약을 덮던 문제
   섹션 상단 여백을 키워 오브제가 섹션 경계·고정 헤더에 덜 물리게 한다.
   (오브제↔알약 간격은 위 .section-media--block 여백에서 확보한다) */
.home-page .blocks-variant-object,
.home-page .rendered-site .blocks-section.blocks-variant-object {
  padding-top: calc(40 * var(--su));
}

/* ⑫ 히어로 영상 하단 띠의 진짜 원인
   띠는 영상이 아니라 배경 이미지에 있었다. hero-bg 에 시안의 "동영상 삽입"
   회색 플레이스홀더(#d9d9d9, 원본 x19~461 y60~489)가 구워져 있고, 영상이
   그 박스보다 5.3px 짧아 아래쪽 회색이 삐져나왔다.
   hero-bg-v3 에서 그 박스를 배경색(#000818)으로 메웠으므로 영상 크롭은
   원래대로 24px 만 유지한다. */

/* ⑬ 진단·FAQ 아코디언 + 아이콘 정렬
   원을 24px 로 키웠는데 +/− 획은 16px 원 기준(left 4 / top 8, 길이 8)에 머물러
   좌상단으로 3px 씩 밀려 있었다. 원 중앙에 다시 맞춘다. */
.home-page .blocks-variant-accordion .block-accordion-item > summary i::before,
.home-page .blocks-variant-accordion .block-accordion-item > summary i::after,
.home-page .blocks-variant-faq .block-accordion-item > summary i::before,
.home-page .blocks-variant-faq .block-accordion-item > summary i::after {
  top: 50%;
  left: 50%;
  width: calc(10 * var(--su));
  height: 1.2px;
  transform: translate(-50%, -50%);
}

.home-page .blocks-variant-accordion .block-accordion-item > summary i::after,
.home-page .blocks-variant-faq .block-accordion-item > summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 펼쳤을 때 세로 획이 사라지며 − 가 되는 동작은 그대로 둔다. */
.home-page .blocks-variant-accordion .block-accordion-item[open] > summary i::after,
.home-page .blocks-variant-faq .block-accordion-item[open] > summary i::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* ⑭ CTA 가 둘 이상일 때(예: mPOP / 모니모) 위아래 간격.
   .inline-cta 의 margin-top 33px 는 본문과의 간격이라 버튼끼리는 좁게 붙인다. */
.event-page .event-campaign .inline-cta + .inline-cta,
.inline-cta + .inline-cta {
  margin-top: 10px;
}