/* ===================================================================
   0. 글로벌 Box Sizing 설정
   - 모든 요소의 너비 계산 방식을 일관되게 만들어 레이아웃 안정성을 높입니다.
=================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
Theme Name: ilchopick-child
Theme URI: https://ilchopick.com
Template: ilchopick
Author: 1chopick
Version: 3.1
Text Domain: ilchopick-child
*/

/* ===================================================================
   1. 글로벌 설정 및 타이포그래피 (Global & Typography)
=================================================================== */

:root {
    --color-bg: #1e1e1e;
    --color-text: #ffffff;
    --color-text-muted: #a0aec0;
    --color-border: #444444;
    --color-accent-dark: #22b0ae; /* 테마 포인트 색상의 어두운 버전 */
    --container-width-header: 900px;
    --container-width-content: 720px;
}
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
}
a {
    text-decoration: none !important;
    color: inherit;
    transition: opacity 0.2s ease;
}
a:hover {
    opacity: 0.7;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
main {
    padding-top: 0;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: 700;
    line-height: 1.5;
}


/* ===================================================================
   2. 헤더 및 메뉴 (Header & Navigation)
=================================================================== */

header#main-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--color-bg);
    transition: background-color 0.3s;
}
header#main-header.scrolled {
    background-color: #212121;
}
header#main-header .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--container-width-header);
    padding: 0 10px;
}
.logo {
    width: 150px;
    flex-shrink: 0;
}

/* --- PC 메뉴 (기본) --- */
nav.menu {
    margin-left: auto;
}
nav.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0px;
}
nav.menu li {
    position: relative;
}
nav.menu > ul > li > a {
    font-weight: bold;
    font-size: 18px;
    padding: 10px;
    display: block;
}
nav.menu .sub-menu {
    display: none;
}


/* --- PC 메뉴 (글로벌 메가 메뉴) --- */
#global-mega-menu-panel {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #1e1e1e;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    padding: 40px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
#global-mega-menu-panel.visible {
    display: block;
    opacity: 1;
    visibility: visible;
}
.mega-menu-inner {
    max-width: var(--container-width-content);
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
.mega-menu-column {
    flex: 1;
    min-width: 180px;
}
.mega-menu-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}
.mega-menu-column .sub-menu {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
}
.mega-menu-column .sub-menu a {
    display: block;
    padding: 8px 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-muted);
}
.mega-menu-column .sub-menu a:hover {
    color: #fff;
}
.mega-menu-column .sub-menu .sub-menu {
    padding-left: 15px;
    margin-top: 8px;
}


/* --- 모바일 메뉴 (햄버거) --- */
.hamburger {
    display: none;
}
.mobile-popup-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 2000;
    background-color: #1e1e1e;
    padding: 80px 20px;
}
.mobile-popup-menu.active {
    display: block;
}
body.mobile-menu-open {
    overflow: hidden;
}
.mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 2001;
}
.close-mobile-menu {
    font-size: 32px;
    cursor: pointer;
}
.mobile-menu-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-menu-content > ul > li {
    font-size: 18px;
    margin-bottom: 20px;
}
.mobile-popup-menu .sub-menu {
    display: block;
    margin-top: 15px;
    padding-left: 20px;
}
.mobile-popup-menu .sub-menu li {
    font-size: 16px;
    margin-bottom: 15px;
}

/* ===================================================================
   2.5. Full-Bleed Grid Layout System (Simplified)
=================================================================== */
.site-content {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--container-width-content)) 1fr;
  padding-top: 20px;
}

.site-content > * {
  grid-column: 2;
}

.full-bleed-thumbnail {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 20px;
}

.full-bleed-thumbnail img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}
.full-bleed-thumbnail:empty {
    margin-bottom: 0;
    display: none;
}


/* ===================================================================
   3. 메인 페이지 레이아웃 (front-page.php) - 복원
=================================================================== */
.section-container {
    max-width: var(--container-width-content);
    margin: 0 auto;
    padding: 0; /* Changed from 15px to 0 */
}

/* 자동 맞춤 그리드 레이아웃 */
.no1-area, .no4-area, .no5-7-area {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.no1-area {
    margin-top: 80px;
}
.post-item {
    display: flex;
    flex-direction: column;
}
.thumbnail-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    margin-bottom: 10px;
    background-color: #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}
.main-thumb-resize {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-thumb-resize img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 제목 및 리스트 스타일 */
.post-title {
    margin: 5px 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: break-word; /* [FIX] 긴 단어가 패딩을 넘어가지 않도록 줄바꿈 허용 */
    white-space: normal;
    /* [개선] 제목이 1줄일 때도 2줄 높이를 차지하도록 하여, 아래 항목의 세로 정렬을 맞춥니다. */
    min-height: 3em; /* line-height (1.5) * 2줄 = 3em */
}
.post-bullet {
    list-style: none;
    padding-left: 0;
    margin: 10px 0 0 0;
}
.post-bullet li,
.post-bullet li a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
    overflow-wrap: break-word; /* [FIX] 긴 단어가 패딩을 넘어가지 않도록 줄바꿈 허용 */
    white-space: normal;
    margin-bottom: 5px;
}
.post-bullet li::before {
    content: '•';
    line-height: inherit;
}

/* front-page 전용 리스트 스타일 */
.i-post-bullet {
    list-style: none;
    padding-left: 0;
    margin: 10px 0 0 0;
}
.i-post-bullet li,
.i-post-bullet li a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-muted);
    overflow-wrap: break-word; /* [FIX] 긴 단어가 패딩을 넘어가지 않도록 줄바꿈 허용 */
    white-space: normal;
    margin-bottom: 5px;
}
.i-post-bullet li::before {
    content: '•';
    line-height: inherit;
}

/* 플레이스홀더 카드 스타일 */
.placeholder-card {
    border: 1px dashed var(--color-border);
    background-color: #2a2a2a;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
    padding: 20px;
}
.placeholder-content {
    text-align: center;
}
.placeholder-category {
    display: block;
    font-size: 20px;
    color: var(--color-text);
    font-weight: bold;
    margin-bottom: 10px;
}
.placeholder-text {
    display: block;
    font-size: 16px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* 썸네일 없는 글 & 깨진 이미지 대체 텍스트 스타일 */
.no-thumbnail-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%; /* 부모 요소의 전체 너비를 차지하도록 설정 */
    text-align: center;
}
.no-thumbnail-link {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-muted);
    overflow-wrap: break-word; /* 긴 단어가 컨테이너를 넘어가지 않도록 강제 줄바꿈 */
    width: 100%; /* [FIX] Ensure the link fills the container to respect parent's padding */
}
.no-thumbnail-link:hover {
    color: var(--color-text);
    opacity: 1;
}
.no-thumbnail-text-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 15px;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-muted);
}


/* ===================================================================
   4. 글/페이지 상세 (single.php, page.php)
=================================================================== */

.ip-post {
    padding: 0 10px;
}
.entry-header {
    margin-bottom: 30px;
}
.entry-content {
    font-size: 18px;
    line-height: 1.8;
}
.ilchopick_child-breadcrumb {
    padding-bottom: 15px;
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}
.related-posts-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}
.related-posts-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
}
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.related-post-item {
    display: block; 
    background-color: #2c2c2c;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
}
.related-post-item:hover {
    transform: translateY(-5px);
}
.related-post-item .related-post-thumbnail {
    width: 100%;
    height: 180px;
    background-color: #3a3a3a;
    padding: 10px;
    position: relative; 
}
.related-post-item .related-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.related-post-item h4 {
    font-size: 18px;
    padding: 10px;
    margin: 0;
    color: var(--color-text);
}

.related-thumb-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 20px);
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1.6;
}

/* Post Tags */
.post-tags-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}
.tags-label {
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.post-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.post-tags li a {
    display: block;
    background-color: #333;
    color: #fff;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 14px;
    transition: background-color 0.2s ease;
}
.post-tags li a:hover {
    background-color: #555;
    opacity: 1;
}


/* ===================================================================
   5. 푸터 (Footer) - [수정] 가독성 및 반응형 레이아웃 개선
=================================================================== */

footer#colophon {
    text-align: center;
    padding: 30px 15px;
    margin-top: 60px;
}

footer#colophon .site-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width-header);
    margin: 0 auto;
    font-size: 13px;
    color: var(--color-text-muted);
}

.footer-copyright {
    text-align: left;
    line-height: 1.8;
}

.footer-copyright a {
    color: var(--color-text);
    text-decoration: underline !important;
}
.footer-copyright a:hover {
    text-decoration: none !important;
}

.footer-legal-links {
    text-align: right;
}
.footer-legal-links a {
    padding: 0 8px;
}
.footer-legal-links .sep {
    color: var(--color-border);
}


/* --- 모바일 반응형 푸터 스타일 --- */
@media (max-width: 768px) {
    footer#colophon .site-info {
        flex-direction: column;
        gap: 20px;
    }

    .footer-copyright,
    .footer-legal-links {
        text-align: center;
    }
}


/* ===================================================================
   6. 반응형 (Mobile Responsive)
=================================================================== */

@media (max-width: 768px) {
    main { 
        margin-top: 20px; 
    }
    header#main-header { 
        height: 60px; 
    }
    nav.menu { 
        display: none; 
    }
    .hamburger {
        display: block;
        margin-left: auto;
    }
    
    .header-inner {
        position: relative;
        justify-content: space-between;
        align-items: center;
    }
    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .logo img {
        transform: scale(0.8);
    }
    .hamburger {
        font-size: 32px;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .ip-callout {
        padding: 1.2rem;
    }

    .ip-callout ul {
        padding-left: 1.2rem;
    }

    /* 모바일에서만 썸네일 없는 텍스트 영역에 좌우 여백 추가 */
    .no-thumbnail-container {
        padding: 0 15px;
    }

    /* [FIX & REVISED] front-page.php 모바일 레이아웃 수정 */
    body.home .no1-area,
    body.home .no4-area,
    body.home .no5-7-area {
        grid-column: 1 / -1; /* 중앙 컬럼 제약에서 벗어나 전체 너비 차지 */
        padding: 0; /* 섹션 자체의 좌우 여백을 제거하여 썸네일이 꽉 차도록 함 */
        grid-template-columns: 1fr; /* 내부 아이템을 1열로 정렬 */
    }

    /* [신규] 모바일 front-page에서 썸네일을 제외한 콘텐츠에만 여백 추가 */
    body.home .post-content-wrapper {
        padding: 0 15px;
    }

    /* [NEW] 모바일에서 차트가 깨지지 않도록 가로/세로 비율을 지정합니다. */
    /* [FIX] 모바일에서 차트의 고정 높이를 지정하고 캔버스 스타일을 강제합니다. */
    .ip-chart-container {
        height: 300px; /* 모바일에서 차트 컨테이너의 고정 높이 */
        /* aspect-ratio 및 padding-bottom hack 관련 속성 제거 */
    }
    /* [NEW] 차트 캔버스가 부모 컨테이너를 완벽하게 채우도록 !important 사용 */
    .ip-chart-container canvas {
        position: absolute;
        top: 0; left: 0; width: 100% !important; height: 100% !important;
    }
}

/* ===================================================================
   7. 너비 확장 규칙 (Width Override Rules)
=================================================================== */
body.home,
body.front-page {
    --container-width-content: 900px;
}

/* ===================================================================
   8. 가독성 향상 및 신규 컴포넌트
=================================================================== */
.ip-section {
    margin-top: 4rem;
    margin-bottom: 4rem;
}
.ip-section.ip-section--even {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 1.5rem;
}
.ip-blockquote {
    position: relative;
    margin: 1.5em 0;
    padding: 1em 1em 1em 2em;
    border-left: 4px solid var(--color-border);
    background-color: #252525;
    border-radius: 4px;
    overflow: hidden;
}
.ip-blockquote::before {
    content: '“';
    position: absolute;
    top: 0.2em;
    left: 0.3em;
    font-size: 2em;
    color: var(--color-border);
    line-height: 1;
    opacity: 0.5;
}
.ip-blockquote p {
    position: relative;
    z-index: 2;
    margin: 0;
}

/* [통합 수정] ip-callout 컴포넌트 스타일 통일 */
.ip-callout {
    padding: 1.5rem;
    margin: 2rem 0;
    position: relative;
    border: 1px solid var(--color-border);
    border-left-width: 5px;
    border-radius: 4px;
}
.ip-callout ul {
    padding-left: 1.2rem;
    margin: 0;
}
.ip-callout__title + ul,
.ip-callout__title + p {
    margin-top: 0.5rem;
}
.ip-callout::before {
    position: absolute;
    left: 0.75rem;
    top: 1.6rem;
    font-size: 1.2rem;
    line-height: 1;
}

.ip-callout__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.ip-callout--note {
    border-left-color: #64B5F6;
}
.ip-callout--note::before {
    content: '';
}
.ip-callout--warning {
    border-left-color: #FFB74D;
}
.ip-callout--warning::before {
    content: '⚠️';
}
.ip-toc {
    background-color: #282828;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
}
.ip-toc h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
}
.ip-toc ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.ip-toc li {
    margin-bottom: 0.5rem;
}
.ip-toc .sub-menu, 
.ip-toc ul ul {
    list-style: none;
    padding-left: 1rem;
    margin-top: 0.75rem;
}
.ip-toc .sub-menu li, 
.ip-toc ul ul li {
    padding-left: 1.25rem;
    position: relative;
}
.ip-toc .sub-menu li::before, 
.ip-toc ul ul li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
}
.text-center {
    text-align: center;
}
.ip-thumbnail-full {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.ip-thumbnail-full img {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-width: 100%;
    height: auto;
}
.ip-button {
    display: inline-block;
    background-color: #26D0CE;
    color: #1e1e1e;
    font-weight: bold;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease; /* 배경색 전환 효과 추가 */
    font-size: 16px;
    text-decoration: none !important;
}
.ip-button:hover {
    background-color: var(--color-accent-dark); /* 마우스 오버 시 배경색 변경 */
}

.ip-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.ip-review-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    background-color: #252525;
    text-align: center;
}
.ip-review-card__stars {
    color: #ffc107;
    font-size: 1.25rem;
    margin: 0 auto 0.75rem auto;
}
.ip-review-card__user {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 1rem;
    width: 100%;
}
.ip-review-card__headline {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 1rem 0;
    width: 100%;
}
.ip-review-card__text {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
    text-align: left;
}

/* New styles for before/after review cards */
.ip-review-content {
    display: flex;
    flex-direction: column; /* Stack before/after vertically */
    gap: 1rem; /* Space between before and after */
    margin-top: 1rem;
}

.ip-review-before,
.ip-review-after {
    padding: 1rem;
    border-radius: 6px;
}

.ip-review-before {
    background-color: rgba(255, 99, 132, 0.1); /* Light red for 'before' */
    border: 1px solid rgba(255, 99, 132, 0.3);
}

.ip-review-after {
    background-color: rgba(38, 208, 206, 0.1); /* Light teal for 'after' */
    border: 1px solid rgba(38, 208, 206, 0.3);
}

.ip-review-before h5,
.ip-review-after h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.ip-review-before p,
.ip-review-after p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.ip-research-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
}

.ip-research-list li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.ip-research-list li:last-child {
    border-bottom: none;
}

.ip-research-list .research-content {
    flex-grow: 1;
    font-size: 16px;
    line-height: 1.7;
}

.ip-research-list .research-content small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9em;
    color: var(--color-text-muted);
}

/* 항목별 중간선이 있는 리스트 스타일 */
.list-with-lines {
    list-style: none;
    padding: 0;
}
.list-with-lines li {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.list-with-lines li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.ip-comparison-card {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 2rem;
    overflow: hidden;
}
    /* 2번 섹션 비교 카드의 블릿 여백 조정을 위한 규칙 */
.ip-comparison-card ul {
    padding-left: 10px;
    list-style-position: outside; /* 블릿이 여백 밖으로 나가도록 설정 */
}
.comparison-col {
    width: 50%;
    padding: 1.5rem 2rem;
}
.comparison-col h4 {
    margin-top: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.comparison-col--before {
    background-color: rgba(255, 99, 132, 0.1);
    border-right: 1px dashed var(--color-border);
}
.comparison-col--after {
    background-color: rgba(75, 192, 192, 0.1);
}
.ip-product-list {
    /* [개선] PC에서 2단 그리드로 변경하여 가독성 향상 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}
.ip-product-card {
    display: flex;
    /* [수정] 내부 콘텐츠가 세로로 쌓이도록 변경 */
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    background-color: #252525;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.ip-product-card:hover {
    background-color: #333;
}
.ip-product-thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* [수정] 카드 상단으로 이동하므로 flex-shrink 불필요 */
    flex-shrink: 1;
    border-radius: 8px;
    overflow: hidden;
}
.ip-product-thumbnail img {
    width: 100%;
    /* [수정] 호버 효과를 위해 기존 스타일 상속 */
    height: 100%;
    object-fit: cover;
}
.ip-product-card-content {
    width: 100%;
    flex-grow: 1;
}
.ip-product-mini-chart {
    display: none; /* [개선] 가독성이 낮은 미니 차트는 숨김 처리 */
}
.ip-product-mini-chart span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    color: var(--color-text);
}
.ip-chart-container {
    position: relative;
    width: 100%;
    margin: 40px auto;
}

@media (max-width: 768px) {
    .ip-comparison-card,
    /* [수정] 모바일에서는 항상 세로 정렬이므로 기존 스타일 유지 */
    .ip-product-card-old-mobile-style {
        flex-direction: column;
        align-items: flex-start;
    }
    .comparison-col,
    .ip-product-thumbnail {
        width: 100%;
    }
    .comparison-col--before {
        border-right: none;
        border-bottom: 1px dashed var(--color-border);
    }
    .ip-product-list {
        grid-template-columns: 1fr; /* 모바일에서는 1단으로 */
    }
}

/* ===================================================================
   10. [개선] 제품 카드 가독성 향상 스타일
=================================================================== */
.ip-product-highlights {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    width: 100%;
}
.highlight-review,
.highlight-stats {
    flex: 1;
}
.highlight-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}
.highlight-review p {
    margin: 0;
    font-style: italic;
    font-size: 16px;
}
.highlight-stats ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
}
.highlight-stats li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.stars {
    color: #ffc107;
}

@media (max-width: 500px) {
    .ip-product-highlights { flex-direction: column; }
    .ip-research-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

@media (max-width: 400px) { /* 매우 작은 모바일 화면을 위한 폰트 크기 조정 */
    .no-thumbnail-link {
        font-size: 16px; /* 폰트 크기를 줄여 가독성 및 레이아웃 유지 */
    }
}

/* ===================================================================
   11. [개선] 제품 카드 미니 차트 가독성 개선 (수평 막대 그래프)
=================================================================== */
.ip-product-key-stats {
    margin-top: 1.5rem;
    width: 100%;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.key-stats-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.key-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.key-stats-list li {
    display: grid;
    grid-template-columns: 60px 1fr 30px; /* 라벨, 바, 값 */
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.stat-bar-wrapper {
    background-color: #3a3a3a;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
.stat-bar {
    height: 100%;
    background-color: #26D0CE; /* 테마 포인트 색상 */
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

/* ===================================================================
   9. 섹션 4 시인성 개선 추가 스타일
=================================================================== */

/* --- 제품 카드 개선: 핵심 효능 태그 --- */
.product-key-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px; /* 제품 설명과의 간격 */
    margin-bottom: 20px; /* 인용문과의 간격 */
}

.benefit-tag {
    background-color: #333; /* 기존 태그와 유사한 스타일 */
    color: #26D0CE; /* 테마의 포인트 색상으로 강조 */
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: bold;
}

/* --- 제품 카드 개선: 인용문(후기) 스타일 --- */
.ip-blockquote--review {
    padding: 1em 1.5em; /* 좌우 여백 확보 */
    border-left-color: var(--color-accent); /* 테마 포인트 색상으로 강조 */
    background-color: #2c2c2c; /* 배경색을 살짝 다르게 하여 구분. --color-bg-alt 등 변수 사용 가능 */
    overflow: visible; /* 기본값으로 되돌려 내부 요소가 잘 보이도록 함 */
}

/* .ip-blockquote--review 내부의 p 태그에만 적용 */
.ip-blockquote--review p {
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0; /* 단락 아래 여백 추가 */
    font-style: italic; /* 인용 느낌을 주는 이탤릭체 */
    color: var(--color-text-muted);
}

/* .ip-blockquote--review 사용 시, 기본 .ip-blockquote의 ::before 가상 요소는 그대로 상속됩니다. */

.ip-blockquote--review .blockquote-user {
    display: block;
    text-align: right; /* 작성자 정보 오른쪽 정렬 */
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: var(--color-text);
}

/* --- 제품 카드 개선: 이미지 호버 효과 --- */
.ip-product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out; /* 부드러운 전환 효과 */
}

/* 제품 카드 전체에 마우스를 올렸을 때 이미지 확대 */
.ip-product-card:hover .ip-product-thumbnail img {
    transform: scale(1.05);
}

/* ===================================================================
   12. [신규] 타임라인 컴포넌트 (Timeline Component)
=================================================================== */
.ip-timeline {
    position: relative;
    margin: 3rem 0;
    padding-left: 40px; /* 마커와 컨텐츠 사이의 공간 */
    border-left: 2px solid var(--color-border); /* 이 자체가 타임라인의 세로선이 됨 */
}

.timeline-item {
    position: relative;
    margin-bottom: 2.5rem; /* 아이템 간 간격 */
}

/* 마지막 아이템의 아래쪽 마진 제거 */
.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    /* * left 계산: 
     * -40px (부모의 padding-left 만큼 왼쪽으로 이동)
     * -1px (부모의 border-left-width의 절반 만큼 추가로 이동)
     * -9px (마커 너비의 절반만큼 왼쪽으로 이동하여 중앙 정렬)
     * = -50px
     */
    left: -50px;
    top: 5px; /* 제목 높이에 맞춰 시각적으로 조정 */
    width: 18px;
    height: 18px;
    background-color: #26D0CE; /* 테마 포인트 색상 */
    border-radius: 50%;
    z-index: 1;
}

.timeline-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--color-text);
}

.timeline-description {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* ===================================================================
   13. [신규] 그리드 카드 컴포넌트 (Grid Card Component)
=================================================================== */
.ip-grid-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.ip-grid-card {
    background-color: #252525;
    border: 1px solid var(--color-border);
    border-left: 4px solid #26D0CE; /* Emphasized left border */
    border-radius: 8px;
    padding: 1.5rem 1rem; /* 상하 여백은 1.5rem 유지, 좌우 여백만 1rem으로 줄임 */
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ip-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.ip-grid-card h4 {
    margin-top: 0;
    color: var(--color-text);
    font-size: 1.1rem;
}

.ip-grid-card p {
    margin-bottom: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
    flex-grow: 1;
}

/* ===================================================================
   14. [신규] 그리드 카드 썸네일 스타일
=================================================================== */
.ip-grid-card__thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    aspect-ratio: 3 / 4; /* [수정] 세로로 긴 이미지 비율 지정 */
}

.ip-grid-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ip-grid-card:hover .ip-grid-card__thumbnail img {
    transform: scale(1.05);
}

/* ===================================================================
   15. [신규] 프로필 카드 스타일 (전문가 소개용)
=================================================================== */
.ip-grid-card--profile {
    text-align: center;
    border-left-width: 1px;
    border-left-color: var(--color-border);
}

.ip-grid-card--profile .ip-grid-card__thumbnail {
    max-width: 120px;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
}

.ip-grid-card--profile h4 {
    margin-top: 1rem;
}

.ip-grid-card--profile ul {
    list-style: none;
    padding-left: 0;
    text-align: left;
    margin-top: 1rem;
    color: var(--color-text-muted);
}

.ip-grid-card--profile ul li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5em;
}

.ip-grid-card--profile ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #26D0CE;
}

/* Adjust blockquote styling within grid cards for better fit */
#section-3 .ip-grid-card .ip-blockquote {
    margin: 0.5em 0; /* Reduce vertical margin for blockquotes inside cards */
    padding: 0.8em 1em 0.8em 1.5em; /* Slightly reduce padding */
}
#section-3 .ip-grid-card .ip-blockquote::before {
    font-size: 1.5em; /* Make quote mark slightly smaller */
    top: 0.1em;
    left: 0.2em;
}

/* [NEW] Global style for single column grid containers */
.ip-grid-card-container--single-column {
    grid-template-columns: 1fr; /* Force single column layout for any container with this class */
}

/* Section 3의 썸네일 크기 조정 (가로로 더 넓게) */
#section-3 .ip-grid-card__thumbnail {
    aspect-ratio: 4 / 3; /* 썸네일을 가로로 더 넓고 세로로 짧게 조정 */
}

/* Section 3: 남성/여성 효능을 한 줄에 표현하기 위한 스타일 */
#section-3 .ip-review-content {
    flex-direction: row; /* 가로로 배치 */
    margin-top: 1.5rem;
}

#section-3 .ip-review-before,
#section-3 .ip-review-after {
    flex: 1; /* 동일한 너비 차지 */
    text-align: center; /* 내부 텍스트 중앙 정렬 */
}

/* [NEW] Section 1 (test3.html) 썸네일 크기 조정 */
#section-1 .ip-grid-card__thumbnail {
    width: 50%; /* 카드 너비의 절반으로 축소 */
    align-self: center; /* 카드 중앙에 정렬 */
    margin-bottom: 1rem; /* 제목과의 간격 조정 (기존 1.5rem에서 줄임) */
}
/* ===================================================================
   17. Fixed Bottom Bar
=================================================================== */
.fixed-bottom-bar {
    position: sticky; /* [수정] fixed에서 sticky로 변경 */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-top: 1px solid var(--color-border);
    z-index: 1000;
    padding: 0;
    color: #fff;
}

.fixed-bottom-bar-inner {
    max-width: 900px; /* [수정] 요청대로 최대 너비 900px로 변경 */
    margin: 0 auto;
    padding: 0; /* 내부 패딩 제거 */
    display: flex; /* [수정] flex를 이용한 균등 분할 레이아웃 적용 */
    justify-content: center;
    align-items: stretch; /* [추가] 버튼들이 동일한 높이를 갖도록 설정 */
    gap: 0; /* [수정] 버튼 간격 제거 */
}

.bar-label {
    display: none; /* [수정] 라벨 항상 숨김 */
}

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5px; /* [수정] 버튼 내부 패딩 조정 */
    border: none; /* [수정] 기본 테두리 제거 */
    border-right: 1px solid var(--color-border); /* [추가] 오른쪽 경계선 추가 */
    border-radius: 0; /* [수정] 버튼 모서리 둥글림 제거 */
    background-color: transparent; /* [수정] 배경색 투명하게 변경 */
    color: var(--color-text);
    font-size: 14px; /* [수정] 폰트 크기 통일 */
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex: 1; /* [수정] 모든 버튼이 동일한 너비를 차지하도록 설정 */
    gap: 6px; /* [추가] 카톡 버튼의 아이콘과 텍스트 사이 간격 */
}
.fixed-bottom-bar-inner a:last-child {
    border-right: none; /* [추가] 마지막 버튼의 오른쪽 경계선 제거 */
}

.contact-button:hover {
    background-color: #333; /* [수정] 호버 시 배경색 변경 */
    color: #fff;
    opacity: 1;
}

.kakao-button img {
    height: 20px;
    width: auto;
}

.mall-button {

}

.mall-button:hover {
 
}

/* --- [삭제] PC/Mobile Text Visibility Control --- */
/* .contact-button .text-mobile, .contact-button .text-pc 관련 규칙 모두 삭제 */


/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
    /* [정리] fixed-bottom-bar 관련 스타일은 전역으로 이동했으므로 여기서는 모두 삭제합니다. */
    /* 기존 .fixed-bottom-bar-inner, .bar-label, .contact-button 등의 규칙을 제거 */

    .contact-button {
        font-size: 13px; /* [유지] 모바일에서만 폰트 크기 살짝 작게 조정 */
    }
}
/* ===================================================================
   18. 아카이브 페이지 레이아웃 (archive.php) - [수정됨]
=================================================================== */
.archive-container {
    padding-top: 20px; /* [추가] 상단 여백 (메뉴와 구분선 사이) */
    margin-top: 20px;
    border-top: 1px solid var(--color-border); /* [추가] 페이지 상단 구분선 */
}

.archive-header {
    margin-bottom: 30px;
    padding: 25px; /* [추가] 내부 여백 */
    border-radius: 8px; /* [추가] 모서리 둥글림 */
    background-color: #252525; /* [추가] 배경색으로 영역 구분 */
}

.archive-title {
    font-size: 28px;
    margin: 0;
    padding: 0;
}

.archive-post-list {
    display: flex;
    flex-direction: column;
}

.archive-post-item {
    border-bottom: 1px solid var(--color-border);
}
.archive-post-item:last-child {
    border-bottom: none;
}

.archive-post-item .post-link-wrapper {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 25px 15px;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
}

.archive-post-item:hover .post-link-wrapper {
    background-color: #252525;
}

.archive-post-thumbnail {
    flex: 0 0 160px;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #2a2a2a;
}
.archive-post-thumbnail .no-thumbnail-container,
.archive-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive-post-content .post-title {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--color-text);
}

.archive-post-content p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.7;
    /* [추가] 3줄 이상일 때 말줄임 처리 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* --- 아카이브 페이지 반응형 --- */
@media (max-width: 768px) {
    .archive-post-item .post-link-wrapper {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0;
    }
    
    .archive-post-item:hover .post-link-wrapper {
        background-color: transparent;
    }

    .archive-post-thumbnail {
        flex-basis: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}
/* ===================================================================
   19. [신규] 콘텐츠 내 리스트 가독성 개선
=================================================================== */
.entry-content ul,
.entry-content ol {
    padding-left: 10px; /* 브라우저 기본 여백(40px)을 20px로 재설정 */
}