/* 우리동네 공고 — nodos.kr 토큰 상속 */
:root{
  --bg:#fbfbf8; --ink:#101418; --ink-2:#43484d; --ink-3:#5b6065; --ink-4:#6b706d;
  --line:#e4e5df; --line-2:#cfd1cb; --gold:#86610a; --yellow:#ffd12e; --yellow-soft:#ffd94a;
  --dark:#101418; --on-dark:#fbfbf8; --on-dark-2:#a2a6a1; --tint:#f4f3ee;
  --good:#1f6b3f; --bad:#9a3412;
  --display:'Caprasimo','Jua',system-ui,sans-serif;
  --sans:'Figtree','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,4vw,48px); --w:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  text-wrap:pretty;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em;margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--yellow-soft)}

.inner{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.eyebrow{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.hl{background:linear-gradient(to bottom,transparent 62%,var(--yellow-soft) 62%)}

/* 상단 */
nav{position:sticky;top:0;z-index:30;background:rgba(251,251,248,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .inner{min-height:60px;padding-block:10px;display:flex;align-items:center;
  flex-wrap:wrap;row-gap:8px;column-gap:22px}
.logo{display:flex;align-items:center;gap:9px;margin-right:auto;
  font-family:var(--display);font-size:19px;white-space:nowrap}
.dot{width:11px;height:11px;background:var(--yellow);border-radius:2px}
nav a{font-size:14px;color:var(--ink-2);white-space:nowrap}

/* 머리 */
.phead{padding:clamp(44px,6.5vw,80px) 0 clamp(26px,3.5vw,38px)}
.phead h1{font-size:clamp(28px,4.6vw,46px);line-height:1.34;max-width:16ch}
.standfirst{font-size:16.5px;line-height:1.95;color:var(--ink-2);margin-top:22px;max-width:46ch}
.standfirst b{color:var(--ink);font-weight:700}
.stat{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:12.5px;color:var(--ink-4)}
.stat b{color:var(--ink);font-weight:700}

/* 마감 임박 */
.due-band{background:var(--dark);color:var(--on-dark);padding:clamp(26px,4vw,40px) 0}
.due-band h2{font-size:clamp(18px,2.6vw,24px);margin-bottom:6px}
.due-band .sub{font-size:13px;color:var(--on-dark-2);margin-bottom:20px}
.due-list{display:grid;gap:1px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13)}
.due-row{background:var(--dark);padding:13px 16px;display:flex;align-items:baseline;
  gap:12px;flex-wrap:wrap}
.due-row a{color:var(--on-dark);font-size:14.5px;font-weight:500;flex:1;min-width:200px;line-height:1.5}
.due-row a:hover{color:var(--yellow)}
.dday{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--dark);background:var(--yellow);padding:3px 8px;border-radius:3px;white-space:nowrap}
.dday.soon{background:#ff9d6b}
.due-row .when{font-size:12px;color:var(--on-dark-2);white-space:nowrap}

/* 거르개 */
.filters{position:sticky;top:60px;z-index:20;background:rgba(251,251,248,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  border-top:1px solid var(--line);padding:14px 0}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.frow+.frow{margin-top:10px}
.flab{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-right:2px}
.chip{border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  border-radius:100px;padding:6px 13px;font-size:13px;line-height:1.3;white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip .n{opacity:.6;font-size:11.5px;margin-left:4px}
.search{flex:1;min-width:180px;border:0;border-bottom:2px solid var(--ink);
  background:transparent;padding:6px 2px;font-size:14.5px;color:var(--ink);outline:0}
.search::placeholder{color:var(--ink-4)}

/* 목록 */
.list-wrap{padding:clamp(30px,4vw,50px) 0 clamp(56px,8vw,96px)}
.count{font-size:13px;color:var(--ink-4);margin-bottom:18px}
.count b{color:var(--ink)}
.items{border-top:1px solid var(--line)}
.item{display:block;border-bottom:1px solid var(--line);padding:17px 0}
.item:hover{background:rgba(255,209,46,.07)}
.item .t{font-size:16px;line-height:1.6;font-weight:500;color:var(--ink)}
.item:hover .t{color:var(--gold)}
.meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 12px;
  font-size:12.5px;color:var(--ink-4);align-items:center}
.badge{font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:3px}
.badge.dj{background:#e8f0ff;color:#1f4788}
.badge.gw{background:#e6f5ec;color:#1f6b3f}
.cat{font-size:11.5px;color:var(--ink-3);border:1px solid var(--line-2);
  padding:2px 7px;border-radius:3px}
.empty{padding:60px 0;text-align:center;color:var(--ink-4);font-size:14.5px}
.more{display:block;width:100%;margin-top:28px;padding:14px;border:1px solid var(--line-2);
  background:transparent;border-radius:6px;font-size:14px;color:var(--ink-2)}
.more:hover{border-color:var(--ink);color:var(--ink)}

/* 밑 */
.how{background:var(--tint);border-top:1px solid var(--line);padding:clamp(40px,5.5vw,68px) 0}
.how h2{font-size:clamp(19px,2.6vw,26px);margin-bottom:16px}
.how p{font-size:15px;line-height:2;color:var(--ink-2);max-width:40em}
.how p+p{margin-top:13px}
.how b{color:var(--ink);font-weight:700}
.srcs{margin-top:22px;font-size:12.5px;color:var(--ink-4);line-height:1.9}
footer{border-top:1px solid var(--line);padding:30px 0 44px;font-size:12.5px;color:var(--ink-4)}
footer .inner{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
footer a{color:var(--ink-3)}

@media (max-width:600px){
  .filters{top:56px}
  .item .t{font-size:15px}
}

/* 붙어 있는 거르개 아래로 앵커가 숨지 않게 */
#how{scroll-margin-top:150px}
.due-band .sub b{color:var(--yellow);font-weight:600}

/* 탭 */
.tabs{border-top:1px solid var(--line);background:var(--bg)}
.tabs .inner{display:flex;gap:0}
.tab{border:0;background:transparent;padding:16px 20px 14px;font-size:15px;font-weight:600;
  color:var(--ink-4);border-bottom:3px solid transparent;display:flex;align-items:center;gap:8px}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--yellow)}
.tab .tn{font-size:12px;font-weight:600;color:var(--ink-4);background:var(--tint);
  border:1px solid var(--line);border-radius:100px;padding:1px 8px}
.tab[aria-selected="true"] .tn{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* 제도 안내문 */
.note{background:var(--tint);border:1px solid var(--line);border-radius:6px;
  padding:14px 16px;font-size:13.5px;line-height:1.85;color:var(--ink-3);margin-bottom:20px}
.note b{color:var(--ink);font-weight:700}

/* 제도 줄 */
.badge.sl{background:#f2ecff;color:#5b3fa0}
.item .sum{display:block;margin-top:6px;font-size:14px;line-height:1.7;color:var(--ink-3)}
.item .who{display:block;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);
  font-size:12.5px;line-height:1.75;color:var(--ink-4)}
.item .who b{color:var(--ink-3);font-weight:700;margin-right:5px}

@media (max-width:600px){
  .tab{padding:13px 14px 11px;font-size:14px}
}