@font-face { font-family: "Pretendard JP"; src: url("PretendardJP-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard JP"; src: url("PretendardJP-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
html { scrollbar-gutter: stable; }
@media (max-width: 560px) { html { scrollbar-gutter: auto; } }
.hero { position: relative; min-height: 1220px; padding: 348px var(--page-gutter) 100px; background: #000; color: #fff; text-align: center; overflow: hidden; }
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none; }
.hero-copy { position: relative; max-width: 1100px; margin: auto; }
.hero-logo { width: min(100%, 1000px); height: auto; margin: 0 auto 64px; }
.hero-kicker { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.334; }
.hero h1 { font-size: 72px; font-weight: 700; line-height: 1.16; letter-spacing: -.03em; margin: 64px 0 0; }
.hero-action { margin-top: 64px; }
@property --toss-orbit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.toss-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 210px; min-width: 0; height: 64px; padding: 12px 24px; border-radius: 40px; background: #fff; color: #000; box-shadow: 0 16px 30px -6px rgba(23, 109, 255, .65), 0 7px 16px -4px rgba(36, 119, 255, .6); font-size: 22px; font-weight: 500; line-height: 1.36; letter-spacing: -.4268px; text-decoration: none; transition: background 180ms ease, translate 180ms ease; }
.toss-button::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 1;
  border-radius: inherit;
  padding: 3px;
  pointer-events: none;
  background: conic-gradient(from var(--toss-orbit-angle), rgba(20, 105, 255, .25) 0deg, rgba(20, 105, 255, .25) 230deg, #176dff 282deg, #91dcff 310deg, #176dff 333deg, rgba(20, 105, 255, .25) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(36, 119, 255, .95)) drop-shadow(0 0 7px rgba(36, 119, 255, .55));
  animation: toss-border-orbit 3s linear infinite;
}
@keyframes toss-border-orbit { to { --toss-orbit-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .toss-button::before { animation: none; } }
.toss-icon { position: relative; display: block; width: 24px; height: 24px; flex: none; overflow: hidden; }
.toss-mark { position: absolute; top: 50%; left: 50%; width: 72px; max-width: none; height: 36px; transform: translate(-50%, -50%); filter: brightness(0); }
@media (hover: hover) and (pointer: fine) { .toss-button:hover { background: #e9e9e9; translate: 0 -2px; } }
.toss-button:active { translate: 0 1px; }
.hero-description { margin: 32px 0 0; font-size: 20px; line-height: 1.6; }
.content { width: min(var(--content-width), calc(100% - 2 * var(--page-gutter))); margin: auto; padding: 120px 0 100px; }
.content > h2 { margin: 0 0 40px; font-size: 40px; font-weight: 600; line-height: 1.3; }
.feature-panels { display: grid; gap: 56px; }
.feature-panel { position: relative; height: 680px; border-radius: 24px; background: var(--panel); overflow: hidden; }
.feature-copy { position: absolute; top: 35.29%; left: 4.6875%; width: 43%; z-index: 1; }
.eyebrow { margin: 0; font-size: 17px; font-weight: 500; }
.feature-copy h3 { margin: 12px 0 0; font-size: 32px; line-height: 1.35; letter-spacing: -.023em; font-weight: 500; }
.feature-bullets { position: absolute; left: 4.6875%; bottom: 80px; width: 43%; margin: 0; padding-left: 16px; color: #737373; font-size: 16px; z-index: 1; }
.feature-bullets li + li { margin-top: 8px; }
.feature-image { position: absolute; bottom: 0; height: 87.06%; width: auto; max-width: none; object-fit: contain; }
.schedule .feature-image { right: 5.47%; }
.brokers .feature-image { right: -2.97%; }
.records .feature-image { right: 10.78%; }
.feature-panel.journey { display: flex; flex-direction: column; align-items: center; padding: 70px 68px 64px; }
.journey-image { width: 100%; max-width: 1144px; height: auto; }
.journey h3 { margin: 52px 0 0; color: #4a618d; font-size: 32px; font-weight: 500; line-height: 1.35; letter-spacing: -.023em; text-align: center; }
.notice { max-width: 900px; margin: 80px auto 0; text-align: center; }
.notice h2 { font-size: 28px; font-weight: 500; margin: 0 0 12px; }
.notice p { font-size: 20px; margin: 0; }
.info-list {
	font-family: "Pretendard JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; display: flex; justify-content: center; gap: 80px; margin: 103px auto 0; }
.info-item { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; min-height: 60px; text-align: center; flex-shrink: 0; min-width: 0; }
.info-item + .info-item::before { content: ''; position: absolute; left: -40px; top: 18px; width: 1px; height: 24px; background: #D5D1D1; }
.info-item strong { display: block; color: #8a8a8a; font-size: 14px; line-height: 20px; font-weight: 500; height: 20px; margin-bottom: 0; letter-spacing: .203px; }
.info-item span, .info-links a { display: block; min-height: 32px; font-size: 24px; line-height: 133.4%; font-weight: 500; letter-spacing: -.552px; }
.info-policies { flex-shrink: 1; }
.info-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; }
.info-links a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: auto; text-underline-position: from-font; }

/* Begin hero entry before the first paint; independent of the deferred browser script. */
@keyframes hero-enter {
  from { opacity:0; transform:translate3d(0,50px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@media (prefers-reduced-motion:no-preference) {
  .hero-motion-ready .hero-copy > [data-hero-reveal] {
    animation:hero-enter 650ms cubic-bezier(.22,1,.36,1) both;
  }
  .hero-motion-ready .hero-copy > [data-hero-reveal]:nth-child(2) { animation-delay:120ms; }
  .hero-motion-ready .hero-copy > [data-hero-reveal]:nth-child(3) { animation-delay:240ms; }
  .hero-motion-ready .hero-copy > [data-hero-reveal]:nth-child(4) { animation-delay:360ms; }
  .hero-motion-ready .hero-copy > [data-hero-reveal]:nth-child(5) { animation-delay:480ms; }
  .hero-motion-ready .hero-copy:focus-within > [data-hero-reveal] { animation:none; }
}

.motion-ready [data-reveal] { opacity: 0; transform: translate3d(0,50px,0); transition: opacity 650ms cubic-bezier(.22,1,.36,1), transform 650ms cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0ms); }
.motion-ready .is-revealed [data-reveal] { opacity: 1; transform: translate3d(0,0,0); }
@media (min-width: 981px) and (max-width: 1699px) {
	.hero { min-height: 1000px; padding-top: 260px; padding-bottom: 80px; }
	.hero-logo { width: min(100%, 850px); margin-bottom: 48px; }
	.hero h1 { font-size: clamp(48px,4.24vw,72px); margin-top: 40px; }
	.hero-action { margin-top: 48px; }
	.hero-background { opacity: .7; }
	.feature-panel { height: auto; aspect-ratio: 1280 / 680; }
	.feature-copy h3 { font-size: clamp(24px,2.05vw,32px); }
	.feature-bullets { bottom: 48px; font-size: 14px; }
	.feature-panel.journey { padding: 5.47% 5.31% 5%; }
	.journey h3 { margin-top: 4.06%; font-size: clamp(24px, 2.05vw, 32px); }
}
@media (max-width: 980px) {
	.hero { min-height: 780px; padding: 170px var(--page-gutter) 80px; }
	.hero-background { opacity: .5; }
	.hero-logo { width: min(100%, 700px); margin-bottom: 40px; }
	.hero-kicker { font-size: 20px; }
	.hero h1 { font-size: 44px; margin-top: 40px; }
	.hero-action { margin-top: 40px; }
	.hero-description { font-size: 18px; }
	.content { padding-top: 72px; padding-bottom: 80px; }
	.content > h2 { font-size: 36px; }
	.feature-panel { display: flex; flex-direction: column; height: auto; padding-top: 48px; }
	.feature-copy { position: relative; top: auto; left: auto; width: auto; padding-inline: 40px; }
	.feature-copy h3 { font-size: 28px; }
	.feature-bullets { position: relative; left: auto; bottom: auto; width: auto; margin: 24px 40px 0; }
	.feature-image { position: relative; align-self: center; height: 440px; margin-top: 40px; }
	.schedule .feature-image, .brokers .feature-image, .records .feature-image { right: auto; }
	.feature-panel.journey { padding: 48px 40px 52px; }
	.journey h3 { margin-top: 40px; font-size: 28px; }
	.notice p { font-size: 18px; }
	.info-list { --info-fact-padding: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 0; justify-items: stretch; }
	.info-item:not(.info-policies) { width: 100%; padding-inline: var(--info-fact-padding); }
	.info-policies { grid-column: 1 / -1; }
	.info-policies::before { display: none; }
	.info-item + .info-item::before { left: -.5px; }
}
@media (max-width: 640px) {
	.hero { min-height: 650px; padding-top: 160px; padding-bottom: 64px; }
	.hero-background { object-fit: contain; }
	.hero-logo { width: 100%; }
	.hero-kicker { font-size: 18px; }
	.hero h1 { font-size: clamp(27px,7.8vw,44px); line-height: 1.25; margin-top: 28px; }
	.hero-description { font-size: 16px; }
	.content { padding-top: 64px; }
	.content > h2 { font-size: 32px; }
	.feature-panels { gap: 32px; }
	.feature-panel { padding-top: 32px; }
	.feature-copy { padding-inline: 24px; }
	.eyebrow { font-size: 14px; }
	.feature-copy h3 { font-size: 22px; }
	.feature-bullets { margin-inline: 24px; font-size: 14px; }
	.feature-image { width: 90%; height: auto; }
	.brokers .feature-image { width: 118%; }
	.records .feature-image { width: 68%; }
	.feature-panel.journey { padding: 24px 20px 32px; }
	.journey h3 { margin-top: 28px; font-size: 22px; }
	.notice { margin-top: 64px; }
	.notice h2 { font-size: 24px; }
	.notice p { font-size: 16px; }
	.info-list { margin-top: 56px; }
	.info-item span, .info-links a { font-size: 20px; }
}
/* Center responsive facts within the areas bounded by the dividers. */
@media (min-width: 561px) and (max-width: 980px) {
	.info-list { align-items: start; row-gap: 24px; margin-top: 103px; }
	.info-item span, .info-links a { font-size: 24px; }
}
@media (max-width: 560px) {
	.info-list { --info-fact-padding: 20px; }
	.list-arrow { width: calc(100% - 28px); }
}
@media (max-width: 350px) {
	.info-list { --info-fact-padding: 10px; }
	.info-item + .info-item::before { left: -.5px; }
}
@media (prefers-reduced-motion: reduce) { .motion-ready [data-reveal] { opacity: 1; transform: none; } }

/* Shared responsive facts: equal columns bounded by the dividers. */
@media (width <= 980px) {
  .info-list {
    --info-fact-padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 24px;
    justify-items: stretch;
    align-items: start;
    width: 100%;
    height: auto;
    margin: 103px auto 0;
  }
  .info-item:not(.info-policies) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 60px;
    padding-inline: var(--info-fact-padding);
    text-align: center;
  }
  .info-item:not(.info-policies) strong { text-align: center; }
  .info-item:not(.info-policies) span {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 32px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .info-item:nth-of-type(n+2):not(.info-policies)::before {
    content: "";
    display: block;
    position: absolute;
    top: 18px;
    left: -.5px;
    width: 1px;
    height: 24px;
    background: #D5D1D1;
  }
  .info-item.info-policies {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    contain: none;
  }
  .info-item.info-policies strong { width: auto; }
}
@media (width <= 560px) {
  .info-list { --info-fact-padding: 10px; row-gap: 32px; margin-top: 56px; }
}
@media (width <= 350px) {
  .info-list { --info-fact-padding: 0px; }
}

@media (width <= 560px) { .info-list { width: calc(100% + 12px); margin-left: -6px; margin-right: -6px; } }

/* Desktop info columns follow the Lotto landing geometry. */
@media (width >= 981px) {
  .info-list {
    display: grid;
    grid-template-columns: 117px 62px 108px 260px;
    column-gap: 80px;
    row-gap: 24px;
    align-items: start;
    justify-content: center;
    justify-items: stretch;
    width: 100%;
    height: auto;
    margin: 103px auto 0;
  }
  .info-item:not(.info-policies) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 60px;
    height: auto;
    padding: 0;
    text-align: center;
  }
  .info-item:not(.info-policies) span {
    width: max-content;
    max-width: calc(100% + 64px);
    height: auto;
    min-height: 32px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: 24px;
    line-height: 133.4%;
  }
  .info-item:nth-of-type(n+2)::before {
    content: "";
    display: block;
    position: absolute;
    top: 18px;
    left: -40px;
    width: 1px;
    height: 24px;
    background: #D5D1D1;
  }
  .info-item.info-policies {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 60px;
    height: auto;
    contain: none;
    flex-basis: auto;
  }
  .info-item.info-policies strong { width: 100%; }
  .info-policies .info-links {
    width: 100%;
    max-width: 100%;
    height: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .info-policies .info-links a { width: auto; max-width: 100%; height: auto; }
}

/* Shared hero banner heights at the product landing breakpoints. */
@media (min-width: 981px) and (max-width: 1699px) {
  .hero { min-height: 1220px; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .hero { min-height: 860px; }
}
@media (max-width: 640px) {
  .hero { min-height: 870px; }
}

/* Yaho Keycap hero geometry; preserve the light button on this dark artwork. */
.hero { height: 1220px; min-height: 1220px; padding: 0; }
.hero-copy {
  position: absolute;
  top: 644px;
  left: 50%;
  width: min(908px, calc(100% - 64px));
  max-width: none;
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
.hero-logo {
  position: absolute;
  top: -432px;
  left: 0;
  right: 0;
  display: block;
  width: min(620px, 64vw);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center top;
  margin: 0 auto;
}
.hero-kicker { margin: 0 0 52px; font-size: 20px; font-weight: 700; line-height: 1.35; }
.hero h1 { max-width: 920px; margin: 0 auto; font-size: 68px; font-weight: 900; line-height: 1.12; letter-spacing: 0; }
.hero-action { margin-top: 56px; }
.toss-button { width: 210px; }
.hero-description {
  max-width: 551px;
  margin: 44px auto 0;
  font-family: "Pretendard JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -.427px;
}
@media (max-width: 980px) {
  .hero { height: auto; min-height: 860px; padding: 105px 20px 55px; }
  .hero-copy { position: relative; top: auto; left: auto; width: min(908px, 100%); margin: 0 auto; transform: none; }
  .hero-logo { position: static; width: min(520px, 100%); margin: 0 auto 18px; }
  .hero-kicker { margin-bottom: 32px; font-size: 17px; }
  .hero h1 { font-size: 44px; }
  .hero-description { margin-top: 36px; font-size: 19px; }
}
@media (min-width: 561px) and (max-width: 980px) {
  .hero-logo { aspect-ratio: 5 / 3; }
}
@media (max-width: 560px) {
  .hero { min-height: 870px; padding: 96px 18px 42.4px; }
  .hero-logo { width: min(320px, 88vw); margin-bottom: 14px; }
  .hero-kicker { margin-bottom: 22px; font-size: 15px; }
  .hero h1 { font-size: clamp(31px, 9.5vw, 38px); line-height: 1.18; }
  .hero-action { margin-top: 32px; }
  .toss-button { width: 280px; max-width: 100%; }
  .hero-description { margin-top: 24px; font-size: 16px; line-height: 1.6; }
}

/* Match Yaho Keycap module widths and gaps; use the shared 24px mobile heading gap. */
.content { width: min(var(--content-width), calc(100% - 64px)); padding-top: 98px; }
.feature-panels { gap: 48px; }
.content > h2 {
  margin-bottom: 40px;
  font-family: "Pretendard JP", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.96px;
}
@media (max-width: 980px) {
  .content { width: calc(100% - 40px); padding-top: 72px; }
  .content > h2 { font-size: 36px; }
}
@media (max-width: 560px) {
  .content { width: calc(100% - 28px); padding-top: 56px; }
  .content > h2 { font-size: 32px; margin-bottom: 24px; }
  .feature-panels { gap: 32px; }
}



/* Feature typography and text spacing: Yaho reference, 2026-10-01. Alignment stays project-owned. */
.feature-copy .eyebrow { font-size:17px; font-weight:600; line-height:25px; letter-spacing:0; margin:0 0 11px; }
.feature-copy h3 { font-size:32px; font-weight:700; line-height:44px; letter-spacing:0; margin:0; }
.feature-copy .feature-bullets { font-size:15px; font-weight:500; line-height:24px; letter-spacing:0; }
.feature-copy .feature-bullets li + li { margin-top:4px; }
@media (min-width:561px) and (max-width:980px) {
 .feature-copy .eyebrow { font-size:17px; line-height:25px; margin-bottom:11px; }
 .feature-copy h3 { font-size:clamp(24px,4.2vw,32px); line-height:1.35; }
 .feature-copy .feature-bullets { font-size:14px; line-height:22.4px; }
}
@media (max-width:560px) {
 .feature-copy .eyebrow { font-size:16px; line-height:26px; letter-spacing:-.3px; margin-bottom:8px; }
 .feature-copy h3 { font-size:26px; line-height:36px; letter-spacing:-.8px; }
 .feature-copy .feature-bullets { font-size:14px; line-height:20px; }
 .feature-copy .feature-bullets li + li { margin-top:6px; }
}
.feature-panel:not(.journey) { height:auto; min-height:680px; aspect-ratio:auto; }
.feature-copy { position:relative; top:auto; left:auto; margin-left:4.6875%; padding:240px 0 40px; }
.feature-copy .feature-bullets { position:static; left:auto; bottom:auto; width:auto; margin:184px 0 0; }
.journey h3 { font-size:28px; font-weight:600; line-height:38px; letter-spacing:0; }
@media (max-width:980px) {
 .feature-panel:not(.journey) { min-height:0; }
 .feature-copy { width:auto; margin-left:0; padding:0 40px; }
 .feature-copy .feature-bullets { margin-top:32px; }
 .journey h3 { font-size:clamp(20px,calc(4.2vw - 4px),28px); line-height:1.35; }
}
@media (max-width:640px) { .feature-copy { padding-inline:24px; } }
@media (max-width:560px) { .journey h3 { font-size:18px; line-height:25px; letter-spacing:0; } }
/* Keep desktop artwork at its original fraction of the card width as text grows. */
@media (min-width:981px) {
 .feature-image { height:auto; max-height:87.06%; }
 .schedule .feature-image { width:41.25%; }
 .brokers .feature-image { width:55.16%; }
 .records .feature-image { width:31.25%; }
}

/* WorksMade Services navigation — reference: Lotto public/index.html. */

/* Match the Services scrollbar gutter within the navigation only. */

/* Yaho feature-card dimensions across every Korean viewport, 2026-10-01. */
html:lang(ko) .feature-panel:not(.feature-panel--mini):not(.feature-panel--brand):not(.journey), html:lang(ko) .feature-list > .feature {
 --feature-card-height:680px; box-sizing:border-box; width:100%;
 height:var(--feature-card-height); min-height:var(--feature-card-height); max-height:var(--feature-card-height);
 aspect-ratio:auto; border-radius:24px;
}
@media (min-width:561px) and (max-width:980px) {
 html:lang(ko) .feature-panel:not(.feature-panel--mini):not(.feature-panel--brand):not(.journey), html:lang(ko) .feature-list > .feature { --feature-card-height:430px; }
}
@media (max-width:560px) {
 html:lang(ko) .feature-panel:not(.feature-panel--mini):not(.feature-panel--brand):not(.journey), html:lang(ko) .feature-list > .feature { --feature-card-height:820px; }
}
@media (width:390px) {
 html:lang(ko) .feature-panel:not(.feature-panel--mini):not(.feature-panel--brand):not(.journey), html:lang(ko) .feature-list > .feature { width:360px; justify-self:center; }
}

html:lang(ko) .feature-panel:not(.journey) .feature-copy {
 height:100%; display:flex; flex-direction:column; padding-bottom:80px;
}
html:lang(ko) .feature-panel .feature-copy .feature-bullets { flex:none; margin-top:auto; }
@media (min-width:981px) and (max-width:1100px) {
 html:lang(ko) .feature-panel:not(.journey) .feature-copy { padding-top:160px; }
}
@media (min-width:561px) and (max-width:980px) {
 html:lang(ko) .feature-panel:not(.journey) { display:block; padding:0; }
 html:lang(ko) .feature-panel:not(.journey) .feature-copy {
  width:52%; height:100%; padding:48px 0 36px 32px;
 }
 html:lang(ko) .feature-panel .feature-image {
  position:absolute; bottom:0; right:4%; width:38%; height:auto; max-height:calc(100% - 24px); margin:0;
 }
}
@media (max-width:560px) {
 html:lang(ko) .feature-panel:not(.journey) { display:flex; padding:48px 24px 40px; }
 html:lang(ko) .feature-panel:not(.journey) .feature-copy { display:contents; }
 html:lang(ko) .feature-panel:not(.journey) .eyebrow { order:0; flex:none; }
 html:lang(ko) .feature-panel:not(.journey) h3 { order:1; flex:none; }
 html:lang(ko) .feature-panel:not(.journey) .feature-image {
  order:2; position:static; align-self:center; flex:1 1 0; min-height:0;
  width:100%; height:auto; max-height:none; object-fit:contain; margin:36px 0 34px;
 }
 html:lang(ko) .feature-panel:not(.journey) .feature-bullets {
  order:3; position:static; flex:none; width:100%; margin:0; padding-left:16px;
 }
}

/* Lotto app-information reference: spacing, typography and policy links. */
html:lang(ko) .info-list {
  display:grid; grid-template-columns:117px minmax(62px,max-content) 108px 260px;
  column-gap:80px; row-gap:24px; align-items:start; justify-content:center;
  justify-items:stretch; width:100%; max-width:none; height:auto; min-height:60px;
  margin:103px auto 0; padding:0; color:#000; background:transparent;
  font-family:"Pretendard JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-synthesis:weight style small-caps; -webkit-font-smoothing:auto; text-rendering:optimizeLegibility;
}
html:lang(ko) .info-list .info-item {
  position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  align-items:center; gap:8px; width:100%; min-width:0; max-width:none;
  height:auto; min-height:60px; margin:0; padding:0; text-align:center; grid-column:auto;
  contain:none; flex-basis:auto;
}
html:lang(ko) .info-list .info-item strong {
  display:block; width:auto; max-width:100%; height:20px; min-height:0;
  margin:0; padding:0; font:500 14px/20px "Pretendard JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  letter-spacing:.203px; word-spacing:normal; color:#8a8a8a;
  text-align:center; white-space:normal; font-feature-settings:normal;
}
html:lang(ko) .info-list .info-item > span,
html:lang(ko) .info-list .info-item .info-links a {
  display:block; width:auto; max-width:none; height:32px; min-height:0; margin:0; padding:0;
  font:500 24px/133.4% "Pretendard JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  letter-spacing:-.552px; word-spacing:normal; font-feature-settings:'ss10' on;
  color:#000; text-align:center; white-space:nowrap; word-break:keep-all; overflow-wrap:normal;
}
html:lang(ko) .info-list .info-item .info-language-name {
  display:inline; width:auto; height:auto; margin:0; padding:0;
  font:inherit; letter-spacing:inherit; color:inherit; white-space:nowrap;
}
html:lang(ko) .info-list .info-item .info-links {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 16px; width:100%; max-width:100%; height:auto; min-height:0; margin:0; padding:0;
}
html:lang(ko) .info-list .info-item .info-links a {
  width:122px; color:#000; text-decoration-line:underline; text-decoration-style:solid;
  text-decoration-skip-ink:none; text-decoration-thickness:auto;
  text-underline-offset:auto; text-underline-position:from-font;
}
html:lang(ko) .info-list .info-item .info-links a:nth-child(n+3) { width:auto; }
html:lang(ko) .info-list .info-item:not(:last-child)::after {
  content:""; display:block; position:absolute; top:18px; left:calc(100% + 40px);
  width:1px; height:24px; background:#D5D1D1; transform:none;
}
html:lang(ko) .info-list .info-item:last-child::after { display:none; }
@media (max-width:980px) {
  html:lang(ko) .info-list {
    --info-fact-padding:20px; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:0;
    row-gap:24px; margin-top:103px;
  }
  html:lang(ko) .info-list .info-item:not(:last-child) { padding-inline:var(--info-fact-padding); }
  html:lang(ko) .info-list .info-item > span {
    width:100%; max-width:100%; height:auto; min-height:32px;
    white-space:normal; overflow-wrap:anywhere;
  }
  html:lang(ko) .info-list .info-item:last-child { grid-column:1/-1; justify-self:stretch; }
  html:lang(ko) .info-list .info-item:nth-of-type(-n+2)::after { left:calc(100% - .5px); }
  html:lang(ko) .info-list .info-item:nth-of-type(3)::after { display:none; }
}
@media (max-width:560px) {
  html:lang(ko) .info-list { --info-fact-padding:10px; row-gap:32px; margin-top:56px; }
  html:lang(ko) .info-list .info-item > span,
  html:lang(ko) .info-list .info-item .info-links a { font-size:20px; }
  html:lang(ko) .info-list .info-item .info-links a {
    display:inline-flex; align-items:center; width:auto; min-height:44px; touch-action:manipulation;
  }
}
@media (max-width:350px) {
  html:lang(ko) .info-list { --info-fact-padding:0px; }
}

/* Closing promotion and facts use the Lotto reference's surrounding whitespace. */
html:lang(ko) .notice, html:lang(ko) .closing, html:lang(ko) .closing-copy { margin-top:80px; margin-bottom:0; }
html:lang(ko) .app-about { padding-top:80px; }
@media(max-width:560px) {
 html:lang(ko) .notice, html:lang(ko) .closing, html:lang(ko) .closing-copy { margin-top:52px; }
 html:lang(ko) .app-about { padding-top:52px; }
}

html:lang(ko) .content { padding-bottom:116px; }
@media(max-width:980px) { html:lang(ko) .content { padding-bottom:86px; } }
@media(max-width:560px) { html:lang(ko) .content { padding-bottom:72px; } }
@media(min-width:981px) { html:lang(ko) .notice p { white-space:nowrap; } }

/* Two overlapping pain points lead to the improved experience. */
.feature-panel.journey {
 --feature-card-height:680px; box-sizing:border-box;
 height:var(--feature-card-height); min-height:var(--feature-card-height); max-height:var(--feature-card-height);
 aspect-ratio:auto; justify-content:center; padding:64px 40px;
 background:var(--panel); border:1px solid #edf0f6;
}
.journey-steps {
 --journey-circle:31%; --journey-overlap:4%; --journey-gap:11%;
 position:relative; display:flex; align-items:center; width:100%; max-width:920px;
 padding:0; margin:0; list-style:none;
}
.journey-steps::before {
 content:""; position:absolute; top:50%; left:58%; right:31%; height:1px; background:#405edb;
}
.journey-steps::after {
 content:""; position:absolute; top:50%; right:31%; width:0; height:0;
 border-top:5px solid transparent; border-bottom:5px solid transparent;
 border-left:8px solid #405edb; transform:translateY(-50%);
}
.journey-steps li {
 position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
 box-sizing:border-box; flex:0 0 var(--journey-circle); aspect-ratio:1; min-width:0;
 padding:24px; border:1px solid #e5e9f2; border-radius:50%;
 background:#fff; color:#405edb; text-align:center; box-shadow:none;
}
.journey-steps li:nth-child(2) { margin-left:calc(-1 * var(--journey-overlap)); }
.journey-steps li:last-child {
 margin-left:var(--journey-gap); background:#405edb; border-color:#405edb; color:#fff;
}
.journey-steps strong { font-size:22px; font-weight:600; line-height:1.4; word-break:keep-all; }
.journey-description {
 flex:none; width:100%; max-width:920px; margin:32px 0 0; color:#171717;
 font-size:28px; font-weight:600; line-height:38px; letter-spacing:0; text-align:center; word-break:keep-all;
}
@media (min-width:561px) and (max-width:980px) {
 .feature-panel.journey { --feature-card-height:430px; padding:40px 28px; }
 .journey-steps li { padding:12px; }
 .journey-steps strong { font-size:18px; }
 .journey-description { margin-top:24px; font-size:clamp(20px,calc(4.2vw - 4px),28px); line-height:1.35; }
}
@media (max-width:560px) {
 .feature-panel.journey { --feature-card-height:560px; padding:28px 12px; }
 .journey-steps li { padding:4px; }
 .journey-steps strong { font-size:clamp(11px,3.2vw,16px); line-height:1.4; }
 .journey-description { margin-top:24px; font-size:18px; line-height:25px; }
 .journey-steps::after { border-top-width:4px; border-bottom-width:4px; border-left-width:6px; }
}