:root{
  --bg:#000000;
  --text:#ffffff;
  --muted:#666;
  --accent:#ff0055; /* PDF의 작은 포인트 컬러로 사용 */
  --gap:24px;
  --sans: "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  scroll-behavior: smooth;
}

body{
  margin:0;
  padding-top: 100px; 
  font-family:var(--sans);
  font-weight : bold;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  cursor: none;

}

p{
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

a {
  text-decoration: none;
  color:#fff;
}


/* 커스텀 커서 원 */
.custom-cursor {
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: width 0.3s ease, height 0.3s ease, border-width 0.3s ease;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference; /* 배경에 따라 색상 반전 효과 */
}

/* 링크나 클릭 가능한 요소 위에서 커서 크게 */
.custom-cursor.hover {
  width: 60px;
  height: 60px;
  border-width: 3px;
}

/* 링크나 버튼 등 클릭 가능한 요소들의 기본 커서도 숨김 */
a, button, .btn, [data-product] {
  cursor: none;
}


/* .custom-cursor {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="%23ffffff" d="M10 4c-1 0-2 .9-2 2v22c0 1.1.9 2 2 2h7v10c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2V30h4c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2H10z"/></svg>') 8 8, auto;
} */

/* container */
.container{
  max-width:var(--max-width);
}

/* Header */
.site-header{
  display:flex;
  flex-direction: row;
  position:fixed;
  z-index: 5;
  top:0;
  width: 100vw; 
  height: 150px;
  backdrop-filter: none;
  /* background-color: aquamarine; */
}


.header-inner{
  width: 24.6vw;
  margin: 0;
  padding: 0;
}


/* nav */

.nav {
  width: 24.6vw;
  background:rgba(0, 0, 0, 0);
  backdrop-filter: none;
  text-align: left;
  padding: 1.6vw;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* 세로 방향 */
  gap: 0;
}

.nav a {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: -0.6px;
  line-height: 1; 
  transition: color 0.3s ease;
}

/* 손으로 그은 밑줄용 svg 이미지 */
.nav a::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -10px;
  width: 95px;
  height: 25px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="130" height="10" viewBox="0 0 100 8"><path d="M2 5 C20 9, 80 2, 98 1" stroke="white" stroke-width="5" fill="none" stroke-linecap="round"/></svg>') no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.4s ease;
  pointer-events: none;
}

/* hover 또는 active 시 밑줄 그려짐 */
.nav a:hover::after,
.nav a.active::after {
  background-size: 100% 100%;
}


.brand{
  width: 75.4vw;
  height: 100px;
  margin: 0;
  padding: 1vw 0 0 1.4vw;
  object-fit: cover;
}

.brand a {
  display: inline-block;
  width: 72.5vw;
  transition: transform 0.5s ease;
}

/* .brand a:hover {
  animation: seesaw 2s ease-in-out ;
} */

/*
 시소 흔들림 애니메이션 
@keyframes seesaw {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-9deg);
  }
  75% {
    transform: rotate(9deg);
  }
}  */


.brand > a > img {
  width: 72.5vw;
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}



/* Info grid */
.section-grid{
  display: flex;
  width: 100vw; 
  margin: 0;
  padding: 12vw 0 0 0 ;
  align-self: flex-start;
  background-color: rgba(0, 0, 255, 0);
}

.section-col{
  position: sticky;
  align-self: flex-start;
  top: 12vw ;
  left: 0;
  width:24.6vw;
  padding: 0 0 0 1.6vw;
  font-size: 6rem;
}

.section-col > .titre-infos {
  width: 15.3vw;
}

.section-col > .titre-album {
  width: 20.5vw;
}

.section-col > .titre-shop {
  width: 17.8vw;
}


.section-col > .titre-live {
  width: 10.4vw;
}

.presentation-img{
  /* background-color: blue; */
  width: 75.4vw;
  Padding: 0 0 4vw 1.4vw;
}

.presentation-img > img {
  width: 35.8vw;
}





/* album */
.text {
  display: flex;
  /* background-color: rosybrown; */
  width: 75.4vw;
  Padding: 0 0 0 1.6vw;
}

.text-column1, .text-column2 {
  /* background-color: green; */
  width: 30.75vw;
  padding: 0 1.6vw 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.6px;
  line-height: 1.1; 
}

/* .text-column1 {
  background-color: red;
}
.text-column2{
  background-color: yellow;
} */

.text-column1 > img {
  width: 30.75vw;
  padding : 0 1.6vw 0 0;

}

.text {
  padding-bottom: 5vw;
}

/* .iframe {
  height: 29vw;
} */

.studies {
  padding-top: 0;
}

.text-column3, .text-column4 {
  /* background-color: green; */
  padding: 0 1.6vw 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.6px;
  line-height: 1.1; 
}

.text-column3{
  /* background-color: greenyellow; */
  width: 30.75vw;
}

.text-column3 > img {
  width: 30.75vw;
  padding : 0 1.6vw 0 0;
  margin-top: 2.5vw;

}

.text-column4{
  /* background-color: aqua; */
  width: 44.65vw;
  position: relative;
  top: -3px;

}

.past-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3개 컬럼 */
  padding: 0.2em 0 0.3em 0;
  border-bottom: 2px solid #fff;
}

.past-row span {
  display: flex;
  align-items: center;
}

.past-name {
  justify-content: flex-start;
}

.past-city {
  justify-content: flex-start;
}

.past-type {
  justify-content: flex-end;
}




/*troisième colonne*/
.contact-card{
  /* background-color:skyblue; */
  width: 13.9vw;
  padding: 0 1.6vw 0 0;
  font-size: 0.7rem;
  letter-spacing: -0.6px;
  line-height: 1.1; 
  word-break: keep-all 	;
}




/* shop */
.shop-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
}
.card{background:#fff;border:1px solid #eee;border-radius:6px;overflow:hidden;display:flex;gap:12px}
.card img{width:140px;height:140px;object-fit:cover}
.card-body{padding:14px;flex:1}
.price{font-weight:700;margin:10px 0}

/* live */
.show-list{list-style:none;padding:0;margin:16px 0 0 0;display:grid;gap:12px}
.show-list li{display:flex;justify-content:space-between;padding:12px 14px;border:1px solid #f0f0f0;border-radius:6px}
.show-name{font-weight:700}
.show-meta{color:var(--muted)}

/* alt background sections */
.alt-bg{background:var(--paper)}

/* small things */
.btn{
  display:inline-block;padding:8px 12px;border:1px solid var(--text);background:none;cursor:pointer;font-weight:700;
}
.btn:hover{background:var(--text);color:#fff}

/* footer */
.site-footer{border-top:0px;padding:20px 0;text-align:center;color:var(--muted);font-size:14px}




/* responsive */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr 320px}
  .album-grid{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr}
  .section-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .nav {
    position: fixed;
    width: 22vw;
  }
  .nav ul{
    display:block
  }
  .nav-toggle{display:block}
  .header-inner{padding: 0}
  .hero-inner{grid-template-columns:1fr;gap:18px}
  .hero-title{font-size:36px}
  .logo{height:36px}
  .container{width:calc(100% - 28px)}
}