::-moz-selection {
    background: #b50101;
    color: #fff;
    }
    ::selection {
    background: #b50101;
    color: #fff;
    }
    *, *::before, *::after { box-sizing: border-box; }

    input {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
    /* 기본 리셋 */
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff; /* 흰 여백 보일 때도 배경색 일치 */
    overflow-x: hidden;
    }
    /* iOS 안전영역 변수 */
    :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* 화면 높이 보정: svh/dvh 사용 */
    body {
    min-height: 100svh;              /* 사파리 주소창 표시/숨김에 따라 안전히 계산 */
    padding-bottom: var(--safe-bottom); /* 홈 인디케이터만큼 여유 */
    overscroll-behavior-y: contain;   /* 고무줄 스크롤로 하단 배경 드러나는 것 완화 */
    }

    body{
        font-family: 'PT Serif','Noto Sans KR',serif, sans-serif;
        cursor:crosshair;
        margin:0px;
        padding:0px;
    }
    .container {
        font-size: 34px;
        width: 100%;
        min-height: 100vh;
        /* 설정 */
        position: relative;
    }
    canvas,
    .p5Canvas,
    #backgroundCanvas {
        position: fixed;   /* absolute → fixed */
        inset: 0;          /* top/right/bottom/left: 0 */
        width: 100%;
        height: 100dvh;    /* 실제 뷰포트 기준 */
        z-index: 0;        /* -1 쓰지 말기: root 배경 뒤로 빠질 수 있음 */
        display: block;
        pointer-events: none; /* 클릭 방해 X */
    }
    #header-fix,
    .container {
    position: relative;
    z-index: 1;
    }

    .child {
        z-index:0;
        
        width:100%;
        height: 100%;
        text-align:center;
        /* 상하좌우 정중앙 정렬하기 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        /* 자식 요소 전체를 중앙 정렬하기 위해, 상단 및 왼쪽 margin을 마이너스 값으로 적용하기 */
    }
    .font-min{
        font-size:14px;
        margin-top:5px;
        display:flex;
        
        
        
        flex-direction: row;
        justify-content: center;
    }
    .project-list{
        padding-bottom:100px;
        margin-bottom:250px;
    }
    @keyframes blink-effect {
        50% {
            opacity: 0;
        }
    }
    #footer{
        z-index:1;
        padding-left:10px;
    }

    .blink {
        animation: blink-effect 2s step-end infinite;
        /*
        animation-name: blink-effect;
        animation-duration: 1s;
        animation-iteration-count:infinite;
        animation-timing-function:step-end;
        */
    }
    .red{
        color:#b50101;
    }
    a{
        text-decoration: none;
        color:#000;
    }


    .on-pc {
       -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
       -ms-transition-duration: 2s;
       -o-transition-duration: 2s;
       transition-duration: 2s;
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        -o-transform: scale(0.6);
        transform: scale(0.6);
    }

    .menu_ul2 ul{
        list-style:none;
        display:flex;
        flex-direction: row;
        justify-content: center;
        padding:0px;
    }
    .menu_ul2 ul li{
        padding:0 10px 10px 10px;
        text-align:center;
    }
    .menu_ul2{
        text-align:center;
        font-size:12px;
    }
   

    .menu_ul ul{
        list-style:none;
        display:flex;
        flex-direction: row;
        justify-content: center;
        padding:0px;
    }
    .menu_ul ul li{
        padding:0 10px 10px 10px;
        text-align:center;
    }
    .menu_ul{
        text-align:center;
        font-size:12px;
    }
    .r_box{
        position:relative;
        top:35%;
     
    }
    #about-btn{
        color:#b50101;
        padding:5px 25px 5px 25px;
        border:1px solid #b50101;
        border-right:0px;
        background-color:#fff;
        margin-top:20px;
    }
    #about-btn:hover{
        background-color:#b50101;
        color:#fff;
    }
    #project-btn{
        
        /* text-decoration:underline; */
       
        color:#b50101;
        padding:5px 25px 5px 25px;
        border:1px solid #b50101;
        background-color:#fff;
        margin-top:20px;
    }
    #project-btn:hover{
        background-color:#b50101;
        color:#fff;
    }
   
    .contents-pf,.contents-af{
         max-width:1000px;
         
         margin:5% auto;
         display:none; 
         padding-bottom:40px;
         
    }
    
    .title-project,.title-about{
        color:#b50101;
        font-size:18px;
        font-weight:400;
    }

    .project-box{
        margin-bottom: 100px;
    }
   
    .project-box div{
        
        padding:10px 5% 0 5%;
    }
    .project-contents{
        font-size:14px;
        text-align:right;
    }
    .menu_ul2{
        visibility:hidden;
    }
    .home-btn{
        padding:5px 25px 5px 25px !important;
        border:1px solid #222;
    }
    .home-btn:hover{
        background-color:#222;
        color:#fff;
    }
    .about-contents{
        font-size:14px;
        text-align:left;
        line-height:22px;
        padding:15px;
        
        margin-bottom:250px;

    }
    #header-fix{
        position:fixed;
        width:100%;
        z-index:999;
        
       display:none;
       background-color:#fff;
    }
    #ptitle{
        font-size: 34px;
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        -o-transform: scale(0.6);
        transform: scale(0.6);
        text-align:center;
    }
    .pmin{
        font-size:14px;
        margin-top:5px;
        display:flex;
        flex-direction: row;
        justify-content: center;
    }

    #project-code{

    }

    .project-code-txt{
        font-size:12px;
    }

    .project-code-input{
        border:1px solid #777;
        text-align: center;
        height:35px;
        margin-top:20px;
    }


    .display_n{
        display:none;
    }


/* Desktop (Large) */
@media (min-width: 1200px) {
    .project-code-input{
        width:30%;
    }
}
    /* Desktop */
@media (max-width: 992px) {
    .project-code-input{
        width:30%;
    }
}


/* Tablet */
@media (max-width: 768px) {
    .project-code-input{
        width:50%;
    }
}
/* Mobile - Landscape */
@media (max-width: 576px) {
    .project-code-input{
        width:50%;
    }
}




/* ========== ABOUT 섹션 타이포 고정 ========== */
.contents-af {
  font-size: 14px;        /* 기본 본문 */
  line-height: 1.7;
}

.contents-af h1.title-about {  /* 섹션 타이틀 */
  font-size: 22px;        /* 기존 18px이면 그대로 두셔도 OK */
  line-height: 1.3;
}

.contents-af h2 {
  font-size: 18px;
  margin: 18px 0 8px;
  line-height: 1.4;
}

.contents-af p,
.contents-af li {
  font-size: 14px;        /* 상속 안전장치 */
}

/* 애니메이션 섹션도 동일 스케일 */
.about-section {
  font-size: 14px;
  line-height: 1.7;
}



/* === ABOUT 전용 리셋 & 타이포 === */
.contents-af { font-size:14px; line-height:1.7; }
.contents-af h1.title-about { font-size:22px; line-height:1.3; }
.contents-af h2 { font-size:18px; margin:18px 0 10px; line-height:1.4; }

/* 기본 UL 점 제거 */
.contents-af ul { list-style:none; margin:0; padding:0; }
.contents-af li { margin:6px 0; }

/* 섹션 카드화 */
.about-card {
  border:1px solid #eee;
  border-radius:14px;
  padding:16px 18px;
  background:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}

/* 카드 그리드 */
.about-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}


/* 라벨형 헤더 */
.section-head {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.section-dot {
  width:6px; height:6px; border-radius:50%; background:#b50101;
}

/* 링크 라인 */
.inline-links a { border-bottom:1px solid rgba(0,0,0,.15); }
.inline-links a:hover { border-bottom-color:#b50101; }

/* 스킬 배지 */
.badges { display:flex; flex-wrap:wrap; gap:8px; }
.badge {
  font-size:12px; padding:6px 10px; border:1px solid #eee; border-radius:999px;
  background:#fafafa;
  display: flex;
  align-items: center;
  gap: 6px;
}
.badge:hover { border-color:#b50101; }

/* SVG 아이콘 크기 통일 */
.badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 경력 요약 - 심플 카드 스타일 */
.timeline {
  padding-left: 0; /* 왼쪽 여백 제거 */
}
.timeline:before {
  display: none; /* 세로 라인 제거 */
}
.timeline-item {
  position: relative;
  padding-left: 14px;  /* 마커 자리 확보 */
  margin-bottom: 36px;
  text-align: left; /* 왼쪽 정렬 */
  border: none; /* 혹시 있을 수 있는 테두리 제거 */
  background: none; /* 배경 제거 */
  line-height: 1.5; 
}
.timeline-item:before {
  content: "-"; /* 빨간 대시 */
  position: absolute;
  left: 0;
  top: 0; /* 세로 맞춤 */
  color: #b50101; /* 빨간색 */
  font-weight: bold;
  line-height: 1.5;  
}

.timeline-images {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.timeline-images img {
  width: 120px;
  height: auto;
  border-radius: 6px;
}


/* 커스텀 리스트 마커 (작은 바) */
.list-mark li { position:relative; padding-left:14px; text-align:left;}
.list-mark li:before {
  content:""; position:absolute; left:0; top:9px; width:8px; height:2px; background:#b50101;
}

/* 등장 애니메이션 */
.about-section { opacity:0; transform:translateY(20px); }
.fade-in { animation: fadeInUp 0.8s forwards; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }
@keyframes fadeInUp { to { opacity:1; transform:translateY(0); } }

/* 전체 링크 컨테이너: 세로 정렬 */
.contact-links {
  display: flex;
  flex-direction: column; /* 세로로 배치 */
  gap: 8px;               /* 각 항목 간격 */
}

/* 각 항목: 아이콘+텍스트 가로 정렬 */
.contact-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  color: #000;
  text-decoration: none;
}

.contact-item svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
}

.contact-item:hover {
  color: #b50101;
}



@media (max-width: 768px) {
    .timeline-images {
        display: flex;
        flex-wrap: nowrap;              /* 핵심: 줄바꿈 막기 */
        overflow-x: auto;               /* 가로 스크롤 허용 */
        overflow-y: hidden;
        gap: 8px;
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
        scroll-snap-type: x mandatory;     /* 스냅 효과 */
        padding-bottom: 8px;               /* 스크롤바 자리 여유 */
        scrollbar-width: none;             /* Firefox 스크롤바 숨김 */
    }
    .timeline-images::-webkit-scrollbar { display: none; } /* 크롬/사파리 스크롤바 숨김 */

    .timeline-images img {
        flex: 0 0 50%;                 /* 화면의 80%씩 차지하도록 (원하면 70~90%로 조절) */
        max-width: 50%;
        height: auto;
        border-radius: 6px;
        scroll-snap-align: start;      /* 스냅 위치 */
    }
  .about-grid { grid-template-columns: 1fr; padding:10px;}
}