/* ============================================
   BANKSTYLE GHOST THEME — Pixel-perfect
   Banksalad blog replica · Light only
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --c-primary:#00C68E;
  --c-primary-dk:#00a87a;
  --c-text:#292929;
  --c-text-lt:#757575;
  --c-heading:#292929;
  --c-bg:#fff;
  --c-bg-gray:#f7f8f9;
  --c-border:#e8e8e8;
  --c-tag:#00C68E;
  --font:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,'Helvetica Neue','Segoe UI','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --max-w:900px;
  --content-w:720px;
  --hdr-h:83px;
  --tr:.25s ease;
}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);color:var(--c-text);background:var(--c-bg);line-height:1.7;padding-top:var(--hdr-h)}
a{color:inherit;text-decoration:none;transition:color var(--tr)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
/* ============================================
   HEADER — 뱅크샐러드: 83px, 깔끔, border 없음
   ============================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--c-bg);
  height:var(--hdr-h);
  transition:box-shadow var(--tr);
}
.site-header.scrolled{box-shadow:0 1px 8px rgba(0,0,0,.08)}
.header-inner{
  max-width:1080px;margin:0 auto;padding:0 40px;
  height:100%;display:flex;align-items:center;justify-content:space-between;
}
.site-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;color:var(--c-heading);flex-shrink:0}
.site-logo img{height:30px;width:auto}
.blog-label{font-size:.9rem;font-weight:400;color:var(--c-text-lt);margin-left:4px}
.site-nav ul,.site-nav .nav{display:flex;gap:0;list-style:none;margin:0;padding:0}
.site-nav li,.site-nav .nav li{list-style:none}
.site-nav a,.site-nav .nav a{display:block;padding:8px 28px;font-size:15px;font-weight:400;color:var(--c-text-lt);white-space:nowrap;transition:color var(--tr)}
.site-nav a:hover,.site-nav .nav a:hover{color:var(--c-heading)}
.header-actions{display:flex;align-items:center;gap:8px}
.search-toggle{background:none;border:none;cursor:pointer;padding:8px;color:var(--c-text);transition:color var(--tr)}
.search-toggle:hover{color:var(--c-primary)}
.mobile-menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.mobile-menu-toggle span{width:22px;height:2px;background:var(--c-heading);border-radius:2px;transition:all var(--tr)}
.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
/* Search Overlay */
.search-overlay{
  position:fixed;top:var(--hdr-h);left:0;right:0;
  background:var(--c-bg);border-bottom:1px solid var(--c-border);padding:20px;
  transform:translateY(-120%);opacity:0;visibility:hidden;transition:all .3s ease;z-index:999;
}
.search-overlay.active{transform:translateY(0);opacity:1;visibility:visible}
.search-overlay-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;gap:12px}
.search-input{
  flex:1;padding:12px 16px;border:1px solid var(--c-border);border-radius:4px;
  font-size:15px;font-family:var(--font);outline:none;transition:border-color var(--tr);
}
.search-input:focus{border-color:var(--c-primary)}
.search-close{background:none;border:none;cursor:pointer;padding:8px;color:var(--c-text-lt)}
/* Mobile Nav */
.mobile-nav-overlay{
  display:none;position:fixed;top:var(--hdr-h);left:0;right:0;bottom:0;
  background:var(--c-bg);z-index:998;padding:32px 24px;overflow-y:auto;
}
.mobile-nav-overlay.active{display:block}
.mobile-nav ul{display:flex;flex-direction:column;gap:0}
.mobile-nav a{display:block;padding:16px 0;font-size:1.1rem;font-weight:500;color:var(--c-heading);border-bottom:1px solid var(--c-border)}
.mobile-nav a:hover{color:var(--c-primary)}
/* ============================================
   HERO — 풀와이드, 이미지 오버레이, italic 대문자
   ============================================ */
.hero-section{
  position:relative;width:100%;height:560px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.hero-content{position:relative;z-index:2;text-align:center;padding:24px}
.hero-title{
  font-size:3.2rem;font-weight:900;color:#fff;line-height:1.2;
  letter-spacing:-.01em;text-transform:uppercase;
  font-style:italic;
  max-width:800px;margin:0 auto;
  text-shadow:0 2px 20px rgba(0,0,0,.25);
}
.hero-logo{height:32px;width:auto;margin:32px auto 0;filter:brightness(0) invert(1)}
/* ============================================
   POSTS LIST — 900px 컨테이너, 카드 간 120px 간격
   ============================================ */
.posts-section{padding:120px 0 80px}
.posts-container{max-width:var(--max-w);margin:0 auto;padding:0 40px}
.category-section{margin-bottom:60px}
/* 카테고리 라벨: 16px, 500, letter-spacing 2.72px, 밑줄은 별도 ::after */
.category-label{
  font-size:16px;font-weight:500;color:var(--c-heading);
  letter-spacing:2.72px;
  display:inline-block;
  margin-bottom:30px;
  padding-bottom:12px;
  position:relative;
  border-bottom:none;
}
.category-label::after{
  content:'';position:absolute;bottom:0;left:0;
  width:40px;height:2px;background:var(--c-heading);
}
/* ============================================
   POST CARD — 170×170 정사각형 썸네일, 간격 35px, 구분선 없음
   ============================================ */
.post-card{
  display:flex;gap:0;align-items:flex-start;
  padding:0;margin-bottom:120px;border-bottom:none;
}
.post-card:last-child{margin-bottom:0;border-bottom:none}
.post-card-image-link{
  flex:0 0 auto;width:170px;height:170px;
  border-radius:3px;overflow:hidden;margin-right:35px;
}
.post-card-image{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card-image{transform:scale(1.05)}
.post-card-image--placeholder{
  width:100%;height:100%;background:var(--c-bg-gray);
  display:flex;align-items:center;justify-content:center;
}
.post-card-content{flex:1;min-width:0}
/* 태그: 14px, 400, #00C68E, 간격 16px */
.post-card-tags{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:15px}
.post-card-tag{font-size:14px;font-weight:400;color:var(--c-tag)}
.post-card-tag:hover{opacity:.7}
/* 제목: 21px, 700, #292929 */
.post-card-title{font-size:21px;font-weight:700;color:var(--c-heading);line-height:1.53;margin-bottom:10px}
.post-card-title a:hover{color:var(--c-primary)}
/* 요약: 15px, 400, #292929 */
.post-card-excerpt{
  font-size:15px;color:var(--c-text);line-height:2;margin-bottom:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Read More: 15px, 400, #000, margin-top 16px */
.post-card-readmore{
  display:inline-block;margin-top:16px;
  font-size:15px;font-weight:400;color:#000;
}
.post-card-readmore:hover{color:var(--c-primary)}
/* ============================================
   PAGINATION
   ============================================ */
.pagination{
  max-width:var(--max-w);margin:0 auto;padding:40px 40px;
  display:flex;align-items:center;justify-content:center;gap:20px;
}
.pagination a{
  padding:10px 20px;border:1px solid var(--c-border);border-radius:4px;
  font-size:14px;font-weight:400;color:var(--c-text);transition:all var(--tr);
}
.pagination a:hover{border-color:var(--c-primary);color:var(--c-primary)}
.pagination-info{font-size:14px;color:var(--c-text-lt)}
/* ============================================
   POST FULL (게시글 페이지)
   ============================================ */
.post-full{max-width:var(--content-w);margin:0 auto;padding:40px 24px 80px}
/* Breadcrumb */
.post-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--c-text-lt);margin-bottom:24px}
.post-breadcrumb a{color:var(--c-text-lt)}
.post-breadcrumb a:hover{color:var(--c-primary)}
.breadcrumb-sep{color:#ccc}
.breadcrumb-current{color:var(--c-text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
/* Header */
.post-full-header{margin-bottom:28px}
.post-full-title{
  font-size:32px;font-weight:800;color:var(--c-heading);
  line-height:1.4;letter-spacing:-.02em;margin-bottom:14px;word-break:keep-all;
}
.post-full-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--c-text-lt)}
.post-meta-author{font-weight:500;color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
.post-meta-date{color:var(--c-primary)}
.post-meta-sep{color:#ccc}
/* Feature Image */
.post-full-image{margin-bottom:40px;border-radius:0;overflow:hidden}
.post-full-image img{width:100%}
.post-full-image figcaption{font-size:13px;color:var(--c-text-lt);text-align:center;padding:10px 0}
/* Content */
.post-full-content{font-size:16px;line-height:2;color:var(--c-text);word-break:keep-all}
.post-full-content h2{font-size:24px;font-weight:700;color:var(--c-heading);margin:56px 0 20px;line-height:1.5}
.post-full-content h3{font-size:20px;font-weight:700;color:var(--c-heading);margin:40px 0 16px;line-height:1.5}
.post-full-content h4{font-size:17px;font-weight:700;color:var(--c-heading);margin:32px 0 12px}
.post-full-content p{margin-bottom:24px}
.post-full-content a{color:var(--c-tag);text-decoration:underline;text-underline-offset:3px}
.post-full-content a:hover{color:var(--c-primary-dk)}
.post-full-content strong{font-weight:700;color:var(--c-heading)}
.post-full-content ul,.post-full-content ol{margin:0 0 24px 24px}
.post-full-content ul{list-style:disc}
.post-full-content ol{list-style:decimal}
.post-full-content li{margin-bottom:8px;padding-left:4px}
.post-full-content li ul,.post-full-content li ol{margin-top:8px;margin-bottom:0}
/* Blockquote */
.post-full-content blockquote{
  background:var(--c-bg-gray);border-left:4px solid var(--c-primary);
  border-radius:0 8px 8px 0;padding:24px 28px;margin:32px 0;
  font-size:15px;color:var(--c-text-lt);line-height:1.9;
}
.post-full-content blockquote p:last-child{margin-bottom:0}
/* Code */
.post-full-content code{background:#f1f3f5;padding:2px 6px;border-radius:3px;font-size:.9em;font-family:'JetBrains Mono','Fira Code',monospace}
.post-full-content pre{background:#1e1e1e;color:#d4d4d4;padding:24px;border-radius:6px;overflow-x:auto;margin:32px 0;line-height:1.6}
.post-full-content pre code{background:none;padding:0;color:inherit;font-size:14px}
/* Images */
.post-full-content img{border-radius:4px;margin:24px 0}
.post-full-content figure{margin:32px 0}
.post-full-content figcaption{text-align:center;font-size:13px;color:var(--c-text-lt);margin-top:8px}
/* Ghost Cards */
.post-full-content .kg-callout-card{background:var(--c-bg-gray);border-radius:8px;padding:24px;margin:32px 0;border:1px solid var(--c-border)}
.post-full-content .kg-toggle-card{background:var(--c-bg-gray);border-radius:8px;padding:20px 24px;margin:32px 0}
.post-full-content .kg-bookmark-card{border:1px solid var(--c-border);border-radius:8px;overflow:hidden;margin:32px 0}
/* kg-width */
.post-full-content .kg-width-wide,.page-full-content .kg-width-wide{position:relative;width:85vw;max-width:1040px;min-width:100%;margin-left:calc(50% - 42.5vw);margin-right:calc(50% - 42.5vw)}
.post-full-content .kg-width-full,.page-full-content .kg-width-full{position:relative;width:100vw;min-width:100%;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.post-full-content .kg-width-full img,.page-full-content .kg-width-full img{width:100%;border-radius:0}
.post-full-content .kg-width-wide img,.page-full-content .kg-width-wide img{width:100%}
.kg-image-card{margin:32px 0}
.kg-image-card img{margin:0 auto}
.kg-image-card figcaption{text-align:center;font-size:13px;color:var(--c-text-lt);margin-top:12px}
.kg-gallery-card{margin:32px 0}
.kg-gallery-container{display:flex;flex-direction:column;gap:12px}
.kg-gallery-row{display:flex;gap:12px}
.kg-gallery-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px}
.kg-embed-card{margin:32px 0;display:flex;justify-content:center}
.kg-embed-card iframe{max-width:100%}
/* Table */
.post-full-content table{width:100%;border-collapse:collapse;margin:32px 0}
.post-full-content th,.post-full-content td{padding:12px 16px;border:1px solid var(--c-border);text-align:left;font-size:15px}
.post-full-content th{background:var(--c-bg-gray);font-weight:600}
/* Post Tags Bottom */
.post-full-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:48px;padding-top:24px;border-top:1px solid var(--c-border)}
.post-tag-chip{
  display:inline-block;padding:6px 14px;background:var(--c-bg-gray);
  border-radius:20px;font-size:14px;font-weight:400;color:var(--c-tag);transition:all var(--tr);
}
.post-tag-chip:hover{background:var(--c-primary);color:#fff}
/* Author Card */
.post-author-card{display:flex;align-items:center;gap:16px;margin-top:40px;padding:24px;background:var(--c-bg-gray);border-radius:8px}
.author-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-avatar--placeholder{width:56px;height:56px;border-radius:50%;background:#e9ecef;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.author-info{min-width:0}
.author-name{font-size:15px;font-weight:700;color:var(--c-heading);margin-bottom:4px}
.author-name a:hover{color:var(--c-primary)}
.author-bio{font-size:14px;color:var(--c-text-lt);line-height:1.6}
/* Related Posts */
.related-posts{background:var(--c-bg-gray);padding:60px 0}
.related-posts-inner{max-width:var(--max-w);margin:0 auto;padding:0 40px}
.related-title{font-size:20px;font-weight:700;color:var(--c-heading);margin-bottom:32px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.related-grid .post-card{flex-direction:column;gap:0;padding:0;margin-bottom:0;background:var(--c-bg);border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:box-shadow var(--tr)}
.related-grid .post-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.related-grid .post-card-image-link{width:100%;height:180px;border-radius:0;margin-right:0}
.related-grid .post-card-content{padding:16px 20px 20px}
.related-grid .post-card{margin-bottom:0}
/* ============================================
   PAGE
   ============================================ */
.page-full{max-width:var(--content-w);margin:0 auto;padding:60px 24px 80px}
.page-full-header{margin-bottom:32px}
.page-full-title{font-size:32px;font-weight:800;color:var(--c-heading);line-height:1.4}
.page-full-image{margin-bottom:40px;border-radius:0;overflow:hidden}
.page-full-content{font-size:16px;line-height:2;color:var(--c-text)}
.page-full-meta{margin-top:12px;font-size:14px;color:var(--c-text-lt)}
/* page-full-content 타이포 */
.page-full-content h2{font-size:24px;font-weight:700;color:var(--c-heading);margin:56px 0 20px}
.page-full-content h3{font-size:20px;font-weight:700;color:var(--c-heading);margin:40px 0 16px}
.page-full-content h4{font-size:17px;font-weight:700;color:var(--c-heading);margin:32px 0 12px}
.page-full-content p{margin-bottom:24px}
.page-full-content a{color:var(--c-tag);text-decoration:underline;text-underline-offset:3px}
.page-full-content a:hover{color:var(--c-primary-dk)}
.page-full-content strong{font-weight:700;color:var(--c-heading)}
.page-full-content ul,.page-full-content ol{margin:0 0 24px 24px}
.page-full-content ul{list-style:disc}
.page-full-content ol{list-style:decimal}
.page-full-content li{margin-bottom:8px;padding-left:4px}
.page-full-content blockquote{background:var(--c-bg-gray);border-left:4px solid var(--c-primary);border-radius:0 8px 8px 0;padding:24px 28px;margin:32px 0;font-size:15px;color:var(--c-text-lt);line-height:1.9}
.page-full-content blockquote p:last-child{margin-bottom:0}
.page-full-content code{background:#f1f3f5;padding:2px 6px;border-radius:3px;font-size:.9em}
.page-full-content pre{background:#1e1e1e;color:#d4d4d4;padding:24px;border-radius:6px;overflow-x:auto;margin:32px 0}
.page-full-content pre code{background:none;padding:0;color:inherit}
.page-full-content img{border-radius:4px;margin:24px 0}
.page-full-content table{width:100%;border-collapse:collapse;margin:32px 0}
.page-full-content th,.page-full-content td{padding:12px 16px;border:1px solid var(--c-border);text-align:left;font-size:15px}
.page-full-content th{background:var(--c-bg-gray);font-weight:600}
/* ============================================
   TAG HERO
   ============================================ */
.tag-hero{position:relative;min-height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tag-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tag-hero-bg--solid{position:absolute;inset:0;background:linear-gradient(135deg,var(--c-primary),#0077b6)}
.tag-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.tag-hero-content{position:relative;z-index:2;text-align:center;padding:40px 24px}
.tag-hero-label{display:inline-block;padding:4px 14px;background:rgba(255,255,255,.2);border-radius:20px;font-size:12px;font-weight:500;color:#fff;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.tag-hero-title{font-size:2rem;font-weight:800;color:#fff;line-height:1.3;margin-bottom:12px}
.tag-hero-desc{font-size:15px;color:rgba(255,255,255,.85);max-width:500px;margin:0 auto 12px;line-height:1.7}
.tag-hero-count{font-size:14px;color:rgba(255,255,255,.7)}
/* ============================================
   AUTHOR HERO
   ============================================ */
.author-hero{background:var(--c-bg-gray);padding:60px 24px;text-align:center}
.author-hero-content{max-width:500px;margin:0 auto}
.author-hero-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 20px}
.author-hero-name{font-size:28px;font-weight:800;color:var(--c-heading);margin-bottom:12px}
.author-hero-bio{font-size:15px;color:var(--c-text-lt);line-height:1.7;margin-bottom:8px}
.author-hero-location{font-size:14px;color:var(--c-text-lt)}
/* ============================================
   ERROR PAGE
   ============================================ */
.error-page{max-width:var(--content-w);margin:0 auto;padding:120px 24px;text-align:center}
.error-code{font-size:6rem;font-weight:900;color:var(--c-primary);line-height:1}
.error-message{font-size:18px;color:var(--c-text-lt);margin:16px 0 32px}
.error-link{display:inline-block;padding:12px 28px;background:var(--c-primary);color:#fff;border-radius:6px;font-weight:600;font-size:15px;transition:background var(--tr)}
.error-link:hover{background:var(--c-primary-dk);color:#fff}
/* ============================================
   FOOTER — 깔끔, 백그라운드 화이트, 상단 보더
   ============================================ */
.site-footer{background:var(--c-bg);border-top:1px solid var(--c-border);padding:48px 0 0}
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:0 40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer-inner h4{font-size:14px;font-weight:700;color:var(--c-heading);margin-bottom:16px}
.footer-inner p{font-size:14px;color:var(--c-text-lt);line-height:1.7}
.footer-inner ul{display:flex;flex-direction:column;gap:8px}
.footer-inner li{list-style:none}
.footer-inner a{font-size:14px;color:var(--c-text-lt);transition:color var(--tr)}
.footer-inner a:hover{color:var(--c-primary)}
.footer-col nav ul{display:flex;flex-direction:column;gap:8px}
.footer-col nav li{list-style:none}
.footer-col nav a{font-size:14px;color:var(--c-text-lt);padding:0}
.footer-col nav a:hover{color:var(--c-primary)}
.footer-bottom{
  max-width:var(--max-w);margin:0 auto;padding:24px 40px;
  border-top:1px solid var(--c-border);margin-top:40px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--c-text-lt);
}
.footer-bottom a{color:var(--c-text-lt)}
.footer-bottom a:hover{color:var(--c-primary)}
/* ============================================
   SCROLL TOP — 민트색 원형
   ============================================ */
.scroll-top-btn{
  position:fixed;bottom:32px;right:32px;z-index:900;
  width:48px;height:48px;border-radius:50%;border:none;
  background:var(--c-primary);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:all .3s ease;
}
.scroll-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top-btn:hover{background:var(--c-primary-dk);box-shadow:0 6px 20px rgba(0,0,0,.2)}
/* ============================================
   RESPONSIVE — TABLET (max-width: 768px)
   ============================================ */
@media(max-width:768px){
  :root{--hdr-h:60px}
  .site-nav{display:none}
  .mobile-menu-toggle{display:flex}
  .header-inner{padding:0 20px}
  .site-logo img{height:26px}
  .blog-label{font-size:.85rem}
  .hero-section{height:320px}
  .hero-title{font-size:1.8rem}
  .hero-logo{height:24px;margin-top:16px}
  .posts-section{padding:60px 0 40px}
  .posts-container{padding:0 20px}
  .category-label{margin-bottom:24px}
  .post-card{flex-direction:column;gap:0;margin-bottom:60px}
  .post-card-image-link{width:100%;height:200px;border-radius:3
  /* ============================================
   RESPONSIVE — TABLET (max-width: 768px)
   ============================================ */
@media(max-width:768px){
  :root{--hdr-h:60px}
  .site-nav{display:none}
  .mobile-menu-toggle{display:flex}
  .header-inner{padding:0 20px}
  .site-logo img{height:26px}
  .blog-label{font-size:.85rem}
  .hero-section{height:320px}
  .hero-title{font-size:1.8rem}
  .hero-logo{height:24px;margin-top:16px}
  .posts-section{padding:60px 0 40px}
  .posts-container{padding:0 20px}
  .category-label{margin-bottom:24px}
  .post-card{flex-direction:column;gap:0;margin-bottom:60px}
  .post-card-image-link{width:100%;height:200px;border-radius:3px;margin-right:0;margin-bottom:20px}
  .post-card-title{font-size:18px}
  .post-card-excerpt{font-size:14px}
  .post-card-tag{font-size:13px}
  .post-card-readmore{font-size:14px}
  .pagination{padding:32px 20px;gap:12px}
  .pagination a{padding:8px 16px;font-size:13px}
  .post-full{padding:32px 20px 60px}
  .post-full-title{font-size:24px}
  .post-full-content{font-size:15px}
  .post-full-content h2{font-size:20px;margin:40px 0 16px}
  .post-full-content h3{font-size:17px;margin:32px 0 12px}
  .post-full-content blockquote{padding:20px}
  .post-full-content pre{padding:16px;font-size:13px}
  .post-full-image{margin-bottom:28px}
  .breadcrumb-current{max-width:180px}
  .post-author-card{flex-direction:column;text-align:center;gap:12px;padding:20px}
  .related-posts{padding:40px 0}
  .related-posts-inner{padding:0 20px}
  .related-grid{grid-template-columns:1fr;gap:20px}
  .related-grid .post-card-image-link{height:200px}
  .tag-hero{min-height:200px}
  .tag-hero-title{font-size:1.6rem}
  .author-hero{padding:40px 20px}
  .author-hero-avatar{width:72px;height:72px}
  .author-hero-name{font-size:22px}
  .footer-inner{grid-template-columns:1fr;gap:28px;padding:0 20px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;padding:24px 20px}
  .scroll-top-btn{width:42px;height:42px;bottom:20px;right:20px}
  .page-full{padding:40px 20px 60px}
  .page-full-title{font-size:24px}
  .page-full-content{font-size:15px}
  .page-full-content h2{font-size:20px;margin:40px 0 16px}
  .page-full-content h3{font-size:17px;margin:32px 0 12px}
  .error-page{padding:80px 20px}
  .error-code{font-size:4rem}
  .post-full-content .kg-width-wide,
  .page-full-content .kg-width-wide{width:calc(100% + 40px);min-width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}
  .post-full-content .kg-width-full,
  .page-full-content .kg-width-full{width:calc(100% + 40px);min-width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}
}
/* ============================================
   RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ============================================ */
@media(max-width:480px){
  .hero-section{height:240px}
  .hero-title{font-size:1.4rem;padding:0 8px}
  .hero-logo{height:20px}
  .posts-section{padding:40px 0 20px}
  .post-card{margin-bottom:40px}
  .post-card-image-link{height:160px}
  .post-card-title{font-size:16px}
  .post-card-tags{gap:10px;margin-bottom:10px}
  .post-card-tag{font-size:12px}
  .post-card-excerpt{font-size:13px;line-height:1.8}
  .post-card-readmore{font-size:13px;margin-top:12px}
  .category-label{font-size:14px;letter-spacing:2px;margin-bottom:20px}
  .post-full-title{font-size:21px}
  .post-full-meta{font-size:12px}
  .post-full-content{font-size:14px;line-height:1.85}
  .post-full-content h2{font-size:18px}
  .post-full-content h3{font-size:16px}
  .post-full-content blockquote{padding:16px;font-size:13px}
  .post-full-content pre{padding:12px;border-radius:4px}
  .post-full-content table{font-size:13px}
  .post-full-content th,.post-full-content td{padding:8px 10px}
  .post-tag-chip{padding:4px 10px;font-size:12px}
  .post-author-card{padding:16px}
  .author-avatar{width:48px;height:48px}
  .tag-hero{min-height:160px}
  .tag-hero-title{font-size:1.3rem}
  .tag-hero-desc{font-size:13px}
  .author-hero-name{font-size:20px}
  .page-full-title{font-size:21px}
  .page-full-content{font-size:14px;line-height:1.85}
  .page-full-content h2{font-size:18px}
  .page-full-content h3{font-size:16px}
  .page-full-content blockquote{padding:16px;font-size:13px}
  .error-code{font-size:3rem}
  .error-message{font-size:15px}
  .footer-inner h4{font-size:13px}
  .footer-inner p,.footer-inner a{font-size:13px}
  .footer-bottom{font-size:12px}
}
/* ============================================
   RESPONSIVE — LARGE DESKTOP (min-width: 1200px)
   ============================================ */
@media(min-width:1200px){
  .hero-section{height:640px}
  .hero-title{font-size:3.8rem}
  .header-inner{max-width:1100px}
}