/* body {
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    background: #ffffff;
    color: #111;
    overflow: hidden;
} */

body {
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    background: #ffffff;
    color: #111;
    overflow-x: hidden;
    overflow-y: auto;
}

/* BASE PANEL STYLE */
.panel {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 80px;
    box-sizing: border-box;
    background: #ffffff;

    opacity: 0;
    pointer-events: none;
    transition: top 0.6s ease, opacity 0.4s ease;
}

/* MAIN – vertically centered, left aligned */
.main-panel {
    display: flex;
    align-items: center;
    padding-left: 80px;
}

/* Wrapper to fix vertical centering layout */
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Name Title at top */
.main-name {
    font-size: 3rem;
    margin-bottom: 30px;
    font-weight: 700;
}

.panel.active {
    opacity: 1;
    pointer-events: auto;
}

/* ===== Intro lines: appear one by one ===== */
.main-text .line{
  display: block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  transition: opacity 1200ms ease, transform 1200ms ease, filter 1200ms ease;
  margin-bottom: 10px;
}

.main-text .line.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ===== Floating / breathing links ===== */
.link{
  display: inline-block;         /* 애니메이션 적용 필수 */
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;

  /* 기본 상태에서 은근하게 움직이게 */
  animation: floaty 3.6s ease-in-out infinite;
  will-change: transform;
}

/* 각각 링크가 "같이" 움직이면 인공적이라, 약간씩 위상 다르게 */
.link:nth-of-type(1){ animation-delay: 0s; }
.link:nth-of-type(2){ animation-delay: .4s; }
.link:nth-of-type(3){ animation-delay: .8s; }
.link:nth-of-type(4){ animation-delay: 1.2s; }
.link:nth-of-type(5){ animation-delay: 1.6s; }

/* hover하면 호흡(breathe)으로 바뀌게 */
.link:hover{
  animation: breathe 1.8s ease-in-out infinite;
}

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-6px); }
}

@keyframes breathe{
  0%,100%{ transform: translateY(0) scale(1); }
  50%    { transform: translateY(-2px) scale(1.05); }
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .main-text .line,
  .link{
    transition: none !important;
    animation: none !important;
  }
}


/* SLIDE UP (default) */
.slide-up {
    top: 100vh;
}
.slide-up.active {
    top: 0;
}

/* SLIDE DOWN (Nolmen & Space only) */
.slide-down {
    top: -100vh;
}
.slide-down.active {
    top: 0;
}

/* SCROLLABLE PANELS */
.scrollable {
    overflow-y: auto;
}

/* TEXT */
.main-text {
    font-size: 2rem;
    line-height: 1.4;
}

.link {
    color: #0077ff;
    cursor: pointer;
}

/* CV LINK */
.cv-link {
    margin-top: 40px;
    display: inline-block;
    border-bottom: 1px solid #000;
    color: #000;
    text-decoration: none;
}

/* BACK BUTTON */
#backButton {
    position: fixed;
    top: 30px;
    right: 40px;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

#backButton.visible {
    opacity: 1;
    pointer-events: auto;
}

/* SOCIAL ICONS */
.social-icons {
    margin-top: 25px;
    display: flex;
    gap: 14px;
}

.social-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000;
    font-size: 0.9rem;
    transition: 0.25s ease;
}

.social-circle:hover {
    background: #000;
    color: #fff;
}

.nolmen-icons {
    margin-top: 30px;
    display: flex;
    gap: 14px;
}

/* TITLES */
.panel-title {
    font-size: 3rem;
    margin-bottom: 40px;
}

/* ARCHITECTURE */
.grid-architecture {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 600px;
}

.arch-item {
    padding: 14px 18px;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
}

/* ARCHITECTURE – IMAGE GRID STYLE (Art 패널과 동일하게) */
.arch-grid-img {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    max-width: 900px;
}

.arch-img-item {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    display: block;
    background: #000;
}

.arch-img-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: 0.35s ease;
}

.arch-img-item:hover img {
    transform: scale(1.05);
    filter: grayscale(0);
}

/* Overlay */
.arch-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 14px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    opacity: 0;
    transition: 0.35s ease;
    font-size: 0.95rem;
}

.arch-img-item:hover .arch-overlay {
    opacity: 1;
}

/* ART: IMAGE GRID */
.art-section {
    margin-bottom: 50px;
}

.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.art-item {
    position: relative;
    height: 220px;
    overflow: hidden;
    display: block;
}

.art-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.art-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px 14px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    opacity: 0;
    transition: 0.3s;
}

.art-item:hover .art-overlay {
    opacity: 1;
}

/* =========================
   RESEARCH (final)
   ========================= */

#research .research-list {
    max-width: 900px;
}

/* 카드형 아이템 */
#research .research-item {
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: 0.18s ease;
}

#research .research-item:hover {
    border-color: #0077ff;
    box-shadow: 0 10px 26px rgba(0,119,255,0.12);
}

/* meta (year/venue) */
#research .research-meta {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-bottom: 6px;
}

/* title3 */
#research .title3 {
    font-size: 1.6rem;
    font-weight: 650;
    line-height: 1.3;
}

/* authors */
#research .research-authors {
    font-size: 0.9rem;
    opacity: 0.65;
    margin-top: 6px;
}

/* spacer */
#research .research-spacer {
    height: 16px;
}

/* abstract text */
#research .research-abstract {
    font-size: 1rem;
    line-height: 1.65;
    opacity: 0.95;
}

/* ---- Abstract collapse (default collapsed) ---- */
#research .research-abstract {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

#research .research-abstract.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* toggle button */
#research .abstract-toggle {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s ease;
}

#research .abstract-toggle:hover {
    border-color: #0077ff;
    box-shadow: 0 0 0 3px rgba(0,119,255,0.12);
}

/* pdf link */
#research .pdf-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    text-decoration: none;
    color: #0077ff;
}

#research .pdf-link:hover {
    text-decoration: underline;
}


/* 

body {
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    background: #ffffff;
    color: #111;
    overflow: hidden;
}


/* BASE PANEL STYLE */
.panel {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 80px;
    box-sizing: border-box;
    background: #ffffff;

    opacity: 0;
    pointer-events: none;
    transition: top 0.6s ease, opacity 0.4s ease;
}

/* MAIN – vertically centered, left aligned */
.main-panel {
    display: flex;
    align-items: center;        /* 세로 가운데 */
    padding-left: 80px;         /* 좌측 여백 유지 */
}

/* Wrapper to fix vertical centering layout */
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Name Title at top */
.main-name {
    font-size: 3rem;
    margin-bottom: 30px;
    font-weight: 700;
}


.panel.active {
    opacity: 1;
    pointer-events: auto;
}

/* SLIDE UP (default) */
.slide-up {
    top: 100vh;
}
.slide-up.active {
    top: 0;
}

/* SLIDE DOWN (Nolmen & Space only) */
.slide-down {
    top: -100vh;
}
.slide-down.active {
    top: 0;
}

/* SCROLLABLE PANELS */
.scrollable {
    overflow-y: auto;
}

/* TEXT */
.main-text {
    font-size: 2rem;
    line-height: 1.4;
}

.link {
    color: #0077ff;
    cursor: pointer;
}

/* CV LINK */
.cv-link {
    margin-top: 40px;
    display: inline-block;
    border-bottom: 1px solid #000;
    color: #000;
    text-decoration: none;
}

/* BACK BUTTON */
#backButton {
    position: fixed;
    top: 30px;
    right: 40px;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

#backButton.visible {
    opacity: 1;
    pointer-events: auto;
}

/* SOCIAL ICONS */
.social-icons {
    margin-top: 25px;
    display: flex;
    gap: 14px;       /* 아이콘 간격 */
}

.social-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000;
    font-size: 0.9rem;
    transition: 0.25s ease;
}

.social-circle:hover {
    background: #000;
    color: #fff;
}

.nolmen-icons {
    margin-top: 30px;
    display: flex;
    gap: 14px;
}



/* TITLES */
.panel-title {
    font-size: 3rem;
    margin-bottom: 40px;
}

/* ARCHITECTURE */
.grid-architecture {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 600px;
}

.arch-item {
    padding: 14px 18px;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
}

/* ARCHITECTURE – IMAGE GRID STYLE (Art 패널과 동일하게) */
.arch-grid-img {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    max-width: 900px;
}

.arch-img-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Ratio */
    overflow: hidden;
    display: block;
    background: #000; /* 이미지 없는 경우 black bg */
}

.arch-img-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1); /* 흑백 처리 */
    transition: 0.35s ease;
}

.arch-img-item:hover img {
    transform: scale(1.05);
    filter: grayscale(0); /* Hover 시 흑백 → 컬러 or 유지 가능 */
}

/* Overlay */
.arch-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 14px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    opacity: 0;
    transition: 0.35s ease;
    font-size: 0.95rem;
}

.arch-img-item:hover .arch-overlay {
    opacity: 1;
}


/* ART: IMAGE GRID */
.art-section {
    margin-bottom: 50px;
}

.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.art-item {
    position: relative;
    height: 220px;
    overflow: hidden;
    display: block;
}

.art-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.art-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px 14px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    opacity: 0;
    transition: 0.3s;
}

.art-item:hover .art-overlay {
    opacity: 1;
}









/* =========================
   RESEARCH (final)
   ========================= */

/* 기본 RESEARCH 폭 */
#research .research-list {
    max-width: 900px;
}

/* 카드형 아이템 */
#research .research-item {
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: 0.18s ease;
}

#research .research-item:hover {
    border-color: #0077ff;
    box-shadow: 0 10px 26px rgba(0,119,255,0.12);
}

/* meta (year/venue) */
#research .research-meta {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-bottom: 6px;
}

/* title3 */
#research .title3 {
    font-size: 1.6rem;
    font-weight: 650;
    line-height: 1.3;
}

/* authors */
#research .research-authors {
    font-size: 0.9rem;
    opacity: 0.65;
    margin-top: 6px;
}

/* spacer */
#research .research-spacer {
    height: 16px;
}

/* abstract text */
#research .research-abstract {
    font-size: 1rem;
    line-height: 1.65;
    opacity: 0.95;
}

/* ---- Abstract collapse (default collapsed) ---- */
#research .research-abstract {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

#research .research-abstract.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* toggle button */
#research .abstract-toggle {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s ease;
}

#research .abstract-toggle:hover {
    border-color: #0077ff;
    box-shadow: 0 0 0 3px rgba(0,119,255,0.12);
}

/* pdf link */
#research .pdf-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    text-decoration: none;
    color: #0077ff; /* var(--point-color) 대신 확정 색 */
}

#research .pdf-link:hover {
    text-decoration: underline;
}
/* 


RESEARCH */
.research-list {
    max-width: 600px;
}

.research-item {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* PDF 링크 */
.pdf-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    text-decoration: none;
    color: var(--point-color);
}

.pdf-link:hover {
    text-decoration: underline;
}

/* =========================
   RESEARCH (improved layout)
   Paste at the bottom
   ========================= */

/* list width + spacing */
#research .research-list {
    max-width: 900px;   /* 기존 600px보다 넓게 */
}

/* research item as a card (doesn't touch .panel) */
#research .research-item {
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    background: #fff;

    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: 0.18s ease;
}

#research .research-item:hover {
    border-color: #0077ff;
    box-shadow: 0 10px 26px rgba(0,119,255,0.12);
}

/* meta (year/venue) */
#research .research-meta {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-bottom: 6px;
}

/* title3 */
#research .title3 {
    font-size: 1.6rem;
    font-weight: 650;
    line-height: 1.3;
}

/* authors */
#research .research-authors {
    font-size: 0.9rem;
    opacity: 0.65;
    margin-top: 6px;
}

/* spacer */
#research .research-spacer {
    height: 16px;
}

/* abstract text */
#research .research-abstract {
    font-size: 1rem;
    line-height: 1.65;
    opacity: 0.95;
}

/* ---- Abstract collapse (default collapsed) ---- */
#research .research-abstract {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;  /* 기본 4줄만 보이기 */
    overflow: hidden;
}

#research .research-abstract.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* toggle button */
#research .abstract-toggle {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s ease;
}

#research .abstract-toggle:hover {
    border-color: #0077ff;
    box-shadow: 0 0 0 3px rgba(0,119,255,0.12);
}

/* pdf link (safe fallback color) */
#research .pdf-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    text-decoration: none;
    color: var(--point-color, #0077ff); /* fallback */
}

#research .pdf-link:hover {
    text-decoration: underline;
}


#research .research-abstract {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

#research .research-abstract.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}


 */

html,
body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

.panel {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .panel {
        padding: 48px 24px 80px;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .main-panel {
        padding-left: 24px;
    }

    .main-text {
        font-size: 1.35rem;
    }

    .panel-title {
        font-size: 2rem;
    }

    .art-grid,
    .arch-grid-img {
        grid-template-columns: 1fr;
    }

    .arch-overlay,
    .art-overlay {
        opacity: 1;
    }
}