/* Biograph about-page assessment panel, measured 2026-10-20.
   Korean copy uses the site's local Pretendard variable font.
   Close control follows the reference's top-right placement. */
body.flavor-page > .fc-dialog {
  width: 100%;
}

.fc-dialog[data-fc-dialog-layout="editorial"] {
  --fc-panel-ink: #27272c;
  --fc-panel-muted: #686873;
  --fc-panel-inset: 20px;
  background: #fff;
  color: var(--fc-panel-ink);
  font-family: var(--vf-font-sans);
  box-shadow: none;
}

.fc-dialog[data-fc-dialog-layout="editorial"]::backdrop {
  background: rgb(0 0 0 / 0%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.fc-dialog[data-fc-dialog-layout="editorial"].is-open::backdrop {
  background: rgb(0 0 0 / 50%);
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-scroll {
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: auto;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-hero {
  position: relative;
  height: 280px;
  background: #000;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-close {
  position: absolute;
  top: 20px;
  right: 20px;
  left: auto;
  z-index: 10;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  opacity: 1;
  transition: none;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-close-surface {
  /* Sampled response of the reference spring: stiffness 500, damping 60, mass 1.
     y(t) = 1 - 1.25 exp(-10t) + .25 exp(-50t), sampled every 25 ms. */
  --fc-close-spring: linear(
    0, .098125, .262358, .415421, .541835, .642352, .721226, .782822,
    .830842, .868254, .897395, .92009, .937766, .951532, .962253, .970603,
    .977105, .98217, .986114, .989185, .991578, .993441, .994892, .996022,
    .996902, .997587, .998121, .998536, .99886, .999112, .999309, .999462, 1
  );
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border-radius: 60px;
  background: rgb(255 255 255 / 3%);
  box-shadow: inset 0 0 0 1px #ffffff26;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: scale(1);
  transition: background-color 800ms var(--fc-close-spring), transform 800ms var(--fc-close-spring);
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-close:active .fc-close-surface {
  background: rgb(255 255 255 / 10%);
  transform: scale(.97);
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-nav {
  position: absolute;
  left: var(--fc-panel-inset);
  bottom: 28px;
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  width: fit-content;
  margin: 0;
  padding: 0;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-nav button {
  /* Reference arrow spring: bounce .2, duration .4 s, sampled every 20 ms. */
  --fc-panel-nav-spring: linear(
    0, .079388, .248595, .437546, .609318, .748367, .851763,
    .923134, .968790, .995449, 1.009077, 1.014426, 1.014985,
    1.013133, 1.010368, 1.007552, 1.005109, 1.003195, 1.001810,
    1.000879, 1
  );
  display: grid;
  place-items: center;
  flex: 0 0 41px;
  width: 41px;
  height: 41px;
  min-height: 41px;
  padding: 0;
  border: 0;
  border-radius: 60px;
  background: #fff;
  color: var(--fc-panel-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: scale(1);
  transition: background-color 400ms var(--fc-panel-nav-spring), color 200ms ease, box-shadow 200ms ease, transform 400ms var(--fc-panel-nav-spring);
}

/* Keep the frosted surface intact; mute only the unavailable arrow. */
.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-nav button:disabled {
  opacity: 1;
  background: rgb(245 246 248 / 68%);
  color: rgb(39 39 44 / 32%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%);
  -webkit-backdrop-filter: blur(10px) saturate(.35);
  backdrop-filter: blur(10px) saturate(.35);
  cursor: default;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-nav button:enabled:active {
  background: #fff;
  transform: scale(.97);
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-nav button[hidden] {
  display: none;
}

.fc-dialog[data-fc-dialog-layout="editorial"] :is(.fc-close, .fc-panel-nav button) svg {
  display: block;
  width: 10px;
  height: 10px;
}

.fc-dialog[data-fc-dialog-layout="editorial"] #fc-next svg {
  transform: rotate(180deg);
}

.fc-dialog[data-fc-dialog-layout="editorial"] :is(.fc-close, .fc-panel-nav button):focus-visible {
  outline: 2px solid #27272c;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-content {
  padding: 32px var(--fc-panel-inset) max(80px, env(safe-area-inset-bottom));
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-heading {
  display: block;
  margin: 0 0 32px;
  padding: 0;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-heading h2 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
  margin: 0;
  color: var(--fc-panel-ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-title-ko {
  flex: 0 0 auto;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-title-en {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 450;
  word-break: normal;
  overflow-wrap: anywhere;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-heading h2.fc-panel-title--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-heading h2.fc-panel-title--stacked > span {
  display: block;
  flex: 0 0 auto;
  width: 100%;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-list-heading {
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  width: 580px;
  max-width: 100%;
  padding-bottom: 12px;
  border-color: rgb(0 0 0 / 6%);
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-list-heading span {
  color: var(--fc-panel-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-list-heading #fc-panel-count {
  color: var(--fc-panel-muted);
  font-size: 14px;
  font-weight: var(--fc-regular-weight, 400);
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-list {
  width: 580px;
  max-width: 100%;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-row {
  gap: 16px;
  min-height: 44px;
  padding: 0 12px;
  color: #686873;
  border-bottom: 1px solid rgb(0 0 0 / 5%);
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-row::before {
  background: #5c72ff;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-names {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-name,
.fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-name-en {
  font-weight: var(--fc-regular-weight, 400);
  font-size: 15px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-flavor-name-en {
  word-break: normal;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-note {
  background: #f9f9f9;
  color: var(--fc-panel-muted);
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-bottom {
  margin-top: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}

.fc-dialog[data-fc-dialog-layout="editorial"] .fc-inquiry {
  background: var(--fc-panel-ink);
  color: #fff;
}

@media (min-width: 810px) {
  .fc-dialog[data-fc-dialog-layout="editorial"] {
    --fc-panel-inset: 30px;
  }

}

@media (min-width: 1200px) {
  body.flavor-page > .fc-dialog {
    width: 750px;
  }

  .fc-dialog[data-fc-dialog-layout="editorial"] {
    --fc-panel-inset: 40px;
  }

  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-nav button {
    background: rgb(255 255 255 / 80%);
  }

}

@media (hover: hover) {
  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-panel-nav button:enabled:hover {
    background: #fff;
  }

  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-close:hover .fc-close-surface {
    background: rgb(255 255 255 / 10%);
  }

  .fc-dialog[data-fc-dialog-layout="editorial"] .fc-inquiry:hover {
    background: #111214;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-dialog[data-fc-dialog-layout="editorial"] :is(.fc-close-surface, .fc-panel-nav button) {
    transition: none;
  }
}