:root{
  --green:#173f34;--green2:#285e4d;--green3:#3f7a63;--lime:#d8e7b2;--ink:#1f3530;--muted:#6f7b74;--line:#e5e2d6;
  --paper:#f7f3ea;--paper2:#efe9dc;--card:#fff;--orange:#e8792b;--orange-soft:#fbe6d4;--soft:#e8eedc;
  --radius:18px;--shadow:0 1px 2px rgba(23,63,52,.05),0 8px 24px rgba(23,63,52,.06);
  --font:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{color:var(--ink);background:var(--paper);font:15px/1.7 var(--font);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
svg.i{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- layout ---------- */
.side{position:fixed;inset:0 auto 0 0;width:236px;background:#fff;border-right:1px solid var(--line);padding:28px 16px 22px;display:flex;flex-direction:column;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:0 10px}
.brand .sym{width:34px;height:34px}
.brand .word{height:24px;width:auto}
.brand-sub{font-size:11px;letter-spacing:.5px;color:var(--muted);padding:10px 12px 26px;font-weight:500}
.nav a{display:flex;gap:12px;align-items:center;padding:11px 14px;margin:2px 0;border-radius:12px;font-weight:700;color:#5d6b64;font-size:15px}
.nav a:hover{background:#f3f1e8}
.nav a.on{background:var(--green);color:#fff}
.nav .sep{height:1px;background:var(--line);margin:14px 10px}
.side-foot{margin-top:auto;font-size:12px;color:var(--muted);padding:0 12px;line-height:1.6}
.side-foot b{color:var(--ink)}
.main{margin-left:236px;min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 44px}
.topbar{display:none}
.footer{margin-top:auto;border-top:1px solid var(--line);padding:28px 0 40px;font-size:12.5px;color:var(--muted);background:var(--paper)}
.footer .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
.footer a{text-decoration:underline;text-underline-offset:3px}

/* ---------- type ---------- */
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--orange);text-transform:uppercase;margin-bottom:8px}
h1,h2,h3{margin:0;color:var(--green);letter-spacing:-.04em;line-height:1.3}
h1{font-size:40px;font-weight:900}
h2{font-size:24px;font-weight:900}
h3{font-size:17px;font-weight:800}
.lead{font-size:17px;color:#41544c;margin:12px 0 0;max-width:720px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ---------- page head ---------- */
.crumbs{font-size:12.5px;color:var(--muted);padding:26px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.crumbs a:hover{color:var(--green)}
.phead{padding:18px 0 30px}
.section{padding:34px 0}
.section + .section{padding-top:8px}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.shead p{margin:4px 0 0;color:var(--muted);font-size:14px}
.more{font-size:13.5px;font-weight:700;color:var(--green2);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.more:hover{color:var(--orange)}

/* ---------- home hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:stretch;padding:34px 0 10px}
.hero-copy{background:var(--green);color:#fff;border-radius:28px;padding:44px 42px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.hero-copy h1{color:#fff;font-size:46px;line-height:1.22}
.hero-copy h1 em{font-style:normal;color:#ffb27a}
.hero-copy .lead{color:#d6e2dc}
.hero-copy .eyebrow{color:#ffb27a}
.finder{margin-top:28px;background:#fff;border-radius:18px;padding:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;color:var(--ink)}
.finder label{display:flex;flex-direction:column;font-size:11.5px;font-weight:800;color:var(--muted);gap:4px}
.finder select{border:1px solid var(--line);border-radius:10px;padding:10px 10px;background:#fbfaf6;font-weight:700;font-size:14px;width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;background:var(--orange);color:#fff;font-weight:800;border:0;cursor:pointer;font-size:15px;white-space:nowrap}
.btn:hover{filter:brightness(.95)}
.btn.line{background:#fff;color:var(--green);border:1px solid var(--line)}
.btn.green{background:var(--green)}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:10px}
.finder .btn{align-self:end;height:44px}
.hero-stats{display:flex;gap:26px;margin-top:auto;padding-top:28px;flex-wrap:wrap}
.hero-stats div{font-size:12px;color:#b9cdc4}
.hero-stats b{display:block;font-size:24px;color:#fff;font-weight:900;letter-spacing:-.03em}
.hero-map{background:#fff;border-radius:28px;border:1px solid var(--line);position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;justify-content:center}
.hero-map svg{width:100%;height:100%;max-height:560px}
.hero-map .cap{position:absolute;left:22px;bottom:18px;font-size:12px;color:var(--muted);line-height:1.5}
.hero-map .cap b{color:var(--green);font-size:14px;display:block}
.legend{position:absolute;right:20px;top:18px;display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:#4b5d55;background:rgba(255,255,255,.85);padding:8px 10px;border-radius:10px}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease;position:relative}
a.card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(23,63,52,.06),0 14px 32px rgba(23,63,52,.1)}
.card .ph{aspect-ratio:4/3;background:var(--paper2) center/cover no-repeat;position:relative;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .ph .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a9b3a5}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:16.5px;line-height:1.4}
.card .meta{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card .meta span+span::before{content:'·';margin-right:8px;color:#c5c9c0}
.badge{position:absolute;left:12px;top:12px;background:var(--orange);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;z-index:2}
.badge.g{background:var(--green)}
.badge.w{background:#fff;color:var(--green)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--green2)}
.chip.o{background:var(--orange-soft);color:#b45410}
.chip.lv1{background:#e3f0e0;color:#2f6b3a}.chip.lv2{background:#fdf0d5;color:#9a6512}.chip.lv3{background:#fbe1dc;color:#a53d27}
.card .shape{aspect-ratio:4/3;background:linear-gradient(160deg,#f3f6ec,#e6eedd);display:flex;align-items:center;justify-content:center;padding:18px}
.card .shape svg{width:100%;height:100%}

/* course card stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.stats div{background:#f6f4ec;border-radius:10px;padding:7px 8px;text-align:center;font-size:11px;color:var(--muted);font-weight:600}
.stats b{display:block;font-size:15px;color:var(--green);font-weight:900}

/* ---------- filters ---------- */
.filters{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.frow .lab{font-size:12px;font-weight:800;color:var(--muted);width:64px;flex-shrink:0}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:700;cursor:pointer;color:#4f5f58}
.pill:hover{border-color:var(--green3)}
.pill.on{background:var(--green);border-color:var(--green);color:#fff}
.count-line{font-size:14px;color:var(--muted);margin:0 0 14px}
.count-line b{color:var(--orange);font-size:16px}
.empty{padding:40px;text-align:center;color:var(--muted);background:#fff;border-radius:var(--radius)}
.searchbox{flex:1;min-width:200px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fbfaf6}

/* ---------- detail ---------- */
.dhero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;padding:16px 0 26px;align-items:start}
.dhero .visual{border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--shadow);position:relative}
.dhero .visual img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dhero .visual .shape{background:linear-gradient(160deg,#f3f6ec,#e3ecd8);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:26px}
.dhero .visual .shape svg{width:100%;height:100%}
.credit{font-size:11.5px;color:var(--muted);padding:8px 14px;background:#fff;border-top:1px solid var(--line)}
.facts{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:24px 24px 20px}
.facts h1{font-size:32px;margin:4px 0 6px}
.facts .sub{color:var(--muted);font-size:14.5px}
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.bigstats div{background:var(--paper);border-radius:14px;padding:12px;text-align:center;font-size:12px;color:var(--muted);font-weight:700}
.bigstats b{display:block;font-size:22px;color:var(--green);font-weight:900;letter-spacing:-.03em}
.kv{display:grid;grid-template-columns:86px 1fr;gap:8px 12px;font-size:14px;margin:14px 0}
.kv dt{color:var(--muted);font-weight:700}
.kv dd{margin:0}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.prose{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:26px 28px;font-size:16px;line-height:1.85}
.prose h2{font-size:20px;margin:0 0 12px}
.prose p{margin:0 0 12px}
.prose ul{margin:0;padding-left:20px}
.prose li{margin:4px 0}
.prose + .prose{margin-top:18px}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
.aside{display:flex;flex-direction:column;gap:18px}
.box{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:20px 22px}
.box h2{font-size:18px;margin-bottom:12px}
.minilist{display:flex;flex-direction:column;gap:10px}
.mini{display:flex;gap:12px;align-items:center}
.mini img,.mini .ph0{width:64px;height:64px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--paper2)}
.mini b{display:block;font-size:14.5px;color:var(--green);line-height:1.4}
.mini span{font-size:12.5px;color:var(--muted)}
a.mini:hover b{color:var(--orange)}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding:0 0 22px 44px}
.timeline li::before{content:'';position:absolute;left:15px;top:30px;bottom:-2px;width:2px;background:repeating-linear-gradient(var(--green3) 0 6px,transparent 6px 11px)}
.timeline li:last-child::before{display:none}
.timeline .num{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px}
.timeline li:first-child .num,.timeline li:last-child .num{background:var(--orange)}
.timeline h3{font-size:17px;margin:3px 0 6px}
.timeline p{margin:0;color:#43554d;font-size:15px}
.timeline .stopimg{width:100%;max-width:360px;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-top:10px}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.photos figure{margin:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photos figcaption{font-size:11.5px;color:var(--muted);padding:8px 10px;line-height:1.45}
.prevnext{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.prevnext a{flex:1;min-width:200px;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);font-weight:800;color:var(--green)}
.prevnext a span{display:block;font-size:12px;color:var(--muted);font-weight:700}
.prevnext a.n{text-align:right}
.source{font-size:12.5px;color:var(--muted);background:#fff;border:1px dashed #d7d3c4;border-radius:14px;padding:12px 16px;margin-top:22px}
.elev{width:100%;height:90px;display:block}
.notice{background:var(--orange-soft);color:#8a4310;border-radius:14px;padding:12px 16px;font-size:14px;margin:0 0 18px}

/* ---------- festival list ---------- */
.date{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;color:var(--green);border-radius:12px;padding:5px 10px;font-weight:900;line-height:1.1;position:absolute;right:12px;top:12px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.12);font-size:12px}
.date b{font-size:20px}
.monthnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}

/* ---------- region ---------- */
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.region{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:5/4;background:var(--green) center/cover;box-shadow:var(--shadow);display:flex;align-items:flex-end;color:#fff}
.region::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(10,30,24,.82))}
.region div{position:relative;z-index:1;padding:14px 16px}
.region b{font-size:21px;font-weight:900;display:block;letter-spacing:-.03em}
.region span{font-size:12.5px;opacity:.9}
.sigungus{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- magazine ---------- */
.mag{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.mag .card .body p{margin:0;font-size:13.5px;color:#55665e;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- banner strip ---------- */
.strip{background:linear-gradient(110deg,#fff6ec,#fdebd9);border-radius:22px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.strip h3{font-size:19px}
.strip p{margin:4px 0 0;color:#7a5a3e;font-size:14px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
  .hero-map{min-height:360px}
  .dhero,.cols{grid-template-columns:1fr}
  .dhero .visual img,.dhero .visual .shape{aspect-ratio:16/9}
}
@media (max-width:900px){
  .side{transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.2)}
  body.menu .side{transform:none}
  body.menu::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20}
  .main{margin-left:0}
  .topbar{display:flex;position:sticky;top:0;z-index:15;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);height:58px;align-items:center;justify-content:space-between;padding:0 16px}
  .topbar .brand{padding:0}
  .topbar button{border:0;background:none;padding:8px;cursor:pointer;color:var(--green)}
  .wrap{padding:0 16px}
  h1{font-size:30px}
  .hero{padding-top:16px}
  .hero-copy{padding:30px 22px;border-radius:22px}
  .hero-copy h1{font-size:32px}
  .finder{grid-template-columns:1fr 1fr}
  .finder .btn{grid-column:1/-1}
  .facts h1{font-size:26px}
  .bigstats b{font-size:18px;white-space:nowrap}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .facts{padding:20px 18px}
  .prose{padding:20px 18px}
  .filters{position:static}
  .frow .lab{width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .grid.g3{grid-template-columns:1fr}
  .card h3{font-size:15px}
}

/* ---------- 걷기 날씨 ---------- */
.wxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.wx{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:13px;transition:transform .15s ease}
.wx:hover{transform:translateY(-2px)}
.wxhead{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:2px}
.wxhead b{font-size:17px;color:var(--green);font-weight:900}
.wxrow{display:grid;grid-template-columns:22px 1fr auto auto;gap:8px;color:#4b5d55}
.wxrow b{color:var(--orange)}
.wxfoot{font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}
.wxdays{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wxday{border-radius:14px;padding:12px;background:#eef5e8;display:flex;flex-direction:column;gap:2px;font-size:13px;color:#43554d}
.wxday b{font-size:15px;color:var(--green)}
.wxday .v{font-weight:900;color:var(--green);font-size:15px}
.wxday.rain{background:#e5eef6}.wxday.rain .v{color:#2a5d8a}
.wxday.dust,.wxday.hot,.wxday.cold{background:var(--orange-soft)}.wxday.dust .v,.wxday.hot .v,.wxday.cold .v{color:#b45410}

/* ---------- 캠핑·반려견 배너 ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
a.strip:hover h3{color:var(--orange)}
.strip h3{display:flex;align-items:center;gap:8px}
.card .actions .btn{flex:0 0 auto}
[hidden]{display:none!important}

/* ---------- 풍경 고르기 타일 ---------- */
.scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.scene{position:relative;border:0;border-radius:18px;aspect-ratio:4/3;background:var(--green) center/cover;color:#fff;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:12px 14px;text-align:left;box-shadow:var(--shadow);transition:transform .15s ease}
.scene::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(10,30,24,.8))}
.scene b,.scene span{position:relative;z-index:1}
.scene b{font-size:19px;font-weight:900;letter-spacing:-.03em}
.scene span{font-size:12px;opacity:.9}
.scene:hover{transform:translateY(-2px)}
.scene.on{outline:4px solid var(--orange);outline-offset:-4px}
.scene.on::before{content:'선택됨';position:absolute;right:10px;top:10px;z-index:1;background:var(--orange);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px}

/* ---------- 코스 카드: 사진 + 작은 경로 지도 ---------- */
.card .ph .minimap{position:absolute;right:10px;bottom:10px;width:74px;height:56px;background:rgba(255,255,255,.92);border-radius:10px;padding:4px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.card .ph .minimap svg{width:100%;height:100%}
.card .ph .phcap{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 100px);font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 매거진: 사진은 위부터, 카테고리는 사진 왼쪽 아래 ---------- */
.ph.top img{object-position:center top}
.ph .badge.bl{top:auto;bottom:12px;left:12px}

/* ---------- 주말 걷기 날씨(작게) ---------- */
.wxlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.wxs{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:9px 12px;font-size:13px;color:#4b5d55;box-shadow:0 1px 2px rgba(23,63,52,.06)}
.wxs b{color:var(--green);font-weight:900;min-width:58px}
.wxs span i{font-style:normal;color:var(--orange);font-weight:800;margin-right:3px}
.wxs em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:800;color:#2f6b3a;background:#e3f0e0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.wxs.warn em{color:#b45410;background:var(--orange-soft)}
.wxs:hover{box-shadow:var(--shadow)}