@charset "utf-8";

/* ============================================
   HERO — 구조
   아트보드 원본 1920 x 1068, 모든 레이어는 % 좌표
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 160 / 89;
  max-height: 100vh;
  max-height: 100svh; /* 화면 높이를 넘지 않게 — 그림 전체가 한 화면에 들어온다 */
  overflow: hidden;
  background-color: #f1f1f1;
  background-image: url(../images/main/hero/bg_hero_paper.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-scene {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 높이가 화면에 맞춰 줄면 폭도 같이 줄어 비율이 유지된다 */
.hero-artboard {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1920 / 1068;
  overflow: hidden;
  background: transparent;
}

.hero-paper {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.hero-layer,
.hero-stroke,
.hero-golf,
.hero-tool,
.hero-wrist,
.hero-character {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.hero-layer {
  max-width: none; /* reset.css 의 img max-width 해제 */
  object-fit: contain;
  will-change: transform, opacity;
}

.hero-static-copy {
  will-change: auto;
}

.hero-tool,
.hero-wrist,
.hero-character {
  will-change: transform;
}

/* 손목은 연필 그룹과 같은 크기로 겹쳐 두고 회전축만 따로 쓴다 */
.hero-wrist {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 캐릭터가 획을 하나씩 그어 그림을 완성하는 SVG */
.hero-stroke {
  max-width: none;
  overflow: visible;
  shape-rendering: geometricPrecision;
  will-change: opacity;
}

/* 획과 완성본은 스크립트가 순서대로 드러낸다 */
.hero-stroke [data-draw-stroke],
.hero-stroke [data-mask-complete] {
  opacity: 0;
}

/* 획 소유권 마스크는 픽셀 경계를 그대로 살려야 한다 */
.hero-stroke mask image {
  image-rendering: pixelated;
}

/* 태그라인 — 낱자가 등장한 뒤 통짜 이미지로 교체된다 */
.hero-tagline-static {
  opacity: 0;
}

.hero-tagline-char {
  opacity: 0;
  transform-origin: 50% 78%;
}

/* 세로화면 전용 / 가로화면 전용 레이어 */
.hero-copy {
  display: none;
}

.hero-compact-only {
  display: none;
}

/* 모션을 못 쓰는 환경 대비 */
.hero-no-motion .hero-tagline-static {
  opacity: 1;
}

.hero-no-motion .hero-tagline-char {
  display: none;
}

/* 셀렉터를 한 단계 더 붙여 위의 opacity:0 을 이긴다 (!important 대신) */
.hero-no-motion .hero-stroke [data-mask-complete] {
  opacity: 1;
}

/* ============================================
   HERO — 세로화면 (그림은 우측으로, 문구는 아래로)
   ============================================ */
@media (max-aspect-ratio: 3 / 4) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3.2svh;
    min-height: 100vh;   /* svh 미지원 브라우저 대비 */
    min-height: 100svh;
    height: auto;
    max-height: none;
    padding-block: 0 5svh;
    aspect-ratio: auto;
    overflow: visible;
  }

  .hero-scene {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 20;
  }

  .hero-artboard {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    max-width: none; /* 세로화면에서는 일부러 화면보다 넓게 두고 우측 정렬한다 */
    aspect-ratio: 1920 / 1068;
    background: transparent;
  }

  .hero-paper {
    display: none;
  }

  .hero-compact-only {
    display: block;
  }

  .hero-golf {
    transform: scale(1.3);
    transform-origin: 100% 50%;
  }

  .hero-copy {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 88%;
    max-width: 88%;
    min-width: 0;
    margin-inline: auto;
    aspect-ratio: 664 / 551;
  }

  .hero-copy-layer {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
  }

  .hero-compact-hidden,
  .hero-artboard .hero-static-copy,
  .hero-artboard .hero-tagline-static,
  .hero-artboard .hero-tagline-char {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-stroke [data-mask-complete] {
    opacity: 1;
  }

  .hero-tagline-static {
    opacity: 1;
  }

  .hero-tagline-char {
    display: none;
  }
}

/* ============================================
   HERO — 레이어 좌표 (1920 x 1068 기준)
   ============================================ */
.hero-artboard [data-layer="doodles-purple-bottomleft"] { left: 20.1041%; top: 92.7902%; width: 2.9166%; height: 5.2434%; }
.hero-artboard [data-layer="doodles-purple-bottommid"] { left: 42.9166%; top: 79.7752%; width: 2.3958%; height: 4.2134%; }
.hero-artboard [data-layer="doodles-purple-left"] { left: 63.6458%; top: 34.5505%; width: 6.4583%; height: 11.4232%; }
.hero-artboard [data-layer="doodles-purple-middle"] { left: 69.5312%; top: 46.7228%; width: 4.5312%; height: 8.0524%; }
.hero-artboard [data-layer="icon-birds"] { left: 28.9062%; top: 26.3108%; width: 5.3645%; height: 6.367%; }
.hero-artboard [data-layer="icon-blue-note"] { left: 55.8333%; top: 63.3895%; width: 0.9375%; height: 2.1535%; }
.hero-artboard [data-layer="icon-butterflies"] { left: 55.677%; top: 47.6591%; width: 2.552%; height: 4.0262%; }
.hero-artboard [data-layer="icon-color-note"] { left: 12.6041%; top: 83.4269%; width: 4.0625%; height: 6.5543%; }
.hero-artboard [data-layer="icon-orange-flag"] { left: 77.9166%; top: 86.4232%; width: 4.3229%; height: 7.2097%; }
.hero-artboard [data-layer="icon-partyhat-bottom"] { left: 36.5625%; top: 86.4232%; width: 4.1666%; height: 9.5505%; }
.hero-artboard [data-layer="icon-partyhat"] { left: 21.5625%; top: 5.2434%; width: 7.6562%; height: 14.794%; }
.hero-artboard [data-layer="icon-pink-ball"] { left: 67.2395%; top: 17.2284%; width: 5.9895%; height: 8.7078%; }
.hero-artboard [data-layer="icon-rainbow"] { left: 31.4583%; top: 32.5842%; width: 7.9166%; height: 7.8651%; }
.hero-artboard [data-layer="icon-star-small"] { left: 26.0937%; top: 84.3632%; width: 0.9895%; height: 1.4981%; }
.hero-artboard [data-layer="icon-star-top"] { left: 67.1875%; top: 3.7453%; width: 1.5625%; height: 2.3408%; }
.hero-artboard [data-layer="icon-star2"] { left: 21.0416%; top: 81.9288%; width: 1.302%; height: 1.9662%; }
.hero-artboard [data-layer="icon-star3"] { left: 23.8541%; top: 85.6741%; width: 2.2916%; height: 3.558%; }
.hero-artboard [data-layer="icon-star4"] { left: 8.5937%; top: 8.4269%; width: 1.927%; height: 2.9026%; }
.hero-artboard [data-layer="icon-star5"] { left: 50.3645%; top: 43.7265%; width: 1.8229%; height: 2.8089%; }
.hero-artboard [data-layer="icon-tote"] { left: 33.4895%; top: 77.2471%; width: 3.2812%; height: 7.2097%; }
.hero-artboard [data-layer="icon-yellow-starburst"] { left: 77.6562%; top: 56.0861%; width: 3.4895%; height: 7.397%; }
.hero-artboard [data-layer="milk-carton-extra"] { left: 78.75%; top: 22.94%; width: 5.052%; height: 23.5955%; }
.hero-artboard [data-layer="period-pill"] { left: 5.4687%; top: 67.4157%; width: 9.5833%; height: 5.7116%; }
.hero-artboard [data-layer="period-label"] { left: 6.927%; top: 68.5393%; width: 6.7187%; height: 3.1835%; }
.hero-artboard [data-layer="period-date"] { left: 16.302%; top: 68.2584%; width: 22.9166%; height: 3.9325%; }
.hero-artboard [data-layer="right-corner-extra"] { left: 93.3333%; top: 26.779%; width: 2.8125%; height: 5.0561%; }
.hero-artboard [data-layer="sketch-green-tree-left"] { left: 64.7395%; top: 78.0898%; width: 8.2812%; height: 19.4756%; }
.hero-artboard [data-layer="sketch-green-tree-small"] { left: 5.3645%; top: 87.0786%; width: 5.2083%; height: 11.1423%; }
.hero-artboard [data-layer="sketch-green-tree"] { left: 82.2395%; top: 11.3295%; width: 4.7395%; height: 9.6441%; }
.hero-artboard [data-layer="sketch-green-vegetables"] { left: 88.2291%; top: 17.1348%; width: 4.3229%; height: 9.4569%; }
.hero-artboard [data-layer="sketch-top-ribbon"] { left: 44.5312%; top: 0%; width: 3.6979%; height: 13.2958%; }
.hero-artboard [data-layer="title-black"] { left: 5.052%; top: 52.1535%; width: 34.5833%; height: 10.3932%; }
.hero-artboard [data-layer="title-orange"] { left: 5.2604%; top: 40.2621%; width: 21.6145%; height: 10.3932%; }
.hero-artboard [data-layer="title-year"] { left: 5.2604%; top: 30.7116%; width: 10.8854%; height: 6.5543%; }
.hero-artboard [data-layer="tree-extra"] { left: 60.4166%; top: 87.734%; width: 4.5833%; height: 9.925%; }
.hero-artboard [data-layer="icon-star-set-1"] { left: 51.875%; top: 7.9588%; width: 1.0937%; height: 1.6853%; }
.hero-artboard [data-layer="icon-star-set-2"] { left: 52.9687%; top: 9.8314%; width: 2.0312%; height: 3.0898%; }
.hero-artboard [data-layer="icon-star-set-3"] { left: 97.1875%; top: 76.5917%; width: 1.0937%; height: 1.6853%; }
.hero-artboard [data-layer="icon-orange-mark"] { left: 44.7395%; top: 38.764%; width: 1.5625%; height: 2.9962%; }
.hero-artboard [data-layer="icon-orange-squiggle"] { left: 47.1354%; top: 54.3071%; width: 2.9166%; height: 4.7752%; }
.hero-artboard [data-layer="sketch-eraser"] { left: 51.6145%; top: 25%; width: 4.6354%; height: 7.0224%; }
.hero-artboard [data-layer="sketch-platform"] { left: 44.5833%; top: 86.985%; width: 14.4791%; height: 13.0149%; }
.hero-artboard [data-motion="gold-drawing"] { left: 78.3854%; top: 62.3595%; width: 8.4375%; height: 11.7977%; }
.hero-artboard [data-layer="orange-fly-trail"] { left: 63.5937%; top: 20.2247%; width: 2.6041%; height: 6.4606%; }
.hero-artboard [data-layer="orange-fly"] { left: 61.3541%; top: 18.7265%; width: 2.1875%; height: 3.7453%; }
.hero-artboard [data-layer="windmill-left"] { left: 64.2187%; top: 61.6104%; width: 2.8645%; height: 9.3632%; }
.hero-artboard [data-layer="windmill-center"] { left: 66.1979%; top: 56.1797%; width: 4.4791%; height: 14.4194%; }
.hero-artboard [data-layer="windmill-right"] { left: 70.5729%; top: 59.0823%; width: 2.3958%; height: 7.7715%; }
.hero-artboard [data-layer="sketch-lake"] { left: 69.5312%; top: 66.8539%; width: 5.3125%; height: 5.4307%; }
.hero-artboard .hero-golf { left: 89.6354%; top: 32.4906%; width: 10.3645%; height: 24.3445%; }
.hero-artboard [data-layer="sports-note-small"] { left: 0%; top: 8.4615%; width: 11.0552%; height: 13.0769%; }
.hero-artboard [data-layer="sports-note-big"] { left: 14.0703%; top: 0%; width: 12.5628%; height: 19.2307%; }
.hero-artboard [data-layer="sports-golf-field"] { left: 8.0402%; top: 28.8461%; width: 91.9597%; height: 71.1538%; }
.hero-artboard [data-layer="sports-golf-ball"] { left: 45.7286%; top: 47.3076%; width: 23.1155%; height: 18.0769%; }
.hero-artboard [data-layer="sports-golf-club"] { left: 5.0251%; top: 26.923%; width: 40.201%; height: 49.2307%; }
.hero-artboard [data-motion="house-drawing"] { left: 57.2916%; top: 61.985%; width: 4.8958%; height: 13.0149%; }
.hero-artboard [data-motion="tiger-character"] { left: 47.1875%; top: 63.5767%; width: 10.3645%; height: 24.0636%; }
.hero-artboard [data-layer="character-tiger-body"] { left: 0%; top: 0%; width: 88.9447%; height: 100%; }
.hero-artboard [data-motion="tiger-drawing-tool"] { left: 59.2964%; top: 37.354%; width: 40.7035%; height: 39.6887%; }
.hero-artboard [data-layer="tiger-pencil-shaft"] { left: 40.7407%; top: 10.7843%; width: 54.3209%; height: 57.8431%; }
.hero-artboard [data-layer="tiger-pencil-tip"] { left: 50.6172%; top: 0%; width: 49.3827%; height: 68.6274%; }
.hero-artboard [data-layer="tiger-drawing-hand"] { left: 0%; top: 38.2352%; width: 64.1975%; height: 61.7647%; }
.hero-artboard [data-layer="tiger-drawing-sleeve"] { left: 0%; top: 38.2352%; width: 64.1975%; height: 61.7647%; }
.hero-artboard [data-motion="rabbit-character"] { left: 84.3229%; top: 62.6404%; width: 9.5312%; height: 37.3595%; }
.hero-artboard [data-layer="character-rabbit-body-and-ladder"] { left: 1.0928%; top: 0%; width: 98.9071%; height: 100%; }
.hero-artboard [data-motion="rabbit-drawing-tool"] { left: 0%; top: 25.0626%; width: 43.7158%; height: 27.3182%; }
.hero-artboard [data-layer="rabbit-pencil-shaft"] { left: 2.5%; top: 11.0091%; width: 52.5%; height: 59.633%; }
.hero-artboard [data-layer="rabbit-pencil-tip"] { left: 0%; top: 0%; width: 22.5%; height: 19.266%; }
.hero-artboard [data-layer="rabbit-drawing-hand"] { left: 31.25%; top: 41.2844%; width: 68.75%; height: 58.7155%; }
.hero-artboard [data-layer="rabbit-drawing-sleeve"] { left: 31.25%; top: 41.2844%; width: 68.75%; height: 58.7155%; }
.hero-artboard [data-layer="compact-sun"] { left: 43.6458%; top: 27.7153%; width: 9.4791%; height: 18.352%; }
.hero-artboard [data-layer="tagline-blue"] { left: 17.7604%; top: 21.6292%; width: 3.6979%; height: 3.0898%; }
.hero-artboard [data-layer="tagline-color"] { left: 5.2604%; top: 21.9101%; width: 4.3229%; height: 4.4943%; }
.hero-artboard [data-layer="tagline-cont"] { left: 10.3645%; top: 21.5355%; width: 6.5625%; height: 5.2434%; }
.hero-artboard [data-tagline-index="0"] { left: 5.2604%; top: 21.9101%; width: 1.875%; height: 4.4943%; }
.hero-artboard [data-tagline-index="1"] { left: 7.1354%; top: 21.9101%; width: 1.1979%; height: 4.4943%; }
.hero-artboard [data-tagline-index="2"] { left: 8.3333%; top: 21.9101%; width: 1.25%; height: 4.4943%; }
.hero-artboard [data-tagline-index="3"] { left: 10.3645%; top: 21.5355%; width: 1.5104%; height: 5.2434%; }
.hero-artboard [data-tagline-index="4"] { left: 11.875%; top: 21.5355%; width: 1.7708%; height: 5.2434%; }
.hero-artboard [data-tagline-index="5"] { left: 13.6458%; top: 21.5355%; width: 1.0937%; height: 5.2434%; }
.hero-artboard [data-tagline-index="6"] { left: 14.7395%; top: 21.5355%; width: 0.8333%; height: 5.2434%; }
.hero-artboard [data-tagline-index="7"] { left: 15.5729%; top: 21.5355%; width: 1.3541%; height: 5.2434%; }
.hero-artboard [data-tagline-index="8"] { left: 17.7604%; top: 21.6292%; width: 1.0937%; height: 3.0898%; }
.hero-artboard [data-tagline-index="9"] { left: 18.8541%; top: 21.6292%; width: 0.625%; height: 3.0898%; }
.hero-artboard [data-tagline-index="10"] { left: 19.4791%; top: 21.6292%; width: 1.9791%; height: 3.0898%; }
.hero-copy [data-copy-layer="tagline-color"] { left: 0.6024%; top: 0.7259%; width: 12.5%; height: 8.7114%; }
.hero-copy [data-copy-layer="tagline-cont"] { left: 15.3614%; top: 0%; width: 18.9759%; height: 10.1633%; }
.hero-copy [data-copy-layer="tagline-blue"] { left: 36.7469%; top: 0.1814%; width: 10.6927%; height: 5.9891%; }
.hero-copy [data-copy-layer="title-year"] { left: 0.6024%; top: 17.7858%; width: 31.4759%; height: 12.7041%; }
.hero-copy [data-copy-layer="title-orange"] { left: 0.6024%; top: 36.2976%; width: 62.5%; height: 20.1451%; }
.hero-copy [data-copy-layer="title-black"] { left: 0%; top: 59.3466%; width: 100%; height: 20.1451%; }
.hero-copy [data-copy-layer="period-pill"] { left: 1.2048%; top: 88.9292%; width: 27.7108%; height: 11.0707%; }
.hero-copy [data-copy-layer="period-label"] { left: 5.4216%; top: 91.107%; width: 19.4277%; height: 6.1705%; }
.hero-copy [data-copy-layer="period-date"] { left: 32.5301%; top: 90.5626%; width: 66.265%; height: 7.6225%; }
.hero-copy [data-tagline-index="0"] { left: 0.6024%; top: 0.7259%; width: 5.4216%; height: 8.7114%; }
.hero-copy [data-tagline-index="1"] { left: 6.024%; top: 0.7259%; width: 3.4638%; height: 8.7114%; }
.hero-copy [data-tagline-index="2"] { left: 9.4879%; top: 0.7259%; width: 3.6144%; height: 8.7114%; }
.hero-copy [data-tagline-index="3"] { left: 15.3614%; top: 0%; width: 4.3674%; height: 10.1633%; }
.hero-copy [data-tagline-index="4"] { left: 19.7289%; top: 0%; width: 5.1204%; height: 10.1633%; }
.hero-copy [data-tagline-index="5"] { left: 24.8493%; top: 0%; width: 3.1626%; height: 10.1633%; }
.hero-copy [data-tagline-index="6"] { left: 28.012%; top: 0%; width: 2.4096%; height: 10.1633%; }
.hero-copy [data-tagline-index="7"] { left: 30.4216%; top: 0%; width: 3.9156%; height: 10.1633%; }
.hero-copy [data-tagline-index="8"] { left: 36.7469%; top: 0.1814%; width: 3.1626%; height: 5.9891%; }
.hero-copy [data-tagline-index="9"] { left: 39.9096%; top: 0.1814%; width: 1.8072%; height: 5.9891%; }
.hero-copy [data-tagline-index="10"] { left: 41.7168%; top: 0.1814%; width: 5.7228%; height: 5.9891%; }