@charset "utf-8";
/* ======================================
   메인: 해시태그 TOP10 (2026-10-23)
   - 왼쪽: 세로로 도는 해시태그 10개(가운데 줄이 현재) / 오른쪽: 현재 해시태그의 최신 글 4개 세로 목록
   - 모든 규칙은 .mainHash 아래로 한정
   - 2026-10-23 4차: 제목을 오른쪽 글 목록 위로, 배경 #f8f8f8
   - 2026-10-23 3차: 배경 #E9EDF2, 좌우 비율 1fr / 85rem, 구분선·버튼·글 수 표시를 배경에 맞춤
   ====================================== */
.mainHash{--mh-point:#14335A; --mh-dark:#0B1F38; --mh-row:7.6rem; --mh-shift:4.8rem; background:#f8f8f8; overflow:hidden;}
.mainHash .MainInner{padding:12rem 2rem 12rem 2rem;}
.mainHash .WrapTitle{font-size:3.2rem; line-height:4.4rem;}
.mainHash .mh-side{min-width:0;}
.mainHash .mh-head{margin-bottom:3.2rem;}
.mainHash .mh-sub{margin:0.6rem 0 0 0; font-family:'Pretendard-Medium'; font-weight:400; font-size:1.6rem; line-height:2.4rem; color:#777;}
.mainHash a{text-decoration:none;}

.mainHash .mh-body{display:grid; grid-template-columns:minmax(0,1fr) 85rem; gap:8rem; align-items:center;}

/* 오른쪽 글 목록: 태그별 목록을 같은 자리에 겹쳐 두고 현재 것만 보임 */
.mainHash .mh-cards{display:grid;}
.mainHash .mh-card{grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s;}
.mainHash .mh-card.is-on{opacity:1; visibility:visible; transition:opacity .4s, visibility 0s;}
.mainHash .mh-list{margin:0; padding:0; list-style:none; border-top:1px solid #E3E3E3;}
.mainHash .mh-list li{border-bottom:1px solid #E3E3E3;}
.mainHash .mh-card.is-on .mh-list li{animation:mhUp .5s cubic-bezier(.22,.61,.36,1) both;}
.mainHash .mh-card.is-on .mh-list li:nth-child(2){animation-delay:.07s;}
.mainHash .mh-card.is-on .mh-list li:nth-child(3){animation-delay:.14s;}
.mainHash .mh-card.is-on .mh-list li:nth-child(4){animation-delay:.21s;}
@keyframes mhUp{from{opacity:0; transform:translateY(1.6rem);} to{opacity:1; transform:none;}}
.mainHash .mh-item{display:grid; grid-template-columns:20rem minmax(0,1fr); gap:2.8rem; align-items:center; padding:2rem 0;}
.mainHash .mh-thumb{position:relative; margin:0; aspect-ratio:16 / 10; border-radius:1.2rem; overflow:hidden; background:#EEF1F5;}
.mainHash .mh-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s;}
.mainHash .mh-item:hover .mh-thumb img{transform:scale(1.05);}
.mainHash .mh-cat{display:block; font-family:'Pretendard-SemiBold'; font-weight:normal; font-size:1.5rem; line-height:2.2rem; color:var(--mh-point);}
.mainHash .mh-tit{margin:0.6rem 0 0 0; font-family:'Pretendard-Bold'; font-size:2rem; line-height:3rem; color:#111; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .25s;}
.mainHash .mh-item:hover .mh-tit{color:var(--mh-point);}
.mainHash .mh-date{display:block; margin-top:1rem; font-family:'Pretendard-Medium'; font-size:1.4rem; line-height:2rem; color:#999;}
.mainHash .mh-more{display:inline-flex; align-items:center; gap:0.8rem; margin-top:2.4rem; font-family:'Pretendard-Medium'; font-size:1.6rem; line-height:2.4rem; color:#333;}
.mainHash .mh-more b{font-family:'Pretendard-Bold'; font-weight:normal; color:#111;}
.mainHash .mh-moreCnt{display:inline-flex; align-items:center; justify-content:center; min-width:2.6rem; height:2.4rem; padding:0 0.8rem; border-radius:10rem; background:#fff; font-family:'Pretendard-SemiBold'; font-size:1.3rem; line-height:1; color:var(--mh-point);}
.mainHash .mh-more:after{content:''; width:1.6rem; height:1.6rem; background:no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E"); transition:transform .25s;}
.mainHash .mh-more:hover b{color:var(--mh-point);}
.mainHash .mh-more:hover:after{transform:translateX(0.4rem);}

/* 왼쪽 해시태그: 가운데(현재) 기준으로 위아래 4줄씩 */
.mainHash .mh-roll{min-width:0;}
.mainHash .mh-words{position:relative; height:calc(var(--mh-row) * 9); margin:0; padding:0; list-style:none;}
.mainHash .mh-word{--d:0; position:absolute; left:0; right:0; top:50%; transform:translate(var(--mh-shift), calc(var(--d) * var(--mh-row) - 50%)); opacity:0; visibility:hidden; transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s, color .4s;}
.mainHash .mh-word button{position:relative; display:block; max-width:100%; margin:0; padding:0 0 0 6rem; border:0; background:none; font-family:'Pretendard-SemiBold'; font-size:5.6rem; line-height:var(--mh-row); letter-spacing:-0.02em; color:#A9A9A9; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:color .4s;}
.mainHash .mh-word button:hover{color:#666;}
.mainHash .mh-word button:focus-visible{outline:2px solid var(--mh-point); outline-offset:-2px;}
.mainHash .mh-rank{position:absolute; left:0; top:50%; transform:translateY(-50%); font-family:'Pretendard-Bold'; font-size:1.8rem; line-height:1; color:var(--mh-point); opacity:0; transition:opacity .4s;}
.mainHash .mh-word[data-d="-4"], .mainHash .mh-word[data-d="4"]{opacity:0.25; visibility:visible;}
.mainHash .mh-word[data-d="-3"], .mainHash .mh-word[data-d="3"]{opacity:0.5; visibility:visible;}
.mainHash .mh-word[data-d="-2"], .mainHash .mh-word[data-d="2"]{opacity:0.75; visibility:visible;}
.mainHash .mh-word[data-d="-1"], .mainHash .mh-word[data-d="1"]{opacity:1; visibility:visible;}
.mainHash .mh-word.is-on{opacity:1; visibility:visible; transform:translate(0, -50%);}
.mainHash .mh-word.is-on button{color:#111;}
.mainHash .mh-word.is-on .mh-rank{opacity:1;}

/* 조작 버튼: 멈춤/재생 · 위 · 아래 */
.mainHash .mh-ctrl{display:flex; justify-content:flex-start; gap:1.2rem; margin-top:2.4rem;}
.mainHash .mh-btn{flex:none; width:4.4rem; height:4.4rem; margin:0; padding:0; border:0; border-radius:50%; background:#fff no-repeat center / 1.8rem; cursor:pointer; transition:background-color .25s;}
.mainHash .mh-btn:hover{background-color:#F5F7FA;}
.mainHash .mh-btn:focus-visible{outline:2px solid var(--mh-point); outline-offset:2px;}
.mainHash .mh-play{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");}
.mainHash .mh-play.is-paused{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E");}
.mainHash .mh-up{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4M6 10l6-6 6 6'/%3E%3C/svg%3E");}
.mainHash .mh-down{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");}

@media (prefers-reduced-motion: reduce){
	.mainHash .mh-word, .mainHash .mh-card{transition:none;}
	.mainHash .mh-card.is-on .mh-list li{animation:none;}
}

@media (max-width:1200px){
	.mainHash{--mh-row:6.2rem; --mh-shift:3.6rem;}
	.mainHash .mh-body{grid-template-columns:minmax(0,1fr) 54rem; gap:5rem;}
	.mainHash .mh-item{grid-template-columns:16rem minmax(0,1fr); gap:2rem; padding:1.6rem 0;}
	.mainHash .mh-tit{font-size:1.8rem; line-height:2.7rem;}
	.mainHash .mh-word button{font-size:4.4rem; padding-left:5rem;}
}
@media (max-width:991px){
	.mainHash{--mh-row:5rem; --mh-shift:2.8rem;}
	.mainHash .MainInner{padding:8rem 2rem 8rem 2rem;}
	.mainHash .mh-body{grid-template-columns:1fr; gap:4rem;}
	/* 좁은 화면: 제목 → 해시태그 → 글 목록 순서 */
	.mainHash .mh-side{display:contents;}
	.mainHash .mh-head{order:-1; margin-bottom:-1rem;}
	/* 좁은 화면은 가운데 기준 위아래 2줄씩 */
	.mainHash .mh-words{height:calc(var(--mh-row) * 5);}
	.mainHash .mh-word[data-d="-4"], .mainHash .mh-word[data-d="4"], .mainHash .mh-word[data-d="-3"], .mainHash .mh-word[data-d="3"]{opacity:0; visibility:hidden;}
	.mainHash .mh-word[data-d="-2"], .mainHash .mh-word[data-d="2"]{opacity:0.4;}
	.mainHash .mh-word button{font-size:3.4rem; padding-left:4rem;}
	.mainHash .mh-rank{font-size:1.5rem;}
	.mainHash .mh-ctrl{margin-top:1.6rem;}
}
@media (max-width:767px){
	.mainHash{--mh-row:4.2rem; --mh-shift:2rem;}
	.mainHash .MainInner{padding:6rem 2rem 6rem 2rem;}
	.mainHash .WrapTitle{font-size:2.6rem; line-height:4rem;}
	.mainHash .mh-sub{font-size:1.4rem; line-height:2.2rem;}
	.mainHash .mh-word button{font-size:2.6rem; padding-left:3.4rem;}
	.mainHash .mh-rank{font-size:1.3rem;}
	.mainHash .mh-btn{width:3.8rem; height:3.8rem; background-size:1.5rem;}
	.mainHash .mh-item{grid-template-columns:11rem minmax(0,1fr); gap:1.4rem; padding:1.4rem 0;}
	.mainHash .mh-thumb{border-radius:0.8rem;}
	.mainHash .mh-cat{font-size:1.3rem; line-height:1.8rem;}
	.mainHash .mh-tit{margin-top:0.4rem; font-size:1.5rem; line-height:2.2rem;}
	.mainHash .mh-date{margin-top:0.4rem; font-size:1.2rem; line-height:1.8rem;}
	.mainHash .mh-more{font-size:1.4rem; line-height:2.2rem;}
}

/* 2026-10-23 5차: 한 줄 배치(991px 이하)에서 해시태그 목록·조작 버튼을 가운데 정렬 */
@media (max-width:991px){
	.mainHash{--mh-shift:0rem;}
	.mainHash .mh-word{text-align:center;}
	.mainHash .mh-word button{display:inline-block; padding-right:4rem; text-align:center;}
	.mainHash .mh-ctrl{justify-content:center;}
}
@media (max-width:767px){
	.mainHash .mh-word button{padding-right:3.4rem;}
}