index.html

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>코드크래프트 (CodeCraft) — 공공데이터로 만드는 생활정보 서비스</title>
<meta name="description" content="코드크래프트는 국토교통부·공정거래위원회·국세청 등 공공기관이 공개한 데이터를 누구나 이해할 수 있는 형태로 정리해 웹서비스로 제공합니다. 찾아요!홈즈, 집비, 가맹백서를 개발·운영합니다.">
<meta name="author" content="CodeCraft">
<link rel="canonical" href="https://code-craft-service.com/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="코드크래프트 (CodeCraft)">
<meta property="og:title" content="코드크래프트 (CodeCraft) — 공공데이터로 만드는 생활정보 서비스">
<meta property="og:description" content="공공데이터를 누구나 이해할 수 있는 형태로 정리해 웹서비스로 제공합니다. 찾아요!홈즈 · 집비 · 가맹백서를 개발·운영합니다.">
<meta property="og:url" content="https://code-craft-service.com/">
<meta property="og:image" content="https://code-craft-service.com/img/svc-homes.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="assets/favicon.ico">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
<style>
:root{
  --blue:#2f55f0;--blue2:#5a79ff;--deep:#0e1530;--ink:#121626;--muted:#6a7183;
  --line:#e7eaf2;--paper:#f6f7fb;--white:#fff;--mint:#19b98c;--max:1180px;
  --shadow:0 24px 70px rgba(29,52,115,.11);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--white);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;word-break:keep-all;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}
.mono{display:block;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.18em}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:60;background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}
.nav.scrolled{border-color:var(--line);box-shadow:0 6px 28px rgba(24,36,72,.05);background:rgba(255,255,255,.93)}
.nav-in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;letter-spacing:-.03em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:linear-gradient(145deg,var(--blue2),var(--blue));color:#fff;font-size:14px;font-weight:800;
  box-shadow:0 8px 18px rgba(47,85,240,.3)}
.brand small{display:block;margin-top:1px;color:#98a0b4;font-size:10px;font-weight:600;letter-spacing:.1em}
.nav nav{display:flex;gap:30px;font-size:14.5px;font-weight:600;color:#525a6d}
.nav nav a:hover{color:var(--blue)}
.nav-cta{display:inline-flex;align-items:center;padding:10px 18px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;transition:.2s}
.nav-cta:hover{background:var(--blue);transform:translateY(-1px)}

/* hero */
.hero{position:relative;overflow:hidden;padding:76px 0 0;
  background:radial-gradient(900px 520px at 78% 12%,#eaf0ff 0,transparent 62%),linear-gradient(180deg,#fbfcff,#f4f6fc)}
.hero:before{content:"";position:absolute;width:620px;height:620px;left:-300px;top:40px;border-radius:50%;
  background:#dde6ff;opacity:.5;filter:blur(6px)}
.hero-in{position:relative;padding:86px 0 96px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid #d7e0ff;
  border-radius:999px;background:rgba(255,255,255,.8);color:var(--blue);font-size:13px;font-weight:700}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(25,185,140,.14)}
.hero h1{margin:26px 0 0;font-size:clamp(34px,5vw,58px);line-height:1.18;letter-spacing:-.055em;font-weight:800}
.hero h1 b{color:var(--blue);font-weight:800}
.hero p{max-width:620px;margin:22px auto 0;color:#5a6276;font-size:clamp(15px,1.6vw,18px);line-height:1.8}
.actions{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 26px;
  border:1px solid transparent;border-radius:14px;background:var(--blue);color:#fff;font-size:15px;font-weight:700;
  box-shadow:0 14px 30px -14px rgba(47,85,240,.65);transition:.25s}
.btn:hover{transform:translateY(-3px)}
.btn.ghost{border-color:#d9deec;background:rgba(255,255,255,.9);color:var(--ink);box-shadow:none}
.hero-shot{position:relative;margin:58px auto -90px;max-width:960px}

/* browser mockup */
.mock{border:1px solid #dfe4f0;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 40px 90px -40px rgba(24,44,110,.45)}
.mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid #eceff6;background:#f8f9fc}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#e2e5ee}
.mock-url{flex:1;margin-left:9px;padding:5px 12px;border-radius:7px;background:#fff;border:1px solid #eceff6;
  color:#9aa1b2;font-size:11.5px;letter-spacing:-.01em}
.mock img{width:100%}

/* trust strip */
.trust{padding:128px 0 0;background:#fff}
.trust-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 34px;
  padding:26px 0;border-block:1px solid var(--line)}
.trust-in b{color:#4a5165;font-size:13px;font-weight:700}
.trust-in span{display:flex;align-items:center;gap:7px;color:#848b9c;font-size:13.5px;font-weight:600}
.trust-in span:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.45}

/* generic section */
.section{padding:108px 0}
.section.paper{background:var(--paper);border-block:1px solid var(--line)}
.head{max-width:720px}
.head.center{margin:auto;text-align:center}
.head h2{margin:14px 0 0;font-size:clamp(26px,3vw,38px);line-height:1.3;letter-spacing:-.05em;font-weight:800}
.head p{margin:18px 0 0;color:var(--muted);font-size:16.5px;line-height:1.82}

/* what we do */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.pillar{padding:34px 30px;border:1px solid var(--line);border-radius:22px;background:#fff;transition:.3s}
.pillar:hover{transform:translateY(-5px);border-color:#d3dbf3;box-shadow:var(--shadow)}
.pillar .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#eef2ff;color:var(--blue)}
.pillar .ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{margin:22px 0 9px;font-size:19px;letter-spacing:-.035em}
.pillar p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.78}

/* services */
.svc{display:grid;grid-template-columns:1fr 1.18fr;gap:62px;align-items:center;padding:86px 0;border-bottom:1px dashed #e2e6f0}
.svc:last-child{border-bottom:0;padding-bottom:20px}
.svc.rev .svc-copy{order:2}
.svc-no{color:#aab1c4;font-size:12px;font-weight:800;letter-spacing:.16em}
.svc h3{margin:15px 0 0;font-size:clamp(25px,2.6vw,33px);letter-spacing:-.05em;font-weight:800}
.svc .lead{margin:7px 0 0;color:var(--blue);font-size:15px;font-weight:700;letter-spacing:-.02em}
.svc .desc{margin:20px 0 0;color:#5c6376;font-size:15.5px;line-height:1.85}
.svc ul{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.svc li{position:relative;padding-left:26px;color:#525a6d;font-size:14.5px;line-height:1.6}
.svc li:before{content:"";position:absolute;left:3px;top:8px;width:11px;height:6px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.src{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:8px 14px;border-radius:999px;
  background:#f0f3ff;color:#4a5ea8;font-size:12.5px;font-weight:650}
.svc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.btn.sm{min-height:46px;padding:0 20px;font-size:14px;border-radius:12px}
.btn.play{background:#15181f}
.play-mark{width:15px;height:17px;flex:0 0 auto;clip-path:polygon(0 0,100% 50%,0 100%);
  background:linear-gradient(150deg,#35d6c5 0 34%,#ffd04a 35% 63%,#ff595d 64% 100%)}

/* approach */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.mini{padding:28px 26px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.mini:first-child{background:var(--deep);border-color:var(--deep);color:#fff}
.mini:nth-child(2){background:var(--blue);border-color:var(--blue);color:#fff}
.mini b{font-size:17.5px;letter-spacing:-.03em}
.mini p{margin:11px 0 0;font-size:14px;line-height:1.75;color:var(--muted)}
.mini:first-child p,.mini:nth-child(2) p{color:rgba(255,255,255,.78)}

/* contact */
.contact{padding:0 0 108px}
.box{position:relative;overflow:hidden;padding:78px 36px;border-radius:30px;text-align:center;color:#fff;
  background:linear-gradient(135deg,#4466ff,var(--blue) 46%,#1f3290);box-shadow:0 36px 76px -44px rgba(33,60,160,.72)}
.box:before,.box:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%}
.box:before{width:440px;height:440px;left:-240px;top:-220px}
.box:after{width:340px;height:340px;right:-140px;bottom:-250px}
.box h2{position:relative;margin:0;font-size:clamp(25px,3vw,37px);letter-spacing:-.05em;font-weight:800}
.box p{position:relative;margin:17px 0 0;color:#dce3ff;font-size:16px}
.mailto{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:16px 28px;
  border-radius:14px;background:#fff;color:var(--blue);font-size:16px;font-weight:750;transition:.25s}
.mailto:hover{transform:translateY(-3px)}

/* footer */
footer{border-top:1px solid var(--line);background:#fafbfe}
.footer-in{padding:52px 0;display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap}
.company-info{margin-top:16px;color:#7f8697;font-size:12.5px;line-height:1.9}
.company-info b{color:#3d4457}
.copyright{color:#9ba1ae;font-size:11.5px;line-height:1.9;text-align:right}
.footer-links{display:flex;gap:18px;margin-top:10px;font-size:12.5px;color:#7f8697}
.footer-links a:hover{color:var(--blue)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}
.reveal.on{opacity:1;transform:none}

@media(max-width:980px){
  .nav nav{display:none}
  .pillars,.grid4{grid-template-columns:1fr 1fr}
  .svc{grid-template-columns:1fr;gap:34px;padding:62px 0}
  .svc.rev .svc-copy{order:0}
  .trust{padding-top:120px}
}
@media(max-width:580px){
  .wrap{width:calc(100% - 32px)}
  .nav-in{height:66px}
  .hero-in{padding:62px 0 70px}
  .hero-shot{margin:40px auto -70px}
  .section{padding:78px 0}
  .pillars,.grid4{grid-template-columns:1fr}
  .box{padding:56px 22px;border-radius:22px}
  .footer-in{flex-direction:column;align-items:flex-start}
  .copyright{text-align:left}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
</style>
</head>
<body>

<header class="nav">
  <div class="wrap nav-in">
    <a class="brand" href="#top">
      <span class="brand-mark">&lt;/&gt;</span>
      <span>코드크래프트<small>CODECRAFT</small></span>
    </a>
    <nav>
      <a href="#services">서비스</a>
      <a href="#about">회사 소개</a>
      <a href="#approach">일하는 방식</a>
    </nav>
    <a class="nav-cta" href="mailto:director@code-craft-service.com">문의하기</a>
  </div>
</header>

<main id="top">

<section class="hero">
  <div class="wrap hero-in">
    <span class="eyebrow"><i></i>공공데이터 기반 웹서비스 개발·운영</span>
    <h1>흩어져 있는 공공데이터를,<br><b>매일 쓰는 서비스</b>로 만듭니다.</h1>
    <p>국가가 공개한 자료는 이미 충분합니다. 다만 흩어져 있고, 읽기 어렵습니다.
       코드크래프트는 그 데이터를 모으고 정리해 누구나 몇 번의 클릭으로 답을 찾을 수 있는 서비스로 만듭니다.</p>
    <div class="actions">
      <a class="btn" href="#services">운영 중인 서비스 보기</a>
      <a class="btn ghost" href="#about">회사 소개</a>
    </div>
    <div class="hero-shot">
      <div class="mock">
        <div class="mock-bar"><i></i><i></i><i></i><span class="mock-url">ayo.pe.kr</span></div>
        <img src="img/svc-homes.png" alt="찾아요!홈즈 서비스 화면" loading="lazy">
      </div>
    </div>
  </div>
</section>

<section class="trust">
  <div class="wrap">
    <div class="trust-in">
      <b>활용 중인 공공데이터</b>
      <span>국토교통부</span>
      <span>공정거래위원회</span>
      <span>국세청</span>
      <span>한국부동산원</span>
      <span>행정안전부</span>
    </div>
  </div>
</section>

<section class="section" id="about">
  <div class="wrap">
    <div class="head center reveal">
      <span class="mono">WHAT WE DO</span>
      <h2>데이터를 모으는 일부터, 매일 운영하는 일까지</h2>
      <p>기획과 개발에서 끝나지 않습니다. 매일 새로 공개되는 자료를 받아 반영하고,
         이용자가 검색으로 찾아올 수 있게 관리하는 것까지가 저희 일입니다.</p>
    </div>
    <div class="pillars">
      <div class="pillar reveal">
        <div class="ico"><svg viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/></svg></div>
        <h3>데이터 수집</h3>
        <p>공공기관이 공개하는 자료를 매일 자동으로 받아옵니다. 출처가 분명한 자료만 사용하고, 어디서 온 숫자인지 화면에 그대로 밝힙니다.</p>
      </div>
      <div class="pillar reveal">
        <div class="ico"><svg viewBox="0 0 24 24"><path d="M3 17l5-5 4 3 4-6 5 4"/><path d="M3 21h18"/><path d="M3 3v18"/></svg></div>
        <h3>서비스 개발</h3>
        <p>표와 숫자를 그대로 보여주지 않습니다. 비교하고 판단할 수 있는 화면으로 다시 설계해, 전문 지식이 없어도 읽히도록 만듭니다.</p>
      </div>
      <div class="pillar reveal">
        <div class="ico"><svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 100 18 9 9 0 000-18z"/><path d="M3.6 9h16.8M3.6 15h16.8"/><path d="M12 3c2.5 2.6 3.8 5.7 3.8 9S14.5 18.4 12 21c-2.5-2.6-3.8-5.7-3.8-9S9.5 5.6 12 3z"/></svg></div>
        <h3>운영과 유지보수</h3>
        <p>자료 갱신, 장애 대응, 검색 노출 관리를 상시로 합니다. 한 번 만들고 끝내는 외주가 아니라, 직접 운영하는 자체 서비스입니다.</p>
      </div>
    </div>
  </div>
</section>

<section class="section paper" id="services">
  <div class="wrap">
    <div class="head center reveal">
      <span class="mono">OUR SERVICES</span>
      <h2>운영 중인 서비스</h2>
      <p>모두 회원가입 없이 무료로 쓸 수 있습니다. 아래 주소에서 지금 바로 확인하실 수 있습니다.</p>
    </div>

    <div class="svc reveal">
      <div class="svc-copy">
        <span class="svc-no">SERVICE 01</span>
        <h3>찾아요!홈즈</h3>
        <p class="lead">집을 고를 때 필요한 정보를 한곳에</p>
        <p class="desc">아파트·빌라·오피스텔의 실제 거래 가격부터 청약 일정, 경매 물건, 동네 생활 정보까지
          흩어진 부동산 정보를 한 화면에서 비교할 수 있게 정리했습니다. 웹과 모바일 앱으로 제공합니다.</p>
        <ul>
          <li>매매·전세·월세 실거래가를 단지와 면적별로 비교</li>
          <li>아파트 청약·무순위·경매 공고를 한곳에서 확인</li>
          <li>궁금한 점을 대화하듯 물어보는 AI 안내</li>
        </ul>
        <span class="src">데이터 출처 · 국토교통부 실거래가 공개시스템</span>
        <div class="svc-actions">
          <a class="btn sm" href="https://ayo.pe.kr" target="_blank" rel="noopener">웹에서 보기</a>
          <a class="btn sm play" href="https://play.google.com/store/apps/details?id=kr.pe.ayo.app" target="_blank" rel="noopener"><span class="play-mark"></span>앱 내려받기</a>
        </div>
      </div>
      <div class="mock">
        <div class="mock-bar"><i></i><i></i><i></i><span class="mock-url">ayo.pe.kr</span></div>
        <img src="img/svc-homes.png" alt="찾아요!홈즈 메인 화면 — 실거래가·청약·경매 검색" loading="lazy">
      </div>
    </div>

    <div class="svc rev reveal">
      <div class="svc-copy">
        <span class="svc-no">SERVICE 02</span>
        <h3>집비</h3>
        <p class="lead">집값 말고, 집에 사는 비용</p>
        <p class="desc">집을 살 때의 가격은 많이들 이야기하지만, 매달 내는 관리비와 세금은 알아보기 어렵습니다.
          전국 아파트의 관리비 명세를 단지별로 찾아보고, 빌라·오피스텔은 공시가격 기준 재산세까지 확인할 수 있습니다.</p>
        <ul>
          <li>전국 2만여 단지의 관리비 명세를 항목별로 조회</li>
          <li>우리 단지가 지역 평균보다 비싼지 바로 비교</li>
          <li>연립·다세대·오피스텔은 공시가격 기준 세금 계산</li>
        </ul>
        <span class="src">데이터 출처 · 공동주택관리정보시스템(K-apt) · 국세청</span>
        <div class="svc-actions">
          <a class="btn sm" href="https://homecost.craftspace.co.kr" target="_blank" rel="noopener">웹에서 보기</a>
        </div>
      </div>
      <div class="mock">
        <div class="mock-bar"><i></i><i></i><i></i><span class="mock-url">homecost.craftspace.co.kr</span></div>
        <img src="img/svc-homecost.png" alt="집비 메인 화면 — 아파트 관리비 조회" loading="lazy">
      </div>
    </div>

    <div class="svc reveal">
      <div class="svc-copy">
        <span class="svc-no">SERVICE 03</span>
        <h3>가맹백서</h3>
        <p class="lead">창업 전에 확인하는 프랜차이즈 성적표</p>
        <p class="desc">공정거래위원회에 등록된 프랜차이즈 브랜드의 가맹점 수 변화, 개점과 폐점, 창업에 드는 비용,
          본부의 재무 상태를 연도별로 보여 줍니다. 광고 문구가 아니라 공시된 숫자로 브랜드를 비교할 수 있습니다.</p>
        <ul>
          <li>브랜드 6,800여 개의 가맹점 증감과 폐점 현황</li>
          <li>업종·지역별 가맹점 수와 평균 매출 비교</li>
          <li>가맹금·보증금 등 창업 비용과 계약 조건</li>
        </ul>
        <span class="src">데이터 출처 · 공정거래위원회 가맹사업거래</span>
        <div class="svc-actions">
          <a class="btn sm" href="https://francha.craftspace.co.kr" target="_blank" rel="noopener">웹에서 보기</a>
        </div>
      </div>
      <div class="mock">
        <div class="mock-bar"><i></i><i></i><i></i><span class="mock-url">francha.craftspace.co.kr</span></div>
        <img src="img/svc-francha.png" alt="가맹백서 메인 화면 — 프랜차이즈 가맹점 현황" loading="lazy">
      </div>
    </div>
  </div>
</section>

<section class="section" id="approach">
  <div class="wrap">
    <div class="head center reveal">
      <span class="mono">OUR APPROACH</span>
      <h2>숫자를 다룰 때 지키는 것</h2>
      <p>보기 좋게 만드는 것보다 틀리지 않는 것이 먼저라고 생각합니다.
         그래서 아래 네 가지는 서비스마다 화면에 그대로 구현해 두었습니다.</p>
    </div>
    <div class="grid4">
      <div class="mini reveal"><b>없는 숫자는 비워 둡니다</b><p>아직 공개되지 않은 항목은 &ldquo;집계 중&rdquo;으로 둡니다. 칸을 채우려고 추정하거나 평균으로 메우지 않습니다.</p></div>
      <div class="mini reveal"><b>언제 자료인지 같이 적습니다</b><p>&ldquo;2024년 말 기준&rdquo;, &ldquo;2026년 7월 공개분&rdquo;처럼 기준 시점을 화면 위에 답니다. 최신인 척하지 않습니다.</p></div>
      <div class="mini reveal"><b>원문까지 따라갈 수 있습니다</b><p>어느 기관의 어떤 자료를 썼는지 정리한 페이지를 서비스마다 따로 둡니다. 원문을 직접 확인하실 수 있습니다.</p></div>
      <div class="mini reveal"><b>빼 달라고 하면 뺍니다</b><p>공개된 자료라도 당사자가 원하면 내립니다. 삭제 요청 창구를 두고, 처리하며 받은 연락처는 보관하지 않습니다.</p></div>
    </div>
  </div>
</section>

<section class="contact">
  <div class="wrap">
    <div class="box reveal">
      <h2>함께할 일이 있다면 연락 주세요</h2>
      <p>서비스 제휴, 데이터 활용, 개발 문의 모두 환영합니다.</p>
      <a class="mailto" href="mailto:director@code-craft-service.com">director@code-craft-service.com</a>
    </div>
  </div>
</section>

</main>

<footer>
  <div class="wrap footer-in">
    <div>
      <a class="brand" href="#top"><span class="brand-mark">&lt;/&gt;</span><span>코드크래프트<small>CODECRAFT</small></span></a>
      <div class="company-info">
        <b>코드크래프트 (CodeCraft)</b><br>
        공공데이터 기반 웹서비스 개발·운영<br>
        문의 director@code-craft-service.com
      </div>
      <div class="footer-links">
        <a href="https://ayo.pe.kr" target="_blank" rel="noopener">찾아요!홈즈</a>
        <a href="https://homecost.craftspace.co.kr" target="_blank" rel="noopener">집비</a>
        <a href="https://francha.craftspace.co.kr" target="_blank" rel="noopener">가맹백서</a>
      </div>
    </div>
    <div class="copyright">
      © 2026 CodeCraft. All rights reserved.<br>
      데이터 출처: 국토교통부 · 공정거래위원회 · 국세청 · 공공데이터포털
    </div>
  </div>
</footer>

<script>
const nav=document.querySelector('.nav');
addEventListener('scroll',()=>nav.classList.toggle('scrolled',scrollY>12),{passive:true});
const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('on');io.unobserve(e.target)}}),{threshold:.1});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
</script>
</body>
</html>