/* ifvest 프랜차이즈 폐업률 아카이브 — 신뢰감 있는 데이터 톤 */
:root{
  --bg:#f7f8fa; --card:#fff; --ink:#1a2233; --muted:#6b7384; --line:#e6e9ef;
  --brand:#2f6df6; --brand-dark:#1f4fc4;
  --high:#e23b3b; --mid:#f0a020; --low:#1ca672;
  --high-bg:#fdeaea; --mid-bg:#fdf4e3; --low-bg:#e7f6ef;
  --radius:12px; --shadow:0 1px 3px rgba(20,30,60,.06),0 1px 2px rgba(20,30,60,.04);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.6;font-size:16px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}

/* 헤더 */
.site-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-weight:800;color:var(--ink);font-size:17px;text-decoration:none}
.logo:hover{text-decoration:none;opacity:.8}

/* 햄버거 버튼 */
.hamburger{background:transparent;border:none;padding:8px;margin:-8px -8px -8px 0;cursor:pointer;
  color:var(--ink);border-radius:8px;transition:background .12s}
.hamburger:hover{background:var(--bg)}
.hamburger svg{display:block}

/* 드로어 오버레이 */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;
  opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-overlay.is-open{opacity:1;pointer-events:auto}

/* 드로어 */
.drawer{position:fixed;top:0;right:0;bottom:0;width:84%;max-width:360px;
  background:var(--card);box-shadow:0 0 40px rgba(0,0,0,.2);z-index:50;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .25s ease-out}
.drawer.is-open{transform:translateX(0)}

/* 드로어 헤더 */
.drawer-header{display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.drawer-title{font-weight:700;font-size:16px;color:var(--ink)}
.drawer-close{background:transparent;border:none;padding:8px;margin:-8px -8px -8px 0;
  cursor:pointer;color:var(--ink);border-radius:8px;transition:background .12s}
.drawer-close:hover{background:var(--bg)}
.drawer-close svg{display:block}

/* 드로어 네비게이션 */
.drawer-nav{flex:1;overflow-y:auto;padding:12px 8px}
.drawer-item-wrap{margin-bottom:4px}
.drawer-item{display:flex;align-items:flex-start;gap:12px;padding:12px;
  border-radius:12px;transition:background .12s;text-decoration:none;color:inherit}
.drawer-item:hover{background:var(--bg);text-decoration:none}
.drawer-icon{font-size:20px;line-height:1;padding-top:2px}
.drawer-content{flex:1;min-width:0}
.drawer-label{display:block;font-weight:600;font-size:15px;color:var(--ink);line-height:1.3}
.drawer-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}

/* 예산 칩 */
.drawer-chips{display:flex;gap:8px;padding:0 12px 8px 48px}
.drawer-chip{display:inline-block;padding:6px 12px;border-radius:999px;
  background:var(--bg);color:var(--muted);font-size:12px;font-weight:600;
  text-decoration:none;transition:background .12s,color .12s}
.drawer-chip:hover{background:var(--brand);color:#fff;text-decoration:none}

/* 드로어 하단 CTA */
.drawer-footer{padding:16px;border-top:1px solid var(--line);flex-shrink:0}
.drawer-cta{display:block;width:100%;text-align:center;padding:14px;
  border-radius:12px;background:var(--brand);color:#fff;font-weight:700;
  font-size:15px;text-decoration:none;transition:opacity .12s}
.drawer-cta:hover{opacity:.9;text-decoration:none}

main.wrap{padding-top:20px;padding-bottom:40px;min-height:60vh}

/* 브레드크럼 */
.breadcrumb{font-size:13px;color:var(--muted);margin:4px 0 16px}
.breadcrumb a{color:var(--muted)}
.breadcrumb span{color:var(--ink)}

/* 페이지 타이틀 */
.page-title{font-size:24px;font-weight:800;margin:0 0 6px;letter-spacing:-.02em}
.page-sub{color:var(--muted);font-size:14px;margin:0 0 24px}
h2.sec{font-size:18px;font-weight:700;margin:32px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--line)}

/* 히어로(개별 브랜드) */
.hero{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;margin-bottom:20px}
.hero .brand-name{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0}
.hero .corp{color:var(--muted);font-size:14px;margin:4px 0 16px}
.hero .metrics{display:flex;flex-wrap:wrap;gap:12px}
.metric{flex:1;min-width:130px;background:var(--bg);border-radius:10px;padding:14px 16px;text-align:center}
.metric .v{font-size:28px;font-weight:800;line-height:1.1}
.metric .l{font-size:12px;color:var(--muted);margin-top:4px}

/* 위험 배지 */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.risk-high{color:var(--high);background:var(--high-bg)}
.risk-mid{color:var(--mid);background:var(--mid-bg)}
.risk-low{color:var(--low);background:var(--low-bg)}
.risk-na{color:var(--muted);background:#eef0f4}
.metric .v.risk-high{color:var(--high)}
.metric .v.risk-mid{color:var(--mid)}
.metric .v.risk-low{color:var(--low)}

/* 표 */
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);font-size:14px}
th,td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
thead th{background:#f0f2f6;font-weight:700;color:var(--muted);font-size:12px;
  text-transform:uppercase;letter-spacing:.03em}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbfd}
td.rank{font-weight:800;color:var(--muted);width:36px}
td.name{font-weight:600}
.num{font-variant-numeric:tabular-nums}

/* 랭킹 탭 (폐업 위험 / 생존 안정) */
.rank-tabs{display:flex;gap:8px;margin:8px 0 14px}
.rank-tab{flex:1;padding:12px 10px;font-size:15px;font-weight:700;cursor:pointer;
  background:var(--card);color:var(--muted);border:1px solid var(--line);
  border-radius:10px;transition:background .12s,color .12s,border-color .12s}
.rank-tab:hover{border-color:var(--brand)}
.rank-tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.rank-panel[hidden]{display:none}
.panel-cap{font-size:13px;color:var(--muted);font-weight:600;margin:0 0 8px}
.more-wrap{text-align:center;margin:16px 0 8px}
#more-btn{padding:11px 28px;font-size:14px;font-weight:700;cursor:pointer;
  background:var(--card);color:var(--brand-dark);border:1px solid var(--line);
  border-radius:999px;box-shadow:var(--shadow);transition:background .12s,border-color .12s}
#more-btn:hover{background:#f0f4ff;border-color:var(--brand)}

/* 카드 그리드(인덱스 분야) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:8px}
.cat-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.cat-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,30,60,.1);text-decoration:none}
.cat-card .t{font-size:18px;font-weight:800;color:var(--ink)}
.cat-card .c{color:var(--muted);font-size:13px;margin-top:6px}

/* 브랜드 리스트(분야 내) */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px}
.brand-row .meta{min-width:0}
.brand-row .bn{font-weight:700;font-size:15px}
.brand-row .bs{color:var(--muted);font-size:12px}

/* 광고 슬롯 */
.ad-slot{margin:24px 0;border-radius:var(--radius)}
/* 광고 미게재(unfilled) 시 빈 공간 제거: AdSense가 채우지 못하면 슬롯을 접는다 */
.ad-slot:has(ins[data-ad-status="unfilled"]){display:none}
.ad-slot ins[data-ad-status="unfilled"]{display:none!important}
.ad-placeholder{display:flex;align-items:center;justify-content:center;
  background:#eef0f4;color:#aab0bd;font-size:13px;border:1px dashed #ccd2dd}

/* 정보 박스 */
.note{background:#eef4ff;border:1px solid #d6e4ff;border-radius:10px;padding:14px 16px;
  font-size:13px;color:#2b4a87;margin:16px 0}
.note strong{color:var(--brand-dark)}

/* 전체 브랜드 색인 (스켈레톤) */
.brand-index{list-style:none;padding:0;margin:16px 0;
  columns:3;column-gap:24px}
.brand-index li{break-inside:avoid;margin:0 0 6px;font-size:13px}
.brand-index a{color:var(--brand-dark);text-decoration:none}
.brand-index a:hover{text-decoration:underline}
@media(max-width:600px){.brand-index{columns:1}}

/* 푸터 */
.site-footer{background:var(--card);border-top:1px solid var(--line);padding:24px 0;margin-top:40px}
.disclaimer{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 10px}
.footer-links{font-size:13px;margin:0 0 10px}
.footer-links a{color:var(--brand-dark);text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.copyright{font-size:12px;color:#9aa1b0;margin:0}

/* 정적 정책 페이지 (소개/개인정보/문의) */
.static-page{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:28px;margin:20px 0;line-height:1.75;font-size:15px;color:var(--ink)}
.static-page h1{font-size:24px;margin:0 0 18px}
.static-page h2{font-size:17px;margin:24px 0 8px;color:var(--brand-dark)}
.static-page p{margin:0 0 12px}
.static-page a{color:var(--brand)}
.contact-email{background:var(--bg);border-radius:8px;padding:12px 14px;font-size:15px}

/* 모바일 */
/* 브랜드 인사이트 섹션 (B·C등급 산문 블록) */
.brand-insight{margin:2rem 0;padding:1.25rem 1.5rem;background:var(--card);
  border-left:4px solid var(--brand);border-radius:var(--radius)}
.brand-insight h2.sec{margin-top:0;margin-bottom:0.75rem;font-size:1.1rem}
.brand-insight p{margin:0.5rem 0}
.brand-insight ul{margin:0.5rem 0;padding-left:1.5rem}
.brand-insight ul li{margin:0.3rem 0}
.brand-insight a{font-weight:500}

@media(max-width:600px){
  .page-title{font-size:21px}
  .hero{padding:18px}
  .hero .brand-name{font-size:22px}
  .metric .v{font-size:24px}
  th,td{padding:9px 8px;font-size:13px}
  th:nth-child(n+5),td:nth-child(n+5){display:none} /* 좁은 화면 보조열 숨김 */
  .brand-insight{padding:1rem;margin:1.5rem 0}
}