/* HOME — Figma 636:558, canonical visual layer.
   Existing motion scripts and their structural hooks remain unchanged. */

.yuriu_renew_page {
  --home-blue: var(--y-color-text-accent);
  --home-gray: var(--y-color-text-secondary);
  --home-pale: var(--y-color-border-subtle);
  --home-ink: var(--y-color-text-primary);
  --home-sky: var(--y-color-surface-blue);
  --home-hero: var(--y-color-surface-soft);
  --home-gutter: var(--y-layout-page-gutter);
  background: #fff;
  color: var(--home-ink);
}

.yuriu_renew_page main { width: 100%; }

/* Keep the existing opening sequence contained while the page assets settle. */
.site_intro {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--y-palette-mist);
  transform: translate3d(0, 0, 0);
  transition: transform 760ms cubic-bezier(.16,1,.3,1);
}
.site_intro_inner,
.site_intro_mark {
  position: relative;
  width: 138px;
  height: 64px;
  overflow: hidden;
}
.site_intro_mark {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 520ms ease, transform 780ms cubic-bezier(.16,1,.3,1);
}
.site_intro_mark img {
  position: absolute;
  top: -55.51%;
  left: 0;
  width: 100%;
  height: 211.86%;
  max-width: none;
}
.site_intro.is_playing .site_intro_mark { opacity: 1; transform: translate3d(0,0,0); }
.site_intro.is_leaving { transform: translate3d(0,-100%,0); }
html.intro_running,
html.intro_running body { overflow: hidden; }

/* main_hero — Figma 931:817. The user-supplied group photograph is the
   single full-bleed image; keep the existing title-to-story motion hook. */
.main_hero.main_hero_633 {
  position: relative;
  width: 100%;
  height: min(950px, 49.479167vw);
  min-height: 700px;
  overflow: hidden;
  background: var(--home-hero);
}

.main_hero_633 .main_hero_visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.main_hero_633 .main_hero_scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.main_hero_633 .main_hero_visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 56.455%, rgba(0, 0, 0, .2));
}

.main_hero_633 .main_hero_txt {
  position: absolute;
  z-index: 4;
  top: 17.473684%;
  left: min(3.385417vw, 65px);
  right: 0;
  display: flex;
  width: min(637px, calc(100% - var(--home-gutter) * 2));
  max-width: none;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: var(--y-color-text-on-dark);
  text-align: center;
  /* A transform here becomes the containing block for the fixed morph title,
     shifting its viewport-based motion coordinates off screen. */
  transform: none;
}

#yuriu-site .main_hero_txt .hero_morph_title {
  color: var(--y-color-text-on-dark);
  line-height: 1.2;
  letter-spacing: -2px;
  font-variation-settings: "opsz" 12, "wdth" 100;
  text-shadow: 2px 2px 3.5px #c1b5a7;
}

.main_hero_633 .main_hero_description {
  width: 100%;
  color: var(--y-color-text-on-dark);
  font-family: "Pretendard", sans-serif;
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: balance;
}

/* Brand_Story — 636:579. The tall outer section remains the existing scroll stage. */
.brand_story {
  background: #fff;
}

.brand_story::before,
.brand_story::after { background: #fff; }

.brand_story_container {
  height: min(993px, 100vh);
  min-height: 700px;
  padding: var(--y-layout-section-space) var(--home-gutter);
  background: #fff;
  color: var(--home-blue);
}

.brand_story_text_wrap {
  flex: 0 0 min(46.041667vw, 884px);
  width: min(46.041667vw, 884px);
  height: 745px;
  max-height: 100%;
}

.brand_story_lead {
  color: var(--story-idle);
  /* Typography comes from contents_title_xlarge_reg; keep the sweep colour only. */
}

.brand_story_detail {
  width: 100%;
  color: var(--home-blue);
}

.story_sweep_char { color: var(--story-idle); }

.brand_story_media {
  right: auto;
  left: 59.6875%;
  width: 91.875%;
  height: 100%;
}

.brand_story_media img {
  position: absolute;
  top: 0;
  left: -14.49%;
  width: 100%;
  height: 100%;
  max-width: none;
  /* cover, not fill: the photo keeps its ratio at every width. */
  object-fit: cover;
  object-position: center;
}

/* Proof — current Figma 1430:2883: four 370.5 × 541 cards, 50px gutters. */
.proof {
  display: flex;
  width: 100%;
  min-height: 0;
  padding: var(--y-layout-section-space) var(--home-gutter);
  align-items: stretch;
  background: #fff;
}

/* Symmetric section padding; hover never changes this flow geometry. */
.proof_container {
  display: flex;
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--y-layout-section-space);
}

.proof_intro {
  display: flex;
  width: 816px;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--y-space-24);
  text-align: center;
}

.proof_intro h2,
.proof_intro p { margin: 0; }
.proof_intro h2 { color: var(--home-blue); }
.proof_intro p { width: min(739px, 100%); color: var(--home-ink); }

.proof_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-top: 0;
  justify-content: space-between;
  gap: 50px;
}

.proof_card {
  --proof-lift: 0px;
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 604px;
  padding: 31px 0 340px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  color: var(--y-palette-black);
  text-align: left;
  transform: translate3d(0, var(--proof-lift), 0);
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.proof_number,
.proof_text { position: relative; z-index: 1; margin: 0; }
.proof_number { flex: none; margin-bottom: -12px; }
.proof_text { display: flex; width: 100%; flex: none; flex-direction: column; align-items: flex-start; gap: 28px; }
.proof_text h3,
.proof_text p { margin: 0; }

.proof_mark {
  position: absolute;
  z-index: 0;
  object-fit: contain;
  opacity: .6;
  pointer-events: none;
  transform: none;
}

/* Match the 541px authored hover frame, anchored to its bottom. Longer
   translations expand the card above this reserved mark area, not over it. */
.proof_mark_01 { left: 49.9%; bottom: 26.09px; width: 50.17%; height: 250.3px; }
.proof_mark_02 { left: 46.83%; bottom: 49.11px; width: 53.14%; height: 206.39px; }
.proof_mark_03 { left: 44.85%; bottom: 50.01px; width: 55.39%; height: 205.24px; }
.proof_mark_04 { left: 57.11%; bottom: 73.27px; width: 42.93%; height: 159.09px; }
.proof_card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--y-color-text-accent);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.proof_card:hover .proof_mark,
.proof_card:focus-visible .proof_mark { opacity: .6; }
.proof_card:hover::after,
.proof_card:focus-visible::after { opacity: 1; transform: scaleX(1); }
.proof_card:focus-visible { --proof-lift: -8px; outline: none; }
.proof_card:focus-visible::after { height: 2px; }
@media (hover: hover) and (pointer: fine) {
  .proof_card:hover { --proof-lift: -8px; }
}

/* Cream feature section shares the legacy .sensitive hook. */
.sensitive { width: 100%; background: var(--home-sky); }

/* Quote footer — 636:630 */
.figma_quote_section {
  position: relative;
  display: flex;
  width: 100%;
  height: 527px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

.figma_quote_comp { position: relative; width: 100%; height: 100%; }
.figma_quote_text { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; color: var(--home-blue); font-family: "Playfair", serif; font-size: var(--type-editorial); font-style:italic; font-weight: 400; line-height: 1.2; letter-spacing: -2px; text-align: center; white-space: nowrap; transform: translate(-50%, -50%); }
.figma_quote_text p { margin: 0; }
.figma_quote_text cite { margin-top: 27px; font-family: "Playfair", serif; font-size: var(--type-caption); font-style: italic; font-weight: 300; line-height: 1.3; }
.figma_quote_mark { position: absolute; display: block; width: 73px; height: 51.755px; }
.figma_quote_mark_left { top: 158px; left: calc(72px + 378px); transform: rotate(180deg); }
.figma_quote_mark_right { top: 225px; left: calc(72px + 1325px); transform: none; }

@media (min-width: 1025px) and (max-width: 1600px) {
  .figma_quote_text { width: calc(100% - 320px); white-space: normal; }
  .figma_quote_mark_left { left: var(--home-gutter); }
  .figma_quote_mark_right { right: var(--home-gutter); left: auto; }
}

@media (max-width: 1399px) {
  /* Keep long Korean/translated headings clear of the lower mark area. */
  .proof { min-height: 0; }
  .proof_container { min-height: 0; gap: var(--y-space-64); }
  .proof_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .proof_card { height: auto; min-height: 500px; padding-bottom: 264px; }
  .proof_mark_01,
  .proof_mark_02,
  .proof_mark_03,
  .proof_mark_04 { top: auto; bottom: 32px; height: 190px; }
  .proof_mark_01 { height: 220px; }
  .proof_mark_04 { height: 155px; }
}

@media (max-width: 1024px) {
  .main_hero.main_hero_633 { height: 720px; min-height: 0; }
  .main_hero_633 .main_hero_txt { top: 17.473684%; }
  .brand_story_text_wrap { flex-basis: 60%; width: 60%; }
  .brand_story_media { left: 64%; width: 86%; }
  .figma_quote_section { height: 420px; }
  .figma_quote_text { width: calc(100% - 180px); white-space: normal; }
  .figma_quote_mark { width: 52px; height: auto; }
  .figma_quote_mark_left { top: 30%; left: 32px; }
  .figma_quote_mark_right { top: 46%; right: 32px; left: auto; }
}

@media (max-width: 768px) {
  /* The photo remains full bleed; keep its title near the bottom as in the
     desktop frame, leaving the shared navigation clear at the top. */
  .main_hero.main_hero_633 { height: clamp(540px, 100svh, 1100px); }
  .main_hero_633 .main_hero_scene { object-position: 50% center; }
  .main_hero_633 .main_hero_txt { left: 0; top: 18%; width: calc(100% - (var(--home-gutter) * 2)); }
  .brand_story_container { min-height: 100svh; height: auto; }
  .brand_story_text_wrap { flex: 0 0 100%; width: 100%; height: auto; }
  .brand_story_lead { width: 82%; }
  .brand_story_detail { width: 78%; }
  /* Tablet & phone: the photo becomes a soft full-bleed background. */
  .brand_story_media { display: block; left: 0; width: 100%; opacity: .22; }
  .brand_story_media img { left: 0; }
  .figma_quote_section { height: 360px; }
  .figma_quote_text { width: calc(100% - 100px); }
  .figma_quote_mark { width: 28px; }
  .figma_quote_mark_left { left: 16px; }
  .figma_quote_mark_right { right: 16px; }
}

@media (max-width: 520px) {
  .main_hero_633 .main_hero_txt { top: 18%; }
  .brand_story_lead { width: 100%; }
  .brand_story_detail { width: 100%; }
  .proof_grid { grid-template-columns: 1fr; }
  .proof_card { min-height: 470px; }
  .figma_quote_section { height: 340px; }
  /* Marks are hidden here, so the quote can use the full gutter width. */
  .figma_quote_text { width: calc(100% - (var(--home-gutter) * 2)); text-wrap: balance; }
  .figma_quote_mark { display: none; }
}

/* Preserve the approved compact-desktop behavior on short laptop screens. */
@media (min-width: 1025px) and (max-height: 850px) {
  .main_hero.main_hero_633 { height: 100vh; min-height: 680px; }
  .brand_story_container { height: 100vh; min-height: 680px; }
  .brand_story_text_wrap { height: 100%; }
  .figma_quote_section { height: 430px; }
}

@media (min-width: 769px) and (max-height: 850px) {
  .brand_story_container { padding-block: 40px; }
  .brand_story_text_wrap { gap: 18px; }
}

@media (min-width: 1025px) and (max-width: 1500px) and (min-height: 851px) and (max-height: 950px) {
  .brand_story_container { padding-block: 64px; }
  .brand_story_text_wrap { height: auto; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .proof_card { --proof-lift: 0px !important; transition: none; }
  .proof_mark,
  .proof_card::after,
  .site_intro,
  .site_intro_mark { transition: none; }
  .site_intro { display: none; }
}

/* 2026-11-10 / Figma 1595:4067: left intro + horizontally browsable cards. */
.proof { overflow: hidden; }
.proof_container { flex-direction: row; align-items: flex-start; gap: var(--y-space-124); min-width: 0; }
.proof_intro { flex: 0 0 clamp(300px,22.239583vw,427px); align-items: flex-start; text-align: left; }
.proof_intro .i18n-line { display: block; }
.proof_rail { flex: 1; min-width: 0; margin: -12px calc(-1 * var(--home-gutter)) -12px -24px; padding: 12px var(--home-gutter) 12px 24px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: 24px; touch-action: pan-x pan-y pinch-zoom; }
.proof_rail::-webkit-scrollbar { display: none; }
.proof_rail:focus-visible { outline: 2px solid var(--y-color-text-accent); outline-offset: 4px; }
.proof_grid { display: flex; width: max-content; justify-content: flex-start; gap: var(--y-space-40); }
.proof_card { flex: 0 0 422px; width: 422px; height: 422px; min-height: 422px; padding: 32px 25.5px; align-items: center; justify-content: center; border-radius: var(--y-space-40); background: var(--y-color-surface-warm); color: var(--y-color-text-accent); text-align: center; scroll-snap-align: start; transition: background-color .42s ease, color .42s ease, transform .42s cubic-bezier(.22,1,.36,1); }
.proof_mark_slot { position: relative; flex: none; width: 170px; height: 194px; margin-bottom: -38px; overflow: hidden; }
.proof_mark { position: static; display: block; width: 100%; height: 100%; opacity: 1; object-fit: contain; transform: none; }
.proof_mark_01 { position: absolute; left: 50%; top: 0; bottom: auto; width: 154.475px; height: 208px; transform: translateX(-50%); }
.proof_mark_slot:has(.proof_mark_01) { width: 125px; }
.proof_mark_01 { left: -11.39%; top: -7.22%; width: 123.58%; height: 107.22%; transform: none; }
.proof_card .proof_number { margin: 0 0 -.28125em; }
.proof_card_heading { width: min(100%,260px); }
.proof_card .proof_text { align-items: center; gap: 34px; }
#yuriu-site .proof_card :is(.proof_number,h3,.proof_text > p) { color: inherit; }
.proof_card .proof_mark_02, .proof_card .proof_mark_03 { width: 158px; height: 158px; margin: 18px auto; }
.proof_card .proof_mark_04 { width: 150px; height: 150px; margin: 22px auto; }
.proof_card:hover, .proof_card:focus-visible { background: var(--y-color-surface-brand); color: var(--y-color-text-on-dark); }
.proof_card:hover .proof_mark, .proof_card:focus-visible .proof_mark { opacity: 1; }
.proof_card::after { background: currentColor; }
@media (max-width: 1100px) {
  .proof_container { flex-direction: column; gap: var(--y-space-40); }
  .proof_intro { flex: none; width: min(100%,816px); }
  .proof_rail { flex: none; width: calc(100% + 2 * var(--home-gutter)); margin-inline: calc(-1 * var(--home-gutter)); padding-inline: var(--home-gutter); scroll-padding-left: var(--home-gutter); }
}
@media (max-width: 520px) {
  .proof_card { flex-basis: 322px; width: 322px; height: 422px; min-height: 422px; padding-inline: 24px; }
  .proof_grid { gap: var(--y-space-24); }
}
@media (prefers-reduced-motion: reduce) { .proof_card { transition: none; } }