.p1 { margin-left: 30px; }
.p2 { margin-left: 130px; }
.p3 { margin-left: 240px; }
.p4 { margin-left: 350px; }

.d1 { color:#166D37; font-size:18px; font-weight: 700; }
main h1 { color: #166D37; font-size:20px; }
main h1::before { content: "</"; display: inline-block; }
main h1::after { content: ">"; display: inline-block;  }

main h2 { font-size:18px; }

.tab-container { margin-bottom:80px; color:#000; font-weight: 700; }
.tab-container ul { display:flex; align-items:center; }
.tab-container ul li { margin-right:20px;  }
.tab-container ul li a {display:block;  line-height: 1; padding-bottom:2px;  border-bottom:solid 1px transparent; white-space: nowrap; }
.tab-container ul li a.selected { border-bottom:solid 1px #000; }

.about-page {}
.keywords-page h1 { display:none; }
.keywords-page .p1 { font-size:22px; font-weight: 700; line-height: 1.7; word-break: keep-all; }
/* .keywords-page .p1 .keyword-item { display: inline-block; margin-right: 5px; opacity: 0;} */
.keywords-page .p1 .keyword-item {
    display: inline-block;
    margin-right: 5px;
    opacity: 0;
    color: #000; /* [수정] 처음 등장할 때 검은색 */
    transition: color 0.5s ease, background-size 0.6s ease-out;
    
    /* 배경이 차오르는 효과를 위한 세팅 */
    background-image: linear-gradient(#d1e7dd, #d1e7dd);
    background-position: 0 100%;
    background-size: 0% 100%;
    background-repeat: no-repeat;
}
.keywords-page .p1 .keyword-item.dimmed {
    color: #b0b0b0; 
}

/* 1. 그냥 녹색으로 강조될 때 */
.keywords-page .p1 .keyword-item.highlight-green {
    color: #198754; /* 진한 녹색 */
}

/* 2. 녹색 + 배경까지 슥 채워질 때 */
.keywords-page .p1 .keyword-item.highlight-bg {
    color: #198754;
    background-size: 100% 100%; /* 배경을 100%로 확장 */
}
.casting-page .book { margin-top:80px;}
.casting-page .tip { margin-top:80px;  }
.casting-page .tip .tit { font-size:22px; font-weight: 800; margin-bottom:20px;}
.casting-page .tip .box { width:80%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.casting-page .tip .box > div { text-align: center; }
.casting-page .tip .box > div > img { margin-bottom:20px;}
.episode-page .book { margin-top:80px;}
.seetouch-page .book { margin-top:80px;}
.seetouch-page .tip { margin-top:80px;  }
.seetouch-page .tip .tit { font-size:22px; font-weight: 800; margin-bottom:20px;}
.seetouch-page .tip .box { width:80%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.seetouch-page .tip .box > div { text-align: center; }
.seetouch-page .tip .box > div.arrow { margin:0 20px;}
.seetouch-page .tip .box > div > img { margin-bottom:20px;}
.epilogue-page .book { margin-top:80px;}
.members-page { margin-top:80px; }
.members-page section { margin-top: 50px; }
.members-page section b { display:block; margin-bottom:15px; }
.journey-page ol.decimal { list-style: decimal; list-style-type: decimal; padding-left:15px; } 
.journey-page ol.decimal li { list-style: decimal;}
.journey-page .deco1 { margin: 50px 30px;}
.journey-page .deco2 { text-align: right; margin: 0px 30px;}

.journey2-page .tab-container { margin-left:395px; }
.journey2-page section.summary { display: block; text-align: right; font-size:20px; color:#999; }
.journey2-page section { display:flex; margin-top:80px; }
.journey2-page section > h3 { font-size:18px; flex-basis: 395px; flex-shrink: 0; text-align: right; padding-right:60px; position: relative; padding-top:50px; }
.journey2-page section > h3::before { content: " "; display: block; width:85px; height:15px; background: #000; position: absolute; right:60px; top:0px; }
.journey2-page section > dl { position: relative; padding-top:100px; }
.journey2-page section > dl::before { content: " "; display: block; width:200px; height:2px; background: #000; position: absolute; left:0px; top:0px; }
.journey2-page section > dl > dt { color:#166D37; font-weight: 700; }
.journey2-page section > dl > dt.b { font-size:30px; font-weight: 700; line-height: 1; margin-bottom:35px; }
.journey2-page section > dl > dd { color:#1E1E1E; margin-bottom: 30px;; }
.journey2-page section > dl > dd > p { margin-top:20px; padding-left:130px; color:#999; }
.journey2-page section > dl > dd.tag { font-size:40px; font-weight: 200;color:#aaa; line-height: 1.3; }

.research-page { max-width:900px; padding: 30px 40px;}
.research-page .c {font-size:10px; font-weight: 300; color:#999; margin-bottom:30px; }
.research-page .c > span { display:inline-block; padding:3px 10px; background:#999; color:#fff;  margin-right:5px; text-transform: uppercase;}
.research-page h1 { font-size:26px; margin-bottom:40px;}
.research-page .section { position:relative;  }
.research-page .section > ul { position: absolute; top:2px; display:flex; flex-wrap: wrap; width:150px; margin-right:30px; } 
.research-page .section > ul > li { margin-right:14px; margin-bottom: 5px; }
.research-page .section > div { margin-left:200px; line-height: 1.5; }
.research-page .section > div p { margin-bottom: 20px;}
.research-page .section > div p.bold { font-weight:700; color:#166D37; font-size:20px; margin-bottom:25px; }
.research-page .section > div .img-list { overflow-x: auto; margin-bottom:30px; padding-bottom:5px; }
.research-page .section > div .img-list ul { display:flex; align-items:center; cursor: pointer; } 
.research-page .section > div .img-list img { max-height:350px; margin-right:30px; }
.research-page .section > div .img-list::-webkit-scrollbar { height: 4px; }
.research-page .section > div .img-list::-webkit-scrollbar-thumb { background: rgba(35, 24, 21, 0.15); border-radius: 3px; }
.research-page .section > div .img-list::-webkit-scrollbar-track { background: rgba(35, 24, 21, 0.05); }
.research-page .section > div .source { font-size: 12px; color:#999; font-weight: 300; }
.research-page .section > div .source .t { font-size:10px; color:#aaa; }
.research-page .section > div .source a { color:#166D37;letter-spacing: 1px; }
.research-page .section > div .source a:hover { text-decoration: underline;  }   


.main #parallax-container {
  position: absolute; top:0px; left:0px; width: 100%; height: 100vh; overflow: hidden;
}

.main .parallax-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; 
}

.origin-box, 
.clone-N, .clone-NE, .clone-E, .clone-SE, 
.clone-S, .clone-SW, .clone-W, .clone-NW {
  position: absolute;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.parallax-layer, 
.origin-box, .clone-x, .clone-y, .clone-xy {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
}
.main .big-text { font-size:50px; font-weight: 500; }
.main .item, .main .element, .main .big-text {
  position: absolute;  
  pointer-events: auto !important; 
  white-space: nowrap;
}

.parallax-layer a.item {
    position: absolute; 
    display: block;
    transition: transform 0.2s linear;
    transform-origin: center center;
}
.layer-research .item:hover {
  transform: scale(1.3); 
  z-index: 10;
}

.layer-research .item:hover p {
    color:#166D37;
}
.layer-research .item:hover  .tag {
    background: #166D37; 
    color: #fff; 
    z-index: 100;
}
.parallax-layer a.item .tag { display:inline-block; background: #A9A9A9; color:#fff; padding:3px 10px; font-size:11px; margin-bottom:5px; font-weight: 300; }
.parallax-layer a.item p { color:#000; max-width: 185px; font-weight: 500; line-height: 1.6; }