/* * {
     background-color: rgba(188, 255, 31, 0.13);
} */


/* overflow-x: hidden;은 노에 팝업사진 오른쪽 공백 생기는거 자름 */
html {
    overflow-x: hidden;
}

body {
    color: aliceblue;
    background-color: black;
    overflow-x: hidden;
    overflow-y: hidden;
}

header { 
    display: flex;
    justify-content: space-between;
}

header span{ 
    word-break: keep-all;
}

header MARQUEE {
    width: 60%;
    margin: 0 1rem 0 1rem;
}

header a {
    text-decoration: none;
    color: aliceblue;
    margin: 0;
}

header .right {
    float: right;
    white-space:nowrap;
}

nav {
    width: 100%;
    height: 8rem;
}

nav #home {
    border: none;
    float: left;
}

nav #home img {
    animation: rotate_image 60s ease-in-out infinite;transform-origin: 50% 50%;
    filter: drop-shadow(16px 16px 20px red) invert(75%);
}

nav #home a {
  height: 31px;
}

@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}

nav .anotherPage {
    text-decoration: none;
    color: aliceblue;
    border: 4px rgba(162, 70, 255, 0.562) double;
    float: left;
    margin: 2px;
}

section {
    background: url(../img/Momiji_flow.png);
    display: inline-block;
    width: 100%;
}

section #counterBox {
    text-align: right;
    padding-right: 2rem;
}
    
section #counterBox #counterLink{
    margin: 0;
    padding: 0;
    color: azure;
    text-decoration: none;
    font-weight: bold;
  }  

  section .counterAll {
    font-weight: bold;
    opacity: 0.7;
    /* filter: blur(5px); */
    animation: colorCycle 3s infinite, flicker 0.5s infinite alternate;
    /* text-shadow:
      0 0 5px #0f0,
      0 0 10px #0f0,
      0 0 20px #0f0,
      0 0 40px #0f0; */
  }
  
  /* 색상 변경 애니메이션 */
  @keyframes colorCycle {
    0%   { color: red; }
    32%   { color: red; }
    33%  { color: yellow; }
    65%  { color: yellow; }
    66%  { color: lime; }
    99%  { color: lime; }
    100% { color: red; }
  }
  

  /* @keyframes flicker {
    0%   { text-shadow: 0 0 5px #0f0, 0 0 10px #0f0; }
    25%  { text-shadow: 0 0 8px #0f0, 0 0 15px #0f0; }
    50%  { text-shadow: 0 0 5px #0f0, 0 0 10px #0f0; }
    75%  { text-shadow: 0 0 12px #0f0, 0 0 20px #0f0; }
    100% { text-shadow: 0 0 5px #0f0, 0 0 10px #0f0; }
  } */
  

section .container {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(90deg, rgba(163,70,255,0.1) 0%, rgba(163,70,255,0.02) 51%, rgba(163,70,255,0.1) 100%);
}

section .container #welcome {
    margin: 0 1rem 1rem 1rem;
  }

  .gallery-link {
    position: relative; /* ::after 레이어 위치 기준 */
    display: inline-block;
  }
  
  .gallery-link img {
    max-width: 100%;
    height: auto;
    display: block;
    /* box-shadow: 2.2rem 2.4rem rgb(255, 255, 255, 0.4); */
  }
  
  .gallery-link::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  

    background:
    linear-gradient(120deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 10%, rgba(255,255,255,0) 20%),
    linear-gradient(60deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 15%, rgba(255,255,255,0) 55%);
  
    /* 이미지를 덮는 위치 */
    mix-blend-mode: screen; /* 밝게 강조 */
    transform: rotate(-20deg);
  }

#galleryFigcaption {
  text-align: left;
}  
  
section .container figure figcaption{
    font-size: x-small;
    text-align: center;
    color: whitesmoke;
}


:root {
    accent-color:rgb(215, 176, 255);
}

section .container #poll {
    display: flex;
    flex-direction: column;
    margin: 1rem 1rem 1rem 0;
    min-width: 200px;
    background-color: rgba(249, 179, 255, 0.11);
    border: 1px rgb(155, 55, 255) dashed;
}

section .container #poll h1{
    background-color: brown;
    padding-left: 1px;
    margin-bottom: 0.5rem;
}

/* html요소에 공백 줄바꿈 있으면 민감하게 반응하니 확인 */
section .container #poll #byMe{
  margin: 0 0 0 1rem;
  padding: 0;
  max-width : 15rem;
  white-space: pre-wrap;
}

section .container #poll #musicCorner{
    font-size: medium;
    background: linear-gradient(
        to right,
        black 0%,     
        rgb(223, 185, 255) 1%,    
        rgb(79, 49, 104) 3%,  
        black 10% ,
        black 100% 
    );
    border-top: 6px rgb(125, 103, 148) groove;
    border-right: 6px rgb(125, 103, 148) groove;
    border-bottom: 6px rgb(125, 103, 148) groove;
    border-left: none; /* 왼쪽만 제거 */
    margin: 0.5rem 0 0.5rem 0;
    padding: 1rem 0 1rem 2rem;
    position: relative; 
    z-index: 5; 
    width: calc(100% - 1.5rem);
    left: -1rem;
}

section .container #poll #musicCorner .mainCds {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: normal;
    font-size: small;
    
}

/* 대상 */
section .container #poll #musicCorner .mainCds #mainCdOne{
    position: relative;          /* z-index가 먹도록 */
    z-index: 10;                 /* 위로 띄우기 */
    margin: 0;
    padding: 0;
    width: 4rem;
    height: 4rem;
    /* background-color: gray; */

  
    /* 공중에 둥둥: 살짝 위아래 + 아주 미세한 회전 */
    animation:
      bob 4.5s ease-in-out infinite,
      drift 9s linear infinite;
  
    /* 미세한 블러/입체감 */
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25));
    transform: translateZ(0);    /* 리페인트 최소화 힌트 */
    will-change: transform;      /* 성능 힌트 */
  }
  
  /* 위아래로 살짝 떠다니는 느낌 */
  @keyframes bob {
    0%   { transform: translateY(0) rotate(0.2deg); }
    50%  { transform: translateY(-4px) rotate(-0.12deg); }
    100% { transform: translateY(0) rotate(0.2deg); }
  }
  
  /* 아주 느리게 좌우 미세 이동(제자리에서 흔들리는 듯) */
  @keyframes drift {
    0%   { transform: translateX(0)    translateY(0) rotate(0.2deg); }
    50%  { transform: translateX(-12px)  translateY(4px) rotate(-4deg); }
    100% { transform: translateX(0)    translateY(0) rotate(0.2deg); }
  }
  
  /* 사용자가 모션 축소 설정 시 애니메이션 비활성화 */
  @media (prefers-reduced-motion: reduce) {
    section .container #poll #musicCorner .mainCds #mainCdOne{
      animation: none;
    }
  }
  
  /* 이미지 부모요소에 사이즈맞춤 */
  section .container #poll #musicCorner .mainCds #mainCdOne img{
    width: 100%;
  }

/* 대상 */
section .container #poll #musicCorner .mainCds #mainCdTwo{
    position: relative;          /* z-index가 먹도록 */
    z-index: 10;                 /* 위로 띄우기 */
    margin: 0;
    padding: 0;
    width: 4rem;
    height: 4rem;
    /* background-color: rgb(202, 202, 202); */

  
    /* 공중에 둥둥: 살짝 위아래 + 아주 미세한 회전 */
    animation:
      bob 4.5s ease-in-out infinite,
      drift 7s linear infinite;
  
    /* 미세한 블러/입체감 */
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25));
    transform: translateZ(0);    /* 리페인트 최소화 힌트 */
    will-change: transform;      /* 성능 힌트 */
  }
  
  /* 위아래로 살짝 떠다니는 느낌 */
  @keyframes bob {
    0%   { transform: translateY(0) rotate(0.2deg); }
    50%  { transform: translateY(-9px) rotate(-0.12deg); }
    100% { transform: translateY(0) rotate(0.2deg); }
  }
  
  /* 아주 느리게 좌우 미세 이동(제자리에서 흔들리는 듯) */
  @keyframes drift {
    0%   { transform: translateX(0)    translateY(0) rotate(0.2deg); }
    50%  { transform: translateX(8px)  translateY(-9px) rotate(7deg); }
    100% { transform: translateX(0)    translateY(0) rotate(0.2deg); }
  }
  
  /* 사용자가 모션 축소 설정 시 애니메이션 비활성화 */
  @media (prefers-reduced-motion: reduce) {
    section .container #poll #musicCorner .mainCds #mainCdTwo{
      animation: none;
    }
  }

    /* 이미지 부모요소에 사이즈맞춤 */
    section .container #poll #musicCorner .mainCds #mainCdTwo img{
        width: 100%;
      }

/* 새소식 시작 */
      
      section .container #poll #poll_link{
          background-color: rgb(99, 62, 62);
          text-decoration: none;
          color: aliceblue;
          padding: 0 0 2px 1rem;
          margin: 1rem 0 0 0;
          display: flex;
      }
      section .container #poll #poll_link{
        white-space: nowrap;
      }

      #poll_link .star {
        display: inline-block; /* inline 요소는 회전 불가이므로 */
        animation: spin 4s linear infinite, fade 2s infinite; /* 4초마다 무한 회전 */
        margin: 0 0 0 0.5rem;
        z-index: 3;
        position: relative;
        left: -6rem;
        font-size: large;
        color: rgb(23, 197, 197);
      }
      
      @keyframes spin {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      @keyframes fade {
        0%   { opacity: 0; }
        5%   { opacity: 0; }
        20%   { opacity: 1; }
        50%   { opacity: 1; }
        100%  { opacity: 0; }
      }

      section .container #poll #whatsNew{
        color: aliceblue;
        text-decoration: none;
        text-align: center;
      }

      section .container #poll #whatsNew p{
        margin: 1rem;
      }

/* 새소식 끝      */


section .container #poll .ridge {
    border: 3px ridge rgba(255, 208, 0, 0.644);
    margin-top: 1rem;
    padding: 2px;
    margin: 2px;
    text-align: center; 
}

section .container #poll .ridge figure img{
    margin: 10px 0 1px 0;   
}

section .container #poll .ridge #banner_link {
    text-decoration: none;
    display: inline-block; /* <a> 안에 <h2>처럼 블록(block) 요소가 들어가면 실제 영역”을 늘리고, border나 배경에 그대로 반영됩니다.*/
    line-height: 1;
  }

  h2 {
    margin: 0;
    padding: 0;
}

/* 화살표 깜빡임 관리 시작 */

.banner-text {
    display: flex;
    justify-content: center;
    /* gap: 0.2em; */
    color: aliceblue;
    font-size: 2em;
    line-height: 1;
  }
  
  /* 텍스트는 항상 보임 */
  .label {
    white-space: normal; /* 전체적으로 줄바꿈 허용 */
  }
  
  .part1, .part2 {
    white-space: nowrap; /* 각 덩어리는 줄바꿈 안 됨 */
  }
  
  
  /* 화살표 공통 */
  .arrow {
    display: inline-block;
    opacity: 0; /* 초기 숨김 */
    /* font-weight: normal; */
    cursor: default; /*커서 기본값*/
    font-size: 0.5em;
    margin-top: 1rem;
  }

  @keyframes blink-left1 {
    0%, 33.33% { opacity: 1; }
    33.34%, 100% { opacity: 0; }
  }
  
  @keyframes blink-left2 {
    0%, 33.33% { opacity: 0; }
    33.34%, 66.66% { opacity: 1; }
    66.67%, 100% { opacity: 0; }
  }
  
  @keyframes blink-left3 {
    0%, 66.66% { opacity: 0; }
    66.67%, 100% { opacity: 1; }
  }
  
  /* 오른쪽 화살표도 동일 구조, 반대 방향으로 */
  @keyframes blink-right1 { 0%, 66.66% { opacity: 0; } 66.67%, 100% { opacity: 1; } }
  @keyframes blink-right2 { 0%, 33.33% { opacity: 0; } 33.34%, 66.66% { opacity: 1; } 66.67%, 100% { opacity: 0; } }
  @keyframes blink-right3 { 0%, 33.33% { opacity: 1; } 33.34%, 100% { opacity: 0; } }
  
  .left1 { animation: blink-left1 3s infinite steps(1); }
  .left2 { animation: blink-left2 3s infinite steps(1); }
  .left3 { animation: blink-left3 3s infinite steps(1); }
  
  .right1 { animation: blink-right1 3s infinite steps(1); }
  .right2 { animation: blink-right2 3s infinite steps(1); }
  .right3 { animation: blink-right3 3s infinite steps(1); }
  
  /* 깜빡임 키프레임 */
  @keyframes blink {
    0%, 49% { opacity: 0; }
    50%, 100% { opacity: 1; }
  }

/* 화살표 깜빡임 관리 끝 */
  
section .container #poll .ridge figure {
    text-align: center;
    margin: 0;
}

section .center {
    display: flex;
  flex-direction: column; /* 세로 정렬 */
  justify-content: center; /* 세로 가운데 정렬 */
  align-items: center;     /* 가로 가운데 정렬 */
  height: 100%;           /* 컨테이너 높이 필요 */
    border: 1px rgb(155, 55, 255) dashed;
    text-decoration: none;
}

section .center .noeBox {
    height: 0;
    /* 이야기 타이틀 위 공백 */
    padding: 0 0 3rem 0;
}

#noteLink {
  text-decoration: none;  /* 밑줄 제거 */
  color: inherit;         /* 부모 요소의 글자색 상속 (파란색 방지) */
}

/* 링크를 방문했을 때의 스타일 */
#noteLink:visited {
  color: inherit;
}

section .center #bioStar {
  position: relative; /* span의 absolute 기준 */
  text-decoration: none;
}

section .center #bioStar h1 {
  text-shadow: 2px 2px 5px yellow; /* x축 2px, y축 2px, 블러 5px, 색상 노랑 */
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: white; /* 글자 기본색 */
}


section .center #bioStar #star {
  position: absolute;
  top: -4.5rem;
  left: 5rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#bioStar #star::before {
  content: "☆";
  font-size: 550%;
  color: yellow;
  display: block; 
  opacity: 0.9;
}

section .center #bioStar #circle {
  position: absolute;
  top: -8.3rem;
  left: -2rem;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#bioStar #circle::before {
  content: "○";
  font-size: 1400%;
  font-weight: 100;
  display: block; 
  background: linear-gradient(to top,
   rgba(255,255,0,0) 0%,
   rgba(255,255,0,0) 57%,
   rgba(255,255,1,0.7) 58%,
   rgb(255, 255, 1) 100%);
  
  /* 배경을 글자 색으로 클립 */
  background-clip: text;           /* 표준 속성 추가 */
  -webkit-background-clip: text;    /* 웹킷 브라우저용 */
  -webkit-text-fill-color: transparent;
}

/* 노에 */
section .center #noeMedic {
    margin: 0;
    padding: 0;
    transform: translate(-6.5rem, -35rem) scale(0.6);
    /* 그림에 애니메이션 적용 */
    animation: pulse 3s ease-in-out infinite; /* 3초 주기, 반복 */
}

/* 애니메이션 정의 */
@keyframes pulse {
    0%   { transform: translate(-6.5rem, -28rem) scale(0.6); }
    50%  { transform: translate(-6.5rem, -28rem) scale(0.63); } /* 살짝 확대 */
    100% { transform: translate(-6.5rem, -28rem) scale(0.6); }
}


/* 말풍선 */
.speech-bubble {
    position: relative;      /* 화면 최상단 고정 해제 */
    top: -21rem; left: 1rem;         /* 기본 위치 */
    transform: rotate(-8deg) rotateY(15deg); /* 기울기 유지 */
    margin: 0;
    padding: 0.7em 1em 1em 1.4em;
    max-width: 20%;
    max-height: 17vh;
    border-radius: .25em;
    background: rgb(216, 97, 153);
    display: flex;           /* 텍스트속성 */
    align-items: center;     /* 텍스트 세로 중앙 */
    justify-content: center; /* 텍스트 가로 중앙 */
    line-height: 1;       /* 줄바꿈 간격 */
    text-align: center;
    z-index: 9999;   
    color-scheme: light;        /* 필요 시 레이어 조정 가능 */
    filter: invert(0) hue-rotate(0deg);
    /* 폰트사이즈/행간 */
    font: 1.2em/1 Century Gothic, Verdana, sans-serif;
    color: black;
    transition: opacity 0.5s;
    animation: bubbleMove 10s ease-in-out infinite;
}

@keyframes bubbleMove {
    0%   { transform: rotate(-8deg) rotateY(15deg) translateY(0); }
    25%  { transform: rotate(-8deg) rotateY(15deg) translateY(-5px); }
    65%  { transform: rotate(-8deg) rotateY(15deg) translateY(-10px); }
    95%  { transform: rotate(-8deg) rotateY(15deg) translateY(-15px); }
    100% { transform: rotate(-8deg) rotateY(15deg) translateY(0); }
}
  
  /* 입체 효과 */
  .speech-bubble:after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: inherit;
    transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
    background: whitesmoke;
    color: rgb(3, 0, 8);
    z-index: -1;
    color-scheme: light;
    filter: invert(0) hue-rotate(0deg);
  }
  
  /* 꼬리 */
  .speech-bubble:before {
    content: '';
    position: absolute;
    border: solid 0 transparent;
    border-left: solid 2em whitesmoke;  /* 오른쪽 방향 */
    border-bottom: solid .2em rgb(216, 97, 153);
    bottom: .20em; right: 0.5rem;
    width: 0; height: 1em;
    transform: rotate(-60deg) skewX(-60deg);
    z-index: -1;
    color-scheme: light;
  }
  
  .speech-bubble:hover {
    opacity: 0; /* 마우스 오버 시 완전히 투명 */
}

section .center #mainText {
  margin: 1rem 1rem 0 1rem;
  padding: 0 0.5rem 0.5rem 0.5rem;

  border-top: 1px solid #39FF14;
  display: inline-block;
  white-space: pre-wrap;
  background: linear-gradient(to top,
   rgba(255,255,0,0) 0%,
   rgba(255,255,0,0) 70%,
   #37ff1462 98%,
   #37ff14b7 100%);
}

section .center #mainText #blinking {
  display: inline-block;           /* animation 적용 가능 */
  vertical-align: middle;          /* 주변 텍스트와 같은 라인에 맞춤 */
  animation: blink 1s infinite steps(1);
  font-weight: 900;
  text-shadow: 1px 0 currentColor, -1px 0 currentColor;
  /* border: 1px solid tomato;   */
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

/* section .center #noteLink {
  margin-bottom: 2rem;
  color: aliceblue;
  text-decoration: none;
  font-weight: bold;
} */


.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 화면 비율 유지하며 꽉 차게 */
    z-index: -1;       /* 제일 뒤로 보내기 */
    filter: brightness(50%);
  }
  

footer {
    text-align: center;
    font-size: small;
    display : scroll;
    margin: 0;
}