/* KOC 새 메뉴(GNB A-2, 2026-10-15) — 홈 v5 와 하위 페이지가 같이 쓴다. home-v5.css 에서 떼어 냄(같은 규칙 그대로).
   색은 팔레트 A — 토큰(--kr-*)도 여기 둔다(홈 영역 스타일 home-v5.css 가 이 파일 뒤에 실린다). */
:root{
  --kr-bg:#F7F7F4; --kr-surface:#FFFFFF; --kr-panel:#EAEEF1; --kr-ink:#1A1D23; --kr-muted:#5E6470; --kr-line:#DFE2E4;
  --kr-primary:#24426A; --kr-primary-d:#1A3150; --kr-on-primary:#FFFFFF; --kr-accent:#C41E2F; --kr-cta:#C41E2F; --kr-cta-d:#A3182A; /* 10-15 Owner: 히어로 「함께 여행하기」 빨강으로 버튼·강조 통일 */ --kr-tag:#E3EAF3;
  --kr-shadow:0 4px 16px rgba(26,29,35,.08); --kr-shadow-h:0 10px 28px rgba(26,29,35,.12);
  --kr-sans:'Pretendard JP Variable','Pretendard','Malgun Gothic',sans-serif;
  --kr-w:1200px; --kr-s1:96px; --kr-s2:40px; --kr-s3:28px;
}
/* 언어별 글꼴 — 한자를 그 언어 자형으로(테마 fonts-{lang}.css 가 싣는 글꼴) */
html[lang^="ja"]{--kr-sans:'Pretendard JP Variable','Hiragino Sans','Yu Gothic',sans-serif}
html[lang^="zh"]{--kr-sans:'Noto Sans TC','Pretendard JP Variable','Microsoft JhengHei',sans-serif}
.kr-i{width:16px;height:16px;flex:none}

/* GNB A-2 — 윗줄은 스크롤과 함께 올라가고 메뉴 줄만 붙는다 */
.kr-gnb-top,.kr-menu{font-family:var(--kr-sans)}
.kr-gnb-top a,.kr-menu a{text-decoration:none;color:inherit}
.kr-gnb-in{max-width:var(--kr-w);margin:0 auto;padding:0 24px}
.kr-gnb-top{background:var(--kr-surface);position:relative;z-index:51}
.kr-gnb-top .kr-gnb-in{display:grid;grid-template-columns:1fr 560px 1fr;gap:40px;align-items:center;height:80px}
.kr-logo img{height:24px;width:auto;display:block}
.kr-search{display:flex;align-items:center;height:46px;background:var(--kr-bg);border:1px solid var(--kr-line);border-radius:23px;padding:0 5px 0 20px}
.kr-search input{flex:1;border:0;outline:0;background:transparent;font:400 14px var(--kr-sans);color:var(--kr-ink);min-width:0}
.kr-search input::placeholder{color:#7C828C}
.kr-search button{width:36px;height:36px;border-radius:50%;border:0;background:var(--kr-primary);color:#fff;display:grid;place-items:center;cursor:pointer}
.kr-search:focus-within{border-color:var(--kr-primary);background:#fff}
.kr-tools{justify-self:end;display:flex;align-items:center;gap:16px}
.kr-lang{display:flex;gap:10px;font:500 13px var(--kr-sans);letter-spacing:.04em}
.kr-lang a{color:var(--kr-muted)} .kr-lang a.on{color:var(--kr-ink);font-weight:700}
.kr-a2hs{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:0;border-radius:17px;background:var(--kr-cta);font:600 13px var(--kr-sans);color:#fff;cursor:pointer;transition:background .15s}
.kr-a2hs[hidden]{display:none!important} /* 테마 a2hs 스크립트가 설치 가능할 때만 연다 */
.kr-a2hs:hover{background:var(--kr-cta-d)}
.kr-a2hs .kr-i{width:14px;height:14px}
.kr-menu{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-top:1px solid var(--kr-line);border-bottom:1px solid var(--kr-line)}
.kr-menu .kr-gnb-in{display:flex;justify-content:center;gap:44px;height:52px;align-items:stretch}
.kr-menu .kr-gnb-in>a,.kr-dd>a{white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:4px;font:600 15px var(--kr-sans);color:var(--kr-ink);border-bottom:2px solid transparent;padding-top:2px}
.kr-menu a.on{color:var(--kr-primary);font-weight:700;border-bottom-color:var(--kr-primary)}
.kr-menu .kr-gnb-in>a:hover,.kr-dd:hover>a,.kr-dd.is-open>a{color:var(--kr-primary)}
.kr-chev{width:14px;height:14px}
.kr-dd{position:relative;display:flex;flex-shrink:0}
.kr-dd-panel{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--kr-line);border-radius:12px;box-shadow:var(--kr-shadow-h);padding:12px;z-index:60}
/* 펼침의 정본은 버튼(.kr-dd-t aria-expanded → .is-open, gnb-v5.js). 마우스 올림은 보조로 연다 · Escape 로 닫으면 마우스가 나갈 때까지 닫아 둔다(.is-shut).
   종전 :focus-within 은 뺐다 — 링크에 초점만 와도 열려 닫힌 패널 링크가 Tab 순서를 길게 늘였다(아르 D1 ③ 과 같은 원칙). */
.kr-dd:hover .kr-dd-panel,.kr-dd.is-open .kr-dd-panel{display:grid}
.kr-dd.is-shut .kr-dd-panel{display:none}
.kr-dd-t{display:flex;align-items:center;margin-left:2px;padding:0 4px;border:0;border-radius:6px;background:none;color:var(--kr-ink);cursor:pointer}
.kr-dd-t:hover,.kr-dd:hover>.kr-dd-t,.kr-dd.is-open>.kr-dd-t{color:var(--kr-primary)}
.kr-dd-t:focus-visible{outline:2px solid var(--kr-primary);outline-offset:2px}
.kr-dd-t .kr-chev{transition:transform .15s} .kr-dd.is-open .kr-dd-t .kr-chev{transform:rotate(180deg)}
/* 10-17 Owner: 칸을 글자 폭(max-content)으로만 잡으면 min-width 520px 를 못 채워 오른쪽이 비고 「동네 전체 보기」 윗줄도 칸 합만큼만 그어졌다 → 남는 폭을 네 칸이 나눠 갖는다. */
.kr-dd-zones{grid-template-columns:repeat(4,minmax(max-content,1fr));gap:2px 8px;min-width:520px}
.kr-dd-zones a{padding:8px 10px;border-radius:8px;font:500 14px var(--kr-sans)} .kr-dd-zones a:hover{background:var(--kr-tag);color:var(--kr-primary)}
.kr-dd-all{grid-column:1/-1;display:flex;align-items:center;gap:6px;color:var(--kr-primary)!important;font-weight:600!important;border-top:1px solid var(--kr-line);margin-top:6px;padding-top:12px!important}
.kr-dd-explore{grid-template-columns:repeat(2,minmax(220px,1fr));gap:2px;min-width:480px}
.kr-dd-explore a{display:block;padding:10px 12px;border-radius:8px} .kr-dd-explore a:hover{background:var(--kr-tag)}
.kr-dd-explore b{display:block;font:600 14px var(--kr-sans)} .kr-dd-explore span{display:block;font:400 12px/1.5 var(--kr-sans);color:var(--kr-muted);margin-top:2px}

/* 메뉴 — 여행 도움말 하위 */
.kr-dd-help{grid-template-columns:1fr;gap:2px;min-width:280px}
.kr-dd-help a{display:block;padding:10px 12px;border-radius:8px} .kr-dd-help a:hover{background:var(--kr-tag)}
.kr-dd-help b{display:block;font:600 14px var(--kr-sans)} .kr-dd-help span{display:block;font:400 12px/1.5 var(--kr-sans);color:var(--kr-muted);margin-top:2px}

/* 감싸개 — <header> 는 계약(게이트 gnb-contract)의 자리일 뿐 상자를 만들지 않는다: 메뉴 줄의 sticky 가 문서 전체에서 붙게 */
header.kr-gnb{display:contents}
/* 목차·#앵커로 뛸 때 제목이 붙는 메뉴 줄 밑에 숨지 않게 */
html{scroll-padding-top:52px}

/* ── 반응형(메뉴) ── */
@media (max-width:1280px){
  .kr-gnb-top .kr-gnb-in{grid-template-columns:1fr minmax(320px,480px) 1fr;gap:24px}
  .kr-menu .kr-gnb-in{gap:28px}
}
@media (max-width:1024px){
  .kr-gnb-top .kr-gnb-in{grid-template-columns:auto minmax(0,1fr) auto;gap:20px}
  .kr-tools{gap:12px}
  .kr-menu .kr-gnb-in{justify-content:flex-start;overflow-x:auto;gap:24px;scrollbar-width:none}
  .kr-menu .kr-gnb-in::-webkit-scrollbar{display:none}
}
/* 태블릿 폭(721–1024px) — 메뉴 줄이 가로로 밀리는 칸(overflow-x)이라 그 안에 absolute 로 띄운 펼침 목록이 잘려 안 보였다(10-15 실측: 900px 에서 목록이 left -224px·메뉴 줄 밖).
   .kr-menu 의 backdrop-filter 가 fixed 의 기준 상자가 되므로 fixed + top:100% 면 메뉴 줄 바로 아래에 줄 폭으로 펼쳐지고 스크롤 칸에 안 잘린다. */
@media (min-width:721px) and (max-width:1024px){
  .kr-dd{position:static}
  .kr-dd-panel{position:fixed;top:100%;left:24px;right:24px;transform:none;min-width:0;max-height:70vh;overflow:auto}
  .kr-dd-zones{grid-template-columns:repeat(4,minmax(0,1fr))} .kr-dd-explore{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  html{scroll-padding-top:48px}
  .kr-gnb-in{padding:0 16px}
  .kr-gnb-top .kr-gnb-in{grid-template-columns:minmax(0,1fr) auto;height:auto;padding-top:12px;padding-bottom:12px;gap:12px 14px}
  /* 언어 링크는 검색칸 오른쪽에 남긴다 — 글 안에서 같은 글의 다른 언어판으로 가는 유일한 길(10-15, 종전엔 모바일에서 숨김) */
  .kr-tools{display:contents}
  .kr-logo{grid-column:1;grid-row:1} .kr-a2hs{grid-column:2;grid-row:1;justify-self:end}
  .kr-search{grid-column:1;grid-row:2;height:44px;padding-left:16px} .kr-search input{text-overflow:ellipsis;font-size:13px}
  .kr-tools .kr-lang{grid-column:2;grid-row:2;gap:9px;font-size:12px} .kr-lang a{padding:12px 0}
  .kr-dd-panel,.kr-dd-t{display:none!important} /* 휴대폰 메뉴 줄은 가로로 미는 링크만 — 펼침 없음 */
  .kr-menu .kr-gnb-in{height:48px} .kr-menu .kr-gnb-in>a,.kr-dd>a{font-size:14px}
}

/* 쿠키 동의 창 — 홈·하위 페이지 버튼과 같은 둥근 모양(10-15 Owner). 색은 그대로 먹색(동의·거부를 같은 무게로 — 빨강으로 한쪽을 밀지 않는다) */
.koc-consent{border-radius:14px;border-color:var(--kr-line);box-shadow:0 10px 32px rgba(26,29,35,.14)}
.koc-consent-btn{border-radius:22px;padding:0 18px;font-family:var(--kr-sans);letter-spacing:0;border-color:var(--kr-ink);transition:background .15s,color .15s}
.koc-consent-btn:hover{text-decoration:none;background:var(--kr-panel)}
.koc-consent-btn.is-primary:hover{background:#000;color:#fff}

/* ── 공용: 안내 8칸(홈 「여기서 찾아보세요」·404) — home-v5.css 에서 옮김(같은 규칙) ── */
:root{
  /* 안내 타일 여덟 색 — 쪽·주홍·솔·자두·송화·청록·다홍·남보라. 글자색은 진한 쪽, 바탕은 옅은 쪽 */
  --h1:#24426A; --h1b:#E3EAF3; --h2:#B4502C; --h2b:#F8E7DF; --h3:#2F6A4B; --h3b:#E1EEE5; --h4:#7D4569; --h4b:#F2E5EE;
  --h5:#A06B12; --h5b:#F7EBD3; --h6:#1D6C76; --h6b:#DCEEF0; --h7:#B03A3A; --h7b:#F7E2E1; --h8:#4A4F98; --h8b:#E6E7F6;
}
.kr-guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kr-guide-cell{display:flex;align-items:center;gap:14px;background:var(--kr-surface);border-radius:12px;padding:18px 18px;box-shadow:0 1px 0 var(--kr-line),0 2px 10px rgba(26,29,35,.04);transition:box-shadow .2s,transform .2s}
.kr-guide-cell:hover{box-shadow:var(--kr-shadow-h);transform:translateY(-2px)}
.kr-guide-ic{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--hb);color:var(--hc)}
.kr-guide-ic .kr-i{width:22px;height:22px}
.kr-guide-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kr-guide-tx b{font:700 16px/1.3 var(--kr-sans)} .kr-guide-tx small{font:400 13px/1.4 var(--kr-sans);color:var(--kr-muted)}
.kr-right{color:#A3A8B0} .kr-guide-cell:hover .kr-right{color:var(--hc)}
.kr-h1{--hc:var(--h1);--hb:var(--h1b)} .kr-h2{--hc:var(--h2);--hb:var(--h2b)} .kr-h3{--hc:var(--h3);--hb:var(--h3b)} .kr-h4{--hc:var(--h4);--hb:var(--h4b)}
.kr-h5{--hc:var(--h5);--hb:var(--h5b)} .kr-h6{--hc:var(--h6);--hb:var(--h6b)} .kr-h7{--hc:var(--h7);--hb:var(--h7b)} .kr-h8{--hc:var(--h8);--hb:var(--h8b)}
@media (max-width:1024px){ .kr-guide-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
  .kr-guide-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kr-guide-cell{flex-direction:column;align-items:flex-start;gap:10px;padding:14px} .kr-guide-cell .kr-right{display:none}
  .kr-guide-ic{width:40px;height:40px;border-radius:10px} .kr-guide-ic .kr-i{width:20px;height:20px}
  .kr-guide-tx b{font-size:15px} .kr-guide-tx small{font-size:12px}
}

/* 「전체 메뉴」(2026-10-16 아르: 휴대폰 메뉴 줄에서 지금 메뉴가 잘리고 하위 항목에 닿을 길이 없었다) — 1024px 이하, 메뉴 줄 맨 앞에 붙어 있다. 펼침 판은 gnb-v5.js 가 메뉴 줄 링크로 짓는다 */
.kr-menu-all{display:none;flex:none;align-items:center;gap:6px;height:100%;padding:0 14px 0 0;margin-right:4px;border:0;border-right:1px solid var(--kr-line);background:none;font:600 14px var(--kr-sans);color:var(--kr-ink);cursor:pointer}
.kr-menu-sheet{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--kr-line);box-shadow:var(--kr-shadow-h);max-height:70vh;overflow:auto;padding:16px 24px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;z-index:60}
.kr-menu-sheet[hidden]{display:none}
.kr-menu-g{display:flex;flex-direction:column;gap:2px}
.kr-menu-g a{font:400 14px/1.4 var(--kr-sans);color:var(--kr-muted);text-decoration:none;padding:6px 0}
.kr-menu-g a.kr-menu-top{font:700 15px var(--kr-sans);color:var(--kr-ink);border-bottom:1px solid var(--kr-line);padding-bottom:8px;margin-bottom:2px}
@media (max-width:1024px){ .kr-menu-all{display:inline-flex} }
.kr-menu-all:focus-visible,.kr-menu a:focus-visible{outline:2px solid var(--kr-primary)!important;outline-offset:3px;border-radius:8px}
.kr-menu-all{position:sticky;left:0;z-index:2;background:#fff;align-self:stretch;box-shadow:-24px 0 0 #fff} /* 줄 안쪽 여백(16~24px) 틈으로 밀려간 메뉴 글자가 버튼 왼쪽에 비치던 것을 덮는다 — 0.24.207 */
@media (max-width:720px){ .kr-menu-sheet{padding:14px 16px 18px} }