/* =====================================================================
   블로핏 홈페이지 스타일시트
   ---------------------------------------------------------------------
   디자인을 바꾸려면 이 파일만 건드리면 됩니다. index.html은 내용(텍스트·구조)만 담고 있습니다.
   1) 색·글꼴·간격은 맨 위 :root 토큰에서 바꾸세요. 대부분의 디자인 변경은 여기서 끝납니다.
   2) 섹션별 스타일은 아래에 순서대로 있습니다 (헤더 → 히어로 → 카테고리 → 숫자 → 서비스 → 진행 → 요금 → 비교 → 업종 → 노출예시 → FAQ → 문의 → 푸터).
   3) 건드리면 안 되는 것: index.html의 id 값(#service, #pricing 등 — 메뉴/버튼 이동에 쓰임), 클래스 이름, 맨 아래 @media 반응형 규칙의 존재.
   ===================================================================== */

/* ---------- 1. 디자인 토큰 (여기만 바꿔도 전체 톤이 바뀜) ---------- */
:root{
  /* 밝은 영역 */
  --paper:#F6F5F1;          /* 페이지 배경 */
  --paper-raised:#FFFFFF;   /* 카드·표 배경 */
  --ink:#232220;            /* 본문 글자 */
  --ink-soft:#5B584F;       /* 보조 글자 */
  --ink-faint:#928D7F;      /* 흐린 글자·라벨 */
  --line:#E1DDD1;           /* 테두리·구분선 */

  /* 포인트 색 (버튼·강조) */
  --brass:#8B5E24;
  --brass-strong:#6E4A1C;
  --brass-tint:#EFE4CD;

  /* 어두운 영역 (헤더·히어로·문의·푸터) */
  --night:#12161C;
  --night-raised:#1A2029;
  --night-ink:#EDEFF2;
  --night-soft:#AEB6C2;
  --night-line:#2A313D;
  --night-brass:#D2A461;
  --night-brass-strong:#E8C489;

  /* 기타 */
  --good:#3F7A5C; --good-tint:#E1EEE6;
  --shadow: 0 1px 2px rgba(35,34,32,.05), 0 12px 32px -18px rgba(35,34,32,.25);

  /* 글꼴 */
  --font-body:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --font-logo:Georgia,"Noto Serif KR","Iowan Old Style",serif;
  --font-mono:"SF Mono","Cascadia Mono",Consolas,monospace;

  /* 크기·간격 */
  --radius:14px;
  --radius-sm:10px;
  --section-pad:88px;
  --wrap-max:1080px;
}

/* ---------- 2. 기본 ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0; background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word;   /* 한글 줄바꿈: 단어 단위로 */
}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:var(--wrap-max); margin:0 auto; padding:0 24px;}
.wordmark{font-family:var(--font-logo); font-weight:700; letter-spacing:.14em; font-size:20px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:8px; font-weight:700; font-size:15px; border:1px solid transparent; cursor:pointer; white-space:nowrap;}
.btn-brass{background:var(--brass); color:#fff;}
.btn-brass:hover{background:var(--brass-strong);}
.btn-ghost{background:transparent; border-color:var(--night-line); color:var(--night-ink);}
.btn-ghost:hover{border-color:var(--night-brass);}
.eyebrow{font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--brass-strong); margin:0 0 12px;}
h2{font-size:34px; font-weight:900; letter-spacing:-.01em; line-height:1.25; margin:0 0 14px; text-wrap:balance;}
.lede{font-size:17px; color:var(--ink-soft); max-width:62ch; margin:0 0 36px;}
section{padding:var(--section-pad) 0;}
section.alt{background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- 3. 헤더 ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(18,22,28,.92); backdrop-filter:blur(8px); color:var(--night-ink); border-bottom:1px solid var(--night-line);}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px;}
.nav-links{display:flex; gap:24px; font-size:14px; color:var(--night-soft);}
.nav-links a:hover{color:var(--night-ink);}
.nav-cta{display:flex; gap:10px; align-items:center;}
.nav-cta .btn{padding:9px 16px; font-size:13.5px;}

/* ---------- 4. 히어로 ---------- */
.hero{background:var(--night); color:var(--night-ink); padding:96px 0 72px;}
.hero .eyebrow{color:var(--night-brass-strong);}
.hero h1{font-size:54px; font-weight:900; line-height:1.18; letter-spacing:-.015em; margin:0 0 20px; max-width:14em; text-wrap:balance;}
.hero .lede{color:var(--night-soft); font-size:19px; max-width:56ch; margin-bottom:34px;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px;}
.chips{display:flex; gap:10px; flex-wrap:wrap;}
.chip{font-size:13px; color:var(--night-soft); border:1px solid var(--night-line); border-radius:999px; padding:6px 14px;}
.chip b{color:var(--night-brass-strong);}

/* ---------- 5. 카테고리 버튼 띠 (윌메이드식 상품 메뉴) ---------- */
.catbar{background:var(--night-raised); border-top:1px solid var(--night-line); border-bottom:1px solid var(--night-line); padding:22px 0;}
.cats{display:grid; grid-template-columns:repeat(6,1fr); gap:10px;}
.cat{display:block; background:var(--night); border:1px solid var(--night-line); border-radius:var(--radius-sm); padding:14px 14px 13px; color:var(--night-ink); transition:border-color .15s, transform .15s;}
.cat:hover{border-color:var(--night-brass); transform:translateY(-2px);}
.cat b{display:block; font-size:14.5px; margin-bottom:3px;}
.cat span{display:block; font-size:11.5px; color:var(--night-soft); line-height:1.4;}
.cat .new{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--night); background:var(--night-brass); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle;}

/* ---------- 6. 핵심 숫자 ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.stat{background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:22px 22px 20px; box-shadow:var(--shadow);}
.stat b{display:block; font-family:var(--font-mono); font-size:30px; color:var(--brass-strong); letter-spacing:-.02em;}
.stat span{font-size:13.5px; color:var(--ink-soft);}

/* ---------- 7. 서비스 카드 ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 28px; box-shadow:var(--shadow);}
.card.tint{background:var(--brass-tint); border-color:var(--brass);}
.card .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--brass-strong); text-transform:uppercase; display:block; margin-bottom:10px;}
.card h3{font-size:20px; margin:0 0 10px; letter-spacing:-.01em;}
.card p{font-size:14.5px; color:var(--ink-soft); margin:0; line-height:1.65;}
.card ul{margin:12px 0 0; padding-left:18px;}
.card li{font-size:13.5px; color:var(--ink-soft); margin-bottom:5px;}
.feature-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px;}
.feature{border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; background:var(--paper);}
.feature h4{font-size:15px; margin:0 0 6px; display:flex; align-items:center; gap:8px;}
.feature h4::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--brass); flex:none;}
.feature p{font-size:13px; color:var(--ink-soft); margin:0;}

/* ---------- 8. 진행 방식 ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.step{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow);}
.step .n{font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--brass);}
.step h3{font-size:19px; margin:10px 0 8px;}
.step p{font-size:14.5px; color:var(--ink-soft); margin:0;}

/* ---------- 9. 요금표 ---------- */
.price-wrap{display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start;}
table{width:100%; border-collapse:collapse; font-size:15px; background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
thead th{text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:14px 18px 10px; border-bottom:1px solid var(--line); background:var(--paper);}
tbody td{padding:12px 18px; border-bottom:1px solid var(--line); color:var(--ink);}
tbody tr:last-child td{border-bottom:none;}
tbody tr.hl td{background:var(--brass-tint);}
.price-table tbody td:last-child{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; color:var(--brass-strong); text-align:right; white-space:nowrap;}
.table-wrap{overflow-x:auto;}
.price-note{font-size:13px; color:var(--ink-faint); margin:12px 0 0;}
.side-card{background:var(--night); color:var(--night-ink); border-radius:var(--radius); padding:28px;}
.side-card h3{font-size:20px; margin:0 0 10px;}
.side-card p{font-size:14.5px; color:var(--night-soft); margin:0 0 18px;}
.side-card .btn{width:100%; justify-content:center;}

/* ---------- 10. 타사 비교표 ---------- */
.compare thead th:nth-child(3){color:var(--brass-strong);}
.compare tbody td{vertical-align:top; font-size:14.5px;}
.compare tbody td:first-child{font-weight:700; white-space:nowrap; width:22%;}
.compare tbody td:nth-child(2){color:var(--ink-soft);}
.compare tbody td:nth-child(3){color:var(--ink); background:var(--brass-tint);}
.compare .ok{color:var(--good); font-weight:700;}

/* ---------- 11. 업종 ---------- */
.industry-chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
.industry-chips .chip{color:var(--ink-soft); border-color:var(--line); background:var(--paper-raised); font-size:13.5px;}

/* ---------- 12. 노출 예시 (블러 모크업) ---------- */
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.blogcard{background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:14px 16px;}
.bc-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.bc-avatar{width:20px; height:20px; border-radius:50%; background:#cfcabd; flex:none;}
.bc-who{font-size:11px; color:var(--ink-faint);}
.bc-title{font-size:14px; font-weight:700; margin-bottom:5px;}
.bc-body{font-size:11.5px; color:var(--ink-soft); margin-bottom:10px;}
.bc-thumbs{display:flex; gap:5px;}
.thumb{width:44px; height:44px; border-radius:5px; flex:none;}
.blur-sm{filter:blur(1.6px); user-select:none;}
.blur-md{filter:blur(2.4px); user-select:none;}
.proof-caption{font-size:12.5px; color:var(--ink-faint); margin-top:12px;}

/* ---------- 13. FAQ ---------- */
details{background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:0 22px; margin-bottom:10px;}
summary{cursor:pointer; font-weight:700; font-size:16px; padding:18px 0; list-style:none; display:flex; justify-content:space-between; gap:12px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; color:var(--brass); font-weight:400; font-size:20px;}
details[open] summary::after{content:"–";}
details p{margin:0 0 18px; font-size:15px; color:var(--ink-soft);}

/* ---------- 14. 문의 ---------- */
.contact{background:var(--night); color:var(--night-ink);}
.contact .eyebrow{color:var(--night-brass-strong);}
.contact h2{color:var(--night-ink);}
.contact .lede{color:var(--night-soft);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.contact-box{background:var(--night-raised); border:1px solid var(--night-line); border-radius:var(--radius); padding:26px;}
.contact-box h3{font-size:18px; margin:0 0 14px;}
.contact-box .desc{color:var(--night-soft); font-size:14.5px; margin:0 0 18px;}
.person{display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-top:1px solid var(--night-line);}
.person:first-of-type{border-top:none;}
.person .nm{font-weight:700;}
.person .nm span{font-size:12.5px; color:var(--night-soft); margin-left:6px; font-weight:400;}
.person a{font-family:var(--font-mono); color:var(--night-brass-strong); font-weight:700; font-size:16px;}
.kakao-btn{background:#FEE500; color:#191919; border-color:#FEE500; width:100%; justify-content:center;}
.kakao-btn:hover{background:#f5dc00;}

/* ---------- 15. 푸터 ---------- */
footer{background:#0D1116; color:var(--night-soft); padding:40px 0; font-size:12.5px; border-top:1px solid var(--night-line);}
footer .wordmark{color:var(--night-ink); font-size:16px; margin-bottom:12px; display:block;}
footer .biz{line-height:1.9;}
footer .links{margin-top:14px; display:flex; gap:16px;}
footer .links a:hover{color:var(--night-ink);}
footer .fine{margin-top:16px; color:#5f6772;}

/* ---------- 16. 반응형 (삭제 금지 — 모바일 레이아웃) ---------- */
@media (max-width:860px){
  section{padding:64px 0;}
  .nav-links{display:none;}
  .hero{padding:72px 0 56px;}
  .hero h1{font-size:36px;}
  .hero .lede{font-size:16.5px;}
  h2{font-size:27px;}
  .cats{grid-template-columns:repeat(3,1fr);}
  .stats, .grid-3, .steps, .proof-grid, .feature-row{grid-template-columns:1fr 1fr;}
  .grid-2, .price-wrap, .contact-grid{grid-template-columns:1fr;}
  .compare tbody td:first-child{white-space:normal;}
}
@media (max-width:520px){
  .cats{grid-template-columns:repeat(2,1fr);}
  .stats, .grid-3, .steps, .proof-grid, .feature-row{grid-template-columns:1fr;}
  .nav-cta .btn-tel{display:none;}
}