body.match-mode {
  background: #f5f2f1;
  color: #25212a;
  color-scheme: light;
}
body.match-mode #app {
  max-width: 440px;
  background: #fff;
  min-height: 100svh;
}
.match-page {
  min-height: 100svh;
  background:
    radial-gradient(ellipse 80% 380px at 40% 0, #fae8edaa, transparent),
    radial-gradient(ellipse 80% 320px at 100% 0, #fff4d6aa, transparent), #fff;
  padding: 0 16px 32px;
  color: #25212a;
  font-family: "Pretendard Variable", sans-serif;
  letter-spacing: -0.2px;
}
.match-page button,
.match-page input {
  font-family: inherit;
}
.match-top {
  height: 64px;
  display: flex;
  align-items: center;
  position: relative;
}
.match-top > button {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: none;
  color: #625b61;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}
.match-top > button span {
  font-size: 30px;
  font-weight: 350;
  line-height: 1;
}
.match-top h1 {
  position: absolute;
  left: 55px;
  right: 55px;
  text-align: center;
  font-size: 16px;
  font-weight: 650;
  margin: 0;
  pointer-events: none;
}
.input-page form > h1,
.match-question {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  margin: 10px 0 18px;
}
.match-field {
  margin-bottom: 15px;
}
.match-field > label,
.match-gender legend {
  display: block;
  font-size: 13px;
  font-weight: 550;
  margin: 0 0 8px;
  padding: 0;
}
.match-field input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  height: 52px;
  border: 1px solid #e7e3e5;
  background: #fffc;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  color: #25212a;
  box-shadow: 0 2px 2px #2b182605;
  outline-offset: 3px;
}
.match-field input::placeholder {
  color: #969097;
}
.match-birth {
  display: flex;
  border: 1px solid #e7e3e5;
  border-radius: 8px;
  background: #ffffff91;
  align-items: center;
  overflow: hidden;
}
.match-birth input:not([type="checkbox"]) {
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.calendar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-right: 1px solid #ece7e9;
  background: none;
  min-width: 80px;
  height: 36px;
  color: #3e343c;
  font-size: 12px;
}
.calendar-toggle span {
  font-size: 21px;
}
.match-time {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 52px;
}
.unknown-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  width: 74px;
  flex-shrink: 0;
  border: 1px solid #e7e3e5;
  border-radius: 8px;
  background: #ffffffc9;
  font-size: 13px;
  cursor: pointer;
}
.unknown-box input {
  accent-color: #b86475;
  width: 16px;
  height: 16px;
  margin: 0;
}
.hour-minute {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
  font-size: 14px;
}
.hour-minute[hidden] {
  display: none;
}
.hour-minute input {
  flex: 1;
  min-width: 0;
}
.match-gender {
  padding: 0;
  border: 0;
  margin: 0 0 14px;
}
.match-gender > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.match-gender button {
  height: 52px;
  background: #fffc;
  border: 1px solid #e7e3e5;
  border-radius: 8px;
  color: #302b30;
  font-size: 14px;
  box-shadow: 0 2px 2px #2b182605;
}
.match-gender button[aria-pressed="true"] {
  background: #f6e9ee;
  border-color: #e5c5d0;
  color: #8e405c;
}
.match-primary {
  height: 50px;
  width: 100%;
  border-radius: 8px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #422d38;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  padding: 0 14px;
  cursor: pointer;
}
.match-primary:disabled {
  background: #f0edf0;
  color: #aaa2aa;
  cursor: default;
  opacity: 1;
}
.cover-footer .match-primary {
  height: 60px;
  background: #b86475;
  font-size: 18px;
  border-radius: 11px;
}
.match-error {
  color: #a2455d;
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 10px;
}
.match-error:empty {
  display: none;
}
.relation-list {
  display: grid;
  gap: 15px;
  margin: 28px 0 24px;
}
.relation-list button,
.mood-list button {
  width: 100%;
  min-height: 58px;
  border: 1px solid #e7e3e5;
  border-radius: 8px;
  padding: 13px 16px;
  background: #ffffffdc;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 17px;
  box-shadow: 0 2px 2px #2b182605;
  font-size: 14px;
  line-height: 1.6;
  color: #39313b;
  word-break: keep-all;
}
.relation-list button[aria-pressed="true"],
.mood-list button[aria-pressed="true"] {
  border-color: #b86475;
  background: #fcf0f4;
  box-shadow: 0 0 0 1px #b8647540;
}
.relation-icon {
  width: 22px;
  color: #bd6988;
  font-size: 24px;
  text-align: center;
  line-height: 1;
}
.relation-caption {
  text-align: center;
  margin: 11px 0 12px;
  font-size: 13px;
  color: #91838c;
}
.mood-title {
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 650;
  margin: 0;
}
.mood-symbol {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin: 26px auto 24px;
  background: radial-gradient(circle, #f9c8d8, #f4e8ef00 72%);
  font:
    70px "Noto Serif KR",
    serif;
  color: #bd6285;
  filter: drop-shadow(0 6px 10px #e2b0c050);
}
.mood-list {
  display: grid;
  gap: 16px;
  margin: 0 0 40px;
}
.match-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.match-loading h1 {
  font-size: 23px;
  line-height: 1.7;
  font-weight: 650;
}
.match-loading p {
  font-size: 13px;
  color: #8d7b85;
}
.red-thread {
  font:
    90px "Noto Serif KR",
    serif;
  color: #b86475;
}
.match-loader {
  display: flex;
  gap: 8px;
  margin: 30px;
}
.match-loader i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bc7d95;
  animation: match-pulse 1s infinite;
}
.match-loader i:nth-child(2) {
  animation-delay: 0.2s;
}
.match-loader i:nth-child(3) {
  animation-delay: 0.4s;
}
.reveal-page {
  text-align: center;
  background: #fff;
  padding-top: 36px;
}
.reveal-page h1 {
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.reveal-page > p {
  font-size: 14px;
  color: #6d616c;
}
.reveal-button {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 60px 0 40px;
}
.reveal-orb {
  width: 154px;
  height: 154px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, #dbadc9, #8f597d 62%, #4e344c);
  border-radius: 50%;
  box-shadow:
    0 0 60px #e3c4de99,
    inset 0 0 25px #fff3;
  position: relative;
}
.reveal-orb:after {
  content: "";
  width: 100px;
  height: 22px;
  background: linear-gradient(#996f8a, #d7b2cb);
  border-radius: 50% 50% 8px 8px;
  position: absolute;
  bottom: -10px;
}
.reveal-orb > span {
  font:
    55px "Noto Serif KR",
    serif;
  color: #fff4e5;
}
.reveal-touch {
  font-size: 48px;
  margin-top: 52px;
  color: #b67b94;
  animation: match-pulse 1.4s infinite;
}
.reveal-page > small {
  font-size: 10px;
  color: #a3969f;
}
.result-page {
  padding: 0 0 90px;
  background: #fff;
}
.result-page .match-top {
  position: sticky;
  top: 0;
  z-index: 8;
  background: #fffdfbf5;
  border-bottom: 1px solid #f1e8eb;
  height: 54px;
  padding: 0 16px;
}
.match-score {
  padding: 32px 24px 20px;
  background: linear-gradient(120deg, #fcecf6, #fff8df 55%, #fff);
}
.match-score h2 {
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 18px;
}
.total-score {
  text-align: center;
  display: block;
  font-size: 43px;
  font-weight: 750;
  letter-spacing: -2px;
  color: #392b38;
}
.total-score span {
  font-size: 22px;
  letter-spacing: 0;
  margin-left: 3px;
}
.score-note {
  text-align: center;
  font-size: 11px;
  color: #9c7e8d;
  line-height: 1.6;
  margin: 16px 0 30px;
}
.match-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.match-person {
  background: #fff;
  border: 1px solid #ece3e8;
  border-radius: 20px;
  box-shadow: 0 2px 2px #2a142510;
  text-align: center;
  overflow: hidden;
  padding-bottom: 20px;
}
.person-art {
  height: 155px;
  overflow: hidden;
  position: relative;
  background: #f9eeeb;
}
.person-art img {
  position: absolute;
  width: 200%;
  max-width: none;
  height: auto;
  left: 0;
  top: -40px;
}
.person-art.woman img {
  left: -100%;
  top: -85px;
}
.match-person h3 {
  font-size: 16px;
  margin: 14px 5px 10px;
}
.match-person p {
  font-size: 11px;
  color: #7d727a;
  margin: 0 4px 9px;
  line-height: 1.8;
}
.match-person small {
  font-size: 10px;
  color: #a0949e;
}
.score-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  padding: 28px 0 8px;
}
.score-categories strong {
  display: block;
  font-size: 22px;
  color: #8a6c7b;
  margin-bottom: 9px;
}
.score-categories span {
  font-size: 12px;
  color: #6e5e69;
}
.match-context {
  padding: 20px 16px 35px;
}
.match-context h2 {
  font-size: 13px;
  margin: 0 0 12px;
  line-height: 1.7;
}
.match-context > div {
  border: 1px solid #eee7eb;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
}
.match-context span {
  font-size: 11px;
  color: #ac647f;
}
.match-context p {
  font-size: 17px;
  line-height: 1.8;
  font-weight: 550;
  margin: 14px 0;
  word-break: keep-all;
}
.match-context small {
  font-size: 11px;
  line-height: 1.7;
  color: #95848f;
}
.match-offer {
  text-align: center;
  padding: 48px 24px;
  background: #faf7f8;
}
.offer-mark {
  font-size: 65px;
  color: #cb7c99;
  margin: 0 0 10px;
}
.match-offer > small {
  font-size: 10px;
  letter-spacing: 1.8px;
  color: #ae6e89;
}
.match-offer h2 {
  font-size: 23px;
  line-height: 1.7;
  letter-spacing: -0.8px;
  margin: 22px 0;
}
.match-offer ul {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 25px 0 32px;
}
.match-offer li {
  font-size: 14px;
  line-height: 1.8;
  padding: 10px 0;
  border-bottom: 1px solid #e9e0e5;
}
.match-offer li:before {
  content: "✓";
  color: #b86475;
  margin-right: 10px;
}
.match-offer .match-primary,
.report-locked .match-primary,
.match-sticky .match-primary,
.result-bottom .match-primary {
  background: #b86475;
}
.integration-note {
  font-size: 11px;
  line-height: 1.8;
  color: #97808d;
  margin: 16px 0 0;
}
.report-heading {
  text-align: center;
  padding: 50px 20px 22px;
}
.report-heading small {
  font-size: 11px;
  color: #b86475;
}
.report-heading h2 {
  font-size: 26px;
  line-height: 1.6;
  margin: 18px 0;
}
.report-story {
  padding: 16px 16px 38px;
}
.report-story > img {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 14px;
}
.report-story h3 {
  font-size: 21px;
  line-height: 1.6;
  margin: 22px 0 12px;
}
.report-story > p {
  font-size: 15px;
  line-height: 1.8;
  margin: 10px 0;
  word-break: keep-all;
}
.report-story .report-description {
  font-size: 13px;
  color: #7a6874;
}
.report-locked {
  margin-top: 25px;
  border: 1px solid #eee3e9;
  border-radius: 12px;
  padding: 22px;
  background: #fffafd;
}
.blur-lines {
  display: grid;
  gap: 12px;
  filter: blur(4px);
  opacity: 0.3;
  margin-bottom: 24px;
}
.blur-lines i {
  height: 7px;
  background: #8e7a88;
  border-radius: 4px;
}
.blur-lines i:nth-child(2) {
  width: 85%;
}
.blur-lines i:last-child {
  width: 68%;
}
.report-locked > span {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #a27a8e;
  margin: 20px 0;
}
.report-locked .match-primary {
  font-size: 13px;
}
.match-sticky {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  padding: 15px 20px max(15px, env(safe-area-inset-bottom));
  background: #fffc;
  backdrop-filter: blur(12px);
  border-top: 1px solid #f4e7ed;
  z-index: 9;
}
.match-sticky button {
  border-radius: 999px;
  font-size: 16px;
  box-shadow: 0 4px 14px #b864752b;
}
.result-bottom {
  padding: 10px 20px 35px;
}
.match-checkout {
  color-scheme: light;
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 440px;
  max-height: 90dvh;
  overflow: auto;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: #fff;
  color: #302833;
  padding: 34px 20px 25px;
  font-family: "Pretendard Variable", sans-serif;
}
.match-checkout::backdrop {
  background: #0007;
}
.checkout-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  color: #a1949e;
  font-size: 25px;
}
.match-checkout h2 {
  font-size: 20px;
  margin: 0 0 8px;
}
.match-checkout > p:not(.integration-note) {
  font-size: 13px;
  color: #9a8794;
  line-height: 1.7;
  margin-bottom: 35px;
}
.checkout-product {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  border: 2px solid #b86475;
  border-radius: 13px;
  padding: 16px 12px;
  font-size: 12px;
}
.checkout-product > span:first-child {
  color: #b86475;
  font-size: 22px;
}
.checkout-product > span:last-child {
  margin-left: auto;
  color: #9d7e8e;
  font-size: 11px;
}
.match-checkout dl {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 23px 0;
  border-bottom: 1px solid #f0e6eb;
}
.match-checkout dd {
  margin: 0;
  color: #b86475;
}
.match-checkout .integration-note {
  margin-bottom: 24px;
}
.checkout-example {
  padding-top: 80px;
}
.match-page button:focus-visible,
.match-page input:focus-visible {
  outline: 2px solid #b86475;
  outline-offset: 3px;
}
@keyframes match-pulse {
  50% {
    opacity: 0.35;
    transform: translateY(-4px);
  }
}
@media (max-width: 350px) {
  .match-top {
    height: 56px;
  }
  .match-field input:not([type="checkbox"]) {
    font-size: 13px;
  }
  .hour-minute {
    gap: 5px;
  }
  .match-time {
    gap: 5px;
  }
  .unknown-box {
    width: 64px;
  }
  .calendar-toggle {
    min-width: 70px;
  }
  .person-art {
    height: 130px;
  }
  .person-art img {
    top: -30px;
  }
  .person-art.woman img {
    top: -65px;
  }
  .match-person p {
    font-size: 10px;
  }
  .match-context p {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .match-loader i,
  .reveal-touch {
    animation: none;
  }
}