:root {
  --ink: #171c25;
  --muted: #69717d;
  --surface: #f7f8fa;
  --line: #dce1e6;
  --yellow: #ffb800;
  --yellow-dark: #e2a100;
  --hero-bg: #fff9ef;
  --white: #fff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: "Noto Sans KR", sans-serif;
  line-height: 1.65;
  word-break: keep-all;
}

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

.container { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }

.hero { min-height: 650px; overflow: hidden; background: var(--hero-bg); }

.hero__inner { position: relative; min-height: 650px; }

.site-header { display: flex; align-items: center; padding-top: 32px; }

.brand { display: inline-flex; align-items: center; line-height: 1; }
.brand img { display: block; width: 128px; height: auto; }
.header-link { font-size: 14px; font-weight: 600; }

.hero__copy { position: relative; z-index: 1; padding: 128px 0 122px; }
.eyebrow { margin: 0 0 15px; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; }
.hero h1, h2, h3 { margin: 0; letter-spacing: -0.055em; }
.hero h1 { max-width: 680px; font-size: clamp(42px, 5vw, 68px); line-height: 1.2; }
.hero__summary { margin: 26px 0 34px; font-size: 20px; font-weight: 500; line-height: 1.65; }

.button { display: inline-flex; align-items: center; min-height: 54px; padding: 0 23px; border: 1px solid var(--ink); font-size: 15px; font-weight: 700; transition: background 180ms ease, color 180ms ease; }
.button--primary { color: var(--white); background: var(--ink); }
.button--primary:hover { color: var(--ink); background: transparent; }

.hero__illustration { position: absolute; right: 20px; bottom: 0; width: 470px; height: 480px; overflow: hidden; pointer-events: none; }
.hero__illustration img { display: block; width: 650px; max-width: none; filter: brightness(1.2); mix-blend-mode: multiply; transform: translate(-92px, -12px); }

.situations, .how-it-works, .sharing, .faq { padding: 60px 0; background: var(--white); }
.section-heading { margin-bottom: 30px; }
.section-heading > p { margin: 14px 0 0; color: var(--muted); font-size: 17px; }
h2 { font-size: clamp(27px, 2.8vw, 36px); line-height: 1.4; }
.situations, .how-it-works, .sharing, .faq { color: #31314d; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin: 0; padding: 0; list-style: none; }
.steps li { padding: 4px 0; }
.step-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 14px; background: #fff4d9; }
.step-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.steps h3 { font-size: 20px; line-height: 1.5; }
.steps p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.sharing { background: #fffaf2; }
.sharing__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.sharing__copy > p { margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
.sharing__copy .sharing__note { max-width: 350px; color: #31314d; font-size: 16px; }
.sharing__note strong { font-weight: 400; }
.hand-highlight { padding-bottom: 3px; background-image: linear-gradient(rgba(255, 179, 0, .48), rgba(255, 179, 0, .48)); background-repeat: no-repeat; background-position: left bottom 2px; background-size: 100% 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.app-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; gap: 32px; margin-top: 36px; }
.screen-shot { margin: 0; min-width: 0; }
.app-screen-crop { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid #e4e1dc; border-radius: 18px; background: #fffbfe; }
.app-screen-crop img { display: block; width: 100%; height: auto; }
.screen-shot--app { container-type: inline-size; }
.app-screen-crop--top { height: calc(100cqw * 4 / 3 + 12px); aspect-ratio: auto; border-radius: 18px 18px 0 0; }
.app-screen-crop--bottom { height: calc(100cqw * 4 / 3 + 12px); aspect-ratio: auto; border-radius: 0 0 18px 18px; }
.app-screen-crop--bottom img { position: absolute; bottom: 0; left: 0; }
.screen-shot--web picture { display: block; overflow: hidden; border: 1px solid #e4e1dc; border-radius: 18px; }
.screen-shot--web img { display: block; width: 100%; height: auto; }
.screen-shot figcaption { margin-top: 10px; text-align: center; color: var(--muted); font-size: 13px; }
.download-cta { padding: 56px 0; text-align: center; color: #31314d; background: var(--white); }
.download-cta__label { margin: 0 0 12px; color: #9a6900; font-size: 14px; font-weight: 600; }
.download-cta__summary { margin: 18px 0 24px; color: var(--muted); font-size: 16px; }
.download-cta .download-cta__stores { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.situations-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; margin: 0; padding: 0; list-style: none; }
.situations-list li { display: flex; align-items: center; gap: 16px; }
.situation-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 14px; color: #fff; background: #D97862; }
.situation-icon svg { width: 25px; height: 25px; fill: currentColor; stroke: none; }
.situations-list h3 { font-size: 20px; line-height: 1.5; }
.situations-list p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.situations-control { margin-top: 32px; padding-top: 24px; border-top: 1px solid #eadfcd; }
.situations-control h3 { font-size: 20px; line-height: 1.5; }
.situations-control p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.how-it-works { background: #fffaf2; }
.sharing { background: #fff; }
.store-links { display: flex; gap: 10px; }
.store-link { display: inline-flex; align-items: center; width: 150px; transition: opacity 180ms ease; }
.store-link:hover { opacity: 0.78; }
.store-link img { display: block; width: 100%; height: auto; }
.hero__store-links { margin-top: 36px; }

.faq { background: #fffaf2; }
.faq-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.faq-item { padding-top: 18px; border-top: 1px solid #eadfcd; }
.faq-item h3 { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.6; }
.faq-icon { display: inline-flex; flex: 0 0 24px; margin-top: 2px; color: #D97862; }
.faq-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.faq-item p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.site-footer { color: #fff; background: #31314D; }
.site-footer__inner { padding: 28px 0; }
.footer-brands { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-bottom: 24px; }
.footer-brands a { display: inline-flex; align-items: center; }
.footer-brands img { display: block; height: auto; }
.footer-brands__mygo { width: 96px; }
.footer-brands .footer-brands__dntk { width: auto; height: 42px; padding: 4px; background: #fff; border-radius: 0; }
.footer-brands__divider { width: 1px; height: 22px; background: #d8d8e0; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.footer-links a { font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.footer-links a:hover { color: #fff; }
.site-footer__copyright { margin: 18px 0 0; color: #fff; font-size: 11px; }

@media (min-width: 761px) and (max-width: 1000px) {
  .steps { gap: 24px; }
  .sharing__inner { gap: 32px; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 40px, 560px); }
  .hero, .hero__inner { min-height: 700px; }
  .site-header { padding-top: 25px; }
  .hero__copy { padding: 115px 0 96px; }
  .hero h1 { font-size: clamp(39px, 11vw, 52px); }
  .hero__summary { font-size: 17px; }
  .hero__illustration { right: -45px; bottom: -65px; width: 270px; height: 300px; opacity: 1; }
  .hero__illustration img { width: 400px; transform: translate(-66px, -4px); }
  .situations, .how-it-works, .sharing, .faq { padding: 40px 0; }
  .section-heading { margin-bottom: 24px; }
  .section-heading > p { font-size: 15px; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps li { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; padding: 0; }
  .step-icon { grid-row: 1 / 3; margin: 0; }
  .steps h3 { font-size: 18px; }
  .steps p { grid-column: 2; margin-top: 6px; font-size: 14px; }
  .sharing__inner { grid-template-columns: 1fr; gap: 26px; }
  .sharing__copy > p { margin-top: 16px; font-size: 15px; }
  .app-screens { gap: 14px; margin-top: 28px; }
  .screen-shot--web picture { border-radius: 12px; }
  .app-screen-crop--top { border-radius: 12px 12px 0 0; }
  .app-screen-crop--bottom { border-radius: 0 0 12px 12px; }
  .screen-shot--web { width: min(100%, 320px); margin-inline: auto; }
  .download-cta { padding: 40px 0; }
  .download-cta__summary { font-size: 15px; }
  .download-cta__stores .store-link { width: min(150px, calc((100% - 10px) / 2)); }
  .situations-list { grid-template-columns: 1fr; gap: 24px; }
  .situations-list li { gap: 14px; }
  .situations-list h3, .situations-control h3 { font-size: 18px; }
  .situations-list p, .situations-control p { font-size: 14px; }
  .faq-list { grid-template-columns: 1fr; gap: 20px; }
  .footer-links { gap: 12px 20px; }
  .store-links { flex-direction: column; gap: 0; }
  .hero__store-links .store-link + .store-link { margin-top: -7px; }
  .hero__store-links { margin-top: 32px; }
  .store-link { min-height: 58px; }
}