/* ── Contact 「최신뉴스」 ─────────────────────────────────── */
.nws__cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }
.nws__cats button {
  padding: .55rem 1.3rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); font: 600 .95rem var(--font-body); color: var(--ink); cursor: pointer;
}
.nws__cats button:hover { border-color: var(--navy); color: var(--navy); }
.nws__cats button.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.nws__bar { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-bottom: .4rem; }
.nws__srcs { display: flex; gap: 5px; flex-wrap: wrap; flex: 1 1 360px; }
.nws__srcs button {
  padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line-soft);
  background: transparent; font: .8rem var(--font-body); color: var(--mauve); cursor: pointer;
}
.nws__srcs button b { font-weight: 600; margin-left: 2px; }
.nws__srcs button.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.nws__srcs button.off { text-decoration: line-through; opacity: .6; }
.nws__q {
  flex: 0 1 240px; min-width: 0; padding: .45rem .8rem; border-radius: 10px;
  border: 1px solid var(--line); font: .9rem var(--font-body); background: var(--white);
}
.nws__note { font-size: .78rem; color: var(--mauve); margin: .2rem 0 1rem; line-height: 1.6; }
.nws__warn { color: #a5532a; }

.nws__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.nws__mon {
  font: 400 1.05rem var(--font-display); letter-spacing: .04em; color: var(--teal-text);
  padding: 1.1rem 0 .3rem;
}
.nws__it {
  display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 2px 12px; align-items: baseline;
  padding: .62rem 0; border-bottom: 1px solid var(--line-soft);
}
.nws__d { font-size: .8rem; color: var(--mauve); font-variant-numeric: tabular-nums; }
.nws__it a { color: var(--ink); text-decoration: none; font-weight: 500; line-height: 1.5; word-break: keep-all; }
.nws__it a:hover { color: var(--navy); text-decoration: underline; }
.nws__src { font-size: .72rem; color: var(--mauve); white-space: nowrap; }
.nws__s { grid-column: 2 / 4; font-size: .8rem; color: #6b6461; line-height: 1.55; }
.nws__empty { padding: 2rem 0; color: var(--mauve); text-align: center; }
.nws__more { text-align: center; margin-top: 1.2rem; }
.nws__more button {
  padding: .55rem 1.6rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); font: .9rem var(--font-body); cursor: pointer;
}
.nws__more button:hover { border-color: var(--teal); color: var(--teal-text); }

@media (max-width: 640px) {
  .nws__it { grid-template-columns: 3rem 1fr; }
  .nws__src { grid-column: 2; }
  .nws__s { grid-column: 2; }
  .nws__q { flex: 1 1 100%; }
}

/* 출처 배지 — 줄 오른쪽 끝 */
.nws__badge {
  justify-self: end; white-space: nowrap; font-size: .72rem; font-weight: 600;
  padding: .18rem .6rem; border-radius: 6px; letter-spacing: -.01em;
}
.nws__sub { font-size: .72rem; font-weight: 400; color: var(--mauve); margin-left: 4px; }
@media (max-width: 640px) {
  .nws__badge { grid-column: 2; justify-self: start; }
}

/* Contact 「Websites」 — 1. 활동기관 · 2. 자주 가는 사이트 */
.websub { margin-top: 1.4rem; }
.websub + .websub { margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.websub__h { font: 600 1.25rem var(--font-body); color: var(--navy); margin: 0 0 .3rem; }
.websub__lead { margin: 0 0 1.2rem; font-size: .92rem; }

/* ── To BUY 아래 — 장본 것 · 제철 · 만들 수 있는 요리 ── */
.gro { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.gro__bar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.gro__add { display: flex; gap: .35rem; flex: 1 1 300px; min-width: 0; max-width: 100%; }
.gro__add input[type=date] { flex: 0 1 9.5rem; min-width: 0; }
.gro__add input[type=text] { flex: 1 1 auto; min-width: 0; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; font: .9rem var(--font-body); }
.gro__add input[type=date] { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 10px; font: .85rem var(--font-body); }
.gro__msg { font-size: .82rem; color: var(--teal-text); background: rgba(79,157,146,.08); padding: .55rem .8rem; border-radius: 10px; margin: .8rem 0 0; }
.gro__h { font: 600 1.08rem var(--font-body); color: var(--navy); margin: 1.8rem 0 .7rem; }
.gro__h small { font-weight: 400; font-size: .78rem; color: var(--mauve); }
.gro__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.gro__col { background: var(--white); border: 1px solid var(--line-soft); border-radius: 12px; padding: .7rem .8rem; border-top: 4px solid #ccc; }
.gro__col--fruit { border-top-color: #e0675a; }
.gro__col--veg   { border-top-color: #4f9d62; }
.gro__col--food  { border-top-color: #d99a3b; }
.gro__col--etc   { border-top-color: #8a8a8a; }
.gro__col h4 { margin: 0 0 .45rem; font: 600 .92rem var(--font-body); }
.gro__col h4 small { color: var(--mauve); font-weight: 400; }
.gro__col ul { list-style: none; margin: 0; padding: 0; }
.gro__col li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px; align-items: center; padding: .25rem 0; border-bottom: 1px dashed var(--line-soft); font-size: .85rem; }
.gro__d { color: var(--mauve); font-size: .72rem; }
.gro__cat { font-size: .68rem; border: 0; background: transparent; color: var(--mauve); max-width: 4.6rem; }
.gro__x { border: 0; background: none; color: #b9a9a3; cursor: pointer; font-size: .75rem; }
.gro__x:hover { color: #a5532a; }
.gro__none { color: var(--mauve); font-size: .82rem; margin: 0; }
.gro__pics { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.gro__pics figure { margin: 0; width: 96px; }
.gro__pics img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
.gro__pics figcaption { font-size: .68rem; color: var(--mauve); text-align: center; }
.gro__season p { margin: .2rem 0; font-size: .85rem; }
.gro__season b { display: inline-block; width: 3.4rem; color: var(--teal-text); }
.gro__season span { display: inline-block; margin: 2px 3px; padding: 1px 8px; border-radius: 999px; background: #f1ede6; font-size: .8rem; }
.gro__dish { list-style: none; margin: 0; padding: 0; }
.gro__dish li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.gro__r { border: 0; background: none; padding: 0; font: 600 .95rem var(--font-body); color: var(--navy); cursor: pointer; text-align: left; }
.gro__r:hover { text-decoration: underline; }
.gro__uses { font-size: .78rem; color: var(--teal-text); }
.gro__miss { font-size: .74rem; color: var(--mauve); }
.gro__ext { margin-left: auto; font-size: .75rem; color: var(--mauve); }
.gro__book { margin-top: 1.4rem; }
.gro__book summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.gro__book input { margin: .6rem 0; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 10px; width: min(100%, 320px); }
.gro__book ul { list-style: none; padding: 0; margin: 0; columns: 3 12rem; }
.gro__book li { break-inside: avoid; padding: .15rem 0; }
.gro__modal { position: fixed; inset: 0; background: rgba(20,18,17,.45); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gro__modal[hidden] { display: none; }
.gro__card { background: var(--white); border-radius: 16px; padding: 1.3rem 1.4rem; width: min(560px, 100%); max-height: 86vh; overflow: auto; box-shadow: var(--shadow-lg); }
.gro__card b { font-size: 1.15rem; color: var(--navy); }
.gro__steps { padding-left: 1.2rem; margin: .8rem 0; line-height: 1.7; font-size: .92rem; }
.gro__src { font-size: .75rem; color: var(--mauve); }
@media (max-width: 760px) { .gro__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .gro__cols { grid-template-columns: 1fr; } }

/* ── Cost of Living ── */
.col__bar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.col__meta { font-size: .8rem; color: var(--mauve); }
.col__note { font-size: .78rem; color: var(--mauve); margin: .6rem 0 1.2rem; }
.col__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.col__card { background: var(--white); border: 1px solid var(--line-soft); border-radius: 12px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: 2px; }
.col__card span { font-size: .78rem; color: var(--mauve); }
.col__card b { font-size: 1.35rem; color: var(--navy); }
.col__card small { font-size: .74rem; color: var(--mauve); min-height: 1em; }
.col__legend { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .6rem; }
.col__legend button { display: inline-flex; align-items: center; gap: 5px; padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font: .78rem var(--font-body); cursor: pointer; opacity: .45; }
.col__legend button.on { opacity: 1; }
.col__legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.col__chart { background: var(--white); border: 1px solid var(--line-soft); border-radius: 12px; padding: .6rem; }
.col__chart svg { width: 100%; height: auto; display: block; }
.col__chart .grid { stroke: rgba(28,26,25,.08); }
.col__chart .ylab { font-size: 11px; fill: #8a7f7a; text-anchor: end; }
.col__chart .xlab { font-size: 12px; fill: #6b6461; text-anchor: middle; }
.col__tablewrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line-soft); border-radius: 12px; }
.col__table { border-collapse: collapse; width: 100%; font-size: .8rem; font-variant-numeric: tabular-nums; }
.col__table th, .col__table td { padding: .42rem .5rem; text-align: right; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.col__table tbody th, .col__table tfoot th { text-align: left; font-weight: 600; }
.col__table th i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.col__table thead button { border: 0; background: none; font: 600 .78rem var(--font-body); color: var(--navy); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.col__table thead button.on, .col__table thead button:hover { background: var(--navy); color: #fff; }
.col__table tfoot td, .col__table tfoot th { font-weight: 700; border-top: 2px solid var(--line); }
.col__table .z { color: #cfc8c2; }
.col__table .tr.up { color: #c0392b; } .col__table .tr.down { color: #2f7fb8; } .col__table .tr.flat { color: #999; }
.col__month { margin-top: 1rem; }
.col__bars { display: flex; flex-direction: column; gap: 5px; }
.col__barrow { display: grid; grid-template-columns: 7.5rem 1fr 6.5rem 2.6rem; gap: 8px; align-items: center; font-size: .82rem; }
.col__barrow div { background: #f1ede6; border-radius: 4px; height: 12px; overflow: hidden; }
.col__barrow i { display: block; height: 100%; border-radius: 4px; }
.col__barrow b { text-align: right; font-variant-numeric: tabular-nums; }
.col__barrow small { color: var(--mauve); text-align: right; }
.col__h4 { margin: 1.2rem 0 .4rem; font-size: .95rem; }
.col__merch { margin: 0; padding-left: 1.3rem; font-size: .85rem; }
.col__merch li { padding: .2rem 0; }
.col__merch li span { margin-right: .5rem; }
.col__merch li small { color: var(--mauve); margin-right: .5rem; }
.col__merch li b { float: right; font-variant-numeric: tabular-nums; }
.col__tx { margin-top: 1rem; }
.col__tx summary { cursor: pointer; color: var(--navy); font-size: .85rem; }
.col__tx table { width: 100%; font-size: .8rem; border-collapse: collapse; margin-top: .5rem; }
.col__tx td { padding: .25rem .4rem; border-bottom: 1px solid var(--line-soft); }
.col__tx td.n { text-align: right; white-space: nowrap; }
.col__tx select { font-size: .75rem; }
@media (max-width: 760px) {
  .col__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col__barrow { grid-template-columns: 5.5rem 1fr 5.5rem; }
  .col__barrow small { display: none; }
}
.col__foot { font-size: .74rem; color: var(--mauve); margin: .3rem .4rem 0; }

/* 움직이는 그래프 */
.col__chart { position: relative; }
.col__chart .guide { stroke: rgba(28,26,25,.35); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.col__chart rect.hover { fill: transparent; cursor: crosshair; }
.col__chart g.ln { cursor: pointer; transition: opacity .25s; }
.col__chart g.ln .hit { fill: none; stroke: transparent; stroke-width: 14; }
.col__chart g.ln.dim { opacity: .13; }
.col__chart g.ln:hover .draw { filter: drop-shadow(0 0 2px rgba(0,0,0,.25)); }
.col__tip { position: absolute; z-index: 5; pointer-events: none; background: rgba(28,26,25,.92); color: #fff; border-radius: 10px;
  padding: .55rem .75rem; font-size: .76rem; line-height: 1.55; min-width: 170px; box-shadow: var(--shadow-md); }
.col__tip[hidden] { display: none; }
.col__tip b { display: block; margin-bottom: .2rem; font-size: .8rem; }
.col__tip span { display: flex; align-items: center; gap: 6px; }
.col__tip span.tot { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 2px; margin-bottom: 2px; font-weight: 700; }
.col__tip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.col__tip em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; padding-left: 10px; }
/* 항목 상세 */
.col__cat { margin-top: 1rem; background: var(--white); border: 1px solid var(--line-soft); border-left: 5px solid var(--c); border-radius: 12px; padding: 1rem 1.2rem; animation: colIn .35s ease; }
@keyframes colIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.col__cathead { display: flex; align-items: center; gap: .6rem; }
.col__cathead i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.col__cathead b { font-size: 1.15rem; }
.col__cathead button { margin-left: auto; }
.col__catnums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: .9rem 0; }
.col__catnums div { display: flex; flex-direction: column; background: #faf8f5; border-radius: 10px; padding: .55rem .7rem; }
.col__catnums span { font-size: .72rem; color: var(--mauve); }
.col__catnums b { font-size: 1.05rem; color: var(--navy); }
.col__catnums b.up { color: #c0392b; } .col__catnums b.down { color: #2f7fb8; }
.col__catnums small { font-size: .7rem; color: var(--mauve); }
.col__catbars { display: flex; gap: 6px; align-items: flex-end; height: 160px; }
.col__catbars button { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  border: 0; background: none; cursor: pointer; padding: 0; }
.col__catbars em { font-style: normal; font-size: .68rem; color: var(--mauve); margin-bottom: 2px; }
.col__catbars i { width: 70%; background: var(--c); border-radius: 5px 5px 0 0; min-height: 2px; max-height: calc(100% - 34px); opacity: .85; transition: opacity .2s; }
.col__catbars button:hover i { opacity: 1; }
.col__catbars span { font-size: .72rem; color: #6b6461; margin-top: 4px; }
@media (max-width: 760px) { .col__catnums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 대분류 · 세부 */
.col__lv { display: inline-flex; border: 1px solid var(--navy); border-radius: 999px; overflow: hidden; margin-right: 6px; }
.col__lv button { border: 0 !important; border-radius: 0 !important; opacity: 1 !important; background: var(--white); color: var(--navy); font-weight: 600; padding: .25rem .8rem !important; }
.col__lv button.on { background: var(--navy); color: #fff; }
.col__table tr.big th, .col__table tr.big td { font-weight: 700; background: #faf8f5; }
.col__table tr.sub th { font-weight: 400; padding-left: 1.6rem; color: #4a4542; }
.col__table tr.sub td { color: #6b6461; }
.col__cathead small { color: var(--mauve); font-size: .78rem; }
.col__desc { font-size: .8rem; color: var(--mauve); margin: .6rem 0 0; }
.col__rule { margin-top: 1.2rem; }
.col__rule summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.col__ruletab { width: 100%; border-collapse: collapse; margin-top: .7rem; font-size: .8rem; background: var(--white); }
.col__ruletab th, .col__ruletab td { border: 1px solid var(--line-soft); padding: .45rem .6rem; text-align: left; vertical-align: top; }
.col__ruletab thead th { background: #f3efe9; }
.col__ruletab tbody th { background: #faf8f5; white-space: nowrap; }
.col__ruletab td i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.col__ruletab td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 표의 항목 이름 — 누르면 그래프에서 그 선만 */
.col__rowk { border: 0; background: none; padding: 2px 6px 2px 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; border-radius: 6px; text-align: left; }
.col__rowk:hover { color: var(--navy); text-decoration: underline; }
.col__table tr.on th, .col__table tr.on td { background: #eef2fb !important; }
.col__table tr.on .col__rowk { color: var(--navy); font-weight: 700; }

/* 표 왼쪽 칸 — 항목 · 들어가는 것 · 예시 */
.col__table tbody th { white-space: normal; min-width: 260px; max-width: 360px; vertical-align: top; }
.col__table tbody td { vertical-align: top; padding-top: .55rem; }
.col__table small.col__d { display: block; font-weight: 400; font-size: .7rem; color: #7d7570; margin: 2px 0 0 15px; line-height: 1.45; }
.col__table small.col__ex { display: block; font-weight: 400; font-size: .66rem; color: #a0958f; margin: 1px 0 2px 15px; line-height: 1.45; }
.col__table thead th small { font-weight: 400; color: var(--mauve); font-size: .7rem; }
.col__how { font-size: .76rem; color: var(--mauve); margin: -.3rem 0 .7rem; line-height: 1.6; }
.col__how b { color: var(--navy); }
.col__table thead th:first-child { text-align: left; }
.gro__pics figure { position: relative; }
.gro__px { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; cursor: pointer; }
.gro__px:hover { background: #a5532a; }
.gro__n { cursor: pointer; } .gro__n:hover { color: var(--navy); text-decoration: underline dotted; }
.col__tx small.col__card { font-size: .66rem; color: #fff; background: #8a7f7a; border-radius: 4px; padding: 0 5px; margin-left: 4px; }

/* 맨 아래 — 대분류 / 중분류 / 해당 가게 */
.col__shops { width: 100%; border-collapse: collapse; font-size: .8rem; }
.col__shops th, .col__shops td { border-bottom: 1px solid var(--line-soft); padding: .55rem .65rem; text-align: left; vertical-align: top; }
.col__shops thead th { background: #f3efe9; font-size: .78rem; }
.col__shops th.g { background: #faf8f5; white-space: nowrap; font-size: .9rem; border-right: 1px solid var(--line-soft); }
.col__shops th.g small, .col__shops td.k small { display: block; font-weight: 400; font-size: .7rem; color: var(--mauve); margin-top: 2px; }
.col__shops td.k { white-space: nowrap; font-weight: 600; width: 9rem; }
.col__shops td.k i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.col__shops td.shops { line-height: 1.9; }
.col__shops td.shops span { display: inline-block; margin: 0 4px 3px 0; padding: 1px 8px; border-radius: 999px; background: #f4f1ec; font-size: .74rem; color: #4a4542; }
.col__shops td.shops em { font-style: normal; color: #a0958f; font-size: .68rem; }

/* 「전체」 게시판의 갈래 표시 · 「⟳ 모든 갈래 최신으로」 */
.nws__sp { flex: 1 1 auto; }
.nws__go { border: 1px solid #4f9d92 !important; color: #2f6a62 !important; background: #fff !important; font-size: .9rem !important; }
.nws__go:hover { background: #eef7f5 !important; }
.nws__go:disabled { opacity: .55; cursor: progress; }
.nws__run { margin: 6px 0 10px; font-size: .9rem; color: #2f6a62; background: #eef7f5; border-radius: 8px; padding: 8px 12px; }
.nws__run small { color: #6b625d; margin-left: 4px; }
.nws__run a { color: #2d5d9f; }
.nws__run.ok { background: #e8f5ec; color: #1f7a43; }
.nws__run.bad { background: #fdeeee; color: #a33a3a; }
.nws__cat { display: inline-block; font-size: .72rem; border-radius: 5px; padding: 0 6px; margin-left: 6px; vertical-align: 1px;
  border: 1px solid #d9d2cc; color: #5f5652; background: #fff; }
.nws__cat--ai { border-color: #9cc3a9; color: #1f7a43; }
.nws__cat--arch { border-color: #b4bcd8; color: #223a7a; }
.nws__cat--city { border-color: #e2bf9a; color: #b35a12; }
.nws__cat--estate { border-color: #9ccfb0; color: #03833d; }