:root {
  font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  color: #241619;
  background: #fff9f5;
  font-synthesis: none;
  --coral: #ef404a;
  --pink: #f2728c;
  --peach: #f79552;
  --brand-gradient: linear-gradient(115deg, var(--coral), var(--pink) 52%, var(--peach));
  --muted: #6e5156;
  --line: #eadbd6;
  --gutter: clamp(16px, 4.5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { word-break: keep-all; }
a:focus-visible { outline: 3px solid #8b1c35; outline-offset: 5px; }
.shell { width: min(100% - var(--gutter) * 2, 1200px); margin-inline: auto; }
.skip-link { position: absolute; inset: 12px auto auto 12px; padding: 12px; background: white; translate: 0 -180%; z-index: 3; }
.skip-link:focus { translate: none; }
section[id], footer[id] { scroll-margin-top: 28px; }

.site-header {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -0.065em;
}
.wordmark > span:last-child { color: #a33b51; }
.brand-mark {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 48% 48% 48% 19%;
  rotate: -10deg;
  background: var(--brand-gradient);
  box-shadow: inset 0 0 0 1px #a7273920;
}
.site-header nav { display: flex; align-items: center; gap: clamp(15px, 3vw, 38px); }
.site-header nav a { text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.site-header nav a:hover, .footer-links a:hover { color: #9c263c; text-decoration: underline; text-underline-offset: 5px; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 492px;
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  align-items: center;
  gap: 24px;
  padding: clamp(34px, 6vw, 84px);
  border-radius: clamp(24px, 3.2vw, 44px);
  background: var(--brand-gradient);
}
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, #fff3ed 1%, #fff0e8f2 22%, #ffede6be 41%, #ffebde39 67%, transparent 90%),
    url("coral-wave.webp") center / cover;
}
.hero-copy { position: relative; z-index: 1; }
.hero-brand { margin-bottom: 17px; color: #89283c; font-size: 15px; font-weight: 850; letter-spacing: 0.04em; }
.hero h1 { font-size: clamp(49px, 6.3vw, 88px); line-height: 1.06; letter-spacing: -0.087em; }
.hero-description { margin-top: 24px; color: #573740; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.75; word-break: keep-all; }
.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 50px;
  margin-top: 28px;
  padding: 0 20px;
  border-radius: 12px;
  background: #2f1922;
  color: #fff9f5;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}
.primary-link:hover { background: #56253a; }
.primary-link span { font-size: 19px; }
.hero-art { position: relative; width: min(100%, 420px); aspect-ratio: 1.1; justify-self: end; }
.art-orbit {
  position: absolute;
  inset: 11% 2%;
  border: 1px solid #fff1df9c;
  border-radius: 50%;
  rotate: -29deg;
  box-shadow: 0 0 0 25px #fff6ec1f, inset 0 0 0 20px #fff6ec24;
}
.message-shape {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
  left: 5%;
  top: 12%;
  width: 61%;
  height: 50%;
  border: 1px solid #fff5efcf;
  border-radius: 30% 30% 30% 11%;
  background: linear-gradient(145deg, #fff7f4, #ffd7df 72%, #faadbc);
  rotate: -12deg;
  box-shadow: 0 22px 44px #9d263f35, inset 0 3px 0 #ffffffc9;
}
.message-shape i { width: 8.4%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(140deg, #df3c5e, #f68b9c); }
.camera-shape {
  position: absolute;
  display: grid;
  place-items: center;
  right: 3%;
  bottom: 10%;
  width: 47%;
  aspect-ratio: 1.17;
  border: 1px solid #ffeddabf;
  border-radius: 29%;
  background: linear-gradient(145deg, #fff0d8, #ffb783 76%, #ff9c68);
  rotate: 12deg;
  box-shadow: 0 20px 38px #9d263f36, inset 0 3px 0 #fff8e7bd;
}
.camera-shape i {
  position: relative;
  width: 41%;
  height: 34%;
  margin-right: 10%;
  border-radius: 23%;
  background: #9d3851;
}
.camera-shape i::after {
  position: absolute;
  inset: 12% auto 12% 91%;
  width: 52%;
  border-radius: 5px;
  content: "";
  background: inherit;
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
}

.apps-section { padding-block: clamp(56px, 8vw, 104px) clamp(54px, 7vw, 84px); }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 9px 32px; margin-bottom: 24px; }
.section-heading h2, .account-copy h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.17; letter-spacing: -0.075em; }
.section-heading p, .app-card p, .account-copy p, .site-footer p { color: var(--muted); line-height: 1.68; word-break: keep-all; }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 0; padding: 0; list-style: none; }
.app-card {
  display: grid;
  align-content: start;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 13px 12px;
  min-height: 193px;
  padding: clamp(18px, 2.3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fffdfb;
}
.app-icon { display: block; width: 50px; height: 50px; border-radius: 13px; }
.app-kind { justify-self: end; align-self: start; margin-top: 4px; color: #8c3f50; font-size: 12px; font-weight: 750; text-align: right; }
.app-card h3, .app-card p { grid-column: 1 / -1; }
.app-card h3 { font-size: 23px; letter-spacing: -0.055em; }
.app-card p { margin-top: -7px; font-size: 14px; }

.account-section {
  display: grid;
  grid-template-columns: 1fr minmax(140px, 30%);
  align-items: center;
  gap: 22px;
  overflow: hidden;
  padding: clamp(27px, 5vw, 61px);
  border-radius: 29px;
  background: linear-gradient(118deg, #ffe5e8, #ffe4d7 80%, #ffd7ba);
}
.account-status { display: inline-block; margin-bottom: 14px; padding: 5px 10px; border-radius: 20px; background: #fff7f4; color: #8c2942; font-size: 12px; font-weight: 800; }
.account-copy p { max-width: 470px; margin-top: 12px; }
.account-art { position: relative; display: grid; place-items: center; width: min(100%, 255px); height: 150px; justify-self: center; }
.account-ring { position: absolute; width: 80%; height: 68%; border: 1px solid #aa41546b; border-radius: 50%; rotate: -24deg; }
.ring-two { rotate: 24deg; }
.account-person {
  position: relative;
  z-index: 1;
  display: block;
  width: 72px;
  aspect-ratio: 1;
  border-radius: 26px;
  rotate: -9deg;
  background: var(--brand-gradient);
  box-shadow: 0 8px 22px #a12e4350;
}
.account-person::before, .account-person::after { position: absolute; left: 50%; translate: -50%; background: #fff7f2; content: ""; }
.account-person::before { top: 19px; width: 15px; aspect-ratio: 1; border-radius: 50%; }
.account-person::after { top: 38px; width: 29px; height: 15px; border-radius: 14px 14px 6px 6px; }

.site-footer { margin-top: clamp(48px, 7vw, 84px); border-top: 1px solid var(--line); }
.footer-content { width: min(100% - var(--gutter) * 2, 1200px); margin-inline: auto; display: flex; justify-content: space-between; gap: 25px; padding-block: 32px 45px; }
.footer-brand strong { font-size: 22px; letter-spacing: -0.05em; }
.footer-brand p, .footer-links a { margin-top: 6px; font-size: 13px; }
.footer-links { display: grid; align-content: start; justify-items: end; }
.footer-links a { text-underline-offset: 4px; }

@media (max-width: 800px) {
  .hero { min-height: 410px; grid-template-columns: 1.2fr 0.8fr; }
  .hero h1 { font-size: clamp(42px, 7.2vw, 62px); }
  .hero-break { display: none; }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 590px) {
  .site-header { flex-wrap: wrap; min-height: auto; gap: 13px; padding-block: 17px; }
  .site-header nav { justify-content: space-between; width: 100%; max-width: 420px; }
  .site-header nav a { padding-block: 4px; }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 8px; padding: 32px 24px 15px; }
  .hero::before { background: linear-gradient(165deg, #fff3edf5 1%, #fff0e8d6 31%, #ffede690 50%, transparent 82%), url("coral-wave.webp") 55% center / cover; }
  .hero h1 { font-size: clamp(42px, 10.7vw, 59px); }
  .hero-description { margin-top: 16px; }
  .primary-link { margin-top: 20px; }
  .hero-art { width: min(72%, 235px); margin: -17px 0 0 auto; }
  .account-section { grid-template-columns: 1fr; gap: 6px; }
  .account-art { height: 96px; width: 156px; justify-self: end; }
  .account-person { scale: 0.82; }
}

@media (max-width: 385px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-card { min-height: auto; }
  .footer-content { flex-direction: column; }
  .footer-links { justify-items: start; }
}