/* =========================================================
   공통
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-family: 'NanumSquare';
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}


html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
}

.wh100 {
  width: 100dvw;
  height: 100dvh;
}

.section {
  position: relative;
  min-height: 100svh;
  box-sizing: border-box; /* padding-bottom을 줘도 섹션 높이가 100dvh를 넘지 않게 */

  scroll-snap-align: start;
  scroll-snap-stop: always; /* 빠르게 스크롤해도 섹션을 건너뛰지 않고 하나씩 멈춤 */
}

/* 세로 중앙 정렬 섹션 공통 */
#projects, #me, #tech, #source {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 내용이 길어져도 다음 섹션을 안 덮게 */
#me, #tech, #source {
  height: auto;
  min-height: 100dvh;
}

/* 스크롤 힌트(absolute)가 카드와 겹치지 않게 아래 여백 확보 */
#me, #tech, #contact, #source {
  padding-bottom: 110px;
}

.sectionheader {
  box-sizing: border-box;
  width: 100dvw;
  height: 25dvh;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1dvh;
  text-align: center;
  word-break: keep-all;
}

.sectionname {
  font-family: 'OkMallangB';
  font-size: clamp(2.5rem, 12vw, 4rem); /* 좁은 화면에서 제목이 넘치지 않게 */
}

/* 스크롤 힌트 */
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.scroll-hint:hover {
  opacity: 1;
}

.scroll-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-hint .arrow {
  font-size: 20px;
  animation: bounce 1.6s ease-in-out infinite;
}

/* 위쪽 화살표는 위로 튀게 */
.scroll-hint.up .arrow {
  animation-name: bounce-up;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes bounce-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 카드 그리드 공통 (#me, #tech) */
.me-grid, .tech-grid {
  width: min(960px, calc(100% - 40px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.me-card, .tech-card {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 24px;
}

.me-card h3, .tech-card h3 {
  font-size: 1.6em;
}

@media (max-width: 720px) {
  .me-grid, .tech-grid {
    grid-template-columns: 1fr;
  }
  .me-card-profile {
    grid-row: auto;
  }

  /* 모바일: 카드가 1열로 쌓여 섹션이 길어지므로 스냅을 약하게 */
  html {
    scroll-snap-type: y proximity;
  }
  .section {
    scroll-snap-stop: normal;
  }
}

/* =========================================================
   #main
   ========================================================= */
#main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: oklch(0.95 0.07 90);
}

#myname {
  font-family: 'WildGag';
  font-size: clamp(2rem, 10vw, 3rem);
}

/* =========================================================
   #projects
   ========================================================= */
#projects {
  background-color: oklch(0.95 0.07 140);
}

/* 배너 전체 영역 */
.banner-container {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100dvw;
  height: 55dvh;
  padding: 2.5dvh 0;
  background-color: oklch(0.9 0.09 140);

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;
}

.banner-container::-webkit-scrollbar {
  display: none;
}

.banner-container.dragging {
  cursor: grabbing;
}

/* 아이템이 나열되는 트랙 */
.banner-track {
  display: flex;
  width: max-content;
  height: 100%;
}

/* 개별 배너 아이템 */
.banner-item {
  flex-shrink: 0;
  width: clamp(260px, 80dvw, 340px);
  height: 55dvh;
  margin-right: 20px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 18px;
  background-color: attr(data-bgcolor type(<color>), oklch(0.6 0.07 140));
  color: attr(data-color type(<color>), #000);
}

/* 카드 안쪽 세로 배치 */
.banner-item-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.banner-item-logotitle {
  display: flex;
  gap: 1dvw;
  align-items: center;
}

.banner-item-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 16px;
  flex-shrink: 0;
  pointer-events: none; /* 이미지 위에서 드래그해도 스크롤되게 */
}

.banner-item-title {
  font-size: 1.3em;
}

.banner-item-desc {
  font-size: 0.85em;
  font-weight: normal;
  line-height: 1.6;
  opacity: 0.75;
  word-break: keep-all;
}

/* 링크는 카드 맨 아래로 */
.banner-item-links {
  margin-top: auto;
  display: flex;
  gap: 16px;
}

.banner-item-links > a {
  display: flex;
}

.banner-item-links i {
  font-size: 32px;
}

.banner-item-links > a > img[alt="Github"] {
  width: 32px;
  height: 32px;
  object-fit: contain;
  pointer-events: none;
}

/* 무한 스크롤 애니메이션 (index.html에서는 사용 안 함) */
@keyframes scrollBanner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* =========================================================
   #me
   ========================================================= */
#me {
  background-color: oklch(0.95 0.07 250);
}

#imschooldeveloper {
  text-align: center;
}

#imschooldeveloper h3 {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  padding: 0 20px;
  margin-bottom: 3dvh;
  word-break: keep-all;
}

.me-card {
  line-height: 1.6;
  word-break: keep-all;
}

.me-card-profile {
  grid-row: span 2; /* 왼쪽 카드를 세로로 길게 */
}

.me-card h3 {
  font-family: 'OkMallangB';
  margin-bottom: 12px;
}

.me-info,
.me-brag {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.me-info li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.me-info .label {
  flex-shrink: 0;
  font-size: 0.75em;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: oklch(0.85 0.1 250);
}

.me-brag {
  margin-top: 8px;
}

.me-brag li::before {
  content: "🏆 ";
}

/* =========================================================
   #tech
   ========================================================= */
#tech {
  background-color: oklch(0.95 0.07 300);
}

.tech-card-wide {
  grid-column: 1 / 1 / 1;
}

.tech-card h3 {
  font-family: 'WildGag';
  margin-bottom: 16px;
}

.tech-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 24px;
}

.tech-icons figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 72px;
}

.tech-icons img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  pointer-events: none;
}

.tech-icons figcaption {
  font-size: 0.75em;
  text-align: center;
  word-break: keep-all;
}

/* =========================================================
   #contact
   ========================================================= */

#contact {
  height: auto;
  min-height: 100dvh;
  background-color: oklch(0.95 0.07 360);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-list {
  width: min(640px, calc(100% - 40px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.7);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s, background-color 0.2s;
}

.contact-card:hover {
  transform: translateY(-3px);
  background-color: rgba(255, 255, 255, 0.95);
}

/* 터치 기기에서는 hover 상태가 남지 않게 */
@media (hover: none) {
  .contact-card:hover {
    transform: none;
    background-color: rgba(255, 255, 255, 0.7);
  }
}

.contact-card i {
  font-size: 36px;
  width: 44px;
  text-align: center;
  flex-shrink: 0;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-info strong {
  font-size: 1.1em;
}

.contact-info span {
  font-size: 0.85em;
  opacity: 0.7;
  overflow-wrap: anywhere;
}

/* =========================================================
   #source
   ========================================================= */
#source {
  background-color: oklch(0.95 0.07 380);
}

.source-list {
  width: min(640px, calc(100% - 40px));
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.source-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.7);
}

.source-tag {
  flex-shrink: 0;
  font-size: 0.75em;
  padding: 2px 12px;
  border-radius: 999px;
  background-color: oklch(0.85 0.1 380);
}

.source-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.source-name {
  font-size: 1.2em;
}

.source-by {
  font-size: 0.85em;
  opacity: 0.7;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.source-by a {
  color: inherit;
}

/* =========================================================
   접근성: 움직임 줄이기 (다른 애니메이션 규칙보다 뒤에 있어야 함)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .scroll-hint .arrow,
  .scroll-hint.up .arrow {
    animation: none;
  }
}