/* ==========================================================================
   Leopon Pop-kive Template Styles (Intro Integration Version)
   - Date: 2025-06-20
   - Goal: Integrate title/content flow, remove intro nav item.
   ========================================================================== */

/* Google Fonts - Nanum Myeongjo (한글 손글씨 서체) */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

/* Local Fonts - Nanum Square (한글 고딕 서체) */
@import url('../font/NanumSquare.css');

/* CSS 로드 확인용 테스트 스타일 */
body {
    background: #ffffff !important;
    padding-top: 95px; /* 헤더 높이에 맞춰 공간 조정 - 120px에서 80px로 줄임 */
}

/* --------------------------------------------------------------------------
   0. Font System & Root Variables
   -------------------------------------------------------------------------- */
:root {
    --font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Noto Serif KR', Georgia, 'Times New Roman', serif;
    --font-nanum: 'Nanum Gothic', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-square: 'NanumSquare', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-border: #e0e0e0;
    --color-background: #ffffff;
    --color-background-light: #f9f9f9;
    --color-accent: #005a9c;
    --color-purple: #667eea;
    --color-section-title: #1d5999;
    --color-q-number: #c7dbe9;
    --color-point-orange: #ff5600;
    --color-point-orange-light: #fe9c25;
    --sidebar-width: 280px;
    --header-height: auto; /* 헤더 높이를 내용에 맞게 자동 조정 */
    --header-height-mobile: auto;
}

html {
    scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   2. Main Layout (Top Header)
   -------------------------------------------------------------------------- */
body {
    padding-top: 95px; /* 헤더 높이에 맞춰 공간 조정 - 120px에서 80px로 줄임 */
}

body .site-header {
    background: rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
}

.popkive-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    padding: 35px 0; /* 헤더 상하 여백 */
    background: rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
    /* border-bottom: 1px solid #fff; */
    z-index: 1000;
    will-change: padding;
}

/* 헤더 내부 컨텐츠 정렬용 */
.popkive-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px 0 58px; /* .popkive-content와 동일한 좌우 여백 */
}

/* --------------------------------------------------------------------------
   3. Top Header & Navigation
   -------------------------------------------------------------------------- */

.popkive-title-link {
    display: block; /* 블록 요소로 변경 */
    margin-bottom: 14px; /* 제목과 바로가기 버튼 사이 여백 줄임 */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.popkive-sidebar.nav-hidden #popkive-intro {
    padding-top: 0;
    margin-top: 0;
}

.popkive-main-title {
    font-family: var(--font-serif);
    font-size: 2.5em; /* 도입부(1.45em)의 1.2배 */
    font-weight: 600;
    line-height: 58px;
    color: #222;
    text-shadow: none;
    text-align: center; /* 중앙 정렬 */
    margin: 0; /* 하단 마진 완전 제거 */
}


.popkive-nav {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center; /* 중앙 정렬 */
    opacity: 0; /* 초기에 숨김 */
    visibility: hidden; /* 초기에 숨김 */
    max-height: 0; /* 초기에 높이 0 */
    overflow: hidden; /* 넘치는 내용 숨김 */
    transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease; /* 부드러운 전환 효과 */
    width: 350px;
    position: absolute;
    left: calc(50% - 175px);
    bottom: -23px;
    padding: 5px 0;
    border-radius: 3px;
    border: 1px solid #b4bcd4;
    box-shadow: 6px 7px 0px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.popkive-nav.show {
    opacity: 1; /* 표시될 때 */
    visibility: visible; /* 표시될 때 */
    max-height: 50px; /* 표시될 때 충분한 높이 */
}

.site-nav .nav-icon {
    display: flex;
    align-items: center;
    font-size: 15px;
    padding: 5px; /* 패딩 조정 */
    border-radius: 3px;
    border: 1px solid transparent;
    text-decoration: none;
    color: var(--color-text-light);
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
}

.site-nav .nav-icon i {
    width: 20px;
    margin-right: 2px;
    font-size: 1.2em;
    text-align: left;
    color: #bccbdc;
}

.site-nav .nav-icon i.fa-clipboard-check,
.site-nav .nav-icon i.fa-lightbulb {
    margin: 0 0 0 2px;
}

.site-nav .nav-icon span {
    font-family: var(--font-square);
    font-size: 0.75em;
    font-weight: 500;
    opacity: 0.7;
}

.site-nav .nav-icon:hover {
    background-color: var(--color-background-light);
    color: var(--color-text);
}

.site-nav .nav-icon.active {
    background-color: #dfe2eb;
    color: var(--color-text);
}

.site-nav .nav-icon.active span {
    opacity: 1;
    color: #082c46;
}

.site-nav .nav-icon.active i {
    color:#005a9c
}

/* --------------------------------------------------------------------------
   4. Content & Sections
   -------------------------------------------------------------------------- */
.popkive-timeline {
    position: relative;
}

.popkive-section {
    position: relative;
    padding: 0 35px 5em;
    min-height: 200px;
    max-width: 800px;
    margin: 0 auto;
    scroll-margin-top: 100px; /* 헤더 높이에 맞게 조정 */
}

#popkive-intro {
    padding-top: 0; /* 상단 패딩 완전 제거 */
    padding-bottom: 0;
    margin-top: 0; /* 상단 마진 제거 */
    max-width: none; /* 도입부는 max-width 제거 */
    scroll-margin-top: 100px; /* 헤더 높이에 맞게 조정 */
}

#related-works {
    min-height: 85vh;
}

.popkive-section .section-title,
body.single-popkive .related-section .section-title {
    font-family: var(--font-square);
    font-size: 1.25em; /* 도입부(1.45em)보다 작게, 내용(1.1rem)보다 크게 */
    font-weight: 700;
    margin-bottom: 1.5em;
    padding-top: 8px; /* Marker와 텍스트 시작점 정렬 */
    text-align: center; /* 중앙 정렬 */
    color: var(--color-section-title);
} 

.popkive-section .section-title i,
body.single-popkive .related-section .section-title i {
    margin-right: 0.5em;
    font-size: 0.9em;
    opacity: 0.6;
    vertical-align: baseline;
    animation: icon-opacity-pulse 1s ease-in-out infinite alternate;
}

#popkive-intro .entry-content {
    min-height: calc(100vh - 200px);
    display: flex;
}

#popkive-intro .entry-content-inner {
    margin: auto;
}

.entry-content p,
.popkive-section p {
    /* font-size: 1.1rem; */
    line-height: 1.75;
    font-weight: 700;
    margin-bottom: 1.5em;
}

/* 도입부 본문 첫 문단 헤드라인 느낌 강조 */
#popkive-intro .entry-content p {
    font-family: var(--font-serif);
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.75;
    color: #222;
    margin-bottom: 1.25em;
    word-wrap: keep-all;
    text-align: justify;
    letter-spacing: -0.01em;
}

#popkive-intro .entry-content blockquote p {
    font-family: var(--font-square);
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.85;
    background: linear-gradient(to right, var(--color-point-orange), var(--color-point-orange-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    word-break: keep-all;
    max-width: 720px;
    text-align: left;
    margin: 2em auto 2.05em;
    position: relative;
    padding: 0 1.5em;
}

/* blockquote 인용 부호 스타일 */
#popkive-intro .entry-content blockquote p::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 2em;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23ff5600' width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.78,8.89c0-3.07,1.53-4.3,4.3-4.34L5.38,6C3.78,6.17,3,7,3.1,8.31H4.54V12H.78Zm5.9,0c0-3.07,1.53-4.3,4.3-4.34L11.28,6C9.68,6.17,8.89,7,9,8.31h1.44V12H6.68Z'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    margin-right: 0.25em;
    vertical-align: text-bottom;
    opacity: 0.35;
    position: absolute;
    top: -0.25em;
    left: 0;
}

#popkive-intro .entry-content-inner a {
    color: inherit;
    border-bottom: 1px dashed var(--color-purple);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   5. Specific Section Elements
   -------------------------------------------------------------------------- */

#popkive-keywords {
    opacity: 0;
    transition: opacity 1s;
}
   
.keywords-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch; /* 같은 행의 아이템들이 모두 같은 높이를 갖도록 설정 */
    gap: 0.75em;
    /* margin-top: 5em; */
}

.keywords-grid-row {
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: flex-start;
    padding: 1em 1.25em 1.25em;
    background: #efeeed;
    border: 1px solid #efeeed;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.keywords-grid-row:hover {
    transform: translateY(-4px);
    box-shadow: 3px 6px 3px rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
    border-color: #efefef;
}

.keywords-grid-meaning,
.keywords-grid-extended {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.keywords-grid-meaning {
    min-width: 0;
}

.keywords-grid-extended {
    min-width: 0;
    font-family: var(--font-serif);
    font-size: 0.875em;
    color: var(--color-text);
    line-height: 1.55em;
    position: relative;
    padding-top: 1em;
    border-top: 1px solid rgb(71 99 120 / 25%);
}

/* .keywords-grid-extended::before {
    content: '의미확장';
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #556684;
    padding: 0.18em 0;
    margin-bottom: 1em;
    margin-right: 0.7em;
    vertical-align: middle;
    width: 48px;
    text-align: center;
    border-top: 1px solid #a3afc3;
    border-bottom: 1px solid #a3afc3;
} */

.keywords-grid-extended p {
    margin-top: 0;
}

.keywords-grid-extended p:last-child {
    margin-bottom: 0;
}

.keywords-grid .keyword-word {
    font-family: var(--font-serif);
    font-weight: 600;
    color: #9c0900;
    font-size: 1.35rem;
    margin: 0.5em 0 0.25em;
}

.keywords-grid .keyword-bilingual {
    font-size: 0.75em;
    color: var(--color-text-light);
    margin: 0.25em 0 1em;
    /* font-style: italic; */
}

.keywords-grid .keyword-meaning-small {
    display: block;
    font-size: 0.875em;
    font-weight: 400;
    line-height: 1.75em;
    /* color: var(--color-text-light); */
    min-height: 5.25em;
}

.keywords-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 2em 0;
    background: var(--color-background);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.keywords-table th, .keywords-table td { 
    padding: 1.2em;
    text-align: left;
    border-bottom: 1px solid var(--color-border); 
    vertical-align: top; 
}

/* 셀 내부 p 태그의 상단 마진 제거하여 정렬 맞춤 */
.keywords-table td p:first-child {
    margin-top: 0;
}

.keywords-table th { 
    background-color: var(--color-background-light); 
    font-weight: 600;
    font-family: var(--font-sans);
}

.keywords-table .keyword-word { 
    font-weight: 600;
    color: var(--color-accent);
}

.keywords-table .keyword-bilingual { 
    font-size: 0.9em; 
    color: var(--color-text-light); 
    font-style: italic;
}

.keywords-table .keyword-meaning-small {
    display: block;
    font-size: 0.95em;
    color: var(--color-text-light);
    margin-top: 0.3em;
    font-weight: 400;
    line-height: 1.6;
}

.conclusion-quote { 
    padding: 2em 1.5em;
    margin: 8em 0 2em;
    border-radius: 8px;
    text-align: center;
    word-break: keep-all;
    background-color: #e2e6ea;
    background-image: 
        /* 1. 상단 레이어: 빗살 무늬 패턴 */ 
        repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(226 218 218 / 10%) 5px, rgb(255 255 255 / 15%) 15px), 
        /* 2. 하단 레이어: 좌->우 색상 그라데이션 */ 
        linear-gradient(90deg, rgba(211, 215, 224, 1) 0%, rgba(235, 235, 221, 1) 100%);
}

.conclusion-quote p { 
    font-family: var(--font-serif); 
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.6;
    margin: 0; 
    color: var(--color-accent);
    position: relative;
    --cursor-opacity: 1;
}

/* 타이핑 효과를 위한 커서 */
.conclusion-quote p::after {
    content: '|';
    animation: blink 1s infinite;
    font-weight: normal;
    color: var(--color-accent);
    opacity: var(--cursor-opacity);
    transition: opacity 0.3s ease;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.question-item { 
    margin-bottom: 3rem;
}

.question-topic { 
    font-family: var(--font-serif);
    font-size: 1.45em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-accent);
    margin-bottom: 1.25em;
    text-align: center;
    position: relative; /* ::before 요소를 위한 상대 위치 */
    word-break: keep-all; /* 한글 단어 단위로 줄바꿈 */
}

.question-topic > p {
    margin-top: 0.25em;
    margin-bottom: 1.25em;
}

/* 질문 번호를 ::before 가상 요소로 추가 */
.question-topic::before {
    content: "Q" counter(question-counter);
    counter-increment: question-counter;
    font-family: 'Noto Sans KR', sans-serif; /* 본고딕 */
    font-weight: 600; /* 가는체 */
    font-size: 1.55em;
    color: var(--color-q-number);
    display: inline;
}

.opinions-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: stretch; /* 같은 행의 카드들이 높이를 맞춤 */
}

.opinions-container.has-multiple-opinions .opinion-card {
    height: 100%; /* 카드 높이를 100%로 설정하여 그리드 셀에 맞춤 */
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden; /* 이미지의 둥근 모서리 적용 */
}

.opinions-container.has-multiple-opinions .opinion-card-body {
    flex: 1; /* 남은 공간을 모두 차지하도록 */
    display: flex;
    flex-direction: column;
}

.opinions-container.has-multiple-opinions .opinion-text {
    flex: 1; /* 텍스트 영역이 남은 공간을 모두 차지하도록 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.5rem; /* 텍스트 영역에 패딩 추가 */
}

.opinion-item {
    break-inside: avoid;
}

.opinion-card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer; /* 카드 전체를 클릭 가능하게 */
}

/* --- 의견이 여러 개일 때 (Multiple Opinions) --- */

.opinions-container.has-multiple-opinions .opinion-card-footer {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.opinion-image-wrapper {
    position: relative;
    overflow: hidden;
}

/* 2개 이상 의견 카드용 이미지 영역 (16:9 비율) */
.opinion-image-wrapper.fixed-height-multiple {
    width: 100%;
    height: 0;
    padding-bottom: 65%; /* 16:9 비율 (9/16 = 0.5625) */
}

/* 1개 의견 카드용 이미지 영역 (텍스트 높이와 동일) */
.opinion-image-wrapper.fixed-height-single {
    width: 100%;
    height: 100%;
}

.opinion-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지를 영역에 맞게 크롭 */
    object-position: center; /* 중앙 정렬 */
}

/* 이미지 그라데이션 오버레이 (2개 이상 의견일 때만) */
.image-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* 20% → 30%로 변경 */
    pointer-events: none;
    z-index: 1;
}

/* 1개 의견 카드용 이미지 그라데이션 오버레이 */
.image-gradient-overlay.single-opinion {
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: 30%; /* 20% → 30%로 변경 */
    height: 100%;
}

/* 카드 호버 효과 */
.opinion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.opinion-card-body {
    flex-grow: 1;
}

.opinion-text {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--color-text);
    word-break: break-all;
    text-align: justify;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

.has-multiple-opinions .opinion-text p {
    margin-top: 0 !important;
}

.has-single-opinion .opinion-text p:first-child {
    margin: 0 !important;
}

.opinion-text p:last-child {
    margin-bottom: 0 !important;
}

.opinion-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- 의견이 1개일 때 (Single Opinion Layout) --- */
.opinions-container.has-single-opinion {
    grid-template-columns: 1fr; /* 1열로 고정 */
}

/* 이미지가 없는 경우, 일반적인 flex-direction: column 레이아웃으로 복귀 */
.opinions-container.has-single-opinion .opinion-card.no-image {
    padding: 1.5rem;
}

/* 이미지가 있는 경우, 스크린샷에 맞춘 새로운 그리드 레이아웃 적용 */
.opinions-container.has-single-opinion .opinion-card.has-image {
    display: grid;
    /* 1fr 1fr로 두 개의 동일한 너비 열을 만들고, gap으로 간격 설정 */
    grid-template-columns: 1fr 1fr;
    /* gap: 1.5rem; */ /* .opinions-container의 gap과 동일하게 */
    padding: 0;
    overflow: hidden;
}

.opinions-container.has-single-opinion .opinion-card.has-image .opinion-image-wrapper {
    /* 이미지는 첫 번째 열을 차지 */
    grid-column: 1 / 2;
    height: 100%;
}

.opinions-container.has-single-opinion .opinion-card.has-image .opinion-text-content {
    /* 텍스트 콘텐츠는 두 번째 열을 차지 */
    grid-column: 2 / 3;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.opinions-container.has-single-opinion .opinion-card.has-image .opinion-card-body {
    padding: 0;
}

.opinions-container.has-single-opinion .opinion-card.has-image .opinion-card-footer {
    padding: 0;
    margin-top: 1rem;
}

/* 공통 좋아요 버튼 스타일 (중앙 배치용) */
.popkive-like-btn.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* 카드 호버 시 좋아요 버튼 강조 */
.opinion-card:hover .popkive-like-btn.centered {
    opacity: 1;
    border-color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.1); /* 호버 시 약간의 배경색 */
}

/* 중앙 배치 버튼 호버 효과 */
.popkive-like-btn.centered:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

/* 결론 섹션 좋아요 버튼 */
.conclusion-like-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    position: relative;
}

/* 결론 섹션의 중앙 버튼은 position: absolute가 아님 */
.conclusion-like-container .popkive-like-btn.centered {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    border-color: rgba(0, 0, 0, 0.2); /* 기본 테두리 색상 */
    color: rgba(0, 0, 0, 0.7); /* 기본 글자 색상 */
}

.conclusion-like-container .popkive-like-btn.centered:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.9);
    transform: none; /* 호버 시 위치 고정 */
}

.popkive-like-btn .like-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.popkive-like-btn.liked .like-icon {
    fill: currentColor;
    stroke: currentColor;
}

.popkive-like-btn .like-count {
    font-weight: 600;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   6. Responsive (Mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    .popkive-header-inner {
        padding: 0 20px; /* 모바일 콘텐츠 여백과 동일하게 */
    }

    main#site-content {
        padding: 15px 20px; /* 상단 패딩을 30px에서 15px로 줄임 */
    }

    .popkive-section,
    #popkive-intro {
        scroll-margin-top: 90px; /* 모바일/태블릿 헤더 높이 */
    }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    
    main#site-content {
        padding: 10px 20px; /* 모바일에서 상단 패딩을 더 줄임 */
    }
    
    #popkive-intro .entry-content blockquote {
        margin: 0;
    }
    #popkive-intro .entry-content blockquote p {
        padding-right: 0;
    }

    .popkive-main-title {
        font-size: 2.5em;
        will-change: font-size;
    }

    .popkive-nav {
        position: fixed;
        bottom: 15px;
        left: 15px;
        width: calc(100% - 40px);
        gap: 0;
        padding: 5px;
        z-index: 1001;
    }
    .popkive-nav.show {
        max-height: 65px;
    }
    /* 모바일에서 팝업 활성화 시 하단 내비게이션 숨기기 */
    body.popup-video .popkive-nav {
        display: none;
    }
    .site-nav .nav-icon {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 8px 5px 10px;
        flex: 1;
    }
    .site-nav .nav-icon i {
        margin: 0 0 5px 0 !important;
        text-align: center;
    }

    .popkive-section,
    #popkive-intro {
        padding: 0 0 3.5em;
    }
    
    #popkive-intro {
        padding-top: 0; /* 모바일에서 도입부 상단 패딩 제거 */
    }

    #popkive-intro .entry-content blockquote p {
        font-size: 1.5em;
    }

    .popkive-section .section-title, 
    body.single-popkive .related-section .section-title {
        font-size: 0;
    }

    .popkive-section .section-title i,
    body.single-popkive .related-section .section-title i {
        font-size: 1.5rem;
        margin: 0;
        padding: 1.2em;
        opacity: 1;
    }

    .opinions-container {
        grid-template-columns: 1fr !important;
    }

    /* 모바일에서 의견이 1개일 때도 의견이 2개 이상일 때와 동일한 레이아웃 적용 */
    .opinions-container.has-single-opinion .opinion-card.has-image {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        padding: 0 !important;
    }

    .opinions-container.has-single-opinion .opinion-card.has-image .opinion-image-wrapper {
        grid-column: unset !important;
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 65% !important; /* 16:9 비율 */
    }

    /* 모바일에서 의견이 1개일 때 이미지 높이를 의견이 2개 이상일 때와 동일하게 조정 */
    .opinions-container.has-single-opinion .opinion-card.has-image .opinion-image-wrapper.fixed-height-single {
        height: 0 !important;
        padding-bottom: 65% !important;
    }

    .opinions-container.has-single-opinion .opinion-card.has-image .opinion-text-content {
        grid-column: unset !important;
        padding: 1.5rem !important;
        flex: 1 !important;
    }

    /* 모바일에서 의견이 1개일 때 텍스트 패딩을 의견이 2개 이상일 때와 동일하게 조정 */
    .opinions-container.has-single-opinion .opinion-card.has-image .opinion-text {
        padding: 0 !important;
    }

    .opinions-container.has-single-opinion .opinion-card.has-image .opinion-text p:first-child {
        margin: 0 !important;
    }

    .opinions-container.has-single-opinion .opinion-card.has-image .opinion-image-wrapper .image-gradient-overlay.single-opinion {
        top: auto !important;
        right: auto !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 30% !important;
        background-image: linear-gradient(to bottom, transparent 0%, var(--dominant-color, #f0f0f0) 100%) !important;
    }

    .conclusion-quote {
        margin-top: 2em;
    }

    .keywords-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .keywords-grid-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5em;
    }

    .keywords-grid-extended {
        margin-top: 62px;
        padding: 0;
        border: 0;
        word-break: keep-all;
        position: relative;
    }

    .keywords-grid-extended::before {
        content: '';
        width: 0;
        height: calc(100% - 0.55rem);
        border-left: 1px solid rgb(71 99 120 / 25%);
        display: block;
        position: absolute;
        top: 0.275rem;
        left: -1.275rem;
    }

    .fact-item {
        padding: 1.2em !important;
        margin-bottom: 1.5em !important;
    }
    .fact-item:last-child {
        margin-bottom: 0 !important;
    }
    .fact-thumbnail {
        display: none !important;
    }
    .facts-filter select {
        display: none !important;
    }

    .question-topic > p {
        font-size: 0.85em;
    }

    .question-topic::before {
        font-size: 1em;
    }

    #footer::after {
        content: '';
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 80px;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
    }

}

/* 사실들 select box 필터링 */
.facts-filter {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
    padding-bottom: 1em;
}

.facts-select {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-square);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 200px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

.facts-select:hover {
    border-color: var(--color-accent);
}

.facts-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

/* 사실 항목 필터링 */
.fact-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
    background: #e9ebf1;
    border: 1px solid #c2c7d1;
    /* border-radius: 8px; */
    padding: 2em;
    margin-bottom: 2em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.fact-item.hidden {
    display: none !important;
    opacity: 0;
    transform: translateY(10px);
}

.fact-item.fade-out {
    opacity: 0;
    transform: translateY(10px);
}

.fact-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 1em; 
}
.fact-type-label { 
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #727f95;
    border: 1px solid #c2c7d1;
    background: #fff;
    margin-bottom: 0.7em;
    margin-right: 0.7em;
    vertical-align: middle;
    padding: 0.7em 0.7em 0.6em;
    text-align: center;
}
.fact-playback-time { 
    font-size: 0.85em; 
    color: var(--color-text-light); 
}
.fact-content { 
    margin: 0 0 1.5em 0; 
    padding: 0; 
}
.fact-content p:first-child {
    font-weight: 500;
    font-size: 1.1em;
    line-height: 1.75;
    margin-bottom: 1em;
}

.fact-content p { 
    font-family: var(--font-sans); 
    font-size: 0.875em;
    line-height: 1.55;
    word-break: keep-all;
}
/* .fact-content p:before { 
    content: open-quote; 
    margin-right: 0.25em; 
}
.fact-content p:after { 
    content: close-quote; 
    margin-left: 0.25em; 
} */
.fact-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: end; 
    gap: 1em;
    height: 2.5em;
    word-break: keep-all;
}
.fact-thumbnail a { 
    display: block; 
    width: 225px;
    height: 155px;
    background-color: #ECECEC; 
    opacity: 0.45;
    overflow: hidden; 
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -2;
}
.fact-thumbnail a::before {
    content: '';
    position: absolute;
    display: block;
    background: #E9EBF1;
    background: linear-gradient(180deg, rgba(233, 235, 241, 1) 0%, rgba(233, 235, 241, 0) 100%);
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    z-index: 1;
}
.fact-thumbnail a::after {
    content: '';
    position: absolute;
    display: block;
    background: #E9EBF1;
    background: linear-gradient(90deg, rgba(233, 235, 241, 1) 0%, rgba(233, 235, 241, 0) 100%);
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    z-index: 1;
}
.fact-thumbnail img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: grayscale(0.5);
    transition: transform 0.3s ease; 
}
.fact-thumbnail a:hover img { 
    transform: scale(1.05); 
}
.fact-source-container { 
    text-align: left; 
    font-size: 0.9em; 
    line-height: 1.45;
    color: var(--color-text-light); 
    flex-grow: 1; 
    text-decoration: none;
    transition: color 0.2s ease;
}

.fact-source-container:hover {
    color: var(--color-accent);
}
.fact-source { 
    margin-right: 1em; 
    font-style: normal;
}
.fact-link { 
    color: var(--color-accent); 
    text-decoration: none; 
    font-weight: 500; 
    white-space: nowrap; 
}
.fact-link:hover { 
    text-decoration: underline; 
}
.fact-link::after { 
    content: ' →'; 
}

/* CSS 카운터 초기화 */
#popkive-questions {
    counter-reset: question-counter;
}

/* 의견 아이템 스크롤 마진 */
.opinion-item {
    scroll-margin-top: 120px; /* 헤더 높이에 맞춰 조정 */
}

/* 결론 제목 박스(모바일) */
.conclusion-title-box {
  width: 100%;
  border: 3px solid #ff3570;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  margin-bottom: 1.5em;
  transition: height 0.25s, font-size 0.25s;
  background: #fff;
}
.conclusion-title-text {
  font-size: 2.2em;
  font-weight: 700;
  color: #222;
  transition: font-size 0.25s;
}
@media (min-width: 769px) {
  .conclusion-title-box { display: none; }
}

@keyframes icon-opacity-pulse {
    from {
        opacity: 1;
        transform: scale(0.925);
    }
    to {
        opacity: 0.5;
        transform: scale(1);
    }
}

@media (max-width: 480px) {
    .keywords-grid-row {
        grid-template-columns: 1fr;
        gap: 1.5em; /* Adjust gap for vertical layout */
    }

    .keywords-grid .keyword-meaning-small {
        min-height: 3.5em;
    }

    .keywords-grid-extended {
        margin-top: 0;
        padding-top: 1.25em; /* Add padding top for separation */
    }

    .keywords-grid-extended::before {
        content: '';
        border-left: none; /* Remove left border */
        border-top: 1px solid rgb(71 99 120 / 25%); /* Add top border */
        width: 100%;
        height: 0;
        top: 0;
        left: 0;
    }
}

/* 무한 스크롤 마지막 메시지 */
.infinite-scroll-end-message {
    text-align: center;
    padding: 2em 0;
    margin-top: 1em;
    font-size: 1.5em; /* 아이콘 크기 조절 */
    color: var(--color-text-light);
    border-top: 1px solid var(--color-border);
    opacity: 0.7; /* 아이콘을 약간 흐리게 표시 */
}