:root{
  --container: 1100px;
  --c-text: #222;
  --c-sub: #666;
  --c-line: #eee;
  --c-bg: #fff;
  --c-dark: #111;
  --c-green: #0a5;
  --c-blue: #08c;
  --c-yellow: #ffde00;

  /* Quickbar 높이(고정). 화면 작아지면 아래 media에서 자동 상향 */
  --qb-h: 80px;
}
html { scroll-behavior: smooth; }

*{box-sizing:border-box}
html, body { min-height: 100%; }
body{
  margin:0; color:var(--c-text); background:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,Arial,sans-serif;
  line-height:1.6;
  /* 본문이 퀵바에 가리지 않게 하단 여백을 항상 확보 */
  padding-bottom: calc(var(--qb-h) + 12px);
}
@supports (padding: env(safe-area-inset-bottom)){
  body{ padding-bottom: calc(var(--qb-h) + 12px + env(safe-area-inset-bottom)); }
}
body::after{
  content:"";
  display:block;
  height: calc(var(--qb-h) + 12px);  /* 살짝 여유 */
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a.text-link{color:#0a58ca;text-decoration:underline}
.wrap{max-width:var(--container);margin:0 auto;padding:0 16px}



/* Hero */

/* 컨테이너: 각지고, 배경/오버플로우 없음 */
.hero{
  position: relative;
  margin: 20px auto;
  border-radius: 0;
  background: transparent;
  max-width: var(--container);
}

/* 이미지: 원본 비율 유지(크롭 없음) */
.hero__img{
  display: block;
  width: 100%;
  height: auto;        
  object-fit: contain; 
  border-radius: 0;
}


.hero--plain .hero__overlay,
.hero--plain .hero__in{
  display: none !important;
}


.hero--cover .hero__img{
  height: 420px;
  object-fit: cover;
}
@media (max-width: 768px){
  .hero__img{
    width: 100% !important;
    height: auto !important;     
    object-fit: contain;        
    object-position: center;
  }
}
@media (max-width: 480px){
  .hero__img{
    width: 100% !important;
    height: auto !important;
  }
}


/* Badges */
.badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:.95;margin:10px 0 0;padding:0;list-style:none}
.badges li{background:#ffffff18;border:1px solid #ffffff40;color:#fff;padding:6px 10px;border-radius:999px;font-size:13px}

/* Hub body */
.hub{margin:34px auto 40px;line-height:1.85}
.hub h2{font-size:22px;margin:26px 0 10px}
.hub ul{padding-left:18px}
table{width:100%;border-collapse:collapse;margin:10px 0 16px}
th,td{border:1px solid var(--c-line);padding:10px;text-align:left;font-size:14px}
th{background:#fafafa}
ol{padding-left:20px}

/* FAQ */
details{border:1px solid var(--c-line);border-radius:10px;padding:12px 14px;margin:8px 0;background:#fff}
summary{cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}

/* Footer */
.footer{border-top:1px solid var(--c-line);padding:20px 0;margin-top:30px;font-size:14px;color:#555}
.footer__copy{color:#777;margin:6px 0 0}

/* Responsive */
@media (max-width: 768px){
  .hero__img{height:340px}
}
@media (max-width: 480px){
  .hero__img{height:300px}
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  body{background:#0b0b0b;color:#e8e8e8}
  .hero{background:#000}
  th{background:#181818}
  .footer{border-top-color:#222;color:#aaa}
}

/* === Top bar (sticky) === */
.topbar{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--c-line); z-index: 1002}
.topbar__in{max-width:var(--container);margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;font-size:18px;letter-spacing:.2px;white-space:nowrap}
.brand small{font-weight:600;color:var(--c-sub);margin-left:8px}
.nav-link {
  font-weight: 600;
  color: var(--c-text);
}
.nav-link:hover {
  text-decoration: underline;
}

/* === Bottom quickbar (fixed, mobile one-line with horizontal scroll) === */
.quickbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: #111; border-top: 1px solid #000;
  height: var(--qb-h) !important; box-sizing: border-box;
}
.quickbar__in{
  max-width: var(--container); margin: 0 auto; height: 100%;
  padding: 10px 12px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  align-items: center;
}
.qb{
  display: inline-block; text-align: center;
  padding: 12px 10px; border-radius: 10px; font-weight: 700;
  white-space: nowrap;
}
.qb--call{ background: rgb(0,94,47); color:#fff }
.qb--kakao{ background:#ffde00; color:#111 }
.qb--tg{ background:#08c; color:#fff }

/* Hover/Focus/Active */
.quickbar .qb{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, color .18s ease;
  will-change: transform; white-space: nowrap;
}
.quickbar .qb:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.quickbar .qb:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 10px 24px rgba(0,0,0,.22);
}
.quickbar .qb:active{ transform: translateY(0) scale(.98); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.quickbar .qb--call:hover{ filter: brightness(1.06) }
.quickbar .qb--kakao:hover{ filter: brightness(1.02) saturate(1.05) }
.quickbar .qb--tg:hover{ filter: brightness(1.07) }
@media (prefers-reduced-motion: reduce){
  .quickbar .qb{ transition: none !important; }
}

/* === Mobile override: keep one-line + horizontal scroll === */
@media (max-width: 640px){
  :root{ --qb-h: 80px; }  

  .quickbar__in{
    display: flex;            
    width: 100%;               
    justify-content: center;    
    gap: 8px;
    padding: 8px 10px;
    overflow-x: auto;          
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-left: 10px;  
    scroll-padding-right: 10px;
  }
  .quickbar__in::-webkit-scrollbar{ display: none; }

  .quickbar .qb{
    flex: 0 0 auto;             
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 14px;
  }
}

@media (max-width: 640px){
  .quickbar__in{ scroll-snap-type: x mandatory; }
  .quickbar .qb{ scroll-snap-align: start; }
}


/* === Posts grid (image + title + summary) === */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin:30px auto}
.post a{display:block}
.post__img{aspect-ratio:4/3;border-radius:0px;overflow:hidden;background:#f2f2f2;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:transform .25s ease, box-shadow .25s ease}
.post__img img{width:100%;height:100%;object-fit:cover;display:block}
.post__title{margin:10px 2px 6px;font-size:15px;font-weight:500;letter-spacing:-.2px}
.post__desc{margin:0 2px;color:var(--c-sub);font-size:14px}
.post a:hover .post__img{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.post a:focus-visible .post__img{outline:2px solid #0a58ca;outline-offset:2px}

/* === Reveal on scroll === */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);will-change:transform,opacity}
.reveal.show{opacity:1;transform:none}

/* === Table of Contents === */
.toc{
  border:1px solid var(--c-line);
  border-radius:12px;
  background:#fafafa;
  padding:14px 16px;
  margin:16px 0 26px;
}
.toc__title{
  display:block; font-weight:800; font-size:15px;
  margin:0 0 8px; color:var(--c-sub);
}

/* 가로 그리드 대신 세로 리스트로 */
.toc__list{
  list-style:none; padding:0; margin:0;
  display:block;             
  counter-reset: toc;            
}
.toc__list li{
  display:flex; align-items:center; gap:10px;
  padding:10px 2px;
  border-top:1px solid var(--c-line);
}
.toc__list li:first-child{ border-top:0; }
.toc__list li::before{
  counter-increment: toc;
  content: counter(toc) ".";
  width:1.6em; text-align:right;
  font-weight:800; color:var(--c-sub);
}
.toc__list a{
  flex:1; text-decoration:none; color:inherit; padding:4px 0;
}
.toc__list a:hover{ text-decoration:underline; }
.toc__list a:focus-visible{ outline:2px solid #0a58ca; outline-offset:2px; }

/* 다크 모드 */
@media (prefers-color-scheme: dark){
  .toc{ background:#121212; }
}

/* 스티키 탑바와 겹치지 않게 섹션 점프 여유 */
.hub h2[id]{ scroll-margin-top: 72px; }

/* ====== Hero lead (QuietPI) ====== */
:root{
  --q-brand:#333333;          /* 포인트 컬러 */
  --q-ink:#111214;            /* 본문색 */
  --q-ink-2:#5b626e;          /* 보조텍스트 */
  --q-bg:#f7f9ff;             /* 카드 배경 */
  --q-line:#e6eaf3;           /* 테두리 */
  --q-v:#004cff;
  --q-radius:16px;
  --q-shadow:0 10px 24px rgba(17,25,40,.08);
}

/* 카드형 리드 섹션 */
.q-mast{
  max-width: 1040px;
  margin: clamp(16px,3vw,32px) auto;
  padding: clamp(16px,2.5vw,28px) clamp(16px,2.5vw,28px);
  background: linear-gradient(180deg,#ffffff, var(--q-bg));
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius);
  box-shadow: var(--q-shadow);
}

.q-mast__kicker{
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--q-brand);
  margin: 0 0 .25rem;
  font-weight: 700;
}

.q-mast__title{
  font-size: clamp(22px, 3.6vw, 40px);
  line-height: 1.22;
  margin: 0 .0 .4rem 0;
  color: var(--q-ink);
  font-weight: 800;
}

.q-mast__sub{
  margin: .25rem 0 1rem;
  color: var(--q-ink-2);
  font-size: clamp(14px,1.4vw,16.5px);
}

/* 체크 아이콘 있는 포인트 리스트 */
.q-mast__bullets{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .6rem 1rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.2rem;
  color: var(--q-ink);
  font-size: clamp(13px,1.35vw,15.5px);
}
.q-mast__bullets li{ display:flex; align-items:flex-start; gap:.5rem; }
.q-mast__bullets svg{
  width: 18px; height: 18px; flex:0 0 18px;
  stroke: var(--q-v); stroke-width: 3; fill: none;
  margin-top: 2px;
}

/* 모바일 최적화 */
@media (max-width: 820px){
  .q-mast{ padding: 18px 16px; border-radius: 14px; }
  .q-mast__bullets{ grid-template-columns: 1fr; gap: .4rem; }
  .q-btn{ height: 40px; padding: 0 14px; }
}

/* 기존 hero 이미지와 간격 조정(중첩 방지용) */
.hero--plain{ margin-top: 10px; border-radius: 12px; overflow: hidden; }
.hero--plain .hero__img{ display:block; width:100%; height:auto; }

/* ===== case글 ===== */
:root { --case-gap: 18px; --case-max: 1100px; --ratio: 4/3; }

/* 컨테이너 */
.blog-wrap2 { max-width: var(--case-max); margin: 0 auto; padding: 24px 16px; border-top: 1px solid #e9edf3; }
.blog-head2 { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.blog-head2 h2 { margin:0; font-size:20px; letter-spacing:.2px; }
.blog-more2 { font-weight:700; font-size:14px; color:#0a58ca; text-decoration:none; }
.blog-more2:hover{ text-decoration:underline; }

/* 그리드 */
.blog-grid2{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--case-gap);
}
.blog-grid2 > li{ margin:0 !important; padding:0 !important; border:none !important; background:transparent !important; }

/* 카드(네모/제목 분리) */
.blog-item2{
  border:1px solid #e6eaf0 !important; background:#fff !important; border-radius:0 !important; 
  box-shadow:none !important; overflow:hidden !important;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.blog-item2:hover{ transform:translateY(-2px); border-color:#d7dde8; box-shadow:0 10px 24px rgba(17,25,40,.08); }

.blog-link2{ display:block !important; color:inherit !important; text-decoration:none !important; }

/* 썸네일 = 네모, 제목과 완전 분리(아래 영역) */
.blog-thumb2{
  aspect-ratio: var(--ratio); background:#f2f4f8; border-bottom:1px solid #eef2f6;
  overflow:hidden !important; margin:0 !important; padding:0 !important; border-radius:0 !important;
}
.blog-thumb2 img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }

/* 제목 영역(2줄 고정) */
.blog-title2{ padding:12px 10px 14px !important; margin:0 !important; border:none !important;
  font-size:15px; font-weight:700; line-height:1.35; color:#111;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em;
}
.blog-title2 a{ color:#111 !important; text-decoration:none !important; }

/* 스켈레톤 */
.blog-skel2 .blog-thumb2,
.blog-skel2 .sk-line{ 
  background: linear-gradient(90deg,#f5f7fb 25%,#eef2f8 37%,#f5f7fb 63%);
  background-size: 400% 100%;
  animation: blogShim 1.1s linear infinite;
}
.blog-skel2 .sk-line{ height:14px; border-radius:4px; margin:10px; }
@keyframes blogShim { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* 반응형 */
@media (max-width:960px){ .blog-grid2{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .blog-grid2{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .blog-grid2{ grid-template-columns:1fr; } }