/* ==========================================================================
   BLOG PAGE — themed to the 오피스타 spa UI (navy / green / mint)
   ========================================================================== */
:root{
  --navy:#132b4a;
  --navy-dark:#0d2038;
  --navy-darker:#0a1a2e;
  --green:#12cf6c;
  --green-dark:#0eb75e;
  --mint:#e9f9ef;
  --mint-soft:#f2fbf5;
  --text:#243b53;
  --muted:#7b8a9a;
  --border:#e8eef4;
  --white:#ffffff;
  --shadow:0 15px 40px rgba(19,43,74,.12);
  --transition:.3s ease;
}
.subs{
  color:white;padding:20px;display:flex;justify-content:center;align-items:center;background:#48bf94;border-radius:10px;
}
/* ── Entry animation ── */
@keyframes blogFadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:none;}
}

/* ==========================================================================
   PAGE HERO
   ========================================================================== */
.blog-hero{
  background:linear-gradient(135deg,var(--mint) 0%,#f6fffb 100%);
  padding:76px 0 66px;text-align:center;position:relative;overflow:hidden;
}
.blog-hero .container{position:relative;z-index:1;}
.blog-hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);color:var(--green-dark);
  font-size:13px;font-weight:700;padding:8px 18px;border-radius:50px;
  box-shadow:0 6px 18px rgba(19,43,74,.08);margin-bottom:18px;
  animation:blogFadeUp .6s ease both;
}
.blog-hero h1{
  font-size:clamp(30px,4.5vw,48px);color:var(--navy);font-weight:900;
  letter-spacing:-.5px;animation:blogFadeUp .6s ease .1s both;
}
.blog-hero h1 em{color:var(--green);font-style:normal;}
.blog-hero p{
  color:var(--muted);font-size:15.5px;margin-top:12px;line-height:1.7;
  animation:blogFadeUp .6s ease .2s both;
}
.blog-crumb{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-size:13px;color:var(--muted);animation:blogFadeUp .6s ease .3s both;
}
.blog-crumb a{color:var(--green);font-weight:700;text-decoration:none;transition:var(--transition);}
.blog-crumb a:hover{color:var(--green-dark);}
.blog-crumb i{font-size:10px;color:#b7c4d0;}
.blog-crumb span{color:var(--navy);font-weight:600;}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.blog-section{padding:70px 0 30px;}

/* ==========================================================================
   CATEGORY FILTER
   ========================================================================== */
.blog-filter{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;
  animation:blogFadeUp .6s ease both;
}
.blog-filter .pill{
  padding:9px 20px;border-radius:30px;border:1.5px solid var(--border);
  font-size:13.5px;font-weight:700;color:var(--navy);background:var(--white);
  cursor:pointer;transition:var(--transition);user-select:none;
}
.blog-filter .pill:hover{border-color:var(--green);color:var(--green-dark);}
.blog-filter .pill.active{
  background:var(--navy);border-color:var(--navy);color:#fff;
}

/* ==========================================================================
   FEATURED POST (latest)
   ========================================================================== */
.featured-post{
  display:grid;grid-template-columns:1fr;
  width:100%;
  background:var(--white);border:1px solid var(--border);border-radius:26px;
  overflow:hidden;box-shadow:0 10px 30px rgba(19,43,74,.07);
  transition:var(--transition);animation:blogFadeUp .7s ease both;
}
.featured-post:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent;}

.featured-media{
  position:relative;display:block;min-height:320px;background:var(--mint);overflow:hidden;
}
.featured-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.featured-post:hover .featured-media img{transform:scale(1.06);}

.featured-badge{
  position:absolute;top:18px;left:18px;z-index:2;
  background:var(--green);color:#fff !important;
  box-shadow:0 6px 16px rgba(18,207,108,.4);
}
.featured-badge i{font-size:10px;}

.featured-body{
  padding:44px 46px;display:flex;flex-direction:column;justify-content:center;gap:12px;
}
.post-tag{
  display:inline-flex;align-self:flex-start;
  background:var(--mint);color:var(--green-dark);
  font-size:12px;font-weight:800;letter-spacing:.3px;
  padding:5px 14px;border-radius:20px;
}
.featured-body h2{margin:0;line-height:1.35;}
.featured-body h2 a{
  color:var(--navy);font-size:clamp(20px,2.4vw,28px);font-weight:800;
  text-decoration:none;
  background:linear-gradient(var(--green),var(--green)) left bottom / 0 3px no-repeat;
  transition:background-size .4s ease,color .3s ease;
}
.featured-body h2 a:hover{color:var(--green-dark);background-size:100% 3px;}
.featured-body p{color:var(--muted);font-size:14.5px;line-height:1.85;margin:0;}

.read-more-btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  background:var(--navy);color:#fff;text-decoration:none;
  font-size:13.5px;font-weight:700;padding:13px 28px;border-radius:50px;
  transition:var(--transition);margin-top:6px;
}
.read-more-btn i{transition:transform var(--transition);}
.read-more-btn:hover{background:var(--green);transform:translateY(-2px);box-shadow:0 8px 20px rgba(18,207,108,.35);}
.read-more-btn:hover i{transform:translateX(4px);}

/* ==========================================================================
   BLOG LAYOUT — main column + sidebar
   ========================================================================== */
.blog-layout{
  display:grid;grid-template-columns:2.1fr 1fr;gap:44px;align-items:start;
  margin-top:14px;
}
.blog-main{min-width:0;}

/* ==========================================================================
   GRID HEADING DIVIDER
   ========================================================================== */
.blog-grid-head{
  display:flex;align-items:center;gap:18px;margin:56px 0 26px;
}
.blog-grid-head h3{
  color:var(--navy);font-size:20px;font-weight:800;white-space:nowrap;margin:0;
  padding-left:14px;border-left:4px solid var(--green);
}
.blog-grid-head .grid-line{flex:1;height:1px;background:linear-gradient(to right,#dfe8f0,transparent);}

/* ==========================================================================
   BLOG CARD GRID
   ========================================================================== */
.blog-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:26px;
}
.blog-card{
  background:var(--white);border:1px solid var(--border);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:var(--transition);animation:blogFadeUp .7s ease both;
}
.blog-card:nth-child(2n){animation-delay:.1s;}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent;}

.card-media{
  position:relative;display:block;height:190px;background:var(--mint);overflow:hidden;
}
.card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.blog-card:hover .card-media img{transform:scale(1.08);}

.media-placeholder{
  width:100%;height:100%;min-height:190px;display:flex;align-items:center;justify-content:center;
  font-size:50px;color:var(--green);opacity:.75;
  background:radial-gradient(circle at 30% 30%,#d9f5e5,var(--mint));
}
.featured-media .media-placeholder{font-size:84px;min-height:320px;}

.cat-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(13,32,56,.85);color:#fff;backdrop-filter:blur(4px);
  font-size:11.5px;font-weight:700;letter-spacing:.4px;
  padding:5px 14px;border-radius:20px;
}

.blog-card .card-body{
  padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;
}
.blog-meta{
  display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--muted);
}
.blog-meta span{display:inline-flex;align-items:center;gap:6px;}
.blog-meta i{color:var(--green);font-size:12px;}

.blog-card h3{margin:0;line-height:1.5;}
.blog-card h3 a{
  color:var(--navy);font-size:16.5px;font-weight:800;text-decoration:none;
  transition:var(--transition);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card h3 a:hover{color:var(--green);}
.blog-card p{
  color:var(--muted);font-size:13.5px;line-height:1.75;margin:0;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.read-more{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  color:var(--green);font-size:13px;font-weight:700;text-decoration:none;
  padding-top:6px;transition:var(--transition);
}
.read-more i{font-size:11px;transition:transform var(--transition);}
.read-more:hover{color:var(--green-dark);}
.read-more:hover i{transform:translateX(4px);}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.blog-sidebar{
  display:flex;flex-direction:column;gap:24px;
  position:sticky;top:100px;
}
.sidebar-box{
  background:var(--white);border:1px solid var(--border);border-radius:20px;
  padding:26px;animation:blogFadeUp .7s ease both;
}
.sidebar-box h5{
  display:flex;align-items:center;gap:9px;
  margin:0 0 18px;font-size:15.5px;font-weight:800;color:var(--navy);
  padding-bottom:14px;border-bottom:2px solid var(--mint);
}
.sidebar-box h5 i{color:var(--green);font-size:14px;}

/* Popular posts */
.sb-post{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.sb-post:last-child{border-bottom:none;padding-bottom:0;}
.sb-post:first-child{padding-top:0;}
.sb-thumb{
  width:52px;height:52px;border-radius:12px;flex-shrink:0;overflow:hidden;
  background:var(--mint);display:flex;align-items:center;justify-content:center;
  color:var(--green);font-size:18px;
}
.sb-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sb-post-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.sb-post-title{
  color:var(--navy);font-size:13.5px;font-weight:700;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:var(--transition);
}
.sb-post:hover .sb-post-title{color:var(--green-dark);}
.sb-post-date{color:var(--muted);font-size:11.5px;}

/* Category list */
.sb-cat-list{list-style:none;margin:0;padding:0;}
.sb-cat-list li{border-bottom:1px solid var(--border);}
.sb-cat-list li:last-child{border-bottom:none;}
.sb-cat-list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 2px;color:var(--text);font-size:13.5px;font-weight:600;
  text-decoration:none;transition:var(--transition);
}
.sb-cat-list a:hover{color:var(--green-dark);padding-left:6px;}
.sb-cat-list a span{
  background:var(--mint);color:var(--green-dark);font-size:11px;font-weight:800;
  padding:3px 9px;border-radius:20px;
}

/* Newsletter box */
.newsletter-box{background:var(--navy);border-color:var(--navy);}
.newsletter-box h5{color:#fff;border-bottom-color:rgba(255,255,255,.15);}
.newsletter-box h5 i{color:var(--green);}
.newsletter-box p{color:#c3cedb;font-size:13px;line-height:1.7;margin:0 0 18px;}
.sb-newsletter-form{display:flex;flex-direction:column;gap:10px;}
.sb-newsletter-form input{
  width:100%;padding:12px 16px;border-radius:10px;border:1.5px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);color:#fff;font-size:13.5px;
}
.sb-newsletter-form input::placeholder{color:#8fa0b3;}
.sb-newsletter-form input:focus{outline:none;border-color:var(--green);}
.sb-newsletter-form button{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green);color:var(--navy-darker);border:none;
  padding:12px;border-radius:10px;font-size:13.5px;font-weight:800;cursor:pointer;
  transition:var(--transition);
}
.sb-newsletter-form button:hover{background:#fff;}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty-state{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--mint-soft);border:1px dashed #cdeeda;border-radius:22px;
  padding:70px 30px;text-align:center;animation:blogFadeUp .6s ease both;
}
.empty-state i{font-size:52px;color:var(--green);margin-bottom:6px;}
.empty-state b{color:var(--navy);font-size:18px;}
.empty-state span{color:var(--muted);font-size:14px;}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:44px;flex-wrap:wrap;
}
.pagination .page-numbers{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 6px;
  border-radius:50%;background:var(--white);color:var(--navy);
  font-weight:700;font-size:.9rem;border:1px solid #e3ebf2;
  text-decoration:none;transition:var(--transition);
}
.pagination a.page-numbers:hover{
  background:var(--mint);color:var(--green-dark);border-color:var(--green);
  transform:translateY(-2px);
}
.pagination .page-numbers.current{
  background:var(--green);color:#fff;border-color:var(--green);
  box-shadow:0 8px 20px rgba(18,207,108,.35);
}
.pagination .page-numbers.dots{
  background:transparent;border-color:transparent;color:var(--muted);
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next{font-size:.78rem;}
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover{
  background:var(--navy);color:#fff;border-color:var(--navy);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){
  .blog-layout{grid-template-columns:1fr;}
  .blog-sidebar{
    position:static;
    flex-direction:row;flex-wrap:wrap;
  }
  .sidebar-box{flex:1 1 260px;}
}
@media(max-width:1024px){
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .featured-post{grid-template-columns:1fr;}
  .featured-media{min-height:260px;}
  .featured-body{padding:32px;}
}
@media(max-width:700px){
  .blog-sidebar{flex-direction:column;}
}
@media(max-width:600px){
  .blog-hero{padding:56px 0 48px;}
  .blog-section{padding:50px 0 20px;}
  .blog-grid{grid-template-columns:1fr;}
  .featured-body{padding:26px 22px;}
  .blog-grid-head{margin:44px 0 20px;}
  .blog-filter{gap:8px;}
  .blog-filter .pill{padding:8px 16px;font-size:13px;}
  .pagination .page-numbers{min-width:38px;height:38px;font-size:.82rem;}
}