@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');

/* --- 폰트 선언 (변경 없음) --- */
@font-face {
    font-family: 'PartialSansKR-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/PartialSansKR-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LINESeedKR-Bd';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'SunBatang-Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/SunBatang-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@keyframes sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. 애니메이션 준비: 모든 타겟 요소들을 미리 숨김 */
.reveal-on-scroll {
  opacity: 0;
}

/* 3. 애니메이션 실행: is-visible 클래스가 붙으면 애니메이션 시작 */
.reveal-on-scroll.is-visible {
  animation: fadeInUp 0.7s ease-out forwards;
}

/* 4. 박스들이 랜덤처럼 보이도록 지연 시간 재배치 */
/* 네비게이션은 항상 가장 먼저 */
nav.is-visible { animation-delay: 0.1s; }

/* 첫 3x3 그리드 박스들의 등장 순서를 의도적으로 섞음 */
.box2.is-visible { animation-delay: 0.2s; } /* 중앙 상단 */
.box4.is-visible { animation-delay: 0.25s; } /* 왼쪽 중간 */
.box9.is-visible { animation-delay: 0.3s; } /* 오른쪽 하단 */
.box1.is-visible { animation-delay: 0.35s; } /* 왼쪽 상단 */
.box6.is-visible { animation-delay: 0.4s; } /* 오른쪽 중간 */
.box7.is-visible { animation-delay: 0.5s; } /* 왼쪽 하단 */
.box3.is-visible { animation-delay: 0.55s; } /* 오른쪽 상단 */
.box8.is-visible { animation-delay: 0.65s; } /* 중앙 하단 */
.box5.is-visible { animation-delay: 0.7s; } /* 중앙 중간 */


/* 5. 박스 내부 콘텐츠들의 순차적 애니메이션 (Staggering) */
/* 박스 자체가 나타난 후(위에서 설정한 delay 이후), 
   내부 콘텐츠들이 추가적인 delay를 갖고 나타납니다.
*/

/* 내부 콘텐츠 기본 설정 */
.is-visible .title,
.is-visible .intro,
.is-visible .hobby-item,
.is-visible .mbti-descriptions,
.is-visible .mbti-item,
.is-visible .skill-item,
.is-visible .showphoto .overlay,
.is-visible .weather-content,
.is-visible .time-container,
.is-visible .location-tag {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: calc(var(--box-delay) + 0.2s); /* 부모 박스 delay에 0.2초 추가 */
}

/* Box2: 나의 관심사 (내부 콘텐츠 delay) */
.box2.is-visible .title { animation-delay: calc(var(--box-delay) + 0.2s); }
.box2.is-visible .hobby-item:nth-of-type(1) { animation-delay: calc(var(--box-delay) + 0.3s); }
.box2.is-visible .hobby-item:nth-of-type(2) { animation-delay: calc(var(--box-delay) + 0.4s); }
.box2.is-visible .hobby-item:nth-of-type(3) { animation-delay: calc(var(--box-delay) + 0.5s); }
.box2.is-visible .hobby-item:nth-of-type(4) { animation-delay: calc(var(--box-delay) + 0.6s); }

/* Box4: 다룰 수 있는 기술 (내부 콘텐츠 delay) */
.box4.is-visible .title { animation-delay: calc(var(--box-delay) + 0.2s); }
.box4.is-visible .skill-item:nth-child(1) { animation-delay: calc(var(--box-delay) + 0.3s); }
.box4.is-visible .skill-item:nth-child(2) { animation-delay: calc(var(--box-delay) + 0.4s); }
.box4.is-visible .skill-item:nth-child(3) { animation-delay: calc(var(--box-delay) + 0.5s); }
.box4.is-visible .skill-item:nth-child(4) { animation-delay: calc(var(--box-delay) + 0.6s); }
/* 이하 생략, 필요시 추가 */

/* --- 프로젝트, 정보 섹션 (스크롤 아래 부분) --- */
.content2.is-visible,
.content3.is-visible {
    animation-delay: 0.2s; /* 제목이 먼저 나타나고 */
}
.box10.is-visible, .box11.is-visible, .box12.is-visible, .box13.is-visible, 
.box14.is-visible, .box15.is-visible, .box16.is-visible {
    animation-delay: 0.3s; /* 나머지 박스들이 나타남 */
}

/* =================================================================
   1. 색상 변수 정의 (라이트/다크 모드 팔레트)
   ================================================================= */
:root {
  /* 라이트 모드 (기본값) */
  --c-bg: #ffffff;
  --c-text-primary: #000000;
  --c-text-secondary: #555555;
  --c-text-tertiary: #a0a0a0;
  --c-box-bg: #f7f7f7;
  --c-nav-link: #707070;
  --c-tooltip-bg: #707070;
  --c-tooltip-text: #ffffff;
  --c-skill-tooltip-bg: #333333;
  --c-icon: #9d9d9d;
  --c-icon-hover: #333333;
  --c-clock-hand: #757575;
  --c-clock-shadow: rgba(82, 82, 82, 0.344);
  --c-location-tag: #0000007b;
  --c-overlay-button-bg: #ffffff81;
  --c-image-filter: brightness(100%);
  --c-music-overlay-filter: brightness(50%);
  --c-overlay-bg: rgba(255, 255, 255, 0.25);

  /* MBTI 색상 */
  --c-mbti-i-bg: rgba(100, 149, 237, 0.2);
  --c-mbti-n-bg: rgba(147, 112, 219, 0.2);
  --c-mbti-t-bg: rgba(60, 179, 113, 0.2);
  --c-mbti-j-bg: rgba(255, 105, 97, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 다크 모드 덮어쓰기 */
    --c-bg: #121212;
    --c-text-primary: #efefef;
    --c-text-secondary: #848484;
    --c-text-tertiary: #656565;
    --c-box-bg: #1f1f1f;
    --c-nav-link: #a0a0a0;
    --c-tooltip-bg: #f0f0f0;
    --c-tooltip-text: #121212;
    --c-skill-tooltip-bg: #f0f0f0;
    --c-icon: #757575;
    --c-icon-hover: #fafafa;
    --c-clock-hand: #858585;
    --c-clock-shadow: rgba(0, 0, 0, 0.5);
    --c-location-tag: #ffffff7b;
    --c-overlay-button-bg: #00000081;
    --c-image-filter: brightness(85%);
    --c-music-overlay-filter: brightness(40%);
    --c-overlay-bg: rgba(0, 0, 0, 0.25);

    /* MBTI 색상 (더 잘보이도록 투명도 조정) */
    --c-mbti-i-bg: rgba(100, 149, 237, 0.4);
    --c-mbti-n-bg: rgba(147, 112, 219, 0.4);
    --c-mbti-t-bg: rgba(60, 179, 113, 0.4);
    --c-mbti-j-bg: rgba(255, 105, 97, 0.4);
  }
}

/* =================================================================
   2. 기존 스타일에 변수 적용
   ================================================================= */

body {
    background-color: var(--c-bg);
    color: var(--c-text-primary);
    font-family: "Pretendard";
    padding-bottom: 4rem;
}

nav {
    margin: 1rem auto;
    padding: 3rem 0;
    max-width: 1100px;
}

nav a {
    margin: 0;
    padding: 0 1rem 0 0;
    text-decoration-line: none;
    color: var(--c-nav-link);
    position: relative;
}

nav p {
    margin: 0;
    padding: 0;
    padding-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
}

nav a::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%; 
    margin-top: 8px;
    background-color: var(--c-tooltip-bg);
    color: var(--c-tooltip-text);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 10;
}

nav a:hover::before {
    opacity: 1;
    visibility: visible;
}

#MyName {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-weight: 700;
}

.contents {
    margin: 0;
    padding: 0;
}

.gridbox {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.title {
    margin: 0;
    padding-bottom: 2rem;
    font-family: "Tossface";
    font-size: 1.2rem;
    color: var(--c-text-primary);
    font-weight: 500;
    flex-shrink: 0; 
}

.MainTitle {
    font-family: "Tossface";
    font-size: 1.3rem;
    font-weight: 600;
}

.content2, .content3 {
    grid-column: 1 / 4;
    padding-top: 5rem;
    font-family: "Tossface";
}
.content2 { grid-row: 4 / 5; }
.content3 { grid-row: 8 / 9; }


.box1, .box2, .box3, .box4, .box5, .box6, .box8, .box9{
    position: relative;
    background-color: var(--c-box-bg);
    border-radius: 20px;
    align-items: center;
    aspect-ratio: 1;
}

.box7{
    position: relative;
    border-radius: 20px;
    align-items: center;
    aspect-ratio: 1;
}

.box1, .box2, .box3, .box4, .box5, .box9 {
    padding: 2rem;
}

.box6 {
    border-radius: 20px;
    overflow: hidden;
}

.box8 {
    cursor: pointer;
}

.box10, .box11, .box12, .box13, .box14, .box15, .box16, .box17 {
    position: relative;
    background-color: var(--c-box-bg);
    border-radius: 20px;
    align-items: center;
    padding: 2rem;
}

.box13 {
    grid-column: 1 / 2;
    grid-row: 9 / 10;
}

#Introduce {
    margin: 0;
    font-family: "Tossface";
    font-size: 1.5rem;
    font-weight: 400;
}

.hobby {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.hobbylist, .hobbies {
    margin: 0;
    padding: 0;
}

.hobby-item {
    padding-bottom: 1.2rem;
}

.hobby-item .things {
    margin: 0;
    padding: 0;
    font-family: "Tossface";
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
}

.hobby-item .things::before {
    content: '-  ';
}

ion-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.hobby-item .desc {
    margin: 0.2rem 0 0 0;
    padding: 0 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--c-text-secondary);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, margin 0.5s ease-out;
}

.hobby-item:hover .desc {
    max-height: 100px;
    opacity: 1;
    margin-top: 0.5rem; 
}

.abilitylist, .learnlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 3vw, 1.5rem);
}

.abilitylist i, .learnlist i {
    margin: 0;
    padding: 0;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    color: var(--c-icon);
    transition: transform 0.2s ease, color 0.2s ease;
}

.skill-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

.skill-name {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    background-color: var(--c-skill-tooltip-bg);
    color: var(--c-tooltip-text);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 10;
}

.skill-name::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--c-skill-tooltip-bg) transparent transparent transparent;
}

.skill-item:hover .skill-name {
    opacity: 1;
    visibility: visible;
}

.skill-item:hover i {
    transform: scale(1.15);
    color: var(--c-icon-hover);
}

/* =================================================================
   MBTI 위젯 스타일 (최종 수정본)
   ================================================================= */

.box3 .mbti {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

.box3 .mbti .title {
    width: 100%;
    text-align: left;
}

.mbti-container {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

/* 기본 아이템 컨테이너 */
.mbti-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 1; 
}

/* 활성화된 아이템 컨테이너 */
.mbti-item.is-active {
    z-index: 2;
}

/* 배경 원 (::before) */
.mbti-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* MBTI 글자 */
.mbti-letter {
    font-size: 2.5rem;
    font-weight: 600;
    position: relative;
    transition: transform 0.5s ease;
    z-index: 2;
}

/* 활성화된 아이템의 스타일 (원의 크기, 글자 크기 변경) */
.mbti-item.is-active::before {
    width: 800px;
    height: 800px;
    opacity: 1;
}

.mbti-item.is-active .mbti-letter {
    transform: scale(1.2);
}

/* --- 나머지 mbti-desc, 색상 지정 등은 그대로 유지 --- */
.mbti-item:nth-child(1)::before { background-color: var(--c-mbti-i-bg); }
.mbti-item:nth-child(2)::before { background-color: var(--c-mbti-n-bg); }
.mbti-item:nth-child(3)::before { background-color: var(--c-mbti-t-bg); }
.mbti-item:nth-child(4)::before { background-color: var(--c-mbti-j-bg); }

.mbti-descriptions {
    position: relative;
    height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.mbti-desc {
    position: absolute;
    font-size: 1rem;
    color: var(--c-text-primary);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    white-space: nowrap;
}

.mbti-desc.is-active {
    opacity: 1;
}

/* =================================================================
   3. LP 플레이어 스타일 (수정)
   ================================================================= */

/* box6: 오버레이를 위한 위치 기준(positioning context)을 설정합니다. */
.box6 {
    position: relative; /* 자식 요소의 absolute 위치 기준 */
    overflow: hidden;   /* 박스 밖으로 나가는 모든 요소를 숨깁니다. */
    cursor: pointer;
}

/* LP판: 박스를 거의 가득 채우고 천천히 회전합니다. */
.lp-record {
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* 테두리가 크기 안으로 계산되도록 설정 */
    animation: spin 25s linear infinite; /* 느리게 회전 (25초에 한 바퀴) */
    
    /* 이미지와 중앙 구멍을 위한 flex 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 앨범 아트 이미지에 LP판 테두리 효과를 직접 줍니다. */
.lp-record img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 12px solid #1a1a1a; /* LP판 테두리 효과 */
    box-sizing: border-box;
    filter: var(--c-image-filter);
}

/* LP판 중앙의 작은 구멍 효과 */
.lp-record::after {
    content: '';
    position: absolute;
    width: 10%;
    height: 10%;
    border-radius: 50%;
    background: var(--c-box-bg);
    border: 2px solid #555;
    z-index: 2;
}

/* 정보 오버레이: ... */
.box6 .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 1.5rem 1.5rem;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    
    /* --- 이하 나머지 속성은 그대로 유지 --- */
    background-color: var(--c-overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    mask-image: linear-gradient(to top, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);

    opacity: 0;
    transition: opacity 0.4s ease-out;

    text-align: center;
    color: var(--c-text-primary);
}

/* 마우스를 올렸을 때의 오버레이 스타일 */
.box6:hover .overlay {
    opacity: 1;
}

/* 오버레이 내부 텍스트 기본 스타일 초기화 */
.box6 .overlay .title,
.box6 .overlay .musictitle,
.box6 .overlay .musicartist {
    padding: 0;
    margin: 0;
    text-shadow: 0 1px 5px rgba(0,0,0,0.2); /* 텍스트 가독성을 위한 그림자 */
}

/* 다크모드에서 텍스트 색상을 흰색으로 고정 */
@media (prefers-color-scheme: dark) {
    .box6 .overlay .title,
    .box6 .overlay .musictitle,
    .box6 .overlay .musicartist {
        color: #ffffff;
    }
}

.box6 .overlay .title {
    font-size: 1rem;
}

.box6 .overlay .musictitle {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 0.75rem;
}

.box6 .overlay .musicartist {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 0.5rem;
    opacity: 0.85;
}

.box6 .more {
    display: none;
}

/* =================================================================
   4. 시계 관련 스타일
   ================================================================= */

.box3, .box9 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
}

.time-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.second-hand-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.second-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: var(--c-clock-hand);
    transform-origin: bottom;
    animation: sweep 60s linear infinite;
}

.time-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: var(--c-text-primary);
}

.time-display .period {
    font-size: 1rem;
    font-weight: 300;
    color: var(--c-text-secondary);
    line-height: 1;
}

.time-display .hour,
.time-display .minute {
    font-size: 5rem;
    font-weight: 400;
    line-height: 1;
    text-shadow: 0px 0px 10px var(--c-clock-shadow);
}

/* =================================================================
   5. 위치 태그 및 사진 관련 스타일
   ================================================================= */

.location-tag {
    font-family: "Tossface";
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-location-tag);
    z-index: 3;
}

.showphoto {
    position: relative;
    width: 100%;
    height: 100%;
}

.showphoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    filter: var(--c-image-filter);
}

.overlay {
    position: absolute;
    padding: 2rem 0 0 2rem;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
}

/* 더보기 버튼 스타일 */

.more a {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    position: absolute;
    right: 0;
    bottom: 0;
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--c-text-primary);
    background-color: var(--c-overlay-button-bg);
    text-decoration: none;
    border-radius: 20px;
}

a.title {
    text-decoration-line: none;
    color: var(--c-text-primary);
}

.project p {
    margin: 0;
    padding-top: 2rem;
    font-weight: 400;
    font-size: 1rem;
    color: var(--c-text-secondary);
    text-decoration: none;
}

.School {
    margin: 0;
    padding: 0;
    font-family: "Tossface";
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--c-text-primary);
}

.Detail {
    margin: 0;
    padding: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--c-text-tertiary);
}

/* =================================================================
   6. 날씨 관련 스타일
   ================================================================= */

.box8 {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

.weather-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

.weather-content .title {
    position: absolute;
    top: 0;
    left: 0;
    padding-bottom: 0;
    font-weight: 600;
}

.weather-icon {
    width: 100px;
    height: 100px;
    margin-top: 1rem;
    filter: var(--c-image-filter);
}

.weather-info {
    margin-top: 3rem;
}

.weather-temp {
    font-size: 2.5rem;
    font-weight: 500;
}

.weather-desc {
    font-size: 1rem;
    color: var(--c-text-secondary);
    margin-top: 0.5rem;
}