/* Shared Korean landing scale and feature layout. */
html:lang(ko) body :is(.feature-panel,.feature) .feature-copy :is(ul,.feature-note,.feature-bullets),
html:lang(ko) body :is(.feature-panel,.feature) .feature-notes { margin-top:24px; margin-bottom:0; align-self:start; }
html:lang(ko) body .feature-text { flex:none; }
html:lang(ko) body .feature-text .feature-copy { margin-bottom:0; }

@media (min-width:561px) {
 html:lang(ko) body .feature-list > .feature-panel {
  grid-template-rows:auto minmax(0,1fr); row-gap:24px; padding-top:240px;
 }
 html:lang(ko) body .feature-list > .feature-panel .feature-copy { align-self:start; }
 html:lang(ko) body .feature-list > .feature-panel .feature-notes { margin-top:0; align-self:start; }
}
@media (min-width:561px) and (max-width:980px) {
 html:lang(ko) body .feature-list > .feature-panel { padding-top:48px; }
}

@media (max-width:560px) {
 html:lang(ko) body .feature-panel:not(.feature-panel--mini):not(.feature-panel--brand):not(.journey),
 html:lang(ko) body .feature-list > .feature {
  --feature-card-height:640px; height:640px; min-height:640px; max-height:640px; overflow:hidden;
 }
 html:lang(ko) body :is(.feature-panel,.feature) .feature-copy :is(ul,.feature-note,.feature-bullets),
 html:lang(ko) body :is(.feature-panel,.feature) .feature-notes { margin-top:16px; margin-bottom:0; }

 /* Background artwork in Lotto, Yaho and Saju. */
 html:lang(ko) body .feature-panel:not(.feature-panel--mini):not(.feature-panel--brand):has(.feature-mobile-visual) { padding:0; }
 html:lang(ko) body .feature-panel:not(.feature-panel--mini):not(.feature-panel--brand):has(.feature-mobile-visual) .feature-copy {
  display:flex; flex-direction:column; width:100%; height:100%; min-height:0; padding:32px 0 0;
 }
 html:lang(ko) body .feature-panel:has(.feature-mobile-visual) .feature-copy ul {
  order:2; flex:none; padding-inline:24px;
 }
 html:lang(ko) body .feature-panel .feature-mobile-visual {
  order:3; flex:1 1 0; width:100%; height:auto; min-height:0; aspect-ratio:auto;
  margin:24px 0 0; background-size:100% auto; background-position:center bottom;
 }

 /* Pastel modules with a separate figure. */
 html:lang(ko) body .feature-panel:has(.feature-visual) {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:'copy' 'notes' 'visual'; gap:0; padding:32px 0 0;
 }
 html:lang(ko) body .feature-panel .feature-text { display:contents; }
 html:lang(ko) body .feature-panel:has(.feature-visual) .feature-copy { padding:0; margin:0; }
 html:lang(ko) body .feature-list > .feature-panel .feature-copy { padding-inline:24px; }
 html:lang(ko) body .feature-panel:has(.feature-visual) .feature-notes { grid-area:notes; padding-inline:28px; }
 html:lang(ko) body .feature-panel .feature-visual {
  grid-area:visual; position:relative; inset:auto; display:flex; align-items:flex-end; justify-content:center;
  width:100%; height:auto; min-height:0; aspect-ratio:auto; margin:24px 0 0; overflow:hidden; container-type:normal;
 }
 html:lang(ko) body .feature-panel .feature-mockup {
  width:min(260px,100%); height:100%; max-height:none; aspect-ratio:auto; flex:none;
 }
 html:lang(ko) body .feature-panel--turn .feature-mockup { width:100%; }
 html:lang(ko) body .feature-panel .feature-mockup img,
 html:lang(ko) body .feature-panel .feature-screenshot {
  display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:contain; object-position:center bottom;
 }
 html:lang(ko) body .feature-panel .feature-screenshot { width:min(260px,100%); }
 html:lang(ko) body .feature-panel--hint .feature-mockup img { top:0; height:auto; }

 /* Direct image modules in Banya and Gongmoju. */
 html:lang(ko) body :is(.feature-list > .feature,.feature-panel:not(.journey)):has(> .feature-image) {
  display:flex; flex-direction:column; padding:32px 24px 0;
 }
 html:lang(ko) body :is(.feature-list > .feature,.feature-panel:not(.journey)):has(> .feature-image) .feature-copy { display:contents; }
 html:lang(ko) body :is(.feature-list > .feature,.feature-panel:not(.journey)):has(> .feature-image) ul {
  order:2; flex:none; width:100%; padding-left:16px;
 }
 html:lang(ko) body :is(.feature-list > .feature,.feature-panel:not(.journey)) > .feature-image {
  order:3; position:static; align-self:center; flex:1 1 0; min-height:0;
  width:calc(100% + 48px); height:auto; max-height:none; margin:24px 0 0; object-fit:contain; object-position:center bottom;
 }
}

/* Compact phone scale shared by all Korean product landings. Tablet/desktop retain their local scale. */
@media (max-width:560px) {
 html:lang(ko) body .hero {
  height:auto; min-height:0; padding:80px 18px 40px;
 }
 html:lang(ko) body .hero :is(.hero-logo,.hero-logo-spacer,.hero-brand) {
  position:relative; inset:auto; z-index:1; width:min(230px,100%); height:auto; margin:0 auto 16px;
 }
 html:lang(ko) body .hero .hero-content { margin-inline:auto; width:100%; }
 html:lang(ko) body .hero .hero-wordmark {
  width:min(calc(100cqw * 706 / 1280 * var(--wordmark-ratio)),calc(100vw - 96px));
 }
 html:lang(ko) body .hero :is(h1:not(.hero-brand),.hero-title,.hero-tagline) {
  font-size:28px; line-height:36px; letter-spacing:0; margin:0; min-height:0; height:auto;
 }
 html:lang(ko) body .hero :is(.hero-kicker,.hero-eyebrow) {
  font-size:13px; line-height:20px; margin-bottom:16px;
 }
 html:lang(ko) body .hero :is(.store-links,.stores,.downloads,.hero-action) {
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center;
  width:100%; height:auto; min-height:0; gap:10px; margin:20px auto 16px;
 }
 html:lang(ko) body .hero :is(a.store-button[href],a.store[href],a.toss-button[href]) {
  flex:0 0 auto; width:min(152px,calc((100% - 10px) / 2)); min-width:0; max-width:152px;
  height:48px; min-height:48px; max-height:48px; padding:8px; gap:6px;
  font-size:16px; line-height:22px; letter-spacing:0; border-radius:28px; white-space:nowrap;
 }
 html:lang(ko) body .hero :is(a.store-button[href],a.store[href],a.toss-button[href]) > img,
 html:lang(ko) body .hero .toss-icon { width:20px; height:20px; flex:0 0 20px; }
 html:lang(ko) body .hero .toss-icon .toss-mark { width:60px; height:30px; }
 html:lang(ko) body .hero :is(.hero-description,.lead) {
  margin:0 auto; font-size:14px; line-height:22px; letter-spacing:0;
 }
 html:lang(ko) body :is(.section-title,.content > h2,.features > h2) { font-size:28px; line-height:36px; }
 html:lang(ko) body :is(.feature-panel:not(.feature-panel--mini):not(.feature-panel--brand):not(.journey),.feature) .feature-copy :is(h2,h3) {
  font-size:22px; line-height:31px; letter-spacing:0;
 }
 html:lang(ko) body :is(.feature-panel,.feature) :is(.feature-kicker,.eyebrow) {
  font-size:14px; line-height:22px; letter-spacing:0;
 }
 html:lang(ko) body :is(.feature-panel,.feature) :is(.feature-notes,.feature-note,.feature-bullets),
 html:lang(ko) body :is(.feature-panel,.feature) .feature-copy ul { font-size:13px; line-height:20px; }
 html:lang(ko) body .feature-panel:not(.feature-panel--mini):not(.feature-panel--brand):not(.journey),
 html:lang(ko) body .feature-list > .feature {
  --feature-card-height:560px; height:560px; min-height:560px; max-height:560px;
 }
 html:lang(ko) body :is(.notice h2,.closing > strong,.closing-copy > span:first-child) { font-size:22px; line-height:31px; }
 html:lang(ko) body :is(.notice p,.closing p,.closing-copy > span:not(:first-child),.app-about-description p) {
  font-size:14px; line-height:22px;
 }
 html:lang(ko) body .info-list .info-item > span,
 html:lang(ko) body .info-list .info-item .info-links a { font-size:16px; line-height:24px; }
}

/* Shared phone hierarchy: feature summary first, service facts second. 375px reference. */
@media (max-width:560px) {
 html:lang(ko) body :is(.notice h2,.closing > strong,.closing-copy > span:first-child) {
  font-size:24px; line-height:32px; font-weight:700; color:#171717;
 }
 html:lang(ko) body :is(.notice p,.closing p,.closing-copy > span:not(:first-child),.app-about-description p) {
  font-size:15px; line-height:24px; font-weight:500; color:#333d4b;
 }
 html:lang(ko) body .info-list .info-item > strong,
 html:lang(ko) body .service-info dl > dt {
  font-size:12px; line-height:18px; font-weight:400; color:#8a8a8a;
  height:auto; min-height:18px; letter-spacing:0;
 }
 html:lang(ko) body .info-list .info-item > span,
 html:lang(ko) body .info-list .info-item .info-links a,
 html:lang(ko) body .service-info dl > dd,
 html:lang(ko) body .service-info dl.policy-links dd a {
  font-size:14px; line-height:20px; font-weight:400; color:#737373;
  height:auto; min-height:20px; letter-spacing:0;
 }
 html:lang(ko) body .info-list .info-item .info-links a,
 html:lang(ko) body .service-info dl.policy-links dd a {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  text-decoration-line:underline; text-underline-offset:3px;
 }
 html:lang(ko) body .info-list .info-item .info-links a:hover,
 html:lang(ko) body .info-list .info-item .info-links a:focus-visible,
 html:lang(ko) body .service-info dl.policy-links dd a:hover,
 html:lang(ko) body .service-info dl.policy-links dd a:focus-visible { color:#333d4b; }
}

/* Phone facts use two columns with left-aligned labels and values. */
@media (max-width:560px) {
 html:lang(ko) body :is(.info-list,.service-info) {
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:32px; min-height:0;
 }
 html:lang(ko) body :is(.info-list,.service-info) :is(.info-item,dl),
 html:lang(ko) body :is(.info-list,.service-info) :is(.info-item,dl):last-child {
  grid-column:auto; min-height:0; padding:0; align-items:flex-start; gap:4px; text-align:left;
 }
 html:lang(ko) body :is(.info-list,.service-info) :is(.info-item > strong,dl > dt) {
  height:auto; font-size:12px; line-height:18px; text-align:left;
 }
 html:lang(ko) body :is(.info-list,.service-info) :is(.info-item > span,dl > dd,.info-links a,dl.policy-links dd a) {
  height:auto; font-size:14px; line-height:20px; letter-spacing:0; color:#000; text-align:left;
 }
 html:lang(ko) body :is(.info-list,.service-info) :is(.info-item > span,dl > dd) {
  min-height:20px; margin:0; word-break:keep-all; overflow-wrap:normal;
 }
 html:lang(ko) body .info-list .info-item .info-links,
 html:lang(ko) body .service-info dl.policy-links dd {
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:0 6px;
 }
 html:lang(ko) body .info-list .info-item .info-links a,
 html:lang(ko) body .service-info dl.policy-links dd a {
  height:auto; min-height:44px; font-size:14px; line-height:20px; letter-spacing:0;
  align-items:flex-start; justify-content:flex-start; color:#000; text-align:left;
 }
 html:lang(ko) body :is(.info-list,.service-info) :is(.info-item,dl):not(:last-child) { padding:0; }
 html:lang(ko) body :is(.info-list,.service-info) :is(.info-item,dl):not(:last-child)::after { display:none; }
 html:lang(ko) body :is(.info-list,.service-info) :is(.info-item,dl)::before,
 html:lang(ko) body :is(.info-list,.service-info) :is(.info-item,dl):not(:first-child)::before {
  display:none; content:none;
 }
}