#blog-view .view-subject { position: relative; display: flex; align-items: center; justify-content: center;  font-size: 36px; font-weight: 600; margin: 40px 0; letter-spacing: -2px; gap: 30px; text-indent: 55px; }

	#blog-view .view-youtube { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; margin: 80px auto 40px auto; border-radius: 20px; overflow: hidden; background: #f9f9f9; } 
	

	#blog-view .view-icon { display: flex; align-items: center; justify-content: center; gap: 12px;  }
	#blog-view .view-icon div { padding: 6px 15px; background: #f2f4f6; border-radius: var(--border-radius-8); font-size: 16px; color: #888; border: 1px solid #f2f4f6; letter-spacing: 0;  }
	#blog-view .view-icon div.view-hit { display: flex; align-items: center; gap: 5px; }
	#blog-view .view-icon div.view-hit span { display: block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.67 34.88'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ccc;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cg id='_레이어_1-2' data-name='레이어 1'%3E%3Cpath class='cls-1' d='M31.04,8.2l6.5-6.5c.39-.39.39-1.02,0-1.41s-1.02-.39-1.41,0l-7.17,7.17c-2.37-.75-4.94-1.24-7.63-1.24C9.55,6.22,0,15.33,0,17.56c0,1.45,4.08,5.82,10.17,8.69l-6.92,6.92c-.39.39-.39,1.02,0,1.41.2.2.45.29.71.29s.51-.1.71-.29l7.49-7.49c2.78,1.07,5.89,1.8,9.18,1.8,11.78,0,21.33-9,21.33-11.33,0-1.64-4.73-6.56-11.62-9.35ZM21.33,23.64c-1.59,0-3.03-.61-4.11-1.61-.24-.22-.47-.47-.67-.73-.01-.01-.02-.03-.03-.04-.2-.26-.38-.53-.54-.82-.46-.86-.73-1.84-.73-2.89,0-3.36,2.72-6.08,6.08-6.08,1.04,0,2.03.26,2.89.73.29.16.56.34.82.54.01.01.03.02.04.03.26.2.5.43.73.67,1,1.08,1.61,2.53,1.61,4.11,0,3.36-2.72,6.08-6.08,6.08Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 20px;  }
	
	#blog-view .view-btn-email { padding: 40px 0; }
	#blog-view .view-btn-email p { background: #fff7f7; padding: 40px; border-radius: 20px; color: #e74f40; }
	
	/* 본문 */
	#blog-view .view-contents { padding: 80px 0; }
	#blog-view .view-contents .thumbnail img { max-width: 550px; }
	#blog-view .view-contents img { border-radius: 12px; box-sizing: border-box; border: 10px solid #f9f9f9; max-width: 100%; margin: 20px 0; height: auto !important; }
	#blog-view .view-contents * { font-size: 20px !important; line-height: 1.8; font-family: "Pretendard", Pretendard, -apple-system, "Malgun Gothic", 'MalgunGothic', '맑은고딕', sans-serif !important; color: #2c2f33; word-break: keep-all; }
	#blog-view .view-contents b { font-size: 22px !important; font-weight: bold; }
	
	#blog-view .view-hashtag { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font-size: 0; padding: 60px 0; }
    #blog-view .view-hashtag a { font-size: 16px; padding: 8px 16px; border-radius: 8px; background: #f2f4f6; color: #888; letter-spacing: 0; } 
	

	/* 이전 글, 다음 글 */
	#blog-view .view-nav { padding: 40px 0; }
	#blog-view .view-nav-group { display: flex; align-items: center; gap: 40px; padding: 60px 40px;  justify-content: flex-end; }
	#blog-view .view-nav-title { margin: 0 0 15px 0; color: #999; font-size: 18px; }
	#blog-view .view-nav-link { display: inline-block; position: relative; color: #333; }
	#blog-view .view-nav-link:hover .view-nav-title { color: #444; }
	#blog-view .view-nav-subject { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 21px; font-weight: 500; }
	
	#blog-view .view-nav-next { width: calc(50% - 20px); min-width: 0; text-align: left;  }
	#blog-view .view-nav-next .view-nav-link { padding: 0 0 0 80px; background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" style="transform%3A rotate(180deg)%3B"%3E%3Cpath d="M16.5303 10L22.5303 16M9 16.0803H23M16.5303 22.0607L22.5303 16.0607" stroke="%23888" stroke-width="1.5"%3E%3C/path%3E%3C/svg%3E') no-repeat left center / 50px; }
	#blog-view .view-nav-prev { width: calc(50% - 20px); min-width: 0; text-align: right;  }
	#blog-view .view-nav-prev .view-nav-link { padding: 0 80px 0 0; background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"%3E%3Cpath d="M16.5303 10L22.5303 16M9 16.0803H23M16.5303 22.0607L22.5303 16.0607" stroke="%23888" stroke-width="1.5"%3E%3C/path%3E%3C/svg%3E') no-repeat right center / 50px;   }
	
	#blog-view .view-btn-back { text-align: center; padding: 40px 0; font-size: 0; }
	#blog-view .view-btn-back a { position: relative; display: inline-block; text-align: center; padding: 14px 50px; margin: 0 6px; font-size: 17px; white-space: nowrap; font-weight: 500; border-radius: 10px; background: #f2f4f6; color: #444; border: 2px solid #f2f4f6; transition: all 100ms; }
	#blog-view .view-btn-back a:hover { border-color: var(--color3); }

	
	/* 함께 보면 좋은 글 */
	#blog-view .view-related { padding: 80px 0 ; min-width: 0; }
	#blog-view .view-related-title { margin: 0 0 80px; color: #444;  }
	#blog-view .view-related-title a { color: inherit; text-decoration: none; font-size: 36px; font-weight: 600;  }
	#blog-view .view-related-group { position: relative; overflow: hidden; padding: 0 0 40px 0; }
	#blog-view .view-related-item { height: auto; min-width: 0; }
	#blog-view .view-related-meta { padding: 20px 10px 0 10px; }
	#blog-view .view-related-subject { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #444; font-size: 20px; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere; text-align: left; }
	
	#blog-view .view-related-hit { display: flex; align-items: center; gap: 5px; position: absolute; right: 15px; top: 15px; background: #fff; color: #ccc; padding: 6px 15px; border-radius: 8px; font-size: 16px; letter-spacing: 0; }
	#blog-view .view-related-hit span { display: block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.67 34.88'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ccc;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cg id='_레이어_1-2' data-name='레이어 1'%3E%3Cpath class='cls-1' d='M31.04,8.2l6.5-6.5c.39-.39.39-1.02,0-1.41s-1.02-.39-1.41,0l-7.17,7.17c-2.37-.75-4.94-1.24-7.63-1.24C9.55,6.22,0,15.33,0,17.56c0,1.45,4.08,5.82,10.17,8.69l-6.92,6.92c-.39.39-.39,1.02,0,1.41.2.2.45.29.71.29s.51-.1.71-.29l7.49-7.49c2.78,1.07,5.89,1.8,9.18,1.8,11.78,0,21.33-9,21.33-11.33,0-1.64-4.73-6.56-11.62-9.35ZM21.33,23.64c-1.59,0-3.03-.61-4.11-1.61-.24-.22-.47-.47-.67-.73-.01-.01-.02-.03-.03-.04-.2-.26-.38-.53-.54-.82-.46-.86-.73-1.84-.73-2.89,0-3.36,2.72-6.08,6.08-6.08,1.04,0,2.03.26,2.89.73.29.16.56.34.82.54.01.01.03.02.04.03.26.2.5.43.73.67,1,1.08,1.61,2.53,1.61,4.11,0,3.36-2.72,6.08-6.08,6.08Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 20px; }

	#blog-view .view-related-link { display: block; color: inherit; text-decoration: none; }
	#blog-view .view-related-link:hover .view-related-image img { transform: scale(1.04); }
	#blog-view .view-related-link:hover .view-related-subject { color: #333; }
	
	#blog-view .view-related-image { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 22px; background: #f4f4f4; }
	#blog-view .view-related-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
	#blog-view .view-related-image .view-btn-share { position: absolute; top: 15px; left: 15px; z-index: 2; display: block; width: 46px; height: 46px; border-radius: 10px; background-color: #fff; cursor: pointer; background-size: 18px; }
	#blog-view .view-related-image .view-btn-share:hover { background-color: #000;  }
	
	#blog-view .view-related .swiper > .swiper-scrollbar { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 2px; border-radius: 0; background: #ececec; }
	#blog-view .view-related .swiper-scrollbar-drag { height: 100%; border-radius: 0; background: #aaa; cursor: grab; }
	#blog-view .view-related .swiper-scrollbar-drag:active { cursor: grabbing; }

	#blog-view .view-btn-wrap { display: flex; align-items: center; justify-content: center; padding: 40px 0 20px 0; gap: 14px; }
	#blog-view .view-btn-wrap button:hover { border-color: #e6e6e6; }
	#blog-view .view-btn-wrap .view-btn-share:hover { border-color: #e6e6e6; }

	#blog-view .view-btn-share {  display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; background: #fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ccc'%3E%3Cpath d='m8.3 11.8c-.4 0-.8-.2-1-.6-.2-.5-.1-1.2.5-1.5l7.4-4.3c.5-.3 1.2-.1 1.5.4s.1 1.2-.4 1.5l-7.4 4.3c-.2.1-.4.2-.6.2z'/%3E%3Cpath d='m15.7 18.7c-.2 0-.4 0-.5-.1l-7.4-4.3c-.5-.3-.7-1-.4-1.5s1-.7 1.5-.4l7.4 4.3c.5.3.7 1 .4 1.5-.2.3-.6.5-1 .5z'/%3E%3Cpath d='m18 8.8c-2 0-3.7-1.7-3.7-3.7s1.7-3.7 3.7-3.7 3.7 1.7 3.7 3.7-1.7 3.7-3.7 3.7zm0-5.2c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5z'/%3E%3Cpath d='m18 22.6c-2 0-3.7-1.7-3.7-3.7s1.7-3.7 3.7-3.7 3.7 1.7 3.7 3.7-1.7 3.7-3.7 3.7zm0-5.2c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5z'/%3E%3Cpath d='m6 15.7c-2 0-3.7-1.7-3.7-3.7s1.7-3.8 3.7-3.8 3.7 1.7 3.7 3.7-1.6 3.8-3.7 3.8zm0-5.3c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.6-1.5-1.5-1.5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 34px; font-size: 0; border: 4px solid #eee;   border-radius: 20px; cursor: pointer; }

	#blog-view .heart-btn { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 6px; cursor: pointer; border: 4px solid #eee; border-radius: 20px; width: 90px; height: 90px; background: #fff; } 

	#blog-view .heart-btn .heart-count { font-size: 19px; min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: #444; line-height: 1; }
	#blog-view .heart-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.918 21.07c.657.435 1.508.435 2.164 0 2.052-1.358 6.474-4.57 8.381-8.162 2.526-4.758-.441-9.503-4.361-9.503s-5.103 3.593-5.103 3.593-1.182-3.593-5.103-3.593-6.886 4.745-4.36 9.503c1.907 3.592 6.329 6.804 8.381 8.162z' fill='none' stroke='%23e9323e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; }
	#blog-view .heart-btn.on .heart-icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m22.223 5.572c-1.107-1.842-2.963-2.94-4.966-2.94-2.969 0-4.549 1.865-5.257 3.062-.708-1.197-2.288-3.062-5.257-3.062-2.003 0-3.858 1.099-4.966 2.94-1.329 2.211-1.317 5.047.031 7.586 1.973 3.714 6.359 6.977 8.798 8.59.424.28.908.421 1.394.421s.97-.141 1.394-.421c2.438-1.613 6.825-4.876 8.798-8.59 1.349-2.539 1.36-5.375.031-7.586z' fill='%23e9323e'/%3E%3C/svg%3E"); }
	#blog-view .heart-btn.on[disabled] { cursor: not-allowed; }
	#blog-view .heart-btn.on[disabled] .heart-icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m22.223 5.572c-1.107-1.842-2.963-2.94-4.966-2.94-2.969 0-4.549 1.865-5.257 3.062-.708-1.197-2.288-3.062-5.257-3.062-2.003 0-3.858 1.099-4.966 2.94-1.329 2.211-1.317 5.047.031 7.586 1.973 3.714 6.359 6.977 8.798 8.59.424.28.908.421 1.394.421s.97-.141 1.394-.421c2.438-1.613 6.825-4.876 8.798-8.59 1.349-2.539 1.36-5.375.031-7.586z' fill='%23ddd'/%3E%3C/svg%3E"); }
	#blog-view .heart-btn.on[disabled] .heart-count { color: #ccc; }
	#blog-view .heart-btn.on { color: #e9323e; }

	#blog-view .heart-icon-wrap { position: relative; display: inline-flex; flex-shrink: 0; overflow: visible; }
	#blog-view .heart-icon-wrap > .heart-fly { position: absolute; left: 0; top: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 10; animation: heart-float 0.8s ease-out forwards; }
	@keyframes heart-float { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20% { opacity: 1; transform: translate(0, -12px) scale(1.15); } 100% { opacity: 0; transform: translate(var(--heart-x, 0px), -65px) rotate(var(--heart-rotate, 0deg)) scale(0.7); } }
	@media (prefers-reduced-motion: reduce) { .heart-fly { animation: none; display: none; } }

	#blog-view .comment-count-btn { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 6px; border: 4px solid #eee; border-radius: 20px; width: 90px; height: 90px; background: #fff; color: #444; text-decoration: none; }
	#blog-view .comment-count-btn:hover { border-color: #e6e6e6; }
	#blog-view .comment-count-btn .comment-count-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' stroke='%23666' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round' d='M12 3C6.48 3 2 6.58 2 11c0 2.24 1.13 4.26 3 5.72V21l3.76-2.1c1 .2 2.09.32 3.24.32 5.52 0 10-3.58 10-8s-4.48-8-10-8z'/%3E%3C/svg%3E") no-repeat center / contain; }
	#blog-view .comment-count-btn .comment-count-num { font-size: 19px; min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: #444; line-height: 1; }



/* 댓글 전체 스타일 */
.comment-wrap { max-width: 100%; margin: 0 auto; font-family: "Pretendard", sans-serif; color: #333; display: block; padding: 90px 0; }
.comment-count-wrap { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 600; color: #333; margin-bottom: 20px; }
.comment-count-wrap .comment-count-num { color: var(--color); font-weight: 700; }
.comment-write-box { background: #fff; border: 1px solid #e5e8eb; border-radius: 20px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); margin-bottom: 24px; position: relative; }
.comment-profile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.comment-user-badge { display: flex; align-items: center; gap: 10px; background: #f8f9fa; padding: 6px 14px 6px 6px; border-radius: 30px; border: 1px solid #e9ecef; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e2e8f0; }
.comment-nickname { font-size: 15px; font-weight: 600; color: #212529; }
.btn-random-nick { background: #fff; border: 1px solid #ced4da; border-radius: 16px; padding: 6px 12px; font-size: 13px; color: #495057; cursor: pointer; transition: all 0.2s; }
.btn-random-nick:hover { background: #f1f3f5; }
.comment-write-box textarea { width: 100%; height: 90px; border: 1px solid #e5e8eb; border-radius: 12px; padding: 14px; resize: none; box-sizing: border-box; font-size: 15px; outline: none; background: #fff; color: #333; line-height: 1.5; }
.comment-write-box textarea:focus { border-color: var(--color); }
.comment-char-counter { display: flex; justify-content: flex-end; padding: 5px 10px; color: var(--color); letter-spacing: 1px; font-size: 16px; }
.comment-char-counter span { color: #999; font-size: 16px; padding: 0 2px 0 0; }
.comment-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; }
.btn-comment-secret { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid #e1e5e9; border-radius: 10px; background: #fff; color: #8b95a1; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.btn-comment-secret:before { content: ''; display: block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='10' width='14' height='11' rx='3' stroke='%238b95a1' stroke-width='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' stroke='%238b95a1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.btn-comment-secret:hover { border-color: #b9c0c7; background: #f8f9fa; }
.btn-comment-secret.on { border-color: #7950f2; background: #f3f0ff; color: #7048e8; font-weight: 500; }
.btn-comment-secret.on:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='10' width='14' height='11' rx='3' fill='%237950f2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' stroke='%237950f2' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='15' r='1.5' fill='white'/%3E%3C/svg%3E"); }
.btn-comment-submit { background: #222; color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-comment-submit:hover { background: #000; }

/* 댓글 목록 카드 스타일 */
.comment-list-group { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.comment-item { position: relative; background: #f8f9fa; border: 1px solid #f1f3f5; border-radius: 16px; padding: 20px; }
.comment-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.comment-item-user { display: flex; align-items: center; gap: 10px; }
.comment-item-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #e2e8f0; }
.comment-item-name { font-size: 15px; font-weight: 600; color: #333; }
.comment-item-date { font-size: 15px; color: #aaa; }
.comment-item-content { font-size: 18px; color: #495057; line-height: 1.6; word-break: break-all; padding: 10px 140px 10px 42px; }

/* 댓글 페이징 영역 스타일 */
.comment-paging { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; }
.comment-paging a, .comment-paging strong { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; font-size: 14px; border-radius: 8px; text-decoration: none; border: 1px solid #e5e8eb; color: #495057; background: #fff; }
.comment-paging strong.active { background: var(--color); color: #fff; border-color: var(--color); font-weight: 600; }
.comment-paging a:hover { background: #f1f3f5; }

.admin-action-btns { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 4px; }
.btn-admin-del, .btn-admin-pin, .btn-admin-secret { background: #fff; border: 1px solid #ced4da; border-radius: 16px; padding: 6px 12px; font-size: 13px; color: #495057; cursor: pointer; transition: all 0.2s; }
.btn-admin-del:hover { background: #fff5f5; color: #fa5252; border-color: #ffa8a8; }
.btn-admin-pin:hover { background: #fff9db; color: #f59f00; border-color: #ffe066; }
.btn-admin-pin.active { background: #f59f00; color: #fff; border-color: #f59f00; font-weight: 600; }
.btn-admin-secret:hover { background: #f3f0ff; color: #7950f2; border-color: #b197fc; }
.btn-admin-secret.active { background: #7950f2; color: #fff; border-color: #7950f2; }
.comment-list-empty { padding: 60px 20px; border-radius: 16px; background: #f8f9fa; color: #adb5bd; font-size: 15px; text-align: center; }
.comment-pin-label { display: inline-block; padding: 2px 6px; border-radius: 5px; background: #f1c40f; color: #fff; font-size: 10px; }
.comment-secret-label { display: inline-block; padding: 2px 6px; border-radius: 5px; background: #7950f2; color: #fff; font-size: 10px; }