@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root{
  --ink:#16181a; --ink2:#3d4348; --sub:#8a8f93; --line:#eceae5;
  --paper:#faf8f4; --card:#fff;
  --forest:#1f4435; --forest2:#2d5f49; --gold:#b08d4f; --sand:#f2ece1;
  --r:16px; --shadow:0 1px 2px rgba(20,25,20,.04),0 8px 28px rgba(20,25,20,.06);
  --shadow-h:0 4px 10px rgba(20,25,20,.06),0 22px 50px rgba(20,25,20,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Pretendard',system-ui,-apple-system,'Malgun Gothic',sans-serif;
     color:var(--ink);background:var(--paper);line-height:1.75;
     -webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1120px;margin-inline:auto;padding:0 24px}

/* ── 상단 띠 ── */
.tape{background:var(--forest);color:#e8e2d4;overflow:hidden;white-space:nowrap;
      padding:11px 0;font-size:12.5px;letter-spacing:.08em}
.tape-in{display:inline-block;animation:slide 34s linear infinite}
.tape-in span{padding-right:44px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 헤더 ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.86);
     backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-size:16px;font-weight:800;letter-spacing:-.02em}
.brand em{font-style:normal;color:var(--forest)}
.nav .meta{font-size:12.5px;color:var(--sub)}

/* ── 히어로 ── */
.hero{position:relative;padding:96px 0 76px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(1100px 380px at 50% -8%,#e9efe7 0%,transparent 62%);pointer-events:none}
.kicker{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.26em;
        color:var(--gold);border:1px solid #e3d7bd;background:#fffdf8;
        padding:7px 15px;border-radius:100px}
.hero h1{font-size:clamp(32px,5.6vw,58px);line-height:1.22;margin:26px 0 18px;
         font-weight:800;letter-spacing:-.045em}
.hero h1 .u{background:linear-gradient(transparent 62%,#dfe9dc 62%)}
.hero .lead{color:var(--ink2);font-size:17px;max-width:600px;margin-inline:auto}
.hero .stat{display:flex;gap:38px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.hero .stat div{text-align:center}
.hero .stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em}
.hero .stat span{font-size:12.5px;color:var(--sub)}

/* ── 섹션 ── */
.sec{padding:74px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;
          gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sec-head .no{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.2em}
.sec-head h2{font-size:clamp(23px,3.2vw,32px);font-weight:800;letter-spacing:-.04em;margin-top:8px}
.sec-head p{color:var(--sub);font-size:14.5px;margin-top:8px;max-width:520px}

/* ── 카드 ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(322px,1fr));gap:30px}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;
      box-shadow:var(--shadow);transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-h)}
.thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:32% center;
           transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.card:hover .thumb img{transform:scale(1.07)}
.thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,20,15,.42),transparent 46%)}
.pin{position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.94);
     color:var(--forest);font-size:11.5px;font-weight:700;letter-spacing:.04em;
     padding:6px 12px;border-radius:100px}
.thumb .cap{position:absolute;left:16px;bottom:13px;z-index:2;color:#fff;
            font-size:12.5px;letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.card .b{padding:20px 21px 23px}
.card h3{font-size:18.5px;font-weight:750;letter-spacing:-.035em;margin-bottom:8px;line-height:1.4}
.card .tag{font-size:14.5px;color:var(--ink2);margin-bottom:14px;min-height:44px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:17px}
.chip{font-size:11.5px;color:var(--forest2);background:#eef3ec;
      padding:5px 10px;border-radius:7px;letter-spacing:-.01em}
.card .more{display:flex;align-items:center;justify-content:space-between;
            padding-top:15px;border-top:1px solid var(--line);
            font-size:13.5px;font-weight:700;color:var(--forest)}
.card .more .arw{transition:transform .3s}
.card:hover .more .arw{transform:translateX(5px)}

/* ── 상세 ── */
.crumb{padding:26px 0 0;font-size:13px;color:var(--sub)}
.crumb a:hover{color:var(--forest)}
.dhead{padding:22px 0 30px}
.dhead h1{font-size:clamp(28px,4.6vw,44px);font-weight:800;letter-spacing:-.045em;margin:12px 0 10px}
.dhead .lead{color:var(--ink2);font-size:16.5px}
.dimg{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--sand);
      box-shadow:var(--shadow)}
.dimg img{width:100%;height:100%;object-fit:cover}
.info{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.info dl{display:grid;grid-template-columns:150px 1fr}
.info dt{padding:17px 22px;background:#f7f5f0;font-size:13.5px;font-weight:700;
         color:var(--ink2);border-bottom:1px solid var(--line)}
.info dd{padding:17px 22px;font-size:14.5px;border-bottom:1px solid var(--line)}
.info dl>:nth-last-child(-n+2){border-bottom:0}
.cta{display:flex;gap:11px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:11px;
     font-size:14.5px;font-weight:700;letter-spacing:-.01em;transition:.22s}
.btn.solid{background:var(--forest);color:#fff}
.btn.solid:hover{background:#173629;transform:translateY(-2px)}
.btn.line{background:#fff;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--forest)}
.btn.line:hover{background:#f1f5ef;transform:translateY(-2px)}

/* ── 주변 ── */
.near{display:grid;grid-template-columns:repeat(auto-fill,minmax(324px,1fr));gap:18px}
.near article{background:var(--card);border-radius:13px;padding:22px 23px;
              box-shadow:var(--shadow);transition:.3s;position:relative;overflow:hidden}
.near article:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.near article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
                      background:var(--forest);opacity:.16}
.near b{display:block;font-size:16px;font-weight:750;letter-spacing:-.03em;margin-bottom:7px}
.near span{font-size:13.5px;color:var(--sub);line-height:1.72}

/* ── 고지 · 푸터 ── */
.notice{background:#f4f2ec;border:1px solid var(--line);border-radius:13px;
        padding:19px 22px;font-size:13px;color:var(--sub);line-height:1.85}
.notice strong{color:var(--ink2)}
footer{background:var(--forest);color:#cfd8cf;margin-top:74px;padding:52px 0 60px;font-size:13px}
footer .ft{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:14px}
footer .fl{line-height:2;color:#a9b8ac}
footer .fb{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);
           font-size:12px;color:#8fa093}

/* ── 스크롤 등장 ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}
.rv.on{opacity:1;transform:none}

@media(max-width:640px){
  .hero{padding:64px 0 52px}
  .sec{padding:54px 0}
  .info dl{grid-template-columns:1fr}
  .info dt{border-bottom:0;padding-bottom:0;background:transparent}
  .hero .stat{gap:26px}
}