/* Food Flavor bridge to the shared index color and language typography system.
 * Layout, spacing and motion stay in the page component styles.
 */
@font-face {
  font-family: "Chiron Sung HK Home";
  src: url("../fonts/chiron-sung-hk/chiron-sung-hk-food-flavor-500.woff2?v=928d780f0f09") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* Licensed static Web fonts. Existing family alias retained for compatibility. */
@font-face {
  font-family: "Serim Test Tiempos Headline";
  src: url("../fonts/tiempos-headline/tiempos-headline-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Serim Test Tiempos Headline";
  src: url("../fonts/tiempos-headline/tiempos-headline-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

body.flavor-page {
  /* Shared index typography policy: UCity for Latin, Pretendard for Korean. */
  --vf-font-korean: "Serim Product Sans";
  --serim-font-body: var(--vf-font-sans);
  --serim-font-editorial: "Chiron Sung HK Home", "Noto Serif CJK KR", "Nanum Myeongjo", serif;
  --serim-font-editorial-weight: 500;

  /* Shared index text roles on light surfaces. */
  --fc-ink: var(--serim-text-primary);
  --fc-muted: var(--serim-text-weak);
  --fc-heading: var(--serim-text-primary);
  --fc-body: var(--serim-text-secondary);
  --fc-focus: var(--serim-text-link-focus-soft);
  --fc-link-focus: var(--serim-text-link-focus-strong);
  color: var(--serim-text-primary);
  font-family: var(--serim-font-body);
}

/* Use the same local font outlines without hiding navigation text while loading.
 * The product subset covers the catalog and the shared header/footer together.
 */
body.vf-font-rendering.flavor-page .vfr-site-nav[data-vfr-surface="full-width"] {
  --vfr-font-sans: var(--vf-font-sans);
  --vfr-font-nav: var(--vf-font-sans);
}

html:lang(en) body.flavor-page {
  --serim-font-editorial: "Serim Test Tiempos Headline", Georgia, "Times New Roman", serif;
  --serim-font-editorial-weight: 400;
}

html[lang="en"] body.flavor-page .fc-explorer .fc-explorer-heading-trigger {
  letter-spacing: -0.02em;
}

html[lang="en"] body.flavor-page .fc-explorer-intro .serim-product-intro__contact {
  margin-inline-start: 4px;
}

@media (max-width: 767px) {
  html[lang="ko"] body.flavor-page .fc-explorer-intro .serim-product-intro__contact {
    margin-inline-start: 6px;
  }
}

@media (min-width: 768px) {
  html[lang="en"] body.flavor-page :is(.serim-hero-intro-lg, .serim-hero-title) {
    --serim-hero-intro-lg-title-tracking: -0.01em;
  }
}

body.flavor-page .fc-main--immersive > .fc-library.fc-wrap.fc-explorer {
  --fc-explorer-ink: var(--serim-text-primary);
  --fc-explorer-muted: var(--serim-text-weak);
  --fc-explorer-quiet: var(--serim-text-weak);
  color: var(--serim-text-primary);
}

body.flavor-page .fc-dialog[data-fc-dialog-layout="editorial"] {
  --fc-panel-ink: var(--serim-text-primary);
  --fc-panel-muted: var(--serim-text-weak);
}

/* Mark the opened catalog item without shifting the list's text alignment. */
body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-flavor-row.is-match {
  margin-inline: 0;
  padding-inline: 0;
  background: transparent;
  border-bottom-color: var(--serim-text-link-focus-strong);
  border-radius: 0;
}

body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-flavor-row.is-match > .fc-flavor-name {
  min-width: 0;
}

body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-flavor-row.is-match::after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-inline-start: auto;
  background-color: var(--serim-text-link-focus-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.36328 10.9313C5.16855 11.221 7.16555 12.2724 8.71136 14.1599C9.46281 12.2144 11.8997 7.82674 15.6357 5.83984' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.36328 10.9313C5.16855 11.221 7.16555 12.2724 8.71136 14.1599C9.46281 12.2144 11.8997 7.82674 15.6357 5.83984' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Reference metadata: a category pill followed by the unboxed item count. */
body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading > .fc-list-heading {
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading > .fc-list-heading {
    margin-bottom: 1rem;
  }
}

body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading #fc-panel-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 26px;
  padding: 0 11px;
  border-radius: 40px;
  background: #dedcd9;
  color: rgb(25 24 24 / 50%);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 500ms cubic-bezier(.19, 1, .22, 1), color 500ms cubic-bezier(.19, 1, .22, 1);
}

body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading #fc-panel-count {
  color: rgb(25 24 24 / 50%);
  font-size: 13px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading #fc-panel-count {
    font-size: 14px;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading > .fc-list-heading:hover #fc-panel-category {
    background: rgb(255 44 107 / 25%);
    color: #ff2c6b;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading #fc-panel-category {
    transition: none;
  }
}

/* Product catalog titles share one responsive scale in Korean and English.
 * Keep equipment dialogs on their existing typography.
 */
body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading h2 {
  font-size: 28px;
}

body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading h2 > .fc-panel-title-en {
  margin-top: 4px;
}

html[lang="ko"] body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-title-en {
  letter-spacing: -0.04em;
}

@media (min-width: 810px) {
  body.flavor-page .fc-dialog.fc-dialog--reference[data-fc-dialog-layout="editorial"] .fc-panel-heading h2 {
    font-size: 40px;
  }
}

/* Index editorial rule: Korean Chiron 500 / English Tiempos 400. */
body.flavor-page :is(
  .fc-explorer-intro h2:not(:where(.serim-hero-title)),
  .fc-contact--video h2,
  .page-header h1,
  .content-section h2
) {
  font-family: var(--serim-font-editorial);
  font-weight: var(--serim-font-editorial-weight);
  font-variation-settings: "wght" var(--serim-font-editorial-weight);
  font-synthesis: none;
}

/* Text roles on the light catalog surface. */
body.flavor-page :is(
  .fc-explorer-row > .fc-explorer-family,
  .fc-explorer-list-heading
) {
  color: var(--serim-text-muted);
  font-weight: 500;
}

body.flavor-page :is(
  .fc-explorer-row-detail-inner > .fc-explorer-english,
  .fc-explorer-empty,
  .fc-explorer-row-context,
  .fc-explorer-search-summary,
  .fc-panel-copy,
  .fc-panel-note
) {
  color: var(--serim-text-secondary);
  font-weight: 500;
}

body.flavor-page :is(
  .fc-explorer-count,
  .fc-explorer-row > .fc-explorer-plus,
  .fc-flavor-name-en
) {
  color: var(--serim-text-weak);
}

body.flavor-page .fc-explorer-search > svg {
  color: var(--serim-text-secondary);
}

body.flavor-page :is(
  .fc-explorer-section-link,
  .fc-explorer-detail-link
) {
  color: var(--serim-text-button);
}

@media (hover: hover) and (pointer: fine) {
  body.flavor-page :is(
    .fc-explorer-section-link,
    .fc-explorer-detail-link
  ):hover {
    color: var(--serim-text-button-hover);
  }
}

body.flavor-page :is(
  .fc-explorer-section-link[aria-current="location"],
  .fc-explorer-section-link.is-active,
  .fc-explorer-heading-trigger:active .fc-explorer-section-title
) {
  color: var(--serim-text-link-focus-strong);
}

body.flavor-page :is(.fc-main, .fc-dialog) :is(button, a, input):focus-visible {
  outline-color: var(--serim-text-link-focus-soft);
}

/* Explicit on-dark roles keep the video CTA independent of color mode. */
body.flavor-page .fc-contact--video {
  color: var(--serim-text-primary-on-dark);
}

body.flavor-page .fc-contact--video h2 {
  color: var(--serim-text-primary-on-dark);
}

body.flavor-page .fc-contact--video p {
  color: var(--serim-text-secondary-on-dark);
}

body.flavor-page .fc-contact--video .fc-contact-link {
  color: var(--serim-text-button);
}

@media (hover: hover) and (pointer: fine) {
  body.flavor-page .fc-contact--video .fc-contact-link:hover {
    color: var(--serim-text-button-hover);
  }
}

body.flavor-page .fc-hero--immersive :is(.fc-hero-title, .fc-hero-dek),
body.flavor-page .fc-contact-playback {
  color: var(--serim-text-primary-on-dark);
}

body.flavor-page .serim-footer {
  --serim-footer-foreground: var(--serim-text-primary);
}