/*
Theme Name: HealthFlow
Theme URI: https://healkang111.mycafe24.com
Author: HealthFlow Team
Author URI: https://healkang111.mycafe24.com
Description: 건강 정보 포털 사이트를 위한 커스텀 워드프레스 테마
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healthflow
Tags: news, health, korean, responsive, custom-logo, custom-menu, featured-images
*/

/* ===== RESET & BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; background: #f5f5f5; color: #333; line-height: 1.6; }
a { text-decoration: none; color: inherit; cursor: pointer; }
a:hover { color: #e74c3c; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ===== HEADER ===== */
.header-wrap { background: #fff; border-bottom: 1px solid #e0e0e0; }
.header-top { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #27ae60, #2ecc71); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 800; }
.logo h1 { font-size: 24px; font-weight: 800; color: #222; letter-spacing: -0.5px; }
.logo h1 span { color: #27ae60; }
.header-utils { display: flex; align-items: center; gap: 16px; }
.search-box { display: flex; align-items: center; border: 2px solid #e0e0e0; border-radius: 24px; padding: 6px 16px; background: #fafafa; }
.search-box input { border: none; outline: none; background: transparent; font-size: 13px; width: 180px; font-family: inherit; }
.search-box button { border: none; background: none; cursor: pointer; font-size: 16px; color: #999; }
.auth-links a { font-size: 12px; color: #888; padding: 0 8px; border-right: 1px solid #ddd; }
.auth-links a:last-child { border-right: none; }

/* ===== NAV ===== */
.nav-wrap { background: #27ae60; position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; }
.nav-list { display: flex; flex: 1; }
.nav-list li a { display: block; padding: 14px 28px; color: #fff; font-size: 15px; font-weight: 600; transition: background .2s; letter-spacing: -0.3px; }
.nav-list li a:hover, .nav-list li.current-cat a, .nav-list li.current-menu-item a { background: #219a52; color: #fff; }
.mobile-menu-btn { display: none; background: none; border: none; font-size: 26px; color: #fff; cursor: pointer; padding: 8px; line-height: 1; }

/* ===== CONTAINER ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

/* ===== MAIN SLIDER ===== */
.main-top { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 24px; border-radius: 8px; overflow: hidden; }
.main-featured { position: relative; overflow: hidden; cursor: pointer; }
.main-featured .overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 24px 20px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.main-featured .overlay h2 { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.5px; }
.main-featured.big { grid-row: 1 / 3; }
.main-featured.big .overlay h2 { font-size: 24px; }
.main-side-list { display: flex; flex-direction: column; gap: 4px; }
.main-featured .thumb-img { width: 100%; height: 100%; object-fit: cover; }

/* ===== HEADLINE LIST ===== */
.headline-strip { background: #fff; border-radius: 8px; padding: 16px 20px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; border: 1px solid #eee; }
.headline-strip a { font-size: 15px; font-weight: 500; color: #333; padding: 4px 0; border-bottom: 1px solid #f0f0f0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.headline-strip a:last-child { border-bottom: none; }

/* ===== SECTION ===== */
.section { margin-bottom: 32px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 3px solid #27ae60; }
.section-header h3 { font-size: 20px; font-weight: 800; color: #222; letter-spacing: -0.5px; }
.section-header a { font-size: 12px; color: #999; }

/* ===== NEWS LIST ===== */
.news-list-vertical { display: flex; flex-direction: column; gap: 16px; }
.news-card-h { display: flex; gap: 16px; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #eee; transition: box-shadow .2s; cursor: pointer; }
.news-card-h:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.news-card-h .thumb { width: 200px; min-height: 140px; flex-shrink: 0; overflow: hidden; }
.news-card-h .thumb .ph { width: 100%; height: 100%; }
.news-card-h .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-card-h:hover .thumb .ph { transform: scale(1.05); }
.news-card-h:hover .thumb img { transform: scale(1.05); transition: transform .3s; }
.news-card-h .info { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; }
.news-card-h .info h4 { font-size: 17px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-h .info p { font-size: 13px; color: #888; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== TWO COLUMN ===== */
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.sidebar { display: flex; flex-direction: column; gap: 24px; }

/* ===== NEWS GRID ===== */
.news-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.news-card-v { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #eee; transition: box-shadow .2s; cursor: pointer; }
.news-card-v:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.news-card-v .thumb { height: 160px; overflow: hidden; }
.news-card-v .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card-v:hover .thumb img { transform: scale(1.05); }
.news-card-v .info { padding: 14px; }
.news-card-v .info h4 { font-size: 14px; font-weight: 600; line-height: 1.5; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-v .info .cat { font-size: 11px; color: #27ae60; font-weight: 600; margin-bottom: 4px; }

/* ===== INFO SECTION ===== */
.info-section { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-main { position: relative; border-radius: 8px; overflow: hidden; height: 300px; cursor: pointer; }
.info-main img { width: 100%; height: 100%; object-fit: cover; }
.info-main .overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.info-main .overlay h4 { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.4; }
.info-main .overlay p { color: rgba(255,255,255,.7); font-size: 13px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.info-side-list { display: flex; flex-direction: column; gap: 12px; }
.info-side-item { display: flex; gap: 14px; background: #fff; border-radius: 8px; padding: 12px; border: 1px solid #eee; cursor: pointer; transition: box-shadow .2s; }
.info-side-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.info-side-item .thumb { width: 100px; height: 72px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.info-side-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.info-side-item h5 { font-size: 14px; font-weight: 600; line-height: 1.5; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== TIMELINE ===== */
.timeline-box { background: #fff; border-radius: 8px; padding: 20px; border: 1px solid #eee; }
.timeline-box .section-header { border-bottom: 3px solid #e74c3c; }
.timeline-box .section-header h3 { color: #e74c3c; }
.timeline-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; align-items: flex-start; cursor: pointer; }
.timeline-item:last-child { border-bottom: none; }
.timeline-time { font-size: 12px; color: #e74c3c; font-weight: 700; white-space: nowrap; min-width: 48px; padding-top: 2px; }
.timeline-item h5 { font-size: 14px; font-weight: 500; color: #333; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== RANKING ===== */
.ranking-box { background: #fff; border-radius: 8px; padding: 20px; border: 1px solid #eee; }
.ranking-box .section-header { border-bottom: 3px solid #f39c12; }
.ranking-box .section-header h3 { color: #f39c12; }
.ranking-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f0f0f0; align-items: center; cursor: pointer; }
.ranking-item:last-child { border-bottom: none; }
.rank-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.rank-num.top { background: #e74c3c; color: #fff; }
.rank-num.mid { background: #f39c12; color: #fff; }
.rank-num.low { background: #ddd; color: #666; }
.ranking-item h5 { font-size: 13px; font-weight: 500; color: #333; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }

/* ===== PHOTO NEWS ===== */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.photo-card { position: relative; border-radius: 8px; overflow: hidden; height: 240px; cursor: pointer; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.photo-card .overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.photo-card .overlay h4 { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; }

/* ===== EXERCISE & DIET ===== */
.exercise-diet { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ed-block .featured { position: relative; border-radius: 8px; overflow: hidden; height: 220px; margin-bottom: 12px; cursor: pointer; }
.ed-block .featured img { width: 100%; height: 100%; object-fit: cover; }
.ed-block .featured .overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.ed-block .featured .overlay h4 { color: #fff; font-size: 16px; font-weight: 700; }
.ed-list a { display: block; font-size: 14px; color: #444; padding: 8px 0; border-bottom: 1px solid #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== DISEASE ===== */
.disease-list { display: flex; flex-direction: column; gap: 10px; }
.disease-item { display: flex; gap: 14px; background: #fff; border-radius: 8px; padding: 14px; border: 1px solid #eee; align-items: center; cursor: pointer; transition: box-shadow .2s; }
.disease-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.disease-item .thumb { width: 80px; height: 60px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.disease-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.disease-item h5 { font-size: 14px; font-weight: 600; color: #222; line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== CELEB ===== */
.celeb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.celeb-card { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #eee; cursor: pointer; transition: box-shadow .2s; }
.celeb-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.celeb-card .thumb { height: 180px; overflow: hidden; }
.celeb-card .info { padding: 14px; }
.celeb-card .info h4 { font-size: 14px; font-weight: 600; line-height: 1.5; }

/* ===== PLACEHOLDER IMAGES ===== */
.ph { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; text-align: center; padding: 10px; transition: transform .3s; }
.ph-1 { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.ph-2 { background: linear-gradient(135deg, #27ae60, #219a52); }
.ph-3 { background: linear-gradient(135deg, #2980b9, #3498db); }
.ph-4 { background: linear-gradient(135deg, #8e44ad, #9b59b6); }
.ph-5 { background: linear-gradient(135deg, #f39c12, #e67e22); }
.ph-6 { background: linear-gradient(135deg, #1abc9c, #16a085); }
.ph-7 { background: linear-gradient(135deg, #e74c3c, #e67e22); }
.ph-8 { background: linear-gradient(135deg, #2c3e50, #34495e); }
.ph-9 { background: linear-gradient(135deg, #d35400, #e74c3c); }
.ph-10 { background: linear-gradient(135deg, #27ae60, #1abc9c); }

/* ===== FOOTER ===== */
.footer { background: #2c3e50; color: #ccc; margin-top: 40px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 30px 20px; }
.footer-nav { display: flex; gap: 20px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #3d4f5f; flex-wrap: wrap; }
.footer-nav a { font-size: 13px; color: #aaa; transition: color .2s; }
.footer-nav a:hover { color: #fff; }
.footer-info { display: flex; gap: 40px; align-items: flex-start; }
.footer-logo { width: 120px; flex-shrink: 0; }
.footer-logo .logo-icon-f { width: 48px; height: 48px; background: linear-gradient(135deg, #27ae60, #2ecc71); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.footer-logo p { font-size: 12px; color: #888; }
.footer-details { font-size: 12px; color: #888; line-height: 2; }
.footer-details span { margin-right: 16px; }
.footer-copy { text-align: center; padding: 16px; font-size: 11px; color: #666; background: #243240; }

/* ===== DATE BAR ===== */
.date-bar { max-width: 1200px; margin: 0 auto; padding: 8px 20px; font-size: 12px; color: #999; }

/* ========================================================================
   CATEGORY LIST PAGE
   ======================================================================== */
.cat-banner { padding: 36px 20px 32px; text-align: center; position: relative; overflow: hidden; }
.cat-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #1a3a2a, #27ae60 60%, #2ecc71); z-index: 0; }
.cat-banner::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); z-index: 0; }
.cat-banner * { position: relative; z-index: 1; }
.cat-banner h2 { color: #fff; font-size: 30px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 4px; }
.cat-banner p { color: rgba(255,255,255,.6); font-size: 14px; }
.cat-banner .cat-tabs { display: flex; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.cat-tabs a { padding: 8px 20px; border-radius: 24px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2); transition: all .2s; }
.cat-tabs a:hover { background: rgba(255,255,255,.15); color: #fff; }
.cat-tabs a.active { background: #fff; color: #27ae60; border-color: #fff; }

.cat-container { max-width: 1200px; margin: 0 auto; padding: 24px 20px; display: grid; grid-template-columns: 1fr 340px; gap: 28px; }

/* Sort bar */
.cat-sort-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cat-total { font-size: 14px; color: #888; }
.cat-total strong { color: #27ae60; font-weight: 800; }
.cat-sort { display: flex; gap: 4px; }
.cat-sort a { font-size: 13px; color: #999; padding: 6px 12px; border-radius: 6px; transition: all .15s; }
.cat-sort a:hover { background: #f0f0f0; color: #555; }
.cat-sort a.active { background: #27ae60; color: #fff; }

/* Article list items */
.cat-article-list { display: flex; flex-direction: column; gap: 0; }
.cat-article-item { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid #eee; cursor: pointer; transition: background .15s; }
.cat-article-item:first-child { padding-top: 0; }
.cat-article-item:hover { background: #fafffe; }
.cat-article-item .cat-thumb { width: 180px; height: 125px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.cat-article-item .cat-thumb .ph { width: 100%; height: 100%; transition: transform .3s; }
.cat-article-item .cat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cat-article-item:hover .cat-thumb .ph { transform: scale(1.05); }
.cat-article-item:hover .cat-thumb img { transform: scale(1.05); }
.cat-article-item .cat-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cat-article-item .cat-info h4 { font-size: 17px; font-weight: 700; color: #222; line-height: 1.5; margin-bottom: 8px; letter-spacing: -0.3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-article-item .cat-info p { font-size: 13.5px; color: #888; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; }
.cat-article-item .cat-info .meta { font-size: 12px; color: #bbb; display: flex; gap: 12px; }
.cat-article-item .cat-info .meta span { display: flex; align-items: center; gap: 3px; }

/* Featured top article in category */
.cat-featured { position: relative; border-radius: 12px; overflow: hidden; height: 340px; margin-bottom: 24px; cursor: pointer; }
.cat-featured .ph { width: 100%; height: 100%; transition: transform .4s; }
.cat-featured img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cat-featured:hover .ph { transform: scale(1.03); }
.cat-featured:hover img { transform: scale(1.03); }
.cat-featured .cat-feat-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 28px 24px; background: linear-gradient(transparent, rgba(0,0,0,.88)); }
.cat-feat-overlay .cat-badge { display: inline-block; background: #27ae60; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; }
.cat-feat-overlay h3 { color: #fff; font-size: 22px; font-weight: 800; line-height: 1.4; margin-bottom: 8px; }
.cat-feat-overlay p { color: rgba(255,255,255,.65); font-size: 13px; }

/* Pagination */
.cat-pagination { display: flex; justify-content: center; gap: 4px; margin-top: 28px; padding-top: 20px; }
.cat-pagination a, .cat-pagination span { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 600; color: #888; border: 1px solid #e0e0e0; background: #fff; transition: all .15s; }
.cat-pagination a:hover { border-color: #27ae60; color: #27ae60; }
.cat-pagination a.active, .cat-pagination span.current { background: #27ae60; color: #fff; border-color: #27ae60; }
.cat-pagination a.arrow { font-size: 16px; color: #aaa; }
/* WordPress pagination compatibility */
.nav-links { display: flex; justify-content: center; gap: 4px; margin-top: 28px; padding-top: 20px; }
.nav-links a, .nav-links span { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 600; color: #888; border: 1px solid #e0e0e0; background: #fff; transition: all .15s; }
.nav-links a:hover { border-color: #27ae60; color: #27ae60; }
.nav-links .current { background: #27ae60; color: #fff; border-color: #27ae60; }
.nav-links .prev, .nav-links .next { font-size: 16px; color: #aaa; }

/* ========================================================================
   ARTICLE VIEW PAGE
   ======================================================================== */
.article-container { max-width: 1200px; margin: 0 auto; padding: 20px; display: grid; grid-template-columns: 1fr 340px; gap: 32px; }

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: #999; margin-bottom: 20px; }
.breadcrumb a { color: #27ae60; font-weight: 600; }
.breadcrumb span { margin: 0 6px; color: #ccc; }

/* Article header */
.article-header { margin-bottom: 28px; }
.article-cat { display: inline-block; background: #27ae60; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 4px; margin-bottom: 14px; }
.article-title { font-size: 28px; font-weight: 800; color: #111; line-height: 1.45; letter-spacing: -0.8px; margin-bottom: 18px; }
.article-meta { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #eee; }
.article-meta .author { font-size: 14px; color: #555; font-weight: 600; }
.article-meta .date { font-size: 13px; color: #999; }
.article-meta .comments { font-size: 13px; color: #999; margin-left: auto; }

/* Share bar */
.share-bar { display: flex; gap: 8px; margin: 18px 0 28px; }
.share-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e0e0e0; background: #fff; font-size: 16px; cursor: pointer; transition: all .2s; }
.share-btn:hover { background: #27ae60; color: #fff; border-color: #27ae60; }
.font-size-ctrl { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.font-size-ctrl button { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #ddd; background: #fff; font-size: 14px; cursor: pointer; font-weight: 700; color: #555; }
.font-size-ctrl button:hover { background: #f5f5f5; }
.font-size-ctrl span { font-size: 12px; color: #999; }

/* Article body */
.article-body { line-height: 1.9; color: #333; }
.article-body h2 { font-size: 22px; font-weight: 800; color: #111; margin: 36px 0 16px; padding-left: 14px; border-left: 4px solid #27ae60; }
.article-body h3 { font-size: 19px; font-weight: 700; color: #222; margin: 28px 0 12px; }
.article-body p { font-size: 16.5px; margin-bottom: 18px; color: #444; word-break: keep-all; }
.article-body .lead { font-size: 18px; font-weight: 500; color: #222; margin-bottom: 24px; padding: 20px 24px; background: #f8fdf9; border-radius: 8px; border-left: 4px solid #27ae60; }
.article-body img { margin: 28px 0; border-radius: 10px; overflow: hidden; }
.article-img { margin: 28px 0; border-radius: 10px; overflow: hidden; }
.article-img .ph { min-height: 360px; border-radius: 10px; font-size: 16px; }
.article-img-caption { text-align: center; font-size: 12px; color: #aaa; margin-top: 8px; padding: 0 20px; }
.article-body .highlight-box { background: #fffbf0; border: 1px solid #f5e6c8; border-radius: 10px; padding: 22px 24px; margin: 24px 0; }
.article-body .highlight-box h4 { font-size: 15px; font-weight: 700; color: #e67e22; margin-bottom: 10px; }
.article-body .highlight-box p { font-size: 14.5px; color: #666; margin-bottom: 8px; }
.article-body .highlight-box p:last-child { margin-bottom: 0; }
.article-body .point-text { color: #e74c3c; font-weight: 600; }
.article-body .green-text { color: #27ae60; font-weight: 600; }

/* WordPress content styles */
.article-body .wp-block-image { margin: 28px 0; }
.article-body .wp-block-image img { border-radius: 10px; }
.article-body .wp-block-image figcaption { text-align: center; font-size: 12px; color: #aaa; margin-top: 8px; }
.article-body .alignwide { margin-left: -40px; margin-right: -40px; }
.article-body .alignfull { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 48px; left: 0; height: 3px; background: #27ae60; z-index: 101; transition: width .1s; width: 0; }

/* Related articles */
.related-articles { margin-top: 40px; padding-top: 28px; border-top: 2px solid #eee; }
.related-articles h3 { font-size: 18px; font-weight: 800; margin-bottom: 16px; color: #222; }
.related-list { display: flex; flex-direction: column; gap: 10px; }
.related-list a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fafafa; border-radius: 8px; font-size: 14px; font-weight: 500; color: #333; transition: background .2s; }
.related-list a:hover { background: #eef8f0; color: #27ae60; }
.related-list a::before { content: '\25B8'; color: #27ae60; font-weight: 700; flex-shrink: 0; }

/* Article nav (prev/next) */
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.article-nav a { display: block; padding: 16px 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; transition: all .2s; }
.article-nav a:hover { border-color: #27ae60; background: #f8fdf9; }
.article-nav a .label { font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
.article-nav a .nav-title { font-size: 14px; font-weight: 600; color: #333; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* Comments */
.comments-section { margin-top: 32px; padding-top: 24px; border-top: 2px solid #eee; }
.comments-section h3 { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.comment-form { display: flex; gap: 10px; margin-bottom: 20px; }
.comment-form textarea { flex: 1; border: 2px solid #e0e0e0; border-radius: 10px; padding: 14px 16px; font-family: inherit; font-size: 14px; resize: none; height: 80px; outline: none; transition: border-color .2s; }
.comment-form textarea:focus { border-color: #27ae60; }
.comment-form button { width: 80px; background: #27ae60; color: #fff; border: none; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s; }
.comment-form button:hover { background: #219a52; }
.no-comments { text-align: center; padding: 30px; color: #bbb; font-size: 14px; }
/* WordPress comment form styles */
.comment-respond { margin-top: 20px; }
.comment-respond .comment-reply-title { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.comment-respond textarea { width: 100%; border: 2px solid #e0e0e0; border-radius: 10px; padding: 14px 16px; font-family: inherit; font-size: 14px; resize: vertical; min-height: 80px; outline: none; }
.comment-respond textarea:focus { border-color: #27ae60; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"] { width: 100%; border: 2px solid #e0e0e0; border-radius: 10px; padding: 10px 14px; font-family: inherit; font-size: 14px; outline: none; margin-bottom: 10px; }
.comment-respond input:focus { border-color: #27ae60; }
.comment-respond .form-submit input[type="submit"] { background: #27ae60; color: #fff; border: none; border-radius: 10px; padding: 12px 32px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.comment-respond .form-submit input[type="submit"]:hover { background: #219a52; }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
.comment-list .comment-author { font-weight: 700; font-size: 14px; color: #333; }
.comment-list .comment-meta { font-size: 12px; color: #999; margin-bottom: 8px; }
.comment-list .comment-content p { font-size: 14px; color: #555; line-height: 1.7; }

/* Article sidebar */
.article-sidebar { position: sticky; top: 68px; align-self: start; }
.sidebar-ad { background: linear-gradient(135deg, #ecf0f1, #dfe6e9); border-radius: 10px; height: 280px; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 14px; margin-bottom: 20px; border: 1px dashed #ccc; }

/* ========================================================================
   INFO DESK PAGES
   ======================================================================== */
.info-desk-banner { background: linear-gradient(135deg, #1a3a2a 0%, #27ae60 100%); padding: 48px 20px 44px; text-align: center; }
.info-desk-banner h2 { color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px; }
.info-desk-banner p { color: rgba(255,255,255,.65); font-size: 14px; }

.info-desk-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 240px 1fr; gap: 32px; transform: translateY(-20px); }

.desk-sidebar { background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,.06); padding: 8px 0; align-self: start; position: sticky; top: 68px; overflow: hidden; }
.desk-nav-group { border-bottom: 1px solid #f0f0f0; }
.desk-nav-group:last-child { border-bottom: none; }
.desk-nav-title { padding: 14px 22px 8px; font-size: 12px; font-weight: 800; color: #999; letter-spacing: 1px; }
.desk-nav-group a { display: block; padding: 10px 22px 10px 32px; font-size: 14px; color: #555; transition: all .15s; border-left: 3px solid transparent; }
.desk-nav-group a:hover { background: #f8fdf9; color: #27ae60; }
.desk-nav-group a.active { background: #eef8f0; color: #27ae60; font-weight: 700; border-left-color: #27ae60; }

.desk-content { background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,.06); padding: 40px 44px; min-height: 500px; margin-bottom: 40px; }
.desk-breadcrumb { font-size: 13px; color: #999; margin-bottom: 24px; }
.desk-breadcrumb a { color: #27ae60; font-weight: 600; }
.desk-breadcrumb span { margin: 0 6px; color: #ccc; }
.desk-content h3.desk-title { font-size: 24px; font-weight: 800; color: #111; margin-bottom: 8px; letter-spacing: -0.5px; }
.desk-content .desk-subtitle { font-size: 15px; color: #888; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid #27ae60; }

.greeting-text { line-height: 2; color: #444; font-size: 15.5px; }
.greeting-text p { margin-bottom: 16px; }
.greeting-highlight { background: #f8fdf9; border-left: 4px solid #27ae60; padding: 20px 24px; border-radius: 0 10px 10px 0; margin: 24px 0; }
.greeting-highlight p { font-size: 16px; font-weight: 600; color: #222; margin-bottom: 0; }
.company-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.company-info-card { background: #fafafa; border-radius: 10px; padding: 20px; border: 1px solid #eee; }
.company-info-card .label { font-size: 12px; color: #999; font-weight: 700; margin-bottom: 6px; }
.company-info-card .value { font-size: 15px; color: #222; font-weight: 600; }

.desk-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 14px; font-weight: 700; color: #333; }
.form-group label .required { color: #e74c3c; margin-left: 2px; }
.form-group input, .form-group select, .form-group textarea {
  border: 2px solid #e0e0e0; border-radius: 10px; padding: 12px 16px;
  font-family: inherit; font-size: 14px; outline: none; transition: border-color .2s; background: #fafafa;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #27ae60; background: #fff; }
.form-group textarea { resize: vertical; min-height: 160px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-hint { font-size: 12px; color: #aaa; margin-top: 2px; }
.form-submit { display: flex; gap: 10px; margin-top: 8px; }
.btn-primary { padding: 14px 40px; background: #27ae60; color: #fff; border: none; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s; }
.btn-primary:hover { background: #219a52; }
.btn-secondary { padding: 14px 40px; background: #fff; color: #555; border: 2px solid #ddd; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.form-notice { background: #f8f9fa; border-radius: 10px; padding: 18px 22px; border: 1px solid #e9ecef; margin-bottom: 8px; }
.form-notice p { font-size: 13px; color: #666; line-height: 1.7; margin: 0; }
.form-notice strong { color: #333; }

.terms-toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 28px; padding: 20px; background: #f8f9fa; border-radius: 10px; }
.terms-toc a { font-size: 13px; color: #555; padding: 6px 10px; border-radius: 6px; transition: all .15s; }
.terms-toc a:hover { background: #eef8f0; color: #27ae60; }
.terms-section { margin-bottom: 28px; }
.terms-section h4 { font-size: 16px; font-weight: 700; color: #222; margin-bottom: 10px; padding-left: 12px; border-left: 3px solid #27ae60; }
.terms-section p, .terms-section li { font-size: 14px; color: #555; line-height: 1.9; }
.terms-section ol { padding-left: 20px; margin-bottom: 12px; }
.terms-section ol li { list-style: decimal; margin-bottom: 4px; }

.map-placeholder { width: 100%; height: 300px; background: linear-gradient(135deg, #dfe6e9, #b2bec3); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #636e72; font-size: 15px; font-weight: 600; margin-top: 20px; border: 1px dashed #aaa; }
.privacy-badge { display: inline-block; background: #e74c3c; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; margin-right: 6px; }
.email-no-box { text-align: center; padding: 40px 20px; }
.email-no-box .big-icon { font-size: 64px; margin-bottom: 16px; }
.email-no-box h4 { font-size: 20px; font-weight: 800; color: #222; margin-bottom: 12px; }
.email-no-box p { font-size: 14px; color: #666; line-height: 1.8; max-width: 500px; margin: 0 auto; }
.youth-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.youth-card { background: #f8f9fa; border-radius: 10px; padding: 20px; border: 1px solid #eee; text-align: center; }
.youth-card .yicon { font-size: 36px; margin-bottom: 8px; }
.youth-card h5 { font-size: 14px; font-weight: 700; color: #222; margin-bottom: 4px; }
.youth-card p { font-size: 12px; color: #888; }

/* Mobile bottom nav */
.mobile-bottom-nav { display: none; }

/* ===== SEARCH PAGE ===== */
.search-results-header { margin-bottom: 24px; }
.search-results-header h2 { font-size: 24px; font-weight: 800; color: #222; }
.search-results-header p { font-size: 14px; color: #888; margin-top: 4px; }

/* ===== 404 PAGE ===== */
.error-404 { text-align: center; padding: 80px 20px; }
.error-404 .error-icon { font-size: 80px; margin-bottom: 20px; }
.error-404 h1 { font-size: 36px; font-weight: 800; color: #222; margin-bottom: 12px; }
.error-404 p { font-size: 16px; color: #888; margin-bottom: 24px; }
.error-404 a { display: inline-block; padding: 12px 32px; background: #27ae60; color: #fff; border-radius: 8px; font-weight: 700; }

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 1024px) {
  .nav-list li a { padding: 12px 18px; font-size: 14px; }
  .news-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .news-card-h .thumb { width: 160px; }
  .article-container { grid-template-columns: 1fr 280px; gap: 24px; }
  .article-title { font-size: 24px; }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 768px) {
  body { padding-bottom: 60px; }
  .header-top { padding: 10px 16px; }
  .logo-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 8px; }
  .logo h1 { font-size: 18px; }
  .header-utils { gap: 10px; }
  .search-box { padding: 5px 12px; }
  .search-box input { width: 100px; font-size: 12px; }
  .auth-links { display: none; }
  .nav-wrap { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
  .nav-inner { padding: 0 4px; }
  .mobile-menu-btn { display: block; }
  .nav-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-list::-webkit-scrollbar { display: none; }
  .nav-list li { flex-shrink: 0; }
  .nav-list li a { padding: 12px 16px; font-size: 13px; white-space: nowrap; }
  .container { padding: 12px; }
  .main-top { grid-template-columns: 1fr; gap: 3px; margin-bottom: 16px; border-radius: 6px; }
  .main-featured.big { grid-row: auto; }
  .main-featured.big .overlay h2 { font-size: 17px; }
  .main-featured .overlay { padding: 20px 14px 14px; }
  .main-featured .overlay h2 { font-size: 14px; }
  .main-side-list { flex-direction: row; gap: 3px; }
  .main-side-list .main-featured { flex: 1; }
  .headline-strip { padding: 12px 14px; margin-bottom: 16px; gap: 8px; }
  .headline-strip a { font-size: 13px; }
  .news-list-vertical { gap: 10px; }
  .news-card-h { flex-direction: column; }
  .news-card-h .thumb { width: 100%; min-height: 180px; height: 180px; }
  .news-card-h .info { padding: 12px 14px; }
  .news-card-h .info h4 { font-size: 15px; }
  .two-col { grid-template-columns: 1fr; }
  .news-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .news-card-v .thumb { height: 120px; }
  .news-card-v .info { padding: 10px; }
  .news-card-v .info h4 { font-size: 13px; }
  .section-header { margin-bottom: 12px; padding-bottom: 8px; }
  .section-header h3 { font-size: 17px; }
  .section { margin-bottom: 24px; }
  .info-section { grid-template-columns: 1fr; gap: 12px; }
  .info-main { height: 200px; }
  .info-side-item .thumb { width: 80px; height: 58px; }
  .info-side-item h5 { font-size: 13px; }
  .photo-grid { grid-template-columns: 1fr; gap: 10px; }
  .photo-card { height: 200px; }
  .exercise-diet { grid-template-columns: 1fr; gap: 20px; }
  .ed-block .featured { height: 180px; }
  .ed-list a { font-size: 13px; }
  .disease-item .thumb { width: 70px; height: 52px; }
  .disease-item h5 { font-size: 13px; }
  .celeb-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .celeb-card .thumb { height: 140px; }
  .celeb-card .info h4 { font-size: 13px; }
  .timeline-box, .ranking-box { padding: 14px; }
  .ranking-item h5 { font-size: 12px; }
  .rank-num { width: 24px; height: 24px; font-size: 11px; }
  .date-bar { padding: 6px 16px; font-size: 11px; }
  .footer-inner { padding: 20px 16px; }
  .footer-nav a { font-size: 12px; }
  .footer-info { flex-direction: column; gap: 16px; }
  .footer-details { font-size: 11px; }

  /* Article view mobile */
  .article-container { grid-template-columns: 1fr; padding: 16px; gap: 24px; }
  .article-sidebar { position: static; }
  .article-title { font-size: 21px; }
  .article-body p { font-size: 15px; }
  .article-body h2 { font-size: 19px; }
  .article-body .lead { font-size: 15.5px; padding: 16px 18px; }
  .article-img .ph { min-height: 220px; }
  .article-meta { flex-wrap: wrap; gap: 8px; }
  .share-bar { flex-wrap: wrap; }
  .article-nav { grid-template-columns: 1fr; }
  .related-list a { font-size: 13px; padding: 10px 12px; }
  .scroll-progress { top: 47px; }

  /* Category page mobile */
  .cat-banner { padding: 28px 16px 24px; }
  .cat-banner h2 { font-size: 22px; }
  .cat-tabs a { padding: 6px 14px; font-size: 12px; }
  .cat-container { grid-template-columns: 1fr; padding: 16px 12px; gap: 20px; }
  .cat-featured { height: 220px; margin-bottom: 16px; }
  .cat-feat-overlay h3 { font-size: 17px; }
  .cat-feat-overlay { padding: 20px 18px 16px; }
  .cat-article-item { gap: 12px; padding: 14px 0; }
  .cat-article-item .cat-thumb { width: 120px; height: 88px; }
  .cat-article-item .cat-info h4 { font-size: 14px; margin-bottom: 4px; }
  .cat-article-item .cat-info p { display: none; }
  .cat-article-item .cat-info .meta { font-size: 11px; }
  .cat-sort-bar { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* Info desk mobile */
  .info-desk-banner { padding: 32px 16px 28px; }
  .info-desk-banner h2 { font-size: 22px; }
  .info-desk-container { grid-template-columns: 1fr; gap: 0; padding: 0 12px; }
  .desk-sidebar { border-radius: 0; position: static; margin-bottom: 4px; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0; }
  .desk-sidebar::-webkit-scrollbar { display: none; }
  .desk-nav-group { border-bottom: none; display: flex; flex-shrink: 0; }
  .desk-nav-title { display: none; }
  .desk-nav-group a { white-space: nowrap; padding: 12px 16px; font-size: 13px; border-left: none; border-bottom: 3px solid transparent; }
  .desk-nav-group a.active { border-left: none; border-bottom-color: #27ae60; background: transparent; }
  .desk-content { padding: 24px 18px; border-radius: 10px; margin-bottom: 24px; }
  .desk-content h3.desk-title { font-size: 20px; }
  .company-info-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .terms-toc { grid-template-columns: 1fr 1fr; }
  .youth-info { grid-template-columns: 1fr; }

  .mobile-bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; border-top: 1px solid #e0e0e0; z-index: 200;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
  }
  .mobile-bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 8px 4px; font-size: 10px;
    color: #888; gap: 3px;
  }
  .mobile-bottom-nav a.active { color: #27ae60; }
  .mobile-bottom-nav a .icon { font-size: 20px; }
}
@media (max-width: 400px) {
  .logo h1 { font-size: 16px; }
  .news-grid-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .celeb-grid { grid-template-columns: 1fr; }
  .article-title { font-size: 19px; }
}
.mobile-bottom-nav { display: none !important; }

/* ===== MOBILE FIX - 전체 오버플로우 방지 ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

* {
  max-width: 100%;
}

img {
  max-width: 100% !important;
  height: auto !important;
}

/* ===== 768px 모바일 보완 ===== */
@media (max-width: 768px) {
  .two-col { display: block !important; }
  .two-col .sidebar { margin-top: 24px; }

  .info-section { grid-template-columns: 1fr !important; }
  .info-main { height: 220px !important; }

  .exercise-diet { grid-template-columns: 1fr !important; }
  .ed-block .featured { height: 180px !important; }

  .photo-grid { grid-template-columns: 1fr !important; }
  .photo-card { height: 200px !important; }

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

  .disease-list { gap: 8px !important; }
  .disease-item { padding: 10px !important; }
  .disease-item .thumb { width: 70px !important; height: 50px !important; }

  .section-header h3 { font-size: 17px !important; }
  .section-header { margin-bottom: 12px !important; }

  .news-grid-4 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .news-card-v .thumb { height: 120px !important; }
  .news-card-v .info { padding: 10px !important; }
  .news-card-v .info h4 { font-size: 13px !important; }

  .timeline-box, .ranking-box { padding: 14px !important; }

  .info-side-list { gap: 8px !important; }
  .info-side-item { padding: 10px !important; }
  .info-side-item .thumb { width: 80px !important; height: 56px !important; }
  .info-side-item h5 { font-size: 13px !important; }

  /* 메인 피처드 오버레이 텍스트 */
  .main-featured .overlay h2,
  .main-featured.big .overlay h2 {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* 카드 내 텍스트 줄바꿈 */
  .news-card-h .info h4,
  .news-card-v .info h4,
  .ed-block .featured .overlay h4,
  .photo-card .overlay h4,
  h1, h2, h3, h4, h5 {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  /* 컨테이너 패딩 */
  .container { padding: 12px !important; }

  /* 푸터 모바일 */
  .footer-nav { gap: 12px !important; }
  .footer-nav a { font-size: 12px !important; }
  .footer-info { flex-direction: column !important; gap: 16px !important; }
  .footer-details { font-size: 11px !important; }
}

/* ===== iOS Safari Fix ===== */
/* iOS에서 writing-mode 상속 버그 방지 */
* {
  -webkit-writing-mode: horizontal-tb !important;
  writing-mode: horizontal-tb !important;
}

/* iOS flex/grid 오버플로우 방지 */
.main-top,
.news-grid-4,
.info-section,
.exercise-diet,
.photo-grid,
.celeb-grid,
.two-col,
.news-list-vertical,
.news-card-h,
.container {
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* iOS에서 flex 아이템이 축소 안 되는 문제 */
.news-card-h .info {
  min-width: 0 !important;
  -webkit-flex-shrink: 1 !important;
  flex-shrink: 1 !important;
}

.news-card-h .info h4,
.news-card-h .info p {
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-all !important;
}

/* iOS 이미지 오버플로우 */
img {
  -webkit-flex-shrink: 0;
  object-fit: cover;
}

/* iOS Safari 스크롤 부드럽게 */
.nav-list {
  -webkit-overflow-scrolling: touch !important;
}

/* iOS에서 그리드 아이템 오버플로우 */
@media (max-width: 768px) {
  .main-featured,
  .news-card-v,
  .photo-card,
  .ed-block .featured,
  .info-main {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* iOS에서 grid가 넘치는 문제 */
  .main-top { display: flex !important; flex-direction: column !important; gap: 3px !important; }
  .main-side-list { display: flex !important; flex-direction: row !important; gap: 3px !important; }
  .main-side-list .main-featured { flex: 1 !important; min-width: 0 !important; }

  .exercise-diet { display: flex !important; flex-direction: column !important; gap: 16px !important; }
  .info-section { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .two-col { display: flex !important; flex-direction: column !important; }

  .news-grid-4 { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .photo-grid { display: grid !important; grid-template-columns: 1fr !important; }
  .celeb-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; }
}

/* ===== iOS Critical Fix ===== */
/* ed-block featured 영역 iOS 수정 */
.ed-block .featured,
.ed-block .featured img,
.ed-block .featured .ph {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  display: block !important;
}

.ed-block .featured img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* exercise-diet 섹션 iOS 강제 수정 */
@media (max-width: 768px) {
  .exercise-diet {
    display: block !important;
  }
  
  .exercise-diet .ed-block {
    margin-bottom: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  .ed-block .featured {
    width: 100% !important;
    max-width: 100% !important;
    height: 180px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  
  .ed-block .featured .ph,
  .ed-block .featured img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  .ed-block .featured .overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
  }
  
  .ed-block .featured .overlay h4 {
    font-size: 14px !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }
  
  .ed-list a {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  
  /* 모든 이미지 컨테이너 iOS 수정 */
  .main-featured,
  .info-main,
  .photo-card,
  .news-card-v .thumb,
  .news-card-h .thumb {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  
  .main-featured img,
  .info-main img,
  .photo-card img,
  .news-card-v .thumb img,
  .news-card-h .thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: 100% !important;
  }
}