/* 
- 레이아웃, 섹션, 공통 스타일
- 디자인 토큰은 variables.css에서 로드
*/
@import url("variables.css");

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  overflow-x: hidden;
  /* background-color: var(--background); */
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--foreground);
  letter-spacing: -0.02em;
  background-color: #000;
}
ul,
li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  border: 0;
  vertical-align: middle;
}

/* layout */
section {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 40px 0;
  background-color: black;
}

.container {
  position: relative;
  max-width: 1280px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0 40px;
}

.category-container {
  display: flex;
  align-items: center;
  position: relative;
  background-color: #000;
  max-width: 1280px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  width: 100%;
  height: 50px;
  color: #fff;
  padding: 0 40px;
  overflow: hidden;
}
.category-info {
  color: #fff;
}
/* .category-container p {
  position: absolute;
  font-size: 24px;
  font-weight: 800;
} */

.category-container img {
  position: relative;
  width: auto;
  height: 260px;
  display: block;
}
/* 첫번째 */
.main-container {
  width: 100%;
  position: relative;
  padding-bottom: 20px;
}
.main {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 1080px;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
}
.main .main-bg {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 0;
  object-fit: cover;
}
.main .black-sticker-1 {
  width: 20%;
  position: absolute;
  top: -6%;
  transform: rotate(330deg);
  left: 10%;
  rotate: 45%;
  z-index: 5;
}
.main .black-sticker-2 {
  width: 20%;
  position: absolute;
  top: -6%;
  right: 10%;
  z-index: 5;
  transform: scaleX(-1) rotate(172deg);
}
.main-poster-wrap {
  position: absolute;
  width: 60%;
  top: 0;
  left: 20%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  transform-origin: top center;
  animation: posterFlap 5.5s ease-in-out infinite;

  will-change: transform;
}

@keyframes posterFlap {
  0% {
    transform: perspective(1600px) rotateX(0deg);
  }

  25% {
    transform: perspective(1600px) rotateX(1.5deg);
  }

  50% {
    transform: perspective(1600px) rotateX(3deg);
  }

  75% {
    transform: perspective(1600px) rotateX(1.5deg);
  }

  100% {
    transform: perspective(1600px) rotateX(0deg);
  }
}

/* 포스터 */
.main-poster-wrap .main-poster {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  box-shadow: 6px 9px 11px rgba(0, 0, 0, 0.5);
}
.main-poster-wrap .main-poster-sticker-wrap {
  display: flex;
  align-items: flex-end; /* 하단 기준 정렬 */
  gap: 4px;
}
.main-poster-sticker-wrap .category-sticker {
  flex: 1;
  width: 100%;
  display: block;

  /* 오른쪽 상단 꼭짓점 고정 */
  transform-origin: top right;

  transition:
    transform 0.5s cubic-bezier(0.59, 0.23, 0.15, 1.01),
    filter 0.4s ease;
  cursor: grab;

  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}

/* 뜯기는 느낌 */
.main-poster-sticker-wrap .category-sticker:hover {
  cursor: grabbing;

  /* 회전값은 그대로 유지 */
  transform: rotate(-8deg) translateX(6px) translateY(10px);
  z-index: 10;
  filter: drop-shadow(0 20px 18px rgba(0, 0, 0, 0.28));
}
.main-poster-sticker-wrap .web {
  flex: 1;
  width: 100%;
  display: block;

  /* 오른쪽 상단 꼭짓점 고정 */
  transform-origin: top left;

  transition:
    transform 0.5s cubic-bezier(0.59, 0.23, 0.15, 1.01),
    filter 0.4s ease;
  cursor: grab;

  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}
.main-poster-sticker-wrap .uxui:hover {
  cursor: grabbing;

  /* 회전값은 그대로 유지 */
  transform: rotate(10deg) translateX(3px) translateY(1px);
  z-index: 10;
  filter: drop-shadow(0 20px 18px rgba(0, 0, 0, 0.28));
}
.main-poster-sticker-wrap .web:hover {
  cursor: grabbing;

  /* 회전값은 그대로 유지 */
  transform: rotate(10deg) rotateX(10deg) translateX(3px) translateY(1px);
  z-index: 10;
  filter: drop-shadow(0 20px 18px rgba(0, 0, 0, 0.28));
}

.introduce-page {
  position: relative;
  width: 100%;
}

.introduce-page picture {
  width: 100%;
  display: block;
}

.introduce-page picture img {
  width: 100vw;
  max-width: 100%;
  height: auto;
  display: block;
}

/* 이미지 위에 올라가는 영역 */
.profile-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 20px;
  align-items: center;
  justify-content: center;
  width: 70%;
  gap: 20px;
  top: 25%;
  font-size: 16px;
  left: 50%;
  translate: calc(-50%);
}
.profile-content .profile-introduce {
  width: 100%;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.profile-content .profile-introduce h1 {
  width: 100%;
  height: auto;
  font-size: 32px;
  flex: 1;
  text-align: center;

  position: relative;
  display: inline-block;
  z-index: 1;
}
/* 형광펜 */
.profile-content .profile-introduce h1::before {
  content: "";
  position: absolute;

  left: 10%;
  bottom: 8px;

  width: 80%;
  height: 60%;

  background: rgba(168, 229, 0, 0.45);

  border-radius: 4px;

  z-index: -1;

  transform: scaleX(0) rotate(-1deg);
  transform-origin: left center;

  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 스크롤 도달 시 */
.profile-content .profile-introduce h1.aos-animate::before {
  transform: scaleX(1) rotate(-1deg);
}

.profile-introduce img {
  width: 4%;
  height: 4%;
}
.profile-content .profile-text {
  position: relative;
  display: grid;
  width: 100%;
  height: auto;
  gap: 16px;
  column-gap: 40px;
  row-gap: 24px;

  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto;
  top: 0;
}

.profile-photo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.profile-photo img {
  width: 75%;
}
.information {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-text p {
  font-weight: 500;
}
.information .call {
  font-weight: 700;
  color: blue;
}
.profile-title {
  width: fit-content;
  border-bottom: 4px solid #000;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 800;
  width: 50%;
  font-family: var(--font-en);
  font-style: italic;
}
.profile-title a {
  display: flex;
}
.awrad {
  text-indent: 20px;
}
.edu-date {
  padding-bottom: 8px;
}

/* web */
.web-container {
  width: 100%;
  display: grid;
  gap: 40px;
  justify-content: center;
  padding: 20px 0;
  grid-template-columns: repeat(2, 1fr);
}
.web-container .web-card {
  /* background-color: aliceblue; */
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  flex-direction: column;
  padding: 20px 20px;
  /* border: 1px solid #fff; */
  overflow: hidden;
  border-radius: 12px;
  /* background-color: #7f7f7f; */
}
.web-card a {
  background-color: #fff;
}
.web-card a .redesign-logo {
  width: 100%;
  object-fit: cover;
}
.web-card .web-thumbnail {
  width: 100%;
  max-height: 320px;
  display: flex;

  justify-content: center;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 12px;
}
.web-card .web-thumbnail img {
  width: 200%;
  height: auto;
  object-fit: cover;
}
.web-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  border-bottom: 1px solid #aaaaaa;
  padding-bottom: 4%;
  font-size: 20px;
  color: #fff;
}

.web-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 4%;
}
.web-card-bottom {
  display: flex;
  justify-content: center;
}
.web-card-bottom .web-card {
  width: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.link {
  display: flex;
  gap: 8px;
}
.link p {
  font-family: var(--font-en);
}

/* 앱디자인 */
.app-design {
  width: 100%;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.app-design .moodhere-left {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 2;
}

.app-design .moodhere-left img {
  width: 80%;
  height: auto;
}
.app-design .acha-right {
  width: 100%;
  display: flex;
  flex: 3;
  flex-direction: column;
}
.acha-reverse {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.overview-container {
  border: 1px solid #333333;
  color: #e8e8e8;
  background-color: #000000;
  padding: 20px 20px 30px;
  margin-bottom: 40px;
  border-radius: 16px;
  text-align: left;
}
.acha-reverse.overview-text {
  text-align: left;
  font-size: 14px;
}

.app-design .acha-left {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 2;
}

.app-design .acha-left img {
  width: 80%;
  height: auto;
}

.acha-info {
  display: flex;
  flex-direction: column;
}
.acha-info .sub-title {
  font-size: 14px;
  font-weight: 200;
}
.sub-title-bottom {
  display: flex;
  align-items: center;
  gap: 12px; /* 원하는 간격 */
  padding-bottom: 20px;
}

.sub-title-bottom .part {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}

.sub-title-bottom .skill {
  width: 100%;
  display: flex;
  gap: 8px;
  flex: 1;

  align-items: center;
}

.acha-overview-container {
  border: 1px solid #333333;
  color: #e8e8e8;
  background-color: #000000;
  padding: 20px 20px 30px;
  margin-bottom: 40px;
  border-radius: 16px;
  text-align: left;
}
.acha-info .overview {
  padding-bottom: 12px;
}
.acha-info h1 {
  padding-bottom: 40px;
  font-size: 48px;
}

.acha-info .acha-skill {
  padding-bottom: 40px;
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.acha-info .skill img {
  width: 10%;
}
.acha-link {
  width: 100%;
  display: flex;
  gap: 24px;
  justify-content: flex-start;
}
.acha-link a {
  display: inline-block;
  transition: transform 0.3s ease;
}

.acha-link a:hover {
  transform: scale(1.08) rotate(-4deg);
}
.acha-link img {
  width: 90%;
  display: flex;
}
.acha-info .overview-text {
}
.acha-info {
  display: flex;
  flex-direction: column;
}
.acha-info .sub-title {
  font-size: 14px;
  font-weight: 200;
  flex: 1;
}

.acha-title-bottom {
  display: flex;
  align-items: center;
  gap: 12px; /* 원하는 간격 */
  padding-bottom: 20px;
}

.acha-title-bottom .part {
  display: flex;
  justify-content: flex-start;
  flex: 1;
}

.acha-title-bottom .skill {
  width: 100%;
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;

  align-items: center;
}

/* 카드뉴스 */
.cardnews-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 40px 0; */
}
.cardnews-swiper {
  width: 100%;
  /* padding-top: 50px;
  padding-bottom: 50px; */
}
.cardnews-swiper .swiper-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
}

.cardnews-swiper .swiper-slide {
  width: 50%;
  border: 1px solid #000;
  background-position: center;
  background-size: cover;
  /* width: 200px;
  height: 200px; */
}

.cardnews-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 브랜딩 */

.branding-container {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  gap: 50px;
  padding: 0 40px;
}

.aos {
  position: relative;
  display: flex;
  width: 100%;
}
.aos img {
  position: relative;
  width: 100%;
  height: auto;
}
.branding-img-container {
  width: 50px;
  height: auto;
  left: 10%;
  top: 10%;
}
/* 부모 컨테이너 */
.aos {
  position: relative;
  width: 100%;
  height: 500px; /* 위치 확인을 위해 높이 임의 지정 */
  display: flex;
}
.branding-sticker {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  color: #000;
}

/* 스티커 배경 */
.sticker-bg {
  width: 100%;
  display: block;
  transform: scaleX(1) rotate(181deg);
}

/* 안쪽 썸네일 */
.branding-thumbnail-container {
  position: absolute;

  top: 16%;
  left: 10%;

  width: 80%;
  display: flex;
  gap: 10%;

  align-items: center;
}

/* 왼쪽 이미지 */
.branding-thumbnail-container .branding-thumbnail {
  flex: 1;
  width: 50%;
  height: auto;

  object-fit: cover;
  border-radius: 12px;
}

/* 오른쪽 텍스트 */
.branding-thumbnail-container .branding-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;

  color: #000000;
}
.branding-thumbnail-container .branding-info h1 {
  padding-bottom: 20px;
}
.sticker-bg-2 {
  transform: scaleX(-1) rotate(183deg);
  width: 100%;
  display: block;
}
.branding-overview {
  width: 30%;
  border-bottom: 1px solid #fff;
  margin-bottom: 6%;
}

/* 모달연습 */
.gallery {
  padding: 40px;
}

.thumb {
  width: 300px;
  display: block;
  cursor: pointer;
  border-radius: 12px;
}

/* 모달 기본 숨김 */
.modal {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  inset: 0;
}

/* 열렸을 때 */
.modal.show {
  display: block;
}

/* 닫기 버튼 */
.close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: none;
  z-index: 10000;
  background: white;
  font-size: 20px;
  cursor: pointer;
  border-radius: 999px;
}

/* 모달 내부 스크롤 영역 */
.modal-content {
  width: 100%;
  height: 100%;
  padding: 80px 20px 40px;
  overflow-y: auto;
}

/* 큰 이미지 */
.modal-image {
  width: 100%;
  max-width: 900px;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
}

/* 텍스트 */
.modal-text {
  max-width: 900px;
  margin: 24px auto 0;
  line-height: 1.7;
  color: white;
}

.modal-text h2 {
  margin-bottom: 16px;
  font-size: 32px;
}

.modal-text p {
  margin-bottom: 16px;
  font-size: 18px;
}

.fade-section {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  transform: translate(-50%, -50%);
}

.fade-section p {
  justify-content: center;
  font-size: 55px;
  color: bisque;
  text-align: center;
}

.fade-text {
  justify-content: center;
  transition: all 0.6s ease;
  opacity: 0;
  transform: translateX(30px);
}

/* 보일 때 */
.fade-text.active {
  justify-content: center;
  opacity: 1;

  transform: translateX(0);
}
.container .process-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
}
.container .process-container .process {
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
  width: 80%;
  height: auto;
}