@font-face {
  font-family: "LeeSeoyun";
  src: url("assets/fonts/LeeSeoyun-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --accent: #4e02ff;
  --about-name-color: #3aa6ff;
}

.figma-stage img {
  pointer-events: none;
}

.fx-home-hit {
  display: block;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
}

.fx-home-hit > * {
  position: absolute;
}

.fx-home-label {
  font-size: 21.951px;
  letter-spacing: 1.7561px;
  transition: color 180ms ease;
}

.fx-home-hit:hover .fx-home-label,
.fx-home-hit:focus-visible .fx-home-label {
  color: var(--accent);
}

.fx-home-hit:hover img,
.fx-home-hit:focus-visible img {
  transform: translateY(-4px);
  transition: transform 180ms ease;
}

.fx-welcome {
  font-family: "Griun Simsimche", cursive;
  font-size: 30px;
  letter-spacing: 2.4px;
}

.fx-tab-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fx-tab-group > * {
  position: absolute;
}

.fx-tab-hit {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: auto;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
}

.fx-tab-icon {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 180ms ease;
}

.fx-tab-group[data-active-tab="photos"] [data-tab="photos"] .fx-tab-icon,
.fx-tab-group[data-active-tab="film"] [data-tab="film"] .fx-tab-icon,
.fx-tab-group[data-active-tab="design"] [data-tab="design"] .fx-tab-icon,
.fx-tab-group[data-active-tab="development"] [data-tab="development"] .fx-tab-icon,
.fx-tab-group[data-active-tab="contact"] [data-tab="contact"] .fx-tab-icon {
  transform: translateY(-4px) scale(1.08);
}

.fx-tab-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Griun Simsimche", cursive;
  font-size: 21.951px;
  letter-spacing: 1.7561px;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
  z-index: 1;
}

.fx-tab-group[data-active-tab="photos"] [data-label="photos"],
.fx-tab-group[data-active-tab="film"] [data-label="film"],
.fx-tab-group[data-active-tab="design"] [data-label="design"],
.fx-tab-group[data-active-tab="development"] [data-label="development"],
.fx-tab-group[data-active-tab="contact"] [data-label="contact"] {
  opacity: 1;
}

/* ---- Scrolling viewport (same technique as the design galleries) ----
   The header stays in the shared 2560x1440 reference canvas and scales
   identically to every other page; the form below it is normal responsive
   layout since it has no Figma pixel spec of its own. */
.fx-gallery-viewport {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  cursor: url("assets/cursor/cursor.png") 32 25, auto;
}

.fx-gallery-sizer {
  position: relative;
  width: 100%;
}

.fx-gallery-viewport .figma-stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2560px;
  height: 220px;
  transform-origin: top center;
}

/* Everything on this page fades/rises in on load, staggered via each
   element's own --delay custom property (set inline in the markup) so the
   whole page reads as one continuous cascade -- About column first (photo
   through the resume sections), then the contact form column. */
.fx-fade-item {
  opacity: 0;
  animation: fx-fade-in-up 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes fx-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-fade-item {
    animation: none;
    opacity: 1;
  }
}

.fx-contact-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 32px 48px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: start;
  gap: 24px 64px;
}

.fx-about-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Photo sits beside the name/bio, not stacked above it -- matches the
   Figma "About" layout exactly (see assets/figma/about/*). */
.fx-about-top {
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

.fx-about-photo-wrap {
  flex: 0 0 auto;
  width: 260px;
}

.fx-about-photo {
  display: block;
  width: 100%;
  height: auto;
}

.fx-about-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 8px;
}

.fx-about-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fx-about-birth {
  margin: 0;
  font-family: "Griun Simsimche", cursive;
  font-size: 21px;
  letter-spacing: 0.5px;
  color: #9a9a9a;
}

/* flex + nowrap-on-the-child so "Young Seop, Yun" wraps to its own new
   line as a whole unit when it doesn't fit next to the Korean name,
   instead of breaking mid-phrase ("Young" / "Seop, Yun") the way plain
   inline text would once the column narrows below the 900px breakpoint. */
.fx-about-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 4px;
  margin: 0;
  font-family: "LeeSeoyun", "Griun Simsimche", cursive;
  font-weight: 400;
  font-size: 88px;
  letter-spacing: 0.5px;
  color: var(--about-name-color);
}

.fx-about-name-kr {
  white-space: nowrap;
}

.fx-about-name-en {
  white-space: nowrap;
  font-family: "LeeSeoyun", "Griun Simsimche", cursive;
  font-size: 27px;
  color: #9a9a9a;
  letter-spacing: 0.3px;
}

.fx-about-bio {
  margin: 0;
  font-family: "LeeSeoyun", "Griun Simsimche", cursive;
  font-size: 25px;
  line-height: 1.55;
  letter-spacing: 0.3px;
  color: #333;
}

/* Two independently-flowing columns, not a synced grid -- in Figma 경력
   (7 items) and 학력사항 (2 items) sit side by side, but 장점/스킬 below them
   each start right after their own column's content ends rather than
   waiting on the taller neighboring column. Both columns stretch to the
   height of the taller one (경력+장점), and space-between pushes each
   column's second section down so its bottom edge lines up with the
   taller column's bottom -- exactly how 스킬's last row lines up with
   장점's last line in Figma, with no manual measuring needed. */
.fx-about-grid {
  display: flex;
  align-items: stretch;
  gap: 28px;
}

.fx-about-col-flow {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.fx-about-section {
  min-width: 0;
}

.fx-about-highlight {
  color: var(--about-name-color);
}

/* Each section label sits over the exact hand-drawn box the labels were
   designed with in Figma (assets/figma/about/box-*.svg) -- sized to that
   asset's own native pixel dimensions rather than a CSS-drawn border, so it
   matches the original artwork exactly instead of an approximation. */
.fx-about-section-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  font-family: "Griun Simsimche", cursive;
  font-weight: 400;
  font-size: 27px;
  letter-spacing: 0.5px;
  color: #242424;
}

.fx-about-section-title img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.fx-about-section-title span {
  position: relative;
  z-index: 1;
}

.fx-about-box-career,
.fx-about-box-skill {
  width: 83px;
  height: 51px;
}

.fx-about-box-education {
  width: 132px;
  height: 52px;
}

.fx-about-box-strength {
  width: 88px;
  height: 51px;
}

.fx-about-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Not flex -- a list item's text can contain a highlighted <span> partway
   through (career items), and it needs to keep wrapping as one continuous
   paragraph. The bullet is pulled out of flow instead, the same way the old
   CSS-drawn ::before dot worked, so wrapped lines still hang correctly. */
.fx-about-list li {
  position: relative;
  padding-left: 22px;
  font-family: "LeeSeoyun", "Griun Simsimche", cursive;
  font-size: 25px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: #4a4a4a;
}

/* The exact hand-drawn circle asset used as every list bullet in Figma
   (assets/figma/about/bullet.svg) -- not a CSS-drawn dot. Pulled out of flow
   here so the rest of the <li>'s text can keep wrapping as one paragraph
   (see note above); .fx-fade-item's animation puts a transform on the
   ancestor <section>, which would otherwise become the containing block
   instead of this <li> if the <li> weren't explicitly positioned itself. */
.fx-about-list .fx-about-bullet {
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 12px;
  height: auto;
}

/* In the skill row there's no wrapping paragraph to preserve -- the bullet
   is just a normal flex item sitting inline before the name. */
.fx-about-skill-label .fx-about-bullet {
  flex: 0 0 auto;
  width: 12px;
  height: auto;
}

.fx-about-skill-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* flex-wrap so the stars drop to their own line instead of overlapping a
   long nowrap skill name (e.g. "Illustrator 일러스트레이터") when both don't
   fit on one line -- happens well before the mobile breakpoint. */
.fx-about-skill-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 2px;
  gap: 12px;
}

.fx-about-skill-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.fx-about-skill-name {
  font-family: "LeeSeoyun", "Griun Simsimche", cursive;
  font-size: 25px;
  letter-spacing: 0.2px;
  color: #4a4a4a;
  white-space: nowrap;
}

/* Same hand-drawn star used for every point of a rating (assets/figma/about/star.svg)
   -- the rating is the number of stars actually drawn, there's no separate
   "empty star" asset/state in the original design. */
.fx-about-stars {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.fx-about-stars img {
  display: block;
  width: 23px;
  height: auto;
}

.fx-about-strength {
  margin: 0;
  font-family: "LeeSeoyun", "Griun Simsimche", cursive;
  font-size: 25px;
  line-height: 1.55;
  letter-spacing: 0.2px;
  color: #4a4a4a;
}

.fx-form-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.fx-contact-intro {
  margin: 0;
  font-family: "Griun Simsimche", cursive;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.4px;
  color: #242424;
  text-align: left;
}

.fx-contact-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.fx-contact-hp {
  position: absolute;
  left: -9999px;
}

.fx-contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fx-contact-field label {
  font-family: "Griun Simsimche", cursive;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #242424;
}

.fx-contact-required {
  color: #e0304f;
}

.fx-contact-field input,
.fx-contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: "Griun Simsimche", cursive;
  font-size: 15px;
  color: #242424;
  background: #fff;
  border: 2px solid #242424;
  border-radius: 10px;
  outline: none;
  transition: border-color 160ms ease;
}

.fx-contact-field textarea {
  resize: vertical;
  min-height: 96px;
}

.fx-contact-field input::placeholder,
.fx-contact-field textarea::placeholder {
  color: #9a9a9a;
}

.fx-contact-field input:focus,
.fx-contact-field textarea:focus {
  border-color: var(--accent);
}

.fx-contact-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.fx-contact-submit {
  padding: 14px 36px;
  font-family: "Griun Simsimche", cursive;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
  background: #242424;
  border: 2px solid #242424;
  border-radius: 999px;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.fx-contact-submit:hover,
.fx-contact-submit:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.fx-contact-submit:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.fx-contact-status {
  margin: 0;
  min-height: 20px;
  font-family: "Griun Simsimche", cursive;
  font-size: 14px;
  text-align: center;
  color: #242424;
}

.fx-contact-status.is-error {
  color: #e0304f;
}

.fx-contact-status.is-success {
  color: #2c8a4b;
}

/* Full-width bar spanning below both columns -- sitting it inside just the
   narrower form column (as a stacked block) read oddly, since it's really
   page-level info, not part of the form. */
.fx-contact-studio-bar {
  width: 100%;
  box-sizing: border-box;
  padding: 28px 24px 60px;
  border-top: 2px solid #24242222;
}

.fx-contact-studio {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 28px;
  row-gap: 6px;
}

.fx-contact-studio-name {
  margin: 0;
  font-family: "Griun Simsimche", cursive;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #242424;
}

.fx-contact-studio-line {
  margin: 0;
  font-family: "Griun Simsimche", cursive;
  font-size: 18px;
  letter-spacing: 0.3px;
  color: #6b6b6b;
}

.fx-contact-studio-line a {
  color: #6b6b6b;
  text-decoration: none;
  cursor: url("assets/cursor/cursor-pointer.png") 23 28, pointer;
}

.fx-contact-studio-line a:hover,
.fx-contact-studio-line a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.fx-contact-studio-sep {
  margin: 0 6px;
  color: #c4c4c4;
}

.fx-contact-studio-copyright {
  margin: 0;
  font-family: "Griun Simsimche", cursive;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: #b3b3b3;
}

.fx-contact-mobile-smile {
  display: none;
  width: 40px;
  height: auto;
  margin: 0 auto 12px;
}

/* Two columns need real width to not feel cramped -- collapse to a single
   stacked column (About above the form) well before the site's usual 768px
   mobile switch-over. */
@media (max-width: 900px) {
  .fx-contact-main {
    grid-template-columns: 1fr;
  }

  /* Below this width even the name alone (wrapped onto its own line via the
     base flex-wrap rule) may not fit -- let it wrap internally too instead
     of overflowing horizontally. */
  .fx-about-skill-name {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .fx-about-grid {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .fx-contact-intro {
    font-size: 16px;
  }

  /* A fixed-width photo beside a huge name no longer fits a phone-width
     column -- stack them and scale the name down so it still reads as
     the focal point without overflowing. */
  .fx-about-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .fx-about-photo-wrap {
    width: 200px;
  }

  .fx-about-heading {
    align-items: center;
  }

  .fx-about-name {
    justify-content: center;
    font-size: 56px;
  }

  .fx-about-bio {
    text-align: center;
  }

  /* Below this width the two-column resume layout (already stacked via the
     520px breakpoint) reads as left-skewed if left unset, since every list/
     label here is naturally left-aligned text -- center everything so it
     reads as one tidy centered column instead. */
  .fx-about-col,
  .fx-about-col-flow,
  .fx-about-section {
    text-align: center;
  }

  .fx-about-grid {
    width: 100%;
  }

  .fx-about-section-title {
    margin-left: auto;
    margin-right: auto;
  }

  /* The hanging-indent bullet (absolutely positioned to the left so wrapped
     lines still read as one paragraph) only makes sense for left-aligned
     text -- centered, it needs to sit inline right before the text instead,
     as one centered unit per line. */
  .fx-about-list {
    align-items: center;
  }

  .fx-about-list li {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    padding-left: 0;
    font-size: 17px;
    text-align: left;
  }

  .fx-about-list .fx-about-bullet {
    position: static;
    flex: 0 0 auto;
    margin-top: 0.35em;
  }

  .fx-about-strength {
    font-size: 17px;
  }

  /* Desktop's space-between (name left, stars right) is what read as
     "messy" once flex-wrap kicked in at phone widths -- name and stars now
     stack as their own centered row instead, consistent every time
     regardless of name length. */
  .fx-about-skill-list {
    align-items: center;
  }

  .fx-about-skill-list li {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }

  .fx-about-skill-label {
    justify-content: center;
  }

  .fx-about-skill-name {
    font-size: 17px;
  }

  .fx-about-stars img {
    width: 18px;
  }
}

/* The form itself is already normal responsive flow (not the 2560-wide
   Figma canvas), so unlike every other page, Contact doesn't need a full
   separate mobile content block -- just swap the pixel-scaled header for
   the shared mobile topbar and let the existing form render underneath. */
@media (max-width: 768px) {
  .fx-gallery-viewport {
    display: block !important;
  }

  .fx-gallery-viewport .figma-stage {
    display: none !important;
  }

  .fx-contact-main {
    padding: 76px 20px 48px !important;
  }

  .fx-contact-mobile-smile {
    display: block;
  }
}