@font-face { font-family: Pretendard; src: url("assets/fonts/PretendardVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap }
@font-face { font-family: Newsreader; src: url("assets/fonts/Newsreader.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap }
@font-face { font-family: Newsreader; src: url("assets/fonts/Newsreader-Italic.ttf") format("truetype"); font-weight: 200 800; font-style: italic; font-display: swap }
@layer reset, base, components, responsive;
@layer reset {
  *, *::before, *::after { box-sizing: border-box }
  body, h1, h2, h3, p, figure, fieldset { margin: 0 }
  button, input { font: inherit }
  button, a, label, summary { -webkit-tap-highlight-color: transparent }
  img { display: block; max-width: 100%; height: auto }
  a { color: inherit }
  button { color: inherit }
}
@layer base {
  :root { color-scheme: light; --paper: #f8f7f2; --ink: #252620; --muted: #696b62; --line: #dedfd6; --accent: #ad3c28; --surface: #e9e8df; --serif: Newsreader, Georgia, serif; --sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif }
  html { scroll-behavior: smooth; scroll-padding-top: 28px }
  body { background: var(--paper); color: var(--ink); font: 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased }
  ::selection { background: #d8ddbd; color: var(--ink) }
  a { text-decoration-thickness: 1px; text-underline-offset: 5px }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 6px }
  h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; line-height: 1.04 }
  h2 { font-size: clamp(2.7rem, 4.3vw, 4.2rem) }
  h3 { font-weight: 550; letter-spacing: -.035em }
  em { font-weight: inherit }
  svg { flex-shrink: 0 }
  .wrap { width: min(1280px, calc(100% - 112px)); margin-inline: auto }
  .eyebrow { font: 500 .75rem/1.5 var(--sans); letter-spacing: .16em }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }
  .skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 12px 20px; background: var(--ink); color: var(--paper); transform: translateY(-160%) }
  .skip-link:focus { transform: none }
}
@layer components {
  .site-header { height: 104px; display: flex; align-items: center; gap: 48px; border-bottom: 1px solid var(--line) }
  .brand { display: inline-flex; align-items: center; gap: 13px; font: 750 1.85rem/1 var(--sans); letter-spacing: -.065em; text-decoration: none }
  .brand-mark { width: 40px; height: 40px; flex: 0 0 auto; overflow: visible }.mark-accent { fill: var(--accent) }
  .site-header nav { margin-left: auto; display: flex; gap: 30px }
  .site-header nav a, .site-footer nav a { font-size: .875rem; text-decoration: none; padding-block: 12px }
  .site-header nav a:hover, .site-footer nav a:hover { text-decoration: underline }
  .release-link { display: inline-flex; align-items: center; gap: 20px; border: 1px solid var(--line); padding: 10px 18px; border-radius: 100px; text-decoration: none; font-size: .875rem }
  .release-link:hover { background: var(--surface) }
  .release-link svg, .button svg, .text-link svg, .replay svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
  .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; padding-block: 66px 58px }
  .hero-copy { position: relative; z-index: 2; min-width: 0 }h1 { margin-top: 27px; font-size: clamp(4rem, 6.25vw, 5.6rem); line-height: 1.02 }h1 em { color: var(--accent) }
  .hero-description { margin-top: 26px; font-size: 1.075rem; color: var(--muted); line-height: 1.65 }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 14px 25px; min-height: 54px; margin-top: 29px; border-radius: 100px; background: var(--ink); color: var(--paper); font-size: .9375rem; text-decoration: none }.button:hover { background: #3d3f34 }
  .frame-picker { margin-top: 44px }fieldset { padding: 0; border: 0; min-width: 0; scroll-margin-top: 50px }legend { padding: 0; margin-bottom: 15px; font-size: .875rem }
  .swatches { display: flex; gap: 22px; flex-wrap: wrap }.swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 48px; padding: 5px 0; cursor: pointer; font-size: .75rem }
  .swatch input { position: absolute; width: 100%; height: 100%; opacity: 0; inset: 0; margin: 0; cursor: pointer }.swatch-color { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px #25262030 }
  .paper { background: #fffdf7 }.midnight { background: #20211f }.cherry { background: #a72d3d }.cobalt { background: #244cb4 }
  .swatch input:checked + .swatch-color { outline: 1px solid var(--ink); outline-offset: 5px }.swatch input:focus-visible + .swatch-color { outline: 2px solid var(--accent); outline-offset: 5px }.swatch small { color: var(--muted); font-size: .7rem; margin-left: 2px }
  .booth-scene { position: relative; min-width: 0; height: 650px; isolation: isolate }.scene-number { position: absolute; top: 0; left: 15%; font: .75rem/1.4 ui-monospace, monospace; letter-spacing: .1em; color: var(--muted) }
  .strip { position: absolute; top: 60px; width: 192px; aspect-ratio: .32; padding: 12.5px; background: #fffdf7; color: var(--ink); box-shadow: 0 25px 26px -16px #25262035, 0 4px 7px #2526200c; transform-origin: 50% 40% }
  .strip-front { left: 16%; top: 25px; transform: rotate(-9deg); z-index: 2 }.strip-back { left: 50%; width: 180px; top: 47px; transform: rotate(10deg); background: #244cb4; color: #fffdf7; z-index: 1 }
  .shot { position: relative; width: 100%; aspect-ratio: 1 / .7; overflow: hidden; margin-bottom: 7px; background: var(--surface) }.shot img { width: 200%; max-width: none; height: auto; position: absolute; top: -21.42857%; left: 0 }.shot-2 img, .shot-4 img { left: -100% }.shot-3 img, .shot-4 img { top: -164.2857% }.strip-back img { filter: grayscale(1) }
  .strip-note { margin-top: 13px; font-size: .75rem; text-align: center; font-weight: 550; line-height: 1.4 }.strip-note span { display: block; font: .5rem/1.6 ui-monospace, monospace; letter-spacing: .09em; margin-top: 9px }
  .hero:has(#frame-midnight:checked) .strip-front { background: #20211f; color: #fffdf7 }.hero:has(#frame-cherry:checked) .strip-front { background: #a72d3d; color: #fffdf7 }.hero:has(#frame-cobalt:checked) .strip-front { background: #244cb4; color: #fffdf7 }
  .booth-scene figcaption { position: absolute; bottom: -18px; left: 5%; color: var(--muted); font-size: .75rem }.replay { position: absolute; right: 0; bottom: -26px; border: 0; padding: 10px 0 10px 15px; background: transparent; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .75rem }.replay[hidden] { display: none }.replay svg { width: 15px }.replay:disabled { opacity: .5; cursor: default }
  .promise-row { display: flex; align-items: center; justify-content: space-between; padding: 23px 0; border-block: 1px solid var(--line); color: var(--muted); font-size: .875rem }.promise-row span:nth-child(2) { padding-inline: 25px; border-inline: 1px solid var(--line); flex: 1; text-align: center; margin-inline: 10% }
  .film-section { padding-block: 96px 22px }.film-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: end; margin-bottom: 34px }.film-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -3px }.film-heading h2 { max-width: 650px }.film-heading > p:last-child { color: var(--muted); padding-bottom: 8px }.film-player { position: relative; overflow: hidden; border-radius: 28px; background: #171814; aspect-ratio: 16 / 9 }.film-player video { display: block; width: 100%; height: 100%; object-fit: cover }
  .app-section { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; padding-block: 128px; align-items: center }.app-image { background: var(--surface); padding: 35px 32px 20px; border-radius: 3px; display: flex; flex-direction: column; align-items: center; overflow: hidden }.app-image > .eyebrow { align-self: start; margin-bottom: 28px }.app-image img { width: 265px; border-radius: 26px; border: 1px solid var(--line); box-shadow: 0 20px 35px #25262016 }.app-image p { font-size: .75rem; color: var(--muted); margin-top: 22px }.app-copy h2 { margin-top: 25px }
  .steps { list-style: none; padding: 0; margin: 42px 0 28px }.steps li { display: flex; gap: 23px; padding-block: 22px; border-top: 1px solid var(--line) }.step-number { font: .75rem/1.9 ui-monospace, monospace; color: var(--accent); padding-top: 2px }.steps h3 { font-size: 1.15rem; margin-bottom: 6px }.steps p { color: var(--muted); font-size: .9375rem; line-height: 1.7; max-width: 350px }
  .text-link { display: inline-flex; gap: 18px; align-items: center; padding-block: 11px; font-size: .875rem; text-decoration: none; border-bottom: 1px solid currentColor }.text-link:hover { color: var(--accent) }
  .keep-section { background: var(--ink); color: var(--paper) }.keep-inner { padding-block: 84px 90px }.keep-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12% }.keep-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 25px; color: #c4c5ba }.keep-heading > p:last-child { align-self: end; color: #c4c5ba; padding-bottom: 6px; font-size: 1rem }
  .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5%; margin-top: 58px }.plan { border-top: 1px solid #ffffff40; padding-top: 25px }.plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px }.plan h3 { font-size: 1.45rem }.plan-tag { border: 1px solid #ffffff60; padding: 2px 12px; font-size: .75rem; border-radius: 30px }.pro-tag { background: #e7eacb; border-color: #e7eacb; color: var(--ink) }.plan > p { color: #c4c5ba; margin-top: 13px; font-size: .9375rem }.plan ul { list-style: none; padding: 0; margin: 24px 0 0 }.plan li { font-size: .9375rem; padding: 7px 0 7px 23px; position: relative }.plan li::before { content: ""; position: absolute; left: 1px; top: 16px; width: 9px; height: 5px; border-left: 1px solid #c4c5ba; border-bottom: 1px solid #c4c5ba; transform: rotate(-45deg) }.plan-note { display: block; color: #c4c5ba; font-size: .75rem; margin-top: 19px }
  .questions-section { padding-block: 116px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 12% }.questions-section h2 { margin-block: 25px 28px }details { border-top: 1px solid var(--line) }details:last-child { border-bottom: 1px solid var(--line) }summary { list-style: none; cursor: pointer; padding: 23px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 1rem }summary::-webkit-details-marker { display: none }.plus { width: 14px; height: 14px; position: relative; flex-shrink: 0 }.plus::before, .plus::after { content: ""; background: var(--ink); width: 12px; height: 1px; position: absolute; top: 6px; left: 1px }.plus::after { transform: rotate(90deg) }details[open] .plus::after { transform: none }details p { margin: 0 32px 25px 0; font-size: .9375rem; line-height: 1.75; color: var(--muted) }
  .release-section { text-align: center; border-top: 1px solid var(--line); padding-block: 82px 94px }.app-icon { width: 64px; border-radius: 15px; margin: 0 auto 26px; box-shadow: 0 4px 9px #2526200e; border: 1px solid var(--line) }.release-section h2 { margin-block: 22px; font-size: clamp(3.75rem, 6.5vw, 6.3rem) }.release-section > p:not(.eyebrow) { color: var(--muted); font-size: .9375rem; max-width: 390px; margin-inline: auto }.release-section .text-link { margin-top: 23px }
  .site-footer { display: flex; align-items: center; flex-wrap: wrap; column-gap: 35px; row-gap: 20px; border-top: 1px solid var(--line); padding-block: 31px }.site-footer .brand { font-size: 1.6rem }.site-footer > p { font-family: var(--serif); font-style: italic; color: var(--muted) }.site-footer nav { display: flex; gap: 25px; margin-left: auto }.copyright { font-size: .75rem; color: var(--muted) }
  .document { width: min(720px, calc(100% - 48px)); margin-inline: auto; padding-bottom: 60px }.document > nav { display: flex; align-items: center; justify-content: space-between; padding-block: 32px; border-bottom: 1px solid var(--line); margin-bottom: 48px }.document > nav > a:not(.brand) { padding: 10px; font-size: .875rem }.document h1 { font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1.08; margin-bottom: 28px }.document h2 { font: 550 1.25rem/1.4 var(--sans); letter-spacing: -.025em; margin: 35px 0 12px }.document p { color: var(--muted); line-height: 1.8 }.document footer { display: flex; flex-wrap: wrap; gap: 24px; border-top: 1px solid var(--line); margin-top: 45px; padding-top: 25px; font-size: .875rem }
  .strip-front { transition: background-color 240ms ease, color 240ms ease }
  .replay, .release-link { min-height: 44px }
}
@layer responsive {
  @media (min-width: 1500px) { .hero { padding-block: 70px } }
  @media (max-width: 1100px) {
    .wrap { width: calc(100% - 64px) }.site-header { gap: 30px }.hero { gap: 16px; padding-top: 55px }h1 { font-size: 5.9vw }.booth-scene { height: 610px }.strip-front { width: 180px; left: 12%; top: 48px }.strip-back { width: 170px; left: 48%; top: 61px }.strip { padding: 11px }.shot { margin-bottom: 6px }.strip-note { font-size: .625rem }.booth-scene figcaption { left: 0; bottom: 4px }.replay { bottom: -4px }.hero-description { font-size: 1rem }.frame-picker { margin-top: 32px }.swatches { gap: 13px }.app-section { gap: 8%; padding-block: 95px }.app-image { padding-inline: 24px }.questions-section { gap: 8% }
  }
  @media (max-width: 760px) {
    .wrap { width: calc(100% - 40px) }.site-header { height: 80px; gap: 12px }.brand { font-size: 1.55rem; gap: 10px }.brand-mark { width: 28px }.site-header nav { display: none }.release-link { margin-left: auto; padding: 8px 11px; font-size: .75rem; gap: 8px }.release-link svg { width: 14px }
    .hero { grid-template-columns: 1fr; padding-top: 46px; padding-bottom: 28px; gap: 18px }.hero-copy { display: contents }.hero .eyebrow { font-size: .6875rem; margin: 0 }.hero h1 { font-size: clamp(3.35rem, 11.9vw, 5.65rem); margin: 0; line-height: .98; letter-spacing: -.05em }.hero-description { margin-top: 0; font-size: 1rem }.hero .button { justify-self: start; margin-top: 3px; font-size: .875rem; padding: 12px 22px; min-height: 50px }
    .frame-picker { grid-row: 6; margin-top: 4px }.frame-picker legend { text-align: center; width: 100%; margin-bottom: 13px }.swatches { justify-content: center; gap: 30px }.swatch { font-size: .75rem }.swatch-color { width: 23px; height: 23px }
    .booth-scene { height: 505px; margin-block: 12px 0; grid-row: 5; width: min(410px, 100%); justify-self: center }.scene-number { top: 0; left: 5%; font-size: .625rem }.strip-front { width: 146px; left: 20%; top: 10px; padding: 9.5px }.strip-back { width: 136px; left: 52%; top: 25px; padding: 8.8px }.shot { margin-bottom: 4.9px }.strip-note { font-size: .53rem; margin-top: 8px }.strip-note span { font-size: .37rem; margin-top: 7px }.booth-scene figcaption { bottom: 9px; left: 0; font-size: .625rem }.replay { bottom: 0; font-size: .6875rem }.replay svg { width: 14px }
    .promise-row { margin-top: 5px; font-size: .75rem; padding-block: 19px; gap: 12px }.promise-row span:nth-child(2) { margin-inline: 0; padding-inline: 12px }.promise-row span { text-align: center; flex: 1 }
    .film-section { padding-block: 58px 4px }.film-heading { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px }.film-heading .eyebrow { margin-bottom: 4px }.film-heading > p:last-child { font-size: .875rem; padding: 0 }.film-player { border-radius: 18px }
    .app-section { grid-template-columns: 1fr; padding-block: 68px; gap: 36px }.app-copy { grid-row: 1 }.app-copy h2 { margin-top: 20px }.app-image { margin-top: 5px; padding-top: 28px }.app-image img { width: 230px }.app-image p { font-size: .6875rem }.steps { margin-top: 28px; margin-bottom: 15px }.steps li { gap: 20px; padding-block: 19px }.steps h3 { font-size: 1.1rem }.steps p { max-width: none; font-size: .9375rem }
    .keep-inner { padding-block: 55px }.keep-heading { grid-template-columns: 1fr }.keep-heading .eyebrow { margin-bottom: 20px }.keep-heading > p:last-child { margin-top: 23px }.plans { grid-template-columns: 1fr; gap: 35px; margin-top: 32px }.plan h3 { font-size: 1.35rem }.plan ul { margin-top: 17px }
    .questions-section { padding-block: 63px; grid-template-columns: 1fr; gap: 35px }.questions-section h2 { margin-block: 20px }.questions-section h2 { font-size: 2.7rem }summary { font-size: .9375rem; padding-block: 21px }
    .release-section { padding-block: 55px 63px }.release-section h2 { font-size: 4.4rem }.release-section > p:not(.eyebrow) { font-size: .875rem }.site-footer { gap: 22px; padding-block: 26px }.site-footer > p { order: 3; width: 100%; font-size: .9375rem }.site-footer nav { gap: 23px }.copyright { order: 4; margin-top: -17px }
  }
  @media (max-width: 370px) { .wrap { width: calc(100% - 32px) }.release-link svg { display: none }.brand-mark { width: 24px }.brand { font-size: 1.4rem }.swatches { gap: 20px }.strip-front { left: 15% }.strip-back { left: 48% }.hero h1 { font-size: 3.35rem }.promise-row { font-size: .6875rem } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto }*, *::before, *::after { animation: none !important; transition: none !important }.replay { display: none } }
}

@layer components {
  html, body { scrollbar-width: none; -ms-overflow-style: none }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0 }
  .language-switch { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 4px; font-size: .875rem; text-decoration: none; white-space: nowrap }
  .language-switch:hover { text-decoration: underline }
  .site-header { gap: 28px }
  .trial-note { font-size: .875rem; color: #c4c5ba; line-height: 1.8 }
  .trial-link { display: inline-block; color: var(--paper); font-size: .875rem; padding-block: 14px 9px; min-height: 44px }
  #trial-question:target { scroll-margin-top: 36px }
  html[lang="ko"] { --sans: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; word-break: keep-all; overflow-wrap: break-word }
  html[lang="ko"] body { letter-spacing: -.01em; line-height: 1.75 }
  html[lang="ko"] h1, html[lang="ko"] h2 { font-family: var(--sans); font-weight: 550; letter-spacing: -.035em; line-height: 1.25 }
  html[lang="ko"] .hero h1 { font-size: clamp(3.5rem, 5.7vw, 5rem) }
  html[lang="ko"] h1 em { font-style: normal }
  html[lang="ko"] .release-section h2 { font-size: clamp(3rem, 5.5vw, 5.3rem) }
  html[lang="ko"] .eyebrow { letter-spacing: .04em }
  html[lang="ko"] h3 { letter-spacing: -.02em; line-height: 1.5 }
  html[lang="ko"] .hero-description, html[lang="ko"] .steps p, html[lang="ko"] details p { line-height: 1.8 }
  html[lang="ko"] .document { max-width: 680px }
  html[lang="ko"] .document h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 550; letter-spacing: -.035em; line-height: 1.3; margin-block: 0 24px }
  html[lang="ko"] .document h2 { font-size: 1.25rem; font-weight: 550; letter-spacing: -.02em; line-height: 1.5; margin-block: 40px 12px }
  html[lang="ko"] .document p { font-size: 1rem; line-height: 1.9; letter-spacing: -.01em }
  html[lang="ko"] .strip-note { font-size: .6875rem }
  .skip-link:not(:focus) { clip-path: inset(50%) }
}
@layer responsive {
  @media(max-width: 760px) {
    .site-header { gap: 12px }
    .site-header .language-switch { margin-left: auto; font-size: .75rem }
    .site-header .release-link { display: none }
    html[lang="ko"] .hero h1 { font-size: clamp(2.8rem, 11vw, 4.2rem) }
    html[lang="ko"] main > section h2 { font-size: 2.5rem }
    html[lang="ko"] .hero h1 { letter-spacing: -.035em; line-height: 1.25 }
    html[lang="ko"] .document h1 { font-size: 2rem }
    html[lang="ko"] .document > nav { margin-bottom: 36px }
    html[lang="ko"] .strip-note { font-size: .5rem }
    .document > nav { gap: 14px; flex-wrap: wrap }
    .document > nav > .brand { margin-right: auto }
  }
}

@layer components {
  .frame-picker { max-width: 380px; padding: 22px; background: #ffffff80; border: 1px solid var(--line); border-radius: 20px }
  .theme-picker { margin-bottom: 24px }
  .theme-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 4px; background: var(--surface); border-radius: 10px }
  .theme-options label { position: relative; cursor: pointer; min-width: 0 }
  .theme-options input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0 }
  .theme-options span { display: grid; place-items: center; min-height: 44px; padding: 8px 4px; font-size: .8125rem; border-radius: 7px }
  .theme-options input:checked + span { background: var(--paper); box-shadow: 0 1px 3px #25262016 }
  .theme-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px }
  .frame-picker .swatches { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px 8px }
  .frame-picker .swatch { min-width: 0; gap: 8px; font-size: .6875rem }
  .frame-picker .swatch-color { width: 32px; height: 32px }
  .palette-note { margin-top: 20px; font-size: .75rem; color: var(--muted); line-height: 1.8 }
  .frame-bow { display: none; position: absolute; width: 35%; height: 8%; bottom: 2%; left: 32.5%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
  .hero:has(#theme-ribbon:checked) .frame-bow { display: block }
  .hero:has(#theme-gallery:checked) .strip-front::after { content: ""; position: absolute; inset: 0.8%; border: 1px solid currentColor; opacity: .4; pointer-events: none }
  .hero:has(#theme-gallery:checked) .strip-front .shot { border-radius: 6px }
}
@layer responsive {
  @media(max-width:760px) {
    .hero .frame-picker { width: 100%; max-width: 380px; justify-self: center; padding: 20px; margin-top: 10px }
    .frame-picker legend { text-align: left }
  }
}
@layer components { .swatch-color.paper { background: #FFFDF7 } .hero:has(#frame-paper:checked) .strip-front { background: #FFFDF7; color: #252620 } }
@layer components { .swatch-color.midnight { background: #20211F } .hero:has(#frame-midnight:checked) .strip-front { background: #20211F; color: #fffdf7 } }
@layer components { .swatch-color.cherry { background: #A72D3D } .hero:has(#frame-cherry:checked) .strip-front { background: #A72D3D; color: #fffdf7 } }
@layer components { .swatch-color.cobalt { background: #244CB4 } .hero:has(#frame-cobalt:checked) .strip-front { background: #244CB4; color: #fffdf7 } }
@layer components { .swatch-color.blush { background: #EBC7CE } .hero:has(#frame-blush:checked) .strip-front { background: #EBC7CE; color: #252620 } }
@layer components { .swatch-color.butter { background: #EFE1A2 } .hero:has(#frame-butter:checked) .strip-front { background: #EFE1A2; color: #252620 } }
@layer components { .swatch-color.sage { background: #C3CEB8 } .hero:has(#frame-sage:checked) .strip-front { background: #C3CEB8; color: #252620 } }
@layer components { .swatch-color.sky { background: #BED5E6 } .hero:has(#frame-sky:checked) .strip-front { background: #BED5E6; color: #252620 } }
@layer components { .swatch-color.lilac { background: #D1C7E5 } .hero:has(#frame-lilac:checked) .strip-front { background: #D1C7E5; color: #252620 } }
@layer components { .swatch-color.peach { background: #EAC6AF } .hero:has(#frame-peach:checked) .strip-front { background: #EAC6AF; color: #252620 } }
@layer components { .swatch-color.cocoa { background: #684C40 } .hero:has(#frame-cocoa:checked) .strip-front { background: #684C40; color: #fffdf7 } }
@layer components { .swatch-color.forest { background: #304E42 } .hero:has(#frame-forest:checked) .strip-front { background: #304E42; color: #fffdf7 } }

@layer components {
  .brand { font-family: var(--serif); font-weight: 500; font-size: 2rem; letter-spacing: -.035em }
  h1, h2 { font-optical-sizing: auto; letter-spacing: -.035em }
  html[lang="ko"] h1, html[lang="ko"] h2 { font-weight: 500; letter-spacing: -.03em }
  .site-footer > p { font-family: var(--serif) }
}
@layer responsive {
  @media(max-width:760px) { .brand { font-size: 1.75rem } html[lang="ko"] .hero h1 { letter-spacing: -.03em } }
}

@layer components {
  .giving-note { margin-top: 36px; padding-block: 24px; border-block: 1px solid #ffffff40 }
  .giving-note h3 { font: inherit; font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em }
  .giving-note p { color: #c4c5ba; font-size: .875rem; margin-top: 8px }
  .giving-note a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; text-decoration: underline; margin-top: 4px }
}