/* 2호선 따라 걷기 공통 스타일 — 남한산성 site.css 와 같은 뼈대, 강조색만 2호선 녹색 계열 */

:root{
  --ink:#1C211D;
  --ink-soft:#4A544B;
  --paper:#E4E7DE;
  --card:#F3F4EE;
  --stone:#6E7F6A;
  --stone-pale:#B9C2B4;
  --danj:#B23A2B;
  --nok:#1F8A4C;
  --line2:#1F8A4C;
  --line2-pale:#CFE3D4;
  --hwang:#BE8F33;
  --rule:#C6CCBF;
  --me:#1F6FD0;
  --c-site:#1F8A4C;
  --c-eat:#BE8F33;
  --c-way:#2F3A31;
  --c-hub:#1F6FD0;
  --c-cafe:#8C5A2B;
}

*{ box-sizing:border-box }

[hidden]{ display:none !important }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-tap-highlight-color:transparent;
}

.myeongjo{ font-family:"Nanum Myeongjo","AppleMyungjo","Batang","바탕",serif }

button{ font:inherit; color:inherit }

a{ color:var(--nok) }

/* ---------- 상단 메뉴 ---------- */

.sitenav{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--card);
  border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top);
}

.sitenav .in{
  max-width:1100px;
  margin:0 auto;
  height:46px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  overflow-x:auto;
  scrollbar-width:none;
}

.sitenav .in::-webkit-scrollbar{ display:none }

.sitenav .brand{
  font-family:"Nanum Myeongjo","AppleMyungjo","Batang","바탕",serif;
  font-weight:700;
  font-size:17px;
  color:var(--ink);
  text-decoration:none;
  padding:0 12px 0 0;
  margin-right:6px;
  line-height:46px;
  white-space:nowrap;
  border-right:1px solid var(--rule);
}

.sitenav a.sec{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:46px;
  padding:0 10px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  box-sizing:border-box;
}

.sitenav a.sec .n{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--stone-pale);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sitenav a.sec[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--danj);
}

.sitenav a.sec[aria-current="page"] .n{ background:var(--danj); color:#fff }

.sitenav a.sec:hover{ color:var(--ink) }

/* ---------- 공통 요소 ---------- */

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 max(20px, env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.pagehead{ padding:40px 0 20px; border-bottom:1px solid var(--rule) }

.pagehead h1{
  font-family:"Nanum Myeongjo","AppleMyungjo","Batang","바탕",serif;
  font-size:clamp(30px,6vw,44px);
  line-height:1.15;
  letter-spacing:-0.02em;
  font-weight:700;
  margin:0 0 12px;
}

.pagehead p{ margin:0; max-width:56ch; color:var(--ink-soft); font-size:16.5px }

.badge{
  display:inline-block;
  font-size:12.5px;
  padding:2px 9px;
  border-radius:2px;
  border:1px solid var(--rule);
  background:var(--card);
  color:var(--ink-soft);
  white-space:nowrap;
}

.badge.grade{ border-color:var(--hwang); color:var(--hwang); font-weight:600 }

.badge.warn{ border-color:var(--danj); color:var(--danj); font-weight:600 }

.badge.ok{ border-color:var(--nok); color:var(--nok); font-weight:600 }

.tipbox{
  margin-top:10px;
  padding:10px 14px;
  border-left:3px solid var(--nok);
  background:var(--paper);
  font-size:14.5px;
}

.tipbox b{ color:var(--nok); font-weight:700 }

footer.site{
  margin-top:60px;
  padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:13px;
  color:var(--ink-soft);
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}

/* ---------- 배경 일러스트 (2호선 순환선 · 도시 실루엣) ---------- */

body.ridge{ overflow-x:clip }

body.ridge .pagehead{
  --rh:300px;
  position:relative;
  border-bottom:0;
  padding-bottom:calc(var(--rh) * .55 - 20px);
}

body.ridge .pagehead::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:calc(50% - 50vw);
  right:calc(50% - 50vw);
  bottom:-30px;
  height:var(--rh);
  pointer-events:none;
  background:url(./img/bg-loop.svg) no-repeat center bottom / auto 100%;
}

body.ridge .pagehead h1,
body.ridge .pagehead p{ text-shadow:0 1px 0 rgba(228,231,222,.9), 0 0 14px rgba(228,231,222,.95) }

@media (max-width:640px){
  body.ridge .pagehead{ --rh:220px }
}

/* ---------- 계정·동기화 버튼 (cloud.js 가 상단 메뉴 끝에 붙임) ---------- */

.sitenav .acct{
  position:sticky;
  right:0;
  margin-left:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 10px 0 5px;
  border:1px solid var(--rule);
  border-radius:999px;
  background:var(--card);
  box-shadow:-14px 0 10px var(--card);
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  white-space:nowrap;
}

.sitenav .acct svg{ width:17px; height:17px; margin-left:3px }

.sitenav .acct img,
.sitenav .acct i{ width:23px; height:23px; border-radius:50%; object-fit:cover }

.sitenav .acct i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--nok);
  color:#fff;
  font-style:normal;
  font-size:12px;
}

.sitenav .acct::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--stone-pale) }
.sitenav .acct[data-s="synced"]::after{ background:#2E9D5B }
.sitenav .acct[data-s="pending"]::after{ background:var(--hwang) }
.sitenav .acct[data-s="offline"]::after{ background:var(--danj) }
.sitenav .acct[data-s="signedout"]::after,
.sitenav .acct[data-s="loading"]::after{ display:none }

@media (max-width:640px){
  .sitenav .acct:not([data-s="signedout"]) span{ display:none }
}