/* === Article Show Page — sumaeki.com === */
:root{--primary:#0679D4;--dark:#043A5E;--hover:#0560AA;--light:#E8F2FC;--accent:#FF6600;--green:#10b981;--gold:#f59e0b;}

.article-page{background:#f5f6f8;min-height:100vh;}
.article-page .container{max-width:1220px;}

/* Breadcrumb */
.article-breadcrumb{background:none;padding:0;margin:0;font-size:13px;}
.article-breadcrumb a{color:var(--primary);text-decoration:none;}
.article-breadcrumb a:hover{text-decoration:underline;}
.article-breadcrumb .active{color:#9ca3af;}

/* === Main Article === */
.article-main{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);}

/* Header */
.article-header{padding:24px 28px 20px;border-bottom:1px solid #f3f4f6;}
.article-title{font-size:22px;font-weight:800;color:#1f2937;line-height:1.5;margin:0 0 14px;letter-spacing:-.02em;}
.article-meta{display:flex;flex-wrap:wrap;gap:16px;}
.meta-item{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#9ca3af;}
.meta-item i{font-size:13px;color:#d1d5db;}

/* Source */
.article-source{padding:10px 28px;background:#faf9f7;font-size:12px;color:#9ca3af;border-bottom:1px solid #f3f4f6;}
.article-source a{color:var(--primary);}
.article-source i{color:#d1d5db;}

/* TOC */
.article-toc{margin:20px 28px 0;border:1px solid #e8edf3;border-radius:10px;overflow:hidden;}
.toc-header{background:linear-gradient(135deg,var(--dark),#064b7a);color:#fff;font-size:13px;font-weight:600;padding:10px 16px;display:flex;align-items:center;gap:6px;}
.toc-list{margin:0;padding:12px 16px 12px 32px;list-style:decimal;counter-reset:none;}
.toc-list li{padding:5px 0;font-size:13px;color:#4b5563;border-bottom:1px dashed #f3f4f6;}
.toc-list li:last-child{border-bottom:none;}
.toc-list a{color:var(--primary);text-decoration:none;}
.toc-list a:hover{text-decoration:underline;}
.toc-active{color:var(--dark);}

/* Introduce */
.article-intro{display:flex;gap:10px;align-items:flex-start;margin:0 0 20px;padding:14px 16px;background:var(--light);border-left:4px solid var(--primary);border-radius:0 8px 8px 0;font-size:13px;color:#374151;line-height:1.7;}
.article-intro>i{color:var(--primary);font-size:16px;flex-shrink:0;line-height:22px;height:22px;}

/* Article body */
.article-body{padding:24px 28px 28px;}

/* Content typography */
.article-content{line-height:2;font-size:15px;color:#374151;}
.article-content h2{font-size:20px;font-weight:700;color:#1f2937;margin:36px 0 16px;padding:14px 18px;border-left:4px solid var(--primary);background:linear-gradient(135deg,var(--light),#fff);border-radius:0 8px 8px 0;scroll-margin-top:80px;}
.article-content h3{font-size:17px;font-weight:700;color:var(--dark);margin:28px 0 12px;padding:10px 14px;border-left:3px solid var(--gold);background:#fffbeb;border-radius:0 6px 6px 0;scroll-margin-top:80px;}
.article-content h4{font-size:15px;font-weight:700;color:#1f2937;margin:22px 0 10px;}
.article-content p{margin:0 0 16px;color:#4b5563;}
.article-content ul,.article-content ol{padding-left:8px;margin:0 0 18px;list-style:none;}
.article-content li{margin-bottom:8px;color:#4b5563;padding:10px 14px 10px 34px;position:relative;background:#f9fafb;border-radius:6px;border:1px solid #f3f4f6;line-height:1.7;}
.article-content li::before{content:"\F26A";font-family:"bootstrap-icons";position:absolute;left:12px;top:11px;color:var(--primary);font-size:13px;}
.article-content strong{color:#1f2937;}
.article-content p>strong:first-child{display:block;margin-bottom:4px;color:var(--dark);font-size:15px;}
.article-content img{max-width:100%;height:auto;border-radius:8px;margin:10px 0;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.article-content blockquote{border-left:4px solid var(--primary);background:var(--light);padding:14px 18px;margin:18px 0;border-radius:0 8px 8px 0;color:#4b5563;font-size:14px;}
.article-content a{color:var(--primary);text-decoration:none;border-bottom:1px solid rgba(6,121,212,.3);}
.article-content a:hover{border-bottom-color:var(--primary);}

/* Pages */
.article-pages{padding:16px 0;text-align:center;}

/* Tags */
.article-tags{padding:0 28px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.article-tags>i{color:#d1d5db;font-size:16px;}
.tag-item{display:inline-block;padding:4px 14px;background:var(--light);color:var(--primary);font-size:12px;font-weight:500;border-radius:20px;text-decoration:none;transition:all .15s;}
.tag-item:hover{background:var(--primary);color:#fff;}

/* Action buttons */
.article-actions{display:flex;justify-content:center;gap:8px;padding:20px 28px;border-top:2px solid var(--primary);background:var(--light);border-radius:0 0 12px 12px;}
.action-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#6b7280;font-size:13px;cursor:pointer;transition:all .2s;text-decoration:none;}
.action-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--light);}
.action-btn i{font-size:16px;}
.action-btn em,.action-btn b{font-style:normal;font-weight:normal;font-size:12px;color:#9ca3af;margin-left:2px;}
.action-like:hover,.liked{border-color:var(--primary);color:var(--primary);}
.article-actions .liked{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--primary);border-radius:8px;background:var(--light);color:var(--primary);font-size:13px;cursor:pointer;}
.action-fav:hover,.favorited{border-color:var(--gold);color:var(--gold);}
.article-actions .favorited{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--gold);border-radius:8px;background:#fffbeb;color:var(--gold);font-size:13px;cursor:pointer;}
.action-comment:hover{border-color:var(--green);color:var(--green);}
.action-share:hover{border-color:#8b5cf6;color:#8b5cf6;}
.action-report{margin-left:auto;}
.action-report:hover{border-color:#ef4444;color:#ef4444;}

/* === Inline Comment Section === */
.comment-section{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-top:20px;padding:20px 24px;}
.comment-section .sec-head{margin-bottom:12px;}
.comment-count{font-size:13px;font-weight:400;color:#9ca3af;margin-left:4px;}
#comment_div{min-height:100px;}
#comment_div iframe{width:100%;min-height:400px;border:none;}
#comment_main{color:#9ca3af;font-size:13px;padding:20px 0;text-align:center;}

/* === Related Section === */
.related-section{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-top:20px;padding:20px 24px;}
.related-list table{width:100%;border-collapse:collapse;}
.related-list td{padding:8px 10px;font-size:13px;border-bottom:1px solid #f3f4f6;}
.related-list td a{color:#374151;text-decoration:none;}
.related-list td a:hover{color:var(--primary);}

/* === Sidebar === */
/* Author card */
.sidebar-author{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:16px;}
.author-header{display:flex;gap:14px;padding:20px;align-items:center;}
.author-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--light);box-shadow:0 2px 8px rgba(6,121,212,.15);}
.author-info{flex:1;min-width:0;}
.author-name{font-size:15px;font-weight:700;color:#1f2937;text-decoration:none;display:block;}
.author-name:hover{color:var(--primary);}
.author-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--green);margin-top:2px;}
.author-badge i{font-size:12px;}
.author-sign{font-size:12px;color:#9ca3af;margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.author-actions{display:flex;gap:8px;padding:0 20px 20px;}
.btn-author-visit{flex:1;text-align:center;padding:8px 0;border-radius:8px;background:var(--primary);color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:5px;}
.btn-author-visit:hover{background:var(--hover);color:#fff;}
.btn-author-follow{flex:1;padding:8px 0;border-radius:8px;border:1px solid var(--primary);background:#fff;color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:3px;}
.btn-author-follow:hover{background:var(--light);}
.btn-author-followed{flex:1;padding:8px 0;border-radius:8px;border:1px solid #d1d5db;background:#f9fafb;color:#6b7280;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:3px;}
.btn-author-followed:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2;}
.btn-author-followed:hover i::before{content:"\F62A";}
.btn-author-followed:hover span{display:none;}

/* CTA card */
.sidebar-cta{background:linear-gradient(135deg,var(--dark),#0a5a94);border-radius:12px;padding:24px 20px;text-align:center;color:#fff;margin-bottom:16px;position:relative;overflow:hidden;}
.sidebar-cta::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.06);}
.sidebar-cta::after{content:'';position:absolute;bottom:-20px;left:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.04);}
.cta-icon{font-size:28px;margin-bottom:8px;opacity:.8;}
.sidebar-cta h4{font-size:16px;font-weight:700;margin:0 0 4px;}
.sidebar-cta p{font-size:12px;opacity:.7;margin:0 0 14px;}
.cta-button{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--dark);font-weight:700;font-size:13px;padding:10px 24px;border-radius:24px;text-decoration:none;transition:transform .15s,box-shadow .15s;position:relative;z-index:1;}
.cta-button:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(0,0,0,.2);color:var(--dark);}
.cta-phone{margin-top:14px;font-size:14px;font-weight:600;letter-spacing:.5px;position:relative;z-index:1;}
.cta-phone i{margin-right:4px;}

/* Sidebar cards */
.sidebar-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:16px;}
.sidebar-card-header{background:linear-gradient(135deg,var(--primary),var(--hover));color:#fff;font-weight:600;font-size:13px;padding:12px 16px;display:flex;align-items:center;gap:6px;}
.sidebar-card-body{padding:12px 16px;}

/* Sidebar ranking list */
.sidebar-card-body ul{list-style:none;padding:0;margin:0;counter-reset:rank;}
.sidebar-card-body li{padding:8px 8px 8px 0;border-bottom:1px solid #f5f5f5;font-size:13px;display:flex;align-items:center;gap:8px;counter-increment:rank;}
.sidebar-card-body li:last-child{border-bottom:none;}
.sidebar-card-body li:hover{background:var(--light);border-radius:6px;}
.sidebar-card-body li em,.sidebar-card-body li i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;font-size:11px;font-weight:700;font-style:normal;flex-shrink:0;line-height:1;}
.sidebar-card-body li em{background:var(--primary);color:#fff;}
.sidebar-card-body li i{background:#f3f4f6;color:#9ca3af;font-style:normal;}
.sidebar-card-body li a{color:#374151;text-decoration:none;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-card-body li a:hover{color:var(--primary);}
.sidebar-card-body li .f_r{color:#9ca3af;font-size:11px;flex-shrink:0;order:3;margin-left:auto;float:none;}

/* Sidebar table list */
.sidebar-card-body table{width:100%;border-collapse:collapse;}
.sidebar-card-body td{padding:7px 8px;font-size:13px;border-bottom:1px solid #f5f5f5;}
.sidebar-card-body td:last-child{border-bottom:none;}
.sidebar-card-body td a{color:#374151;text-decoration:none;}
.sidebar-card-body td a:hover{color:var(--primary);}
.sidebar-card-body td .f_r{color:#9ca3af;font-size:11px;}

/* Section heads (reuse from homepage) */
.sec-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid #e5e7eb;}
.sec-title{font-size:16px;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:6px;}
.sec-title i{color:var(--primary);}

/* Before/After comparison */
.compare-box{position:relative;border-radius:10px;overflow:hidden;border:2px solid #e5e7eb;background:#f9fafb;}
.compare-box img{width:100%;height:220px;object-fit:cover;display:block;}
.compare-label{position:absolute;top:10px;left:10px;z-index:2;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;display:inline-flex;align-items:center;}
.compare-before .compare-label{background:rgba(239,68,68,.85);}
.compare-after .compare-label{background:rgba(16,185,129,.85);}
.compare-before{border-color:#fecaca;}
.compare-after{border-color:#a7f3d0;}

/* Legacy compat */
.pages{padding:16px 0;text-align:center;}
.content{line-height:1.8;font-size:14px;}
.content img{max-width:100%;height:auto;}
.f_r{float:right;}.f_red{color:#dc3545;}.f_blue{color:var(--primary);}.f_gray{color:#6c757d;}

/* === Responsive === */
@media(max-width:991.98px){
    .article-header{padding:20px 20px 16px;}
    .article-body{padding:20px;}
    .article-tags{padding:0 20px 16px;}
    .article-actions{padding:16px 20px;flex-wrap:wrap;}
    .article-intro{margin:16px 20px 0;}
    .article-toc{margin:16px 20px 0;}
    .article-source{padding:10px 20px;}
    .action-report{margin-left:0;}
}
@media(max-width:767.98px){
    .article-title{font-size:18px;}
    .article-header{padding:16px 16px 14px;}
    .article-body{padding:16px;}
    .article-tags{padding:0 16px 14px;}
    .article-actions{padding:14px 16px;gap:4px;}
    .action-btn{padding:6px 10px;font-size:12px;}
    .action-btn span{display:none;}
    .article-intro{margin:12px 16px 0;}
    .article-toc{margin:12px 16px 0;}
    .article-source{padding:8px 16px;}
    .article-content h2{font-size:17px;padding:10px 14px;}
    .article-content h3{font-size:15px;padding:8px 12px;}
    .author-actions{flex-direction:column;}
}