html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
  scrollbar-gutter: stable;      /* 최신 브라우저 */
}



body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

a {
  color: inherit; /* 링크 기본 색상 */
  text-decoration: none; /* 밑줄 제거 (선택사항) */
}

a:visited {
  color: inherit; /* ✅ 방문한 링크도 같은 색상으로 유지 */
}

:root {
  /* Calvino 기본 폰트 패밀리 */
  --font-calvino-family: "calvino", sans-serif;

  /* 각 스타일별 weight/style */
  --font-calvino-regular: 400;
  --font-calvino-bold: 700;

  --font-style-normal: normal;
  --font-style-italic: italic;
}

body{
    font-family: var(--font-calvino-family);
    font-weight: var(--font-calvino-regular);
    font-style: var(--font-style-normal);
    width: 100%
}

main{
    box-sizing: border-box;
    width: 100%;
}
/* Base */

header {
    width: 100%;
    padding: 20px;
    font-size: 30px;
    display: flex;
    justify-content: center;  /* 전체 기준 중앙 */
    align-items: center;      /* 수직 정렬 */
    border-bottom: 1px solid black;
    position: sticky;
    top: 0;
    background-color: white;
    position: relative;       /* absolute 배치 기준 */
    z-index: 999;
}

/* 가운데 배치 */
header .center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 오른쪽 끝 */
header .contact {
    margin-left: auto;
}

/* Main */

main{
    width: 100%;
    padding: 20px;
    padding-top: 0px ;

}

.home{
    transition: filter 1s ease; /* 부드러운 전환 */
}

.home:hover{
    filter: blur(3px); /* 블러 정도 조절 가능 */
}

.contact{
    transition: filter 1s ease; /* 부드러운 전환 */
}
.contact:hover{
    filter: blur(3px); /* 블러 정도 조절 가능 */
}
.sectionHeader{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px 0;
    border-bottom: 1px solid black;
}

.sectionTitle{
    text-align: center;
    font-size: 30px;
    padding: 10px 0;
}

.sectionAbout{
    text-align: center;
    font-size: 30px;
    padding: 10px 0;
}

.projectList{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-size: 20px;
}

.section{
    display: flex;
    flex-direction: column;
}

.projectListRow{
    display: grid;
    grid-template-columns: 0.2fr 1fr 0.5fr;
    gap:10px;
    padding: 15px 0;
    border-bottom: 1px solid black;
    
}

.clickable > div{
    transition: filter 1s ease; /* 부드러운 전환 */
}

.clickable:hover div{
  filter: blur(2px); /* 블러 정도 조절 가능 */
}

.projectListRow > div{
    text-align: center;
    white-space: nowrap;        /* 줄바꿈 방지 */
    overflow: hidden;           /* 넘친 부분 숨김 */
    text-overflow: ellipsis;    /* ... 처리 */
}

/* Detail */
.projectDetail{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.detailHeader{
    width: 100%;
    font-size: 180px;
    line-height: 1.2;
    padding: 20px 0;
    border-bottom: 1px solid black;
}

.mainRegion{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 33.6px;
    justify-content: center;
}

.mainRegion > .image{
    width: 100%;
}

iframe{
    margin: 20px auto;
}

.image > img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.size-xl > img{
    width: 100%;
}

.size-l > img{
    width: 60%;
}

.size-m > img{
    width: 40%;
}

.size-s > img{
    width: 20%;
}

.mainRegion > p {
    width: 60%;
    min-width: 300px;
    line-height: 1.4;
    font-size: 24px;
}

p > strong {
    font-weight: var(--font-calvino-bold);
}

p > em {
    font-style: var(--font-style-italic);
}

.mainRegion > a {
    text-decoration : underline;
    text-underline-offset : 3px;
}

.contactContainer{
    display: flex;
    flex-direction: column;
    gap: 33.6px;
    padding: 20px 0;
}

.contactContainer p {
    width: 60%;
    min-width: 300px;
    line-height: 1.4;
    font-size: 24px;
}

.contactContainer a {
    text-decoration : underline;
    text-underline-offset : 3px;
}

.contactCV{
    line-height: 1.2;
}

.contactInfo{
    line-height: 1.2;
}

/* 인터랙션: 터치 환경에서는 hover 블러 제거 */
@media (hover: none) {
  .home:hover,
  .contact:hover,
  .clickable:hover div {
    filter: none;
  }
}

/* 태블릿 이하 (≤1024px) 약한 축소 */
@media (max-width: 1024px) {
  header { font-size: 24px; padding: 16px; }
  .sectionTitle,
  .sectionAbout { font-size: 26px; }
  .projectList { gap: 16px; }
  .projectListRow { gap: 8px; }
  .mainRegion > p,
  .contactContainer p { width: 80%; }
}

/* 모바일 기본 (≤768px) */
@media (max-width: 768px) {
  /* 레이아웃 여백/폰트 */
  body { line-height: 1.35; }
  main { padding: 16px; padding-top: 0; }
  .sectionHeader { padding: 8px 0; }
  .sectionTitle,
  .sectionAbout { font-size: 14px; padding: 8px 0; }

header {
  display: flex;
  justify-content: space-between; /* 좌/우 끝으로 정렬 */
  align-items: center;            /* 수직 중앙 정렬 */
  font-size: 14px;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  background-color: white;
}

header .center {
  position: static;   /* 필요 없으면 제거 */
  transform: none !important;
}

header .contact {
  margin-left: 0;     /* 기존 margin-left:auto 제거 */
}

  /* 리스트: 2열 → 1열 */
  .projectList {
    grid-template-columns: 1fr;
    gap: 12px;
    font-size: 16px;
    display: block;
  }

  /* 행: 3칸 → 세로 스택 */
  .projectListRow {
    grid-template-columns: 0.3fr 2fr 1fr;
    gap: 6px;
    padding: 12px 0;
  }
  .projectListRow > div {
    text-align: left;
    white-space: normal;         /* 말줄임 해제 */
    overflow: visible;
    text-overflow: clip;
  }

  

  /* 디테일 헤더: 유동 폰트 */
  .detailHeader {
    font-size: clamp(40px, 12vw, 100px);
    line-height: 1.15;
    padding: 12px 0;
  }

  /* 본문 폭/폰트 축소 */
  .mainRegion { gap: 24px; }
  .mainRegion > p {
    width: 100%;
    min-width: 0;
    font-size: 18px;
  }
  .contactContainer { gap: 24px; padding: 12px 0; }
  .contactContainer p {
    width: 100%;
    min-width: 0;
    font-size: 18px;
  }

  /* 이미지: 모바일에서는 모두 가로 100% */
  .size-xl > img,
  .size-l  > img,
  .size-m  > img,
  .size-s  > img,
  .image   > img {
    width: 100%;
    height: auto;
  }

  /* 임베드(유튜브 등) 반응형 */
  iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* 필요 시 조절 */
    margin: 12px 0;
  }

    .sectionHeader {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
  }
  .sectionHeader .sectionTitle {
    cursor: pointer;
    text-align: center;
    user-select: none;
    padding: 8px 0;
    opacity: 0.4;
    transition: opacity .2s ease;
  }
  .sectionHeader .sectionTitle.is-active {
    opacity: 1;
  }

  /* 리스트 2열 → 1열 */
  .projectList {
    grid-template-columns: 1fr;
  }

  .projectList > .section {
    transition: opacity 1s ease, transform 0.6s ease;
  }

  /* 모바일에서는 비활성 섹션 숨김 */
  .projectList > .section[hidden] {
     display: block !important; /* hidden 대신 block 유지 */
    opacity: 0;
    transform: translateY(40px);
    pointer-events: none;  /* 클릭 방지 */
    height: 0;
    overflow: hidden;
  }
  .projectList > .section:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    height: auto;
  }
}

/* 소형 폰 (≤420px): 조금 더 단정하게 */
@media (max-width: 420px) {
  header { font-size: 18px; padding: 10px 14px; }
  .sectionTitle,
  .sectionAbout { font-size: 20px; }
  .projectList { font-size: 15px; }
  .mainRegion > p,
  .contactContainer p { font-size: 16px; }
  .detailHeader { font-size: clamp(34px, 11vw, 72px); }
}