@import url("https://cdn.jsdelivr.net/gh/ProjectNoonnu/noonfonts_2104@1.1/fonts/pretendard.css");

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont,
    sans-serif;
  background: var(--pink, #ffd0e1);
  overflow-x: hidden;
}

.scroll_guide {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.scroll_guide::after {
  content: "Scroll";
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  font-weight: 500;
}

.scroll_guide .arrow {
  animation: scollGuideAni 1.5s infinite;
}

@keyframes scollGuideAni {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }

  100% {
    transform: translateY(0);
  }
}

#target {
  width: 100%;
  height: 4800px;
  /* keep original intended page length but ensure at least viewport height
         so .bottom can sit flush at the document bottom */
  /* min-height: max(3750px, 100vh); */
  /* keep intended page length while avoiding forced fixed height */
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.audio-player-fixed {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 2000;
  display: flex;
  align-items: center;
}

/* Ensure controls are placed relative to centered #target area on wide screens */
@media (min-width: 1200px) {
  #target .hamburger {
    position: fixed;
    right: calc((100vw - 1920px)/2 + 40px);
    top: 40px;
  }

  #target .audio-player-fixed {
    position: fixed;
    right: calc((100vw - 1920px)/2 + 32px);
    bottom: 32px;
  }
}

.audio-toggle {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

header {
  position: fixed;
  left: 40px;
  top: 40px;
  z-index: 100;
}

header img {
  width: 154px;
  height: auto;
}

.sky .m_cloud1 {
  position: absolute;
  top: 140px;
  left: 200px;
  width: 160px;
  /* z-index: 0; */
  animation: floatCloud1 5.5s ease-in-out infinite;
}

.sky .m_cloud2 {
  position: absolute;
  top: 50px;
  right: 400px;
  width: 92px;
  /* z-index: 0; */
  animation: floatCloud2 7s ease-in-out infinite;
}

.sky .m_cloud3 {
  position: absolute;
  top: 300px;
  right: 100px;
  width: 144px;
  animation: floatCloud3 6.2s ease-in-out infinite;
}

@keyframes floatCloud1 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes floatCloud2 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(12px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes floatCloud3 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.bottom {
  width: 100%;
  height: 320px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 4px solid #000;
  background: #13a381;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-image: url(../assets/svg/about_me_page/floor_bg.png);
}

/* .intro {
  position: relative;
  bottom: 360px;
  left: 0;
} */

.under_tree {
  position: absolute;
  bottom: 250px;
  left: 50%;
  transform: translateX(-50%);
}

.introduce {
  position: absolute;
  bottom: 300px;
  left: 260px;
  width: 800px;
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.introduce .big_apple_basket {
  position: absolute;
  left: 44px;
  bottom: -200px;
}

.introduce .about_char_onehup {
  position: absolute;
  left: 370px;
  bottom: -130px;
}

.introduce .context-box {
  position: absolute;
  top: -490px;
  left: 60px;
  width: 800px;
}

.introduce .about_first .context-box {
  position: absolute;
  bottom: 340px;
  left: 0;
  width: 589px;
}

.introduce .about_first .context-box .context-txt {
  width: auto;
  height: 100%;
}

.introduce .about_first .context-box .shape {
  left: 320px;
  top: 128px;
}

.awords {
  width: 200px;
  position: absolute;
  right: 8px;
  bottom: 920px;
  width: 700px;
}

.awords .apple_a {
  position: relative;
  right: 280px;
  top: 20px;
}


.awords .apple_b {
  position: relative;
  right: -30px;
  top: 250px;
}

.awords .about_second .context-box {
  position: absolute;
  top: -260px;
  left: -300px;
  width: 858px;
}

.awords .about_second .context-box .context-txt {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.awords .about_second .context-box .shape {
  left: 450px;
  top: 206px;
}

.qualifications {
  position: absolute;
  left: 488px;
  bottom: 1520px;
  width: 700px;
}

.qualifications .apple_a {
  position: relative;
  left: -250px;
  top: 240px;
}

.qualifications .apple_b {
  position: relative;
  left: -520px;
  top: 60px;
}

.qualifications .apple_c {
  position: relative;
  left: -600px;
  top: 230px;
}

.qualifications .about_third .context-box {
  position: absolute;
  top: -254px;
  left: -300px;
  width: 820px;
}

.qualifications .about_third .context-box .context-txt {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qualifications .about_third .context-box .shape {
  left: 450px;
  top: 180px;
}

.strength {
  position: absolute;
  right: -38px;
  bottom: 1740px;
  width: 700px;
}

.strength .apple_a {
  position: relative;
  right: 390px;
  top: 0px;
}

.strength .apple_b {
  position: relative;
  right: 10px;
  top: 60px;
}

.strength .apple_c {
  position: relative;
  right: 140px;
  top: 200px;
}

.strength .about_four .context-box {
  position: absolute;
  top: -440px;
  left: -200px;
  width: 562px;
}

.strength .about_four .context-box .context-txt {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.strength .about_four .context-box .shape {
  left: 262px;
  top: 388px;
}

.skill {
  position: absolute;
  left: 540px;
  bottom: 2320px;
  width: 700px;
}

/* Note: desktop transform/position overrides were removed to restore original
  article positions. If you want refined centering inside a 1920px viewport,
  we'll apply narrower, non-destructive rules per-article instead. */

/* For narrower screens, stack blocks vertically to avoid overflow */
@media (max-width: 1199px) {

  .awords,
  .qualifications,
  .strength,
  .skill {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    margin: 24px 0;
  }
}

.skill .apple_a {
  position: relative;
  left: -360px;
  top: 0px;
}

/* Ensure SVGs render at their native/intrinsic size on aboutme page
   Exclude animated cloud/apple assets so their transforms/animations are preserved. */
#target svg,
#target img[src$=".svg"] {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  display: inline-block;
}

/* Explicitly allow transforms/animations for clouds and apples */
#target .m_cloud1,
#target .m_cloud2,
#target .m_cloud3,
#target .apple_a,
#target .apple_b,
#target .apple_c {
  transform: none;
  /* allow keyframes to set transform */
  will-change: transform;
  /* hint for smoother animation */
}

.skill .apple_b {
  position: relative;
  left: -30px;
  top: 120px;
}

.skill .apple_c {
  position: relative;
  left: -250px;
  top: 280px;
}

.skill .about_five .context-box {
  position: absolute;
  top: -200px;
  left: -200px;
}

.skill .about_five .context-box .context-txt {
  width: 540px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.skill .about_five .context-box .shape {
  left: 280px;
  top: 142px;
}

.also_do_it {
  position: absolute;
  right: 120px;
  bottom: 2650px;
  width: 700px;
}

.also_do_it .apple_a {
  position: relative;
  right: 310px;
  top: 170px;
}

.also_do_it .apple_b {
  position: relative;
  right: -20px;
  top: 60px;
}

.also_do_it .apple_c {
  position: relative;
  right: 140px;
  top: 320px;
}

.also_do_it .about_six .context-box {
  position: absolute;
  top: -370px;
  left: 20px;
  width: auto;
}

.also_do_it .about_six .context-box .context-txt {
  position: absolute;
  width: 420px;
}

.also_do_it .about_six .context-box .list {
  display: flex;
  flex-direction: column;
}

.also_do_it .about_six .context-box .list .tropy {
  width: 310px;
}

.also_do_it .about_six .context-box .shape {
  left: 190px;
  top: 314px;
}

.break_time {
  position: absolute;
  left: 550px;
  bottom: 3170px;
  width: 700px;
}


.break_time .apple_a {
  position: relative;
  left: -670px;
  top: 320px;
}

.break_time .apple_a:nth-child(2) {
  position: absolute;
  left: -10px;
  top: 530px;
}

.break_time .apple_b {
  position: relative;
  left: -460px;
  top: 250px;
}

.break_time .apple_c {
  position: relative;
  left: -640px;
  top: 470px;
}

.break_time .about_seven .context-box {
  position: absolute;
  top: -290px;
  left: -300px;
}

.break_time .about_seven .context-box .context-txt {
  width: 680px;
}

.break_time .about_seven .context-box .context-txt .two {
  width: 300px;
}

.break_time .about_seven .context-box .shape {
  left: 380px;
  top: 240px;
}

.specialty {
  position: absolute;
  right: 230px;
  bottom: 3490px;
  width: 700px;
}

.specialty .apple_a {
  position: relative;
  right: 0px;
  top: 120px;
}

.specialty .apple_a:nth-child(2) {
  position: absolute;
  right: 300px;
  top: 300px;
}

.specialty .apple_b {
  position: relative;
  right: -40px;
  top: 160px;
}

.specialty .apple_c {
  position: relative;
  right: 70px;
  top: 40px;
}

.specialty .about_eight .context-box .list {
  display: flex;
  flex-direction: column;
}

.specialty .about_eight .context-box .list .tropy {
  width: 320px;
}

.specialty .about_eight .context-box {
  position: absolute;
  top: -360px;
  left: 0px;
}

.specialty .about_eight .context-box .context-txt {
  width: 400px;
}

.specialty .about_eight .context-box .shape {
  left: 176px;
  top: 314px;
}

.top_bird {
  position: absolute;
  left: 620px;
  bottom: 3970px;
  width: 700px;
}

.top_bird .list {
  position: absolute;
  left: -20px;
}

.top_bird .list .b_one {
  position: relative;
  bottom: 200px;
}

.top_bird .list .b_two {
  position: relative;
  bottom: 150px;
}

.top_bird .list .b_three {
  position: relative;
  bottom: 140px;
  left: -500px;
}

.top_bird .list .b_four {
  position: relative;
  bottom: 260px;
  left: -720px;
}

.top_bird .list .b_five {
  position: relative;
  bottom: 280px;
  left: -540px;
}

.top_bird .list .b_six {
  position: relative;
  bottom: 340px;
  left: -900px;
}

.top_bird .list .tropy {
  opacity: 0;
  transform: rotate(-10deg);
  transition: opacity 0.7s cubic-bezier(0.4, 0.7, 0.4, 1.2),
    transform 0.7s cubic-bezier(0.4, 0.7, 0.4, 1.2);
}

.top_bird.visible .list .tropy {
  /* 순차 애니메이션을 위해 각 항목에 딜레이 부여 */
  opacity: 1;
  transform: rotate(0deg);
}

.tropy:hover {
  animation: tropyAni 1s reverse;
}

@keyframes tropyAni {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.top_bird.visible .list .b_one {
  transition-delay: 0.1s;
}

.top_bird.visible .list .b_two {
  transition-delay: 0.3s;
}

.top_bird.visible .list .b_three {
  transition-delay: 0.5s;
}

.top_bird.visible .list .b_four {
  transition-delay: 0.7s;
}

.top_bird.visible .list .b_five {
  transition-delay: 0.9s;
}

.top_bird.visible .list .b_six {
  transition-delay: 1.1s;
}

.top_bird .list .tropy {
  /* 트리거 해제시 딜레이 없이 바로 사라지게 */
  transition-delay: 0s;
}

.context-box {
  position: relative;
  left: -30px;
  top: -600px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-end;
  justify-content: flex-start;
  position: relative;
  opacity: 0;
  transform: rotate(-6deg);
  transition: opacity 0.8s cubic-bezier(0.4, 0.7, 0.4, 1.2),
    transform 0.8s cubic-bezier(0.4, 0.7, 0.4, 1.2);
}

.context-box.visible {
  opacity: 1;
  transform: rotate(0deg);
}

.context-txt {
  width: 548px;
  background: rgba(218, 218, 218, 0.88);
  border-radius: 40px;
  border-style: solid;
  border-color: #000000;
  border-width: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  backdrop-filter: blur(5px);
}

.txt {
  text-align: left;
  font-family: "-", sans-serif;
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
}

.txt-span {
  color: #000000;
  font-family: "Pretendard-Medium", sans-serif;
  font-weight: 500;
}

.txt-span2 {
  color: #000000;
  font-family: "Pretendard-Bold", sans-serif;
  font-weight: 700;
}

.txt-span3 {
  color: #dd599f;
  font-family: "Pretendard-Bold", sans-serif;
  font-weight: 700;
}

.shape {
  background: var(--color, #dadada);
  border-radius: 600px;
  border-style: solid;
  border-color: #000000;
  border-width: 4px;
  flex-shrink: 0;
  width: 39px;
  height: 39px;
  position: absolute;
  left: 382px;
  top: 130px;
  overflow: hidden;
}

.tit {
  padding: 0px 0px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  text-align: center;
}

.tit_context {
  color: #000000;
  text-align: left;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 30px;
  line-height: 34px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
}

.list {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.tropy {
  background: #ffffff;
  border-radius: 400px;
  border-style: solid;
  border-color: #000000;
  border-width: 4px;
  padding: 20px 40px 20px 40px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  /* overflow: hidden; */
}

.con_awords {
  text-align: center;
  font-family: "-", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
}

.top_bird .tropy {
  padding: 0;
}

.con-span {
  border-radius: 400px;
  color: #383836;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 18px;
  font-weight: 700;
  background: #fff;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  /* padding: 20px 40px 20px 40px; */
  z-index: 10;
}

.con-span2 {
  color: #dd599f;
  font-family: "Pretendard-ExtraBold", sans-serif;
  font-weight: 800;
}

.strength .about_four .list {
  display: flex;
  flex-direction: column;
}

.one {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.two {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cont-box {
  width: 154px;
  background: #ffffff;
  border-radius: 30px;
  border-style: solid;
  border-color: #000000;
  border-width: 4px;
  padding: 10px 30px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 154px;
  position: relative;
  overflow: hidden;
}

.cont {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cont span {
  width: 190px;
}

.p-icons {
  display: flex;
  gap: 10px;
}

.p-icons img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.top_end {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 170px;
}

.top_end_item {
  opacity: 0;
  transform: scale(0);
}

.top_end_item.spread {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.8s cubic-bezier(0.4, 0.7, 0.4, 1.2),
    transform 0.8s cubic-bezier(0.4, 0.7, 0.4, 1.2);
}

.top_bird .list .con-span {
  padding: 20px 40px 20px 40px;
}

.top_bird .list .tropy::after {
  content: "";
  position: absolute;
  bottom: -14px;
  width: 100%;
  height: 16px;
  background-image: url(../assets/svg/about_me_page/talk_blet.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
}

.apple_a {
  animation: appleAni 2s ease-in-out infinite reverse;
}

.apple_b {
  animation: appleAni 2s ease-in-out infinite reverse;
}

.apple_c {
  animation: appleAni 2s ease-in-out infinite reverse;
}

.aboutme-fade {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0.7, 0.4, 1.2);
}

.aboutme-fade.visible {
  opacity: 1;
}

@keyframes appleAni {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}



/* menu */
.hamburger {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #000;
  position: fixed;
  right: 40px;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 30;
}

.side_menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  border-left: 4px solid #000;
  z-index: 2000;
  transition: right 1.2s;
  display: none;
  /* Changed to none to avoid conflict */
  flex-direction: column;
  align-items: flex-start;
  padding: 48px 32px 32px 32px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.7);
}

/* 기본적으로 DOM은 있지만 보이지 않게 처리 (JS에서 .on으로 보이게 함) */

.side_menu.on {
  right: 0;
  display: flex !important;
  /* Ensure it displays flex when active */
}


.side_menu ul.menu_list>li>ul.open {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
  padding-top: 8px;
  padding-bottom: 8px;
}

.hamburger span.bar {
  width: 60px;
  height: 4px;
  background: #000;
  display: block;
  margin: 0 auto;
  transform-origin: left;
  transition: transform 1s, background 1s;
}

.hamburger:hover span.bar:nth-child(2) {
  transform: scaleX(60%);
  transform-origin: left;
  transition: transform 1s;
}