#wedding {
  background: var(--paper);
  color: var(--ink);
}

#wedding .wedding-content {
  width: min(100%, 48rem);
  min-width: 0;
  margin-inline: auto;
  align-self: center;
  padding: clamp(54px, 6vw, 100px) clamp(28px, 5vw, 84px);
  font-family: var(--korean);
  word-break: keep-all;
}

#wedding .wedding-title { margin: 0 0 clamp(20px, 2.6vw, 40px); }
#wedding .wedding-title .display {
  display: block;
  font-size: clamp(46px, 5.5vw, 94px);
  line-height: .98;
}
.wedding-title-ko {
  display: block;
  margin-top: 17px;
  font: 400 clamp(22px, 1.8vw, 30px)/1.5 var(--korean);
  letter-spacing: -.055em;
}

#wedding .benefit-list details { border: 0; }
#wedding .benefit-list summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 12px 0;
  font: 400 clamp(19px, 1.6vw, 25px)/1.55 var(--korean);
  letter-spacing: -.05em;
}
#wedding .benefit-list summary::after {
  content: '';
  flex: 0 0 12px;
  height: 12px;
  align-self: center;
  background: linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat;
}
#wedding .benefit-list details[open] summary::after { background-size: 12px 1px, 1px 0; }
#wedding .benefit-list details > div { padding: 3px 1.75rem 20px 0; }
#wedding .benefit-list p, #wedding .benefit-items, #wedding .benefit-note {
  color: #514b46;
  font: 400 clamp(16px, 1.12vw, 18px)/1.8 var(--korean);
  letter-spacing: -.035em;
  margin: 0;
  overflow-wrap: anywhere;
}
#wedding .benefit-items { display: grid; row-gap: 7px; }
#wedding .benefit-items > div { display: grid; grid-template-columns: 2.7em 1fr; align-items: baseline; gap: 12px; }
#wedding .benefit-items dt { color: #675e54; }
#wedding .benefit-items dd { margin: 0; }
#wedding .benefit-list strong { font: inherit; color: var(--ink); }
#wedding .benefit-note { margin-top: 22px; }
@media (max-width: 650px) {
  #wedding .wedding-content { padding: 48px max(22px, 6vw) 54px; }
  #wedding .wedding-title .display { font-size: clamp(43px, 11.7vw, 63px); }
  #wedding .benefit-list details > div { padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #wedding .benefit-list details > div { animation: none; }
}
