/* B.SIDE 서브메뉴 공통 스타일 — 흰 배경, 메인 사이트와 같은 헤더
   Layout: 상단 고정 헤더 → 페이지 머리말 → 연도 탭/도구줄 → 앨범 그리드 */
:root{
  /* 메인 index.html과 같은 팔레트 */
  --bg:#ffffff;
  --ink:#211D19;
  --ink-2:#3F3933;
  --ink-3:#958d81;
  --line:#E5E1D8;
  --soft:#F7F5F0;
  --accent:#20689A;
  --accent-ink:#154D75;
  --stamp:#E23F63;       /* 메인 지도 핀 색 = 대표코스/명소 표시 */
  --f-display:"Noto Serif KR",serif;
  --f-body:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-num:"Oswald","Noto Sans KR",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.7 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 헤더 (index.html과 동일) ── */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:#fff;padding:0 32px;border-bottom:1px solid var(--line)}
.header-inner{max-width:1500px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;position:relative}
header .brand img{width:130px;height:auto}
#mainNav{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none}
#mainNav::-webkit-scrollbar{display:none}
#mainNav a{font-size:15px;white-space:nowrap;color:var(--ink);padding:6px 2px;border-bottom:2px solid transparent;transition:.2s}
#mainNav a:hover,#mainNav a.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
#hamburger{display:none;background:none;border:none;font-size:24px;cursor:pointer;padding:4px 8px;color:var(--ink)}
@media (max-width:700px){
  header{padding:0 18px}
  #hamburger{display:block}
  #mainNav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.08);overflow:visible;padding:6px 0}
  #mainNav.open{display:flex}
  #mainNav a{padding:14px 20px;border-bottom:1px solid var(--soft);width:100%}
}

/* ── 페이지 머리말 ── */
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
.page-head{padding-block:40px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.eyebrow{font:500 15px/1 var(--f-num);letter-spacing:2px;color:var(--accent-ink);text-transform:uppercase}
.page-head h1{margin:10px 0 8px;font:700 clamp(28px,3.6vw,40px)/1.25 var(--f-display);text-wrap:balance}
.page-head p{margin:0;color:var(--ink-2);max-width:60ch}
.tally{display:flex;gap:28px}
.tally div{display:flex;flex-direction:column;align-items:flex-end}
.tally b{font:500 30px/1 var(--f-num);font-variant-numeric:tabular-nums}
.tally span{font-size:15px;color:var(--ink-3);margin-top:4px}

/* ── 연도 탭 + 도구 ── */
.bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 82px);z-index:10;background:var(--bg);border-bottom:1px solid var(--line);padding-block:10px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.years{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.years::-webkit-scrollbar{display:none}
.years button{flex:none;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:15px;white-space:nowrap}
.years button em{font-style:normal;font:400 15px var(--f-num);color:var(--ink-3);margin-left:5px}
.years button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.years button[aria-pressed="true"] em{color:#c9d3cf}
.tools{display:flex;gap:8px;flex:none}
.search{position:relative}
.search input{width:220px;max-width:46vw;border:1px solid var(--line);border-radius:6px;padding:7px 12px 7px 32px;background:var(--bg)}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3)}
.tools select{border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:var(--bg)}

/* ── 앨범 그리드 ── */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px;padding-block:28px 20px}
.grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.card{display:flex;flex-direction:column;gap:10px;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.thumb{position:relative;aspect-ratio:1/1;max-width:100%;overflow:hidden;border-radius:4px;background:var(--soft)}
.cols3 .thumb{aspect-ratio:4/3}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img,.card:hover .ticket{transform:scale(1.03)}
.card h3{margin:0;font-size:16px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:8px;flex-wrap:wrap;font-size:15px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.meta .km{color:var(--ink-2);font-weight:500}
.tags{position:absolute;top:10px;left:10px;display:flex;gap:4px}
.tag{font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:3px;background:#fff;color:var(--stamp);border:1px solid var(--stamp)}
.tag.multi{color:var(--ink-2);border-color:var(--line)}

/* 사진이 없을 때: 계절색 라이딩 티켓 */
.ticket{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;transition:transform .5s}
.ticket .d{font:500 44px/1 var(--f-num);letter-spacing:.01em}
.ticket .d small{display:block;font-size:13px;letter-spacing:.2em;opacity:.8;margin-bottom:6px}
.ticket .route{font-size:13px;line-height:1.5;opacity:.95;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ticket .route i{font-style:normal;opacity:.6;margin:0 4px}
.s-spring{background:linear-gradient(160deg,#e48ba0,#b8607a)}
.s-summer{background:linear-gradient(160deg,#5aa27f,#2f6f58)}
.s-autumn{background:linear-gradient(160deg,#d99a4a,#a5582c)}
.s-winter{background:linear-gradient(160deg,#7f97ad,#4a5f74)}

.more{display:flex;justify-content:center;padding-block:10px 60px}
.btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:4px;padding:10px 22px;cursor:pointer;font-weight:500}
.btn.ghost{background:var(--bg);color:var(--accent-ink)}
[hidden]{display:none!important}
.empty{padding:80px 0;text-align:center;color:var(--ink-3)}

/* ── 상세 모달 ── */
.modal{position:fixed;inset:0;z-index:50;background:rgba(20,26,24,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.sheet{background:var(--bg);width:min(760px,100%);max-height:92vh;overflow:auto;border-radius:8px}
.sheet .hero{position:relative;aspect-ratio:16/9;background:var(--soft)}
.sheet .hero img{width:100%;height:100%;object-fit:cover}
.sheet .hero .ticket .d{font-size:64px}
.sheet .body{padding:24px 28px 28px}
.sheet h2{margin:0 0 14px;font-size:24px;line-height:1.35;text-wrap:balance}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);margin-bottom:20px}
.facts div{padding:12px 4px}
.facts dt{font-size:15px;color:var(--ink-3)}
.facts dd{margin:2px 0 0;font:500 18px/1.3 var(--f-num);font-variant-numeric:tabular-nums}
.facts dd.na{font:400 15px var(--f-body);color:var(--ink-3)}
.links{display:flex;gap:8px;flex-wrap:wrap}
.close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.9);cursor:pointer;font-size:18px}

/* ── 명소 상세(글) ── */
.article{max-width:760px;margin:0 auto;padding-block:36px 80px}
.article .back{font-size:15px;color:var(--ink-3)}
.article h1{font:700 clamp(26px,3.6vw,38px)/1.3 var(--f-display);margin:14px 0 8px}
.article .lead{font-size:17px;color:var(--ink-2)}
.article p{max-width:65ch}
.article figure{margin:24px 0}
.article figure img{width:100%;border-radius:4px}
.note{background:var(--soft);border-radius:6px;padding:16px 18px;color:var(--ink-2);font-size:15px}

.site-foot{border-top:1px solid var(--line);padding-block:28px;color:var(--ink-3);font-size:15px;text-align:center}

@media (max-width:960px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .wrap{padding-inline:16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .grid.cols3{grid-template-columns:minmax(0,1fr)}
  .bar{top:calc(env(safe-area-inset-top,0px) + 82px)}
  .tools{width:100%}.search{flex:1}.search input{width:100%;max-width:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticket .d{font-size:34px}
  .sheet .body{padding:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 상단 메뉴: About 아래 커뮤니티 */
#mainNav{overflow:visible}
.nav-sub{position:relative;display:flex;align-items:center}
.nav-sub .sub{display:none;position:absolute;top:100%;right:-14px;margin-top:10px;flex-direction:column;gap:2px;background:#fff;border:1px solid #E5E1D8;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);padding:6px;min-width:160px;z-index:80}
.nav-sub .sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-sub.open .sub{display:flex}
#mainNav .nav-sub .sub a{padding:9px 12px;border:0;border-radius:6px;white-space:nowrap;width:auto}
#mainNav .nav-sub .sub a:hover{background:#F7F5F0}
@media (max-width:1080px){#mainNav{gap:20px}}
@media (max-width:700px){
  #mainNav{gap:0}
  .nav-sub{flex-direction:column;align-items:stretch;width:100%}
  .nav-sub .sub{display:flex;position:static;margin:0;box-shadow:none;border:0;border-radius:0;padding:0 0 4px 18px;min-width:0}
  .nav-sub .sub::before{display:none}
}

/* 푸터: 강조색 바탕 · 모든 페이지 같은 형식 */
footer.site-foot{background:#154D75;color:#fff;text-align:center;padding:34px 20px 30px;border-top:0;margin-top:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:'Noto Sans KR',sans-serif}
footer.site-foot .ft-label{font:500 15px/1.4 'Oswald','Noto Sans KR',sans-serif;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.72)}
footer.site-foot .ft-copy{font-size:16px;font-weight:700;line-height:1.5;color:#fff}
footer.site-foot .ft-admin{margin-top:6px;font-size:15px;color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:3px}
footer.site-foot .ft-admin:hover{color:#fff}
/* 상단 메뉴 글자 */
#mainNav > a, #mainNav .nav-sub > a{font-size:16px;font-weight:700}
.card .spot-sum{margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .trip-tag{margin:2px 0 0;font-size:14px;color:var(--accent-ink,#154D75)}
/* 유튜브 영상 (본문) */
.video{position:relative;aspect-ratio:16/9;max-width:100%;margin:18px 0;border-radius:4px;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 링크 미리보기 카드 (본문) */
.linkcard{display:flex;align-items:stretch;max-width:680px;min-height:118px;border:1px solid var(--line,#E5E1D8);border-radius:8px;overflow:hidden;background:#fff;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.linkcard:hover{border-color:#BCD3E4;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.linkcard .lc-img{flex:0 0 150px;background:#F3F0EA}
.story .linkcard .lc-img img,.linkcard .lc-img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.linkcard .lc-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 16px}
.linkcard .lc-title{font-size:16px;line-height:1.4;font-weight:700;color:#2E2925;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.linkcard .lc-desc{font-size:14px;line-height:1.5;color:#6E675D;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.linkcard .lc-site{font-size:12.5px;color:#A39C90;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.linkcard{min-height:96px}.linkcard .lc-img{flex-basis:104px}.linkcard .lc-body{padding:10px 12px}.linkcard .lc-title{font-size:15px}.linkcard .lc-desc{font-size:13px;-webkit-line-clamp:1}}