/* ============================================================
   사이트 공통 크롬 — 상단바 · 진행바 · 페이저 · 다크모드 토글
   모든 페이지(인덱스/서브페이지 공통)가 로드.
   페이지 테마와 변수 충돌을 피하기 위해 자체 스코프 변수(--cn-*)만 사용.
   ============================================================ */

/* 크롬 전용 팔레트 — 페이지 테마 변수와 무관 */
:root{
  --cn-ink:#2b3550;
  --cn-ink-soft:#5a6580;
  --cn-mint-deep:#19a78a;
  --cn-card:#ffffff;
  --cn-line:#e7edf5;
  --cn-bg:rgba(251,253,255,.72);
  --cn-bg-scrolled:rgba(251,253,255,.92);
  --cn-bg-solid:rgba(251,253,255,.98);
  --cn-border:rgba(231,237,245,.6);
  --cn-shadow-lg:0 20px 50px rgba(43,53,80,.14);
  --cn-radius-sm:14px;
}
html.dark{
  --cn-ink:#e5eaf6;
  --cn-ink-soft:#9fb0cc;
  --cn-mint-deep:#3dd6b8;
  --cn-card:#161e30;
  --cn-line:#2b3650;
  --cn-bg:rgba(12,19,34,.75);
  --cn-bg-scrolled:rgba(12,19,34,.94);
  --cn-bg-solid:rgba(12,19,34,.98);
  --cn-border:rgba(43,54,80,.7);
}

/* 상단 진행 바 — 서브페이지의 .progress 클래스 규칙보다 id 셀렉터가 우선 */
#progress{
  position:fixed;top:0;left:0;height:6px;width:0;
  background:linear-gradient(90deg,#3dd6b8,#6ec6ff,#9c6ade);
  z-index:1000;transition:width .1s linear;
}

/* 고정 상단바 분량만큼 콘텐츠 내려주는 페이지(서브페이지)용 */
body.fixed-nav{padding-top:62px}

/* 앵커 이동 시 상단바에 가려지지 않게 */
section[id],footer[id]{scroll-margin-top:72px}

/* ============================================================
   고정 상단 내비게이션 (.topnav)
   ============================================================ */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;gap:8px;
  padding:12px 22px;
  background:var(--cn-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cn-border);
  transition:background .25s,box-shadow .25s,border-color .25s;
}
.topnav.scrolled{background:var(--cn-bg-scrolled);box-shadow:0 4px 18px rgba(43,53,80,.08)}
.topnav .brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--cn-ink);font-weight:900;font-size:1.05rem}
.topnav .brand .logo{font-size:1.25rem}
.topnav .brand .sub{font-weight:700;color:var(--cn-mint-deep);font-size:.78rem;letter-spacing:.04em}
.topnav .links{display:flex;align-items:center;gap:6px;margin-left:auto;order:1}
.topnav .links a{
  text-decoration:none;color:var(--cn-ink-soft);font-weight:800;font-size:.92rem;
  padding:8px 14px;border-radius:30px;transition:color .2s,background .2s;
}
.topnav .links a:hover{color:var(--cn-ink);background:rgba(110,198,255,.12)}
.topnav .links a.active{color:#fff;background:linear-gradient(120deg,#19a78a,#6ec6ff)}
.topnav .burger{display:none;background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--cn-ink);padding:4px 8px}

/* 다크모드 토글 버튼 — 아이콘(🌙/☀️)은 theme.js가 갱신.
   DOM은 브랜드 뒤에 있지만 order로 링크 다음(오른쪽 끝)에 배치 */
.topnav .theme-toggle{
  order:2;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:30px;border:none;background:none;cursor:pointer;
  font-size:1.1rem;line-height:1;color:var(--cn-ink);padding:0;
  transition:background .2s,transform .2s;
}
.topnav .theme-toggle:hover{background:rgba(110,198,255,.14);transform:rotate(12deg)}

/* 링크 그룹 드롭다운 — 상단바가 좁은 너비에서도 안 몰리게
   다른 페이지 링크들은 .nav-group 안에 넣고 버튼 하나로 묶는다 */
.topnav .nav-group{position:relative;display:flex;align-items:center}
.topnav .nav-group-btn{
  display:inline-flex;align-items:center;gap:6px;border:none;background:none;cursor:pointer;
  color:var(--cn-ink-soft);font-weight:800;font-size:.92rem;font-family:inherit;
  padding:8px 14px;border-radius:30px;transition:color .2s,background .2s;
}
.topnav .nav-group-btn:hover{color:var(--cn-ink);background:rgba(110,198,255,.12)}
.topnav .nav-group-btn .caret{font-size:.7rem;transition:transform .2s}
.topnav .nav-group.open .nav-group-btn{color:var(--cn-ink);background:rgba(110,198,255,.12)}
.topnav .nav-group.open .nav-group-btn .caret{transform:rotate(180deg)}
.topnav .nav-group-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:230px;z-index:20;
  background:var(--cn-card);border:1px solid var(--cn-line);border-radius:var(--cn-radius-sm);
  box-shadow:var(--cn-shadow-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.topnav .nav-group.open .nav-group-menu{opacity:1;visibility:visible;transform:none}
.topnav .nav-group-cap{font-size:.72rem;font-weight:900;color:var(--cn-ink-soft);letter-spacing:.05em;padding:8px 12px 6px}
.topnav .nav-group-menu a{
  display:flex;align-items:center;gap:8px;justify-content:flex-start;
  padding:10px 12px;border-radius:10px;font-weight:700;
}
.topnav .nav-group-menu a:hover{background:rgba(110,198,255,.12);color:var(--cn-ink)}

/* ============================================================
   페이저 — 이전/다음 가이드 링크 (모든 페이지 하단)
   ============================================================ */
.pager{max-width:980px;margin:0 auto;padding:34px 22px 6px;display:flex;gap:14px}
.pager.wide{max-width:1080px} /* 서브페이지 콘텐츠 폭(.wrap 1080px)에 맞춤 */
.pager a{
  flex:1;display:flex;flex-direction:column;gap:4px;text-decoration:none;
  background:var(--cn-card);border:1px solid var(--cn-line);border-radius:var(--cn-radius-sm);
  box-shadow:0 10px 30px rgba(43,53,80,.08);padding:18px 20px;
  transition:transform .25s,box-shadow .25s;
}
.pager a:hover{transform:translateY(-4px);box-shadow:var(--cn-shadow-lg)}
.pager .pg-dir{font-size:.78rem;font-weight:900;color:var(--cn-ink-soft);letter-spacing:.04em}
.pager .pg-title{font-weight:900;color:var(--cn-ink);font-size:1.02rem}
.pager a.next{align-items:flex-end;text-align:right}

/* ============================================================
   반응형 (상단바·페이저)
   ============================================================ */
/* 중간 폭에서는 브랜드 영문 부제를 숨겨 한 줄 유지 여유 확보 */
@media(max-width:1080px){.topnav .brand .sub{display:none}}
@media(max-width:1024px){
  .topnav{padding:12px 16px}
  .topnav .links{gap:2px}
  .topnav .links a,.topnav .nav-group-btn{padding:8px 10px}
}
@media(max-width:860px){
  .topnav .links{position:fixed;top:58px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--cn-bg-solid);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--cn-line);box-shadow:0 10px 30px rgba(43,53,80,.08);padding:8px 14px;transform:translateY(-130%);transition:transform .28s cubic-bezier(.2,.7,.2,1);visibility:hidden}
  .topnav .links.open{transform:translateY(0);visibility:visible}
  .topnav .links a{padding:14px 16px;border-radius:14px;font-size:1rem}
  .topnav .burger{display:inline-block;order:3}
  /* 모바일: 링크 메뉴가 화면 밖으로 나가므로 토글을 오른쪽으로 */
  .topnav .theme-toggle{margin-left:auto}
  /* 모바일에선 그룹 버튼 없이 가이드 링크를 한 줄씩 펼쳐 보여준다 */
  .topnav .nav-group{display:block}
  .topnav .nav-group-btn{display:none}
  .topnav .nav-group-menu{
    position:static;min-width:0;opacity:1;visibility:visible;transform:none;
    background:transparent;border:none;box-shadow:none;padding:0;
    transition:none;
  }
  .topnav .nav-group-cap{padding:14px 16px 4px;font-size:.75rem;color:var(--cn-mint-deep)}
  .topnav .nav-group-menu a{padding:14px 16px 14px 34px;border-radius:14px;font-size:1rem;font-weight:800}
}
@media(max-width:680px){
  .pager{flex-direction:column}
}