/* YURIU typography — shared role scale.
   Existing class names are retained so page structure does not change.
   The variables below are the single source of truth for responsive type. */
/* Every page: never let wide decorations widen the page on phones (see
   hero-story-transition.css for why hidden is the root fallback). */
html {
  overflow-x: hidden;
  /* Use the same gutter width on About and product pages; a page-specific
     scrollbar otherwise changes the available width of identical cards. */
  scrollbar-width: thin;
  scrollbar-color: var(--y-palette-slate) var(--y-color-surface-default);
}
@supports (overflow: clip) { html { overflow-x: clip; } }

:root {
  /* Shared YURIU foundations: names match the Figma variable WEB syntax. */
  --y-font-sans: "Pretendard", sans-serif;
  --y-font-serif: "Playfair", serif;
  --y-palette-brand-blue: #0b328b;
  --y-palette-deep-blue: #082566;
  --y-palette-slate: #4c5b78;
  --y-palette-muted: #6b7487;
  --y-palette-line: #dce2ee;
  --y-palette-ink: #202737;
  --y-palette-sky: #dae4f4;
  --y-palette-mist: #f3f6fb;
  --y-palette-white: #ffffff;
  --y-palette-black: #000000;
  --y-color-text-primary: var(--y-palette-ink);
  --y-color-text-secondary: var(--y-palette-muted);
  --y-color-text-accent: var(--y-palette-brand-blue);
  --y-color-text-on-dark: var(--y-palette-white);
  --y-color-text-about: var(--y-palette-slate);
  --y-color-text-about-accent: var(--y-palette-deep-blue);
  --y-color-surface-warm: #faf7ef;
  --y-color-surface-default: var(--y-palette-white);
  --y-color-surface-soft: var(--y-palette-mist);
  --y-color-surface-blue: var(--y-palette-sky);
  --y-color-surface-muted: var(--y-palette-muted);
  --y-color-surface-slate: var(--y-palette-slate);
  --y-color-surface-line: var(--y-palette-line);
  --y-color-surface-brand: var(--y-palette-brand-blue);
  --y-color-surface-ink: var(--y-palette-ink);
  --y-color-border-subtle: var(--y-palette-line);
  --y-color-border-muted: var(--y-palette-muted);
  --y-color-border-slate: var(--y-palette-slate);
  --y-color-border-about-accent: var(--y-palette-deep-blue);
  --y-color-border-blue: var(--y-palette-sky);
  --y-space-4: 4px;
  --y-space-8: 8px;
  --y-space-12: 12px;
  --y-space-16: 16px;
  --y-space-20: 20px;
  --y-space-24: 24px;
  --y-space-32: 32px;
  --y-space-40: 40px;
  --y-space-48: 48px;
  --y-space-64: 64px;
  --y-space-72: 72px;
  --y-space-80: 80px;
  --y-space-96: 96px;
  --y-space-124: 124px;
  --y-layout-gutter-desktop: 144px;
  --y-layout-gutter-tablet: 40px;
  --y-layout-gutter-mobile: 24px;
  --y-layout-section-max: 124px;
  --y-layout-section-min: 64px;
  /* Shared page rhythm. Full-bleed imagery may opt out of the gutter only. */
  /* 144px at 1920, easing continuously to 40px at 1024; phones retain 24px. */
  --y-layout-page-gutter: clamp(var(--y-layout-gutter-tablet), calc(-78.857143px + 11.607143vw), var(--y-layout-gutter-desktop));
  --y-layout-section-space: clamp(80px, 6.458333vw, 124px);
  /* 32px on desktop, easing to 24px between 1024px and 768px (no step). */
  --y-layout-heading-copy-gap: clamp(var(--y-space-24), 3.125vw, var(--y-space-32));
  --type-display: clamp(104px, calc(32px + 5vw), 128px);
  --type-section: clamp(56px, calc(32px + 1.6667vw), 64px);
  --type-feature: clamp(44px, calc(32px + .8333vw), 48px);
  --type-editorial: clamp(36px, calc(24px + .8333vw), 40px);
  --type-card: clamp(28px, calc(16px + .8333vw), 32px);
  --type-caption: clamp(24px, calc(12px + .8333vw), 28px);
  --type-body: clamp(17px, calc(14px + .2083vw), 18px);
  --type-support: clamp(15px, calc(12px + .2083vw), 16px);
  --type-meta: clamp(13px, calc(10px + .2083vw), 14px);
  --type-fine: 12px;
}

@media (max-width: 1440px) {
  :root {
    --type-display: clamp(88px, calc(48.615px + 3.8462vw), 104px);
    --type-section: clamp(48px, calc(28.308px + 1.9231vw), 56px);
    --type-feature: clamp(40px, calc(30.154px + .9615vw), 44px);
    --type-editorial: clamp(32px, calc(22.154px + .9615vw), 36px);
    --type-card: clamp(24px, calc(14.154px + .9615vw), 28px);
    --type-caption: clamp(22px, calc(17.077px + .4808vw), 24px);
    --type-body: clamp(16px, calc(13.538px + .2404vw), 17px);
    --type-support: clamp(14px, calc(11.538px + .2404vw), 15px);
    --type-meta: 13px;
    --type-fine: clamp(11px, calc(8.538px + .2404vw), 12px);
  }
}

@media (max-width: 1024px) {
  :root {
    --y-layout-page-gutter: clamp(24px, calc(15.325px + 2.40964vw), 40px);
    --y-layout-section-space: clamp(64px, calc(55.325px + 2.40964vw), 80px);
    --type-display: clamp(64px, calc(-8px + 9.375vw), 88px);
    --type-section: clamp(40px, calc(16px + 3.125vw), 48px);
    --type-feature: clamp(32px, calc(8px + 3.125vw), 40px);
    --type-editorial: clamp(28px, calc(16px + 1.5625vw), 32px);
    --type-card: clamp(21px, calc(12px + 1.1719vw), 24px);
    --type-caption: clamp(20px, calc(14px + .7813vw), 22px);
    --type-body: clamp(15px, calc(12px + .3906vw), 16px);
    --type-support: clamp(13px, calc(10px + .3906vw), 14px);
    --type-meta: clamp(12px, calc(9px + .3906vw), 13px);
    --type-fine: 11px;
  }
}

@media (max-width: 768px) {
  :root {
    --type-display: clamp(54px, calc(33.032px + 4.0323vw), 64px);
    --type-section: clamp(34px, calc(21.419px + 2.4194vw), 40px);
    --type-feature: clamp(28px, calc(19.613px + 1.6129vw), 32px);
    --type-editorial: clamp(26px, calc(21.806px + .8065vw), 28px);
    --type-card: clamp(19px, calc(14.806px + .8065vw), 21px);
    --type-caption: clamp(18px, calc(13.806px + .8065vw), 20px);
    --type-body: clamp(14px, calc(11.903px + .4032vw), 15px);
    /* Readable floor: supporting copy stays 13px, labels 12px, below 768px. */
    --type-support: 13px;
    --type-meta: 12px;
    --type-fine: clamp(10px, calc(7.903px + .4032vw), 11px);
  }
}

@media (max-width: 520px) {
  :root {
    --type-display: clamp(46px, calc(28px + 5vw), 54px);
    --type-section: clamp(30px, calc(21px + 2.5vw), 34px);
    --type-feature: clamp(26px, calc(21.5px + 1.25vw), 28px);
    --type-editorial: clamp(24px, calc(19.5px + 1.25vw), 26px);
    --type-card: clamp(18px, calc(15.75px + .625vw), 19px);
    --type-caption: clamp(17px, calc(14.75px + .625vw), 18px);
    --type-body: 14px;
    --type-fine: 10px;
  }
}

/* Registered Figma Playfair styles share opsz=12 and wdth=100.
   Keep weight/style in each existing role: do not force wght globally.
   Explicit optical sizing prevents viewport-dependent glyph-shape changes. */
#yuriu-site :is(
  .contents_title_xxxlarge,
  .contents_title_xxlarge,
  .contents_title_large_italic,
  .contents_title_small_playitalic,
  .contents_title_xxlarge_playitalic,
  .contents_article_small,
  .product_txt p,
  .y_find_more .y_product_name_en,
  .figma_quote_text,
  .figma_quote_text cite,
  .about_hero_title,
  .about_hero_kicker,
  .phillosophy_copy h2,
  .fomular_intro h2,
  .value_intro h2,
  .promise_title_wrap p,
  .promise_editorial,
  .promise_readable_editorial,
  .contact_page_intro h1,
  .certifications_hero_copy h1,
  .curx_hero_title
) {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 12, "wdth" 100;
}

/* Display: hero titles and proof numerals. */
#yuriu-site .contents_title_xxxlarge {
  font-family: "Playfair", serif;
  font-size: var(--type-display);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -2px;
  font-synthesis: none;
}

/* Section title: the shared hierarchy anchor across different compositions. */
#yuriu-site .contents_title_xxlarge {
  font-family: "Playfair", serif;
  font-size: var(--type-section);
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.05em;
  font-synthesis: none;
}

/* Feature title: large Korean or functional editorial heading. */
#yuriu-site .contents_title_xlarge_reg {
  font-family: "Pretendard", sans-serif;
  font-size: var(--type-feature);
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

/* Editorial accent: reserved for short Playfair italic statements. */
#yuriu-site .contents_title_large_italic {
  font-family: "Playfair", serif;
  font-size: var(--type-editorial);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -2px;
  font-synthesis: none;
}

/* Card title. */
#yuriu-site .contents_title_medium {
  font-family: "Pretendard", sans-serif;
  font-size: var(--type-card);
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

#yuriu-site .contents_title_small_playitalic {
  font-family: "Playfair", serif;
  font-size: var(--type-caption);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-synthesis: none;
}

/* Body copy. Light and Regular share size and rhythm; weight conveys emphasis. */
#yuriu-site .contents_article_medium_l,
#yuriu-site .contents_article_medium_r,
#yuriu-site .contents_article_medium_r_relaxed {
  font-family: "Pretendard", sans-serif;
  font-size: var(--type-body);
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#yuriu-site .contents_article_medium_l { font-weight: 300; }
#yuriu-site .contents_article_medium_r,
#yuriu-site .contents_article_medium_r_relaxed { font-weight: 400; }
#yuriu-site .contents_article_medium_r_relaxed { line-height: 1.5; }

/* A typography role owns nested language spans and paragraphs. */
#yuriu-site :is(.contents_article_medium_l, .contents_article_medium_r, .contents_article_medium_r_relaxed) :is(p, span) {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-synthesis: inherit;
}

/* Product English name and short supporting copy. */
#yuriu-site .contents_article_small {
  font-family: "Playfair", serif;
  font-size: var(--type-support);
  font-style: normal;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
  font-optical-sizing: auto;
  font-synthesis: none;
}

/* One bilingual product-name pattern for home, All Products, line cards and
   About. Individual sections own the photo layout, never the name scale. */
#yuriu-site .y_product_name {
  display: flex;
  width: 100%;
  margin: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--y-space-4);
  color: var(--y-color-text-primary);
  text-align: center;
}
#yuriu-site .y_product_name_ko {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--y-color-text-primary);
  font-family: var(--y-font-sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#yuriu-site .y_product_name_en {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--y-color-text-secondary);
  font-family: var(--y-font-sans);
  font-size: var(--type-meta);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* Labels and legal notes. */
#yuriu-site .contents_article_xsmall_l {
  font-family: "Pretendard", sans-serif;
  font-size: var(--type-meta);
  font-style: normal;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0;
}

#yuriu-site .contents_article_xxsmall {
  font-family: "Pretendard", sans-serif;
  font-size: var(--type-fine);
  font-style: normal;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
}

/* One retained brand-story variant; it follows the section-title scale. */
#yuriu-site .contents_title_xxlarge_playitalic {
  font-family: "Playfair", serif;
  font-size: var(--type-section);
  font-style: italic;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.035em;
  font-synthesis: none;
}

/* Text roles share one safe wrapping contract. This prevents copy from
   crossing media columns while preserving authored line breaks. */
#yuriu-site :is(
  .contents_title_xxxlarge,
  .contents_title_xxlarge,
  .contents_title_xlarge_reg,
  .contents_title_large_italic,
  .contents_title_medium,
  .contents_title_small_playitalic,
  .contents_article_medium_l,
  .contents_article_medium_r,
  .contents_article_medium_r_relaxed,
  .contents_article_small,
  .contents_article_xsmall_l,
  .contents_article_xxsmall,
  .contents_title_xxlarge_playitalic
) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

html[lang="ko"] #yuriu-site :is(
  .contents_title_xlarge_reg,
  .contents_title_medium,
  .contents_article_medium_l,
  .contents_article_medium_r,
  .contents_article_medium_r_relaxed,
  .contents_article_xsmall_l
) {
  word-break: keep-all;
}

@media (max-width: 1024px) {
  #yuriu-site :is(
    .contents_title_xxxlarge,
    .contents_title_xxlarge,
    .contents_title_xlarge_reg,
    .contents_title_large_italic,
    .contents_title_medium,
    .contents_title_small_playitalic,
    .contents_article_medium_l,
    .contents_article_medium_r,
    .contents_article_medium_r_relaxed
  ) {
    white-space: normal;
  }
}

/* Shared copy wrapping for every page and every language. Keep Korean word
   groups together; let English/Russian wrap at normal word boundaries, with
   an emergency break only for a token wider than its available column. */
body.yuriu_renew_page {
  overflow-wrap: anywhere;
}

body.yuriu_renew_page :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dd, dt, a, button, label) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

html[lang="ko"] body.yuriu_renew_page :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dd, dt, a, button, label) {
  word-break: keep-all;
}

html:is([lang="en"], [lang="ru"]) body.yuriu_renew_page :is(p, div, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, dd, dt, a, button, label) {
  word-break: normal;
}

/* Authored story lines remain separate blocks, but a longer translation may
   occupy more than one visual line instead of escaping its text column. */
body.yuriu_renew_page .about_body_lines .i18n-line {
  white-space: normal;
}

/* Shared front-view packshot calibration. Keep the card stage fixed and
   compensate for each square photo's different amount of white space.
   Ampoule and serum packages should read at the same apparent height;
   toner remains taller, and the cream is no longer oversized. */
#yuriu-site img.product_photo_ai {
  --packshot-scale: 1;
  transform: scale(calc(var(--packshot-scale) * var(--packshot-context-scale, 1)));
  /* Smaller bottles shrink toward the shared bottom baseline, not mid-air. */
  transform-origin: center bottom;
}
#yuriu-site img.product_photo_ai[src$="product_ai_dadeumi.png"] { --packshot-scale: 1; }
#yuriu-site img.product_photo_ai[src$="product_ai_chewoomy.png"] { --packshot-scale: .76; }
#yuriu-site img.product_photo_ai[src$="product_ai_bodumi.png"] { --packshot-scale: .80; }
#yuriu-site img.product_photo_ai[src$="product_ai_bosongi.png"] { --packshot-scale: .81; }
#yuriu-site img.product_photo_ai[src$="product_ai_jikimi.png"] { --packshot-scale: .83; }
#yuriu-site img.product_photo_ai[src$="product_ai_311_spot.png"] { --packshot-scale: .92; }

/* FIND MORE: one component, based on the author's Figma About section
   (975:1637). Pages may change product IDs, never alignment or spacing. */
#yuriu-site .y_find_more {
  --y-find-more-heading-gap: 30px;
  --y-find-more-content-gap: clamp(var(--y-space-48), 4.375vw, 84px);
  --packshot-context-scale: .85;
  --find-more-gap: clamp(var(--y-space-20), 2.5vw, var(--y-space-40));
  --find-more-card: calc((100% - var(--find-more-gap) * 4) / 5);
  display: flex;
  width: 100%;
  padding: var(--y-layout-section-space) var(--y-layout-page-gutter);
  flex-direction: column;
  align-items: stretch;
  gap: var(--y-find-more-content-gap);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--y-color-surface-default);
  color: var(--y-color-text-primary);
}
#yuriu-site .y_find_more_header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--y-find-more-heading-gap);
  margin: 0;
  text-align: left;
}
#yuriu-site .y_find_more_header h2 { margin: 0; color: var(--y-color-text-accent); line-height: 1.3; }
#yuriu-site .y_find_more_header p { margin: 0; color: var(--y-color-text-primary); line-height: 1.3; }
#yuriu-site .y_find_more_carousel {
  position: relative;
  display: flex;
  width: 100%;
  gap: var(--find-more-gap);
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#yuriu-site .y_find_more_carousel::-webkit-scrollbar { display: none; }
#yuriu-site .y_find_more_card {
  display: flex;
  flex: 0 0 var(--find-more-card);
  width: var(--find-more-card);
  min-width: 0;
  flex-direction: column;
  gap: var(--y-space-24);
  color: inherit;
  text-decoration: none;
  text-align: center;
  -webkit-user-drag: none;
}
#yuriu-site .y_find_more_visual { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--y-color-surface-default); }
#yuriu-site .y_find_more_visual img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
#yuriu-site .y_find_more .y_product_name { min-height: clamp(56px, 3.6458vw, 70px); }
#yuriu-site .y_find_more .y_product_name_ko { font-weight: 300; }
#yuriu-site .y_find_more .y_product_name_en { font-family: "Playfair", serif; font-size: var(--type-support); font-weight: 300; line-height: 1.2; color: var(--y-color-text-primary); }
#yuriu-site .y_find_more_carousel:focus-visible,
#yuriu-site .y_find_more_card:focus-visible { outline: 2px solid var(--y-color-text-accent); outline-offset: -2px; }
@media (max-width: 768px), (hover: none) {
  #yuriu-site .y_find_more {
    --y-find-more-heading-gap: var(--y-space-24);
    --y-find-more-content-gap: var(--y-space-48);
    --find-more-gap: var(--y-space-16);
    --find-more-card: calc((100% - var(--find-more-gap) * 2) / 2.3);
  }
  #yuriu-site .y_find_more_carousel { touch-action: auto; scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; }
  #yuriu-site .y_find_more_card { gap: var(--y-space-12); }
}

#yuriu-site :is(.home_best_product_card, .products_card, .catalog_product_card):is(:hover, :focus-visible) img.product_photo_ai {
  transform: translateY(-6px) scale(calc(var(--packshot-scale) * var(--packshot-context-scale, 1)));
}