.title_txt {
font-family: 'Playfair Display', Georgia, Cambria, serif;
font-size: 25px;
font-weight: 500;
letter-spacing: -0.03em;
line-height: 100%;
transform: scaleY(0.85);
transform-origin: center bottom;
display: inline-block; 
}


.title_txt[class*="--reveal"] {
opacity: 0;
transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.title_img[class*="--reveal"] {
opacity: 0;
transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 옵션 1: 아래에서 위로 올라오며 등장 */
.title_txt.--reveal-up {
transform: translateY(30px) scaleY(0.85);
}
.title_txt.--reveal-up.--in {
opacity: 1;
transform: translateY(0) scaleY(0.85);
}


/* 옵션 2: 왼쪽에서 슬라이드 인 */
.title_txt.--reveal-left {
transform: translateX(-40px) scaleY(0.85);
}
.title_txt.--reveal-left.--in {
opacity: 1;
transform: translateX(0) scaleY(0.85);
}
.title_img.--reveal-left {
transform: translateX(-40px) scaleY(1);
}
.title_img.--reveal-left.--in {
opacity: 1;
transform: translateX(0) scaleY(1);
}

/* 옵션 3: 눌렸다가 펼쳐짐 (scaleY 변형) */
.title_txt.--reveal-stretch {
transform: scaleY(0.1);
transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.title_txt.--reveal-stretch.--in {
opacity: 1;
transform: scaleY(0.85);
}


/* 옵션 4: 페이드인만 (이동 없음) */
.title_txt.--reveal-fade {
/* transform은 기본 scaleY(0.85) 유지 */
}
.title_txt.--reveal-fade.--in {
opacity: 1;
}


/* 옵션 5: 밑줄 따라 그려지며 등장 */
.title_txt.--reveal-line {
position: relative;
padding-bottom: 12px;
transform: translateY(20px) scaleY(0.85);
}
.title_txt.--reveal-line::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 0;
background: currentColor;
transition: width 1s ease 0.4s;
}
.title_txt.--reveal-line.--in {
opacity: 1;
transform: translateY(0) scaleY(0.85);
}
.title_txt.--reveal-line.--in::after {
width: 100%;
}
body { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color:#33312F;}
/* ============ 공통 ============ */
.detail-inner01 {max-width:870px;margin:0 auto;}
.detail-inner03 {max-width:985px;margin:0 auto;padding:110px 0 0;}

.title_txt.--reveal-rotate { transform: rotate(-3deg) scaleY(0.85); } .title_txt.--reveal-rotate.--in { opacity: 1; transform: rotate(0) scaleY(0.85); }
/* CSS만 추가 */
.title_txt.--reveal-rotate {
    transform: rotate(-3deg) scaleY(0.85);
}
.title_txt.--reveal-rotate.--in {
    opacity: 1;
    transform: rotate(0) scaleY(0.85);
}
.detail-wrap {max-width:100%;margin: 0 auto;font-size: 0;line-height: 0;}
.detail-wrap img,.detail-wrap video {width: 100%;height: auto;vertical-align: top;}
.txt {font-size:18px;line-height:170%;}

.txt02 {font-size:14px;color:#33312F;line-height:170%;}
.title02 {padding:140px 0 26px;}

.detail-inner03 .dt-grid {gap:24px;}
.detail-inner03 .title_txt {flex:1;}

.detail-inner03 .txt02 {width:32%;}
/* ============ 단일 row (세로 배치) ============ */
.dt-row {
width: 100%;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.dt-row.--in {
opacity: 1;
transform: translateY(0);
}


/* ============ 가로 그룹 ============ */
.dt-grid {
display: flex;
flex-wrap: nowrap;
width: 100%;
align-items: flex-start;
}
.dt-grid > .dt-cell {
min-width: 0;flex: 1;
}


/* ============ 09 호버 효과 ============ */
.dt-hover {
position: relative;
overflow: hidden;
}
.dt-hover img {
transition: opacity 0.4s ease;
}
.dt-hover img.dt-hover-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.dt-hover:hover img.dt-hover-img.--h1 {
opacity: 1;
}
.dt-hover.--show-h2 img.dt-hover-img.--h1 { opacity: 0; }
.dt-hover.--show-h2 img.dt-hover-img.--h2 { opacity: 1; }
.dt-hover.--show-h3 img.dt-hover-img.--h1,
.dt-hover.--show-h3 img.dt-hover-img.--h2 { opacity: 0; }
.dt-hover.--show-h3 img.dt-hover-img.--h3 { opacity: 1; }


/* ============ 18번 그룹 ============ */
.dt-18-sub {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.dt-18-sub > div {
flex: 1;
min-width: 0;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.dt-18-sub.--in > div:nth-child(1) { transition-delay: 0s; }
.dt-18-sub.--in > div:nth-child(2) { transition-delay: 0.15s; }
.dt-18-sub.--in > div {
opacity: 1;
transform: translateY(0);
}

.pc {display:block;}
.mo {display:none;}

.detail-inner05 {width:1440px;margin:0 auto;}
.detail-inner05 .inner {width:68%;margin:327px 0 0 27%;max-width:989px;}
.detail-inner05 .title_txt {flex:1;}
.detail-inner05 .txt {width:75%;display:inline-block;flex: unset;}
.detail-inner05 .dt-grid {margin-bottom:80px;}
.detail-inner05 .dt-grid:last-child {margin-bottom:180px;}


/* ============ 모바일 ============ */
@media (max-width: 768px) {
.dt-row, .dt-grid, .dt-grid > .dt-cell, .dt-18-sub > div {
transform: translateY(0px);
transition-duration: 0.6s;
}
.pc {display:none;}
.mo {display:block;}
.detail-inner01 {margin:70px 7%;}
.detail-inner01 .title02 {padding:0px 0 26px;}
.title_txt {font-size:20px;padding:0px 0 26px;}
.txt {font-size:13px;}
.detail-inner03 {padding: 20px 7%;}
.detail-inner03 .dt-grid {display:block;}
.detail-inner03 .txt02 {width:100%;}
.detail-inner05 {width:100%;}
.detail-inner05 .inner {width:100%;padding:0 7%;margin:70px 0;}
.detail-inner05 .title_txt {font-size:16px;margin-top: -25px;}
.detail-inner05 .txt {width:55%;font-size:10px;margin:-20px 0;}
.detail-inner05 .dt-grid:last-child {margin-bottom:50px}
}