:root[data-site="waste"] { color-scheme: light; --waste-ink: #232a25; --waste-muted: #626960; --waste-line: #dedfd7; --waste-accent: #23634a; --waste-canvas: #fff; --waste-surface: #fff; --waste-field: #f6f5f0; --waste-disabled: #efefe9; --waste-warm: #86602e; --waste-warm-bg: #f7f3e9; --waste-tint: #edf4ee; --waste-font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", sans-serif; --waste-content-width: 68rem; --waste-content-gutter: 2.5rem; }

[data-site="waste"] * { box-sizing: border-box; }
[data-site="waste"] body { margin: 0; color: var(--waste-ink); background: var(--waste-canvas); font-family: var(--waste-font-body); line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
[data-site="waste"] a { color: var(--waste-accent); text-underline-offset: 3px; }
[data-site="waste"] button, [data-site="waste"] input, [data-site="waste"] select { font: inherit; }
[data-site="waste"] button { cursor: pointer; }
[data-site="waste"] a:focus-visible, [data-site="waste"] button:focus-visible, [data-site="waste"] input:focus-visible, [data-site="waste"] select:focus-visible, [data-site="waste"] summary:focus-visible, [data-site="waste"] [tabindex]:focus-visible { outline: 3px solid var(--waste-accent); outline-offset: 3px; }

.site { min-height: 100vh; }
.container { max-width: var(--waste-content-width); margin: 0 auto; padding: 0 36px; }
.skip_link { position: fixed; left: 12px; top: -100px; background: var(--waste-surface); padding: 12px; z-index: 20; }
.skip_link:focus { top: 12px; }
.header { border-bottom: 1px solid var(--waste-line); }
.header .container { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--waste-accent); font-weight: 750; font-size: 20px; letter-spacing: -.05em; }
.headerNote { color: var(--waste-muted); font-size: 13px; }
.main { padding-top: 50px; padding-bottom: 54px; }
.intro { margin-bottom: 26px; }
.eyebrow { color: var(--waste-accent); font-size: 13px; font-weight: 700; margin: 0 0 12px; }
.intro h1 { text-wrap: balance; font-size: 38px; line-height: 1.3; letter-spacing: -.055em; margin: 0; }
.titlePhrase { white-space: nowrap; }
.intro > p:last-child { color: var(--waste-muted); margin: 0; font-size: 16px; }
.mobileBreak { display: none; }
.searchForm { background: var(--waste-field); padding: 28px; border: 1px solid var(--waste-line); border-radius: 8px; }
.formFields { display: grid; grid-template-columns: 1fr 1.3fr 150px; gap: 14px; align-items: end; }
.field { min-width: 0; }
.field label, .detailRegion label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 9px; }
.field label span { color: var(--waste-muted); font-size: 12px; font-weight: 400; margin-left: 6px; }
.field input, .regionButton, .select { border: 1px solid #bfc8bf; background: var(--waste-surface); border-radius: 4px; color: var(--waste-ink); width: 100%; min-height: 52px; padding: 12px 14px; }
.regionButton { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; }
.regionButton span:last-child { color: var(--waste-muted); }
.primary { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--waste-accent); color: #fff; border: 1px solid var(--waste-accent); border-radius: 4px; padding: 12px 18px; min-height: 52px; font-weight: 650; text-decoration: none; }
.primary:hover { filter: brightness(.93); }
.searchForm .primary { justify-content: center; }
.note { font-size: 13px; line-height: 1.7; color: var(--waste-muted); }
.searchForm > .note { margin: 12px 0 17px; }
.chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips > span { font-size: 12px; color: var(--waste-muted); margin-right: 4px; }
.chips button { border: 1px solid var(--waste-line); background: var(--waste-surface); border-radius: 24px; font-size: 13px; padding: 8px 13px; min-height: 44px; color: var(--waste-ink); }
 .browse { margin-top: 34px; }
.browse h2 { font-size: 20px; margin: 0 0 15px; }
.browse > div { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; }
.browse a { min-height: 52px; padding: 14px 2px; border-bottom: 1px solid var(--waste-line); display: flex; justify-content: space-between; gap: 12px; text-decoration: none; font-size: 15px; }
.browse a span { color: var(--waste-muted); }
.footer { border-top: 1px solid var(--waste-line); padding-top: 20px; padding-bottom: 24px; color: var(--waste-muted); font-size: 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; }
.footer nav { display: flex; gap: 18px; }
.footer a { padding: 10px 0; min-height: 44px; font-size: 13px; }
.error { color: #9b342c; margin: 12px 0 0; font-size: 14px; }
.dialog { border: 1px solid var(--waste-line); border-radius: 8px; padding: 26px; width: min(640px, calc(100% - 28px)); max-height: calc(100dvh - 40px); color: var(--waste-ink); }
.dialog::backdrop { background: #1e2f2866; }
.dialogHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dialogHeader h2 { font-size: 24px; margin: 0; }
.dialogHeader .eyebrow { margin-bottom: 5px; }
.close { background: transparent; border: 0; font-size: 28px; min-width: 44px; min-height: 44px; color: var(--waste-muted); }
.scopeTabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 20px; }
.scopeTabs button, .districts button { min-height: 46px; padding: 7px 5px; border: 1px solid var(--waste-line); background: var(--waste-surface); color: var(--waste-ink); border-radius: 4px; font-size: 14px; }
.scopeTabs button[aria-pressed="true"], .districts button[aria-pressed="true"] { border-color: var(--waste-accent); background: var(--waste-tint); color: var(--waste-accent); font-weight: 700; }
.scopeTabs small { color: var(--waste-muted); font-size: 11px; }
.scopeTitle { font-size: 17px; margin: 25px 0 12px; }
.regionWarning { font-size: 12px; color: var(--waste-warm); background: var(--waste-warm-bg); padding: 12px; }
.districts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.textButton { border: 0; background: none; color: var(--waste-accent); padding: 10px 0; min-height: 44px; margin-top: 14px; font-size: 13px; }
.resultSection { padding-top: 32px; }
.sectionHeading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sectionHeading h2 { margin: 0; font-size: 22px; letter-spacing: -.04em; }
.sectionHeading span { flex-shrink: 0; color: var(--waste-muted); font-size: 13px; }
.results { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--waste-line); }
.results li { border-bottom: 1px solid var(--waste-line); }
.results a { display: flex; align-items: center; gap: 16px; color: var(--waste-ink); text-decoration: none; padding: 23px 0; }
.results a > div { flex: 1; }
.results strong { font-size: 19px; }
.results p { font-size: 13px; color: var(--waste-muted); margin: 5px 0 0; }
.unknown, .available { font-size: 12px; white-space: nowrap; padding: 4px 7px; background: var(--waste-warm-bg); color: var(--waste-warm); border-radius: 3px; }
.available { color: var(--waste-accent); background: var(--waste-tint); }
.empty { border-top: 1px solid var(--waste-line); margin-top: 20px; padding: 20px 0; }
.empty h3 { font-size: 18px; }
.empty > p { color: var(--waste-muted); font-size: 14px; }
.back { text-decoration: none; font-size: 13px; display: inline-block; padding: 4px 0 10px; min-height: 36px; margin-bottom: 18px; }
.detailHeader { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 30px; }
.detailHeader h1 { font-size: 37px; line-height: 1.35; letter-spacing: -.055em; margin: 0 0 10px; }
.detailHeader p:last-child { font-size: 14px; color: var(--waste-muted); margin: 0; }
.detailRegion { width: 270px; flex-shrink: 0; }
.detailGrid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 44px; }
.detailGrid > div { min-width: 0; }
.answer, .answerUnknown { border-left: 4px solid var(--waste-accent); background: var(--waste-tint); padding: 24px 26px; }
.answerUnknown { border-color: var(--waste-line); background: var(--waste-field); }
.answer > p:first-child, .answerUnknown > p:first-child { font-size: 13px; font-weight: 650; color: var(--waste-accent); margin: 0 0 10px; }
.answerUnknown > p:first-child { color: var(--waste-muted); }
.answer h2 { font-size: 38px; line-height: 1.4; margin: 0 0 12px; letter-spacing: -.04em; }
.answer h2 span { font-size: 18px; font-weight: 500; margin-left: 6px; }
.answerUnknown h2 { font-size: 23px; line-height: 1.4; margin: 0 0 12px; letter-spacing: -.04em; }
.answer > p, .answerUnknown > p { font-size: 14px; margin: 10px 0 0; }
.answer .note, .answerUnknown .note { font-size: 12px; }
.sizeSection { margin-bottom: 18px; }
.selectLabel { display: block; font-size: 14px; font-weight: 650; margin: 0 0 7px; }
.feeNotes { margin-top: 18px; font-size: 14px; color: var(--waste-muted); }
.feeNotes p { margin: 8px 0; }
.sourceLink { font-size: 12px; color: var(--waste-muted); margin: 22px 0 0; }
.resultCount { font-size: 14px; color: var(--waste-muted); margin: 0 0 12px; }
.feeTable { border-collapse: collapse; width: 100%; margin-top: 20px; text-align: left; font-size: 14px; }
.feeTable caption { text-align: left; font-size: 12px; color: var(--waste-muted); padding-bottom: 10px; }
.feeTable th { font-size: 12px; color: var(--waste-muted); font-weight: 500; background: var(--waste-field); }
.feeTable th, .feeTable td { border-top: 1px solid var(--waste-line); border-bottom: 1px solid var(--waste-line); padding: 14px 10px; vertical-align: top; }
.feeTable th:last-child, .feeTable td:last-child { text-align: right; width: 33%; }
.feeTable td span { font-size: 12px; color: var(--waste-muted); }
.official { border-top: 2px solid var(--waste-accent); padding: 22px 0 25px; }
.official .primary { color: #fff; }
.official > p { margin: 0; }
.secondaryLink { display: flex; justify-content: space-between; padding: 12px 3px; font-size: 14px; min-height: 48px; }
.disabled { background: var(--waste-disabled); border-radius: 4px; color: var(--waste-muted); padding: 13px 18px; font-size: 14px; }
.official .warning { background: var(--waste-warm-bg); padding: 14px; font-size: 12px; color: var(--waste-warm); margin-top: 16px; }
.official > .note { margin-top: 14px; }
.information { max-width: 48rem; margin: 0 auto; font-size: 15px; }
.information h1 { font-size: 32px; line-height: 1.4; letter-spacing: -.04em; margin: 0 0 30px; }
.information h2 { font-size: 21px; line-height: 1.5; letter-spacing: -.035em; margin: 0 0 12px; }
.information h3 { font-size: 16px; margin: 25px 0 8px; }
.information p { margin: 10px 0; }
.infoSection, .dataRecord { padding: 26px 0; border-top: 1px solid var(--waste-line); }
.dateList { margin: 20px 0 8px; font-size: 14px; }
.dateList > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 6px 0; }
.dateList dt { color: var(--waste-muted); }
.dateList dd { margin: 0; text-align: right; }
.dataDetails { margin-top: 25px; padding-top: 12px; border-top: 1px solid var(--waste-line); }
.dataDetails summary { cursor: pointer; min-height: 44px; padding: 8px 0; color: var(--waste-accent); }
.sourceList { padding-left: 18px; }
.sourceList li { padding: 7px 0; }
.recordList { list-style: none; margin: 25px 0 0; padding: 0; border-top: 1px solid var(--waste-line); }
.recordList a { display: block; padding: 15px 0; border-bottom: 1px solid var(--waste-line); text-decoration: none; }
.recordList strong { display: block; font-weight: 650; }
.recordList span { display: block; margin-top: 4px; font-size: 13px; color: var(--waste-muted); }
.definitionList > div { margin: 17px 0; }
.definitionList dt { font-weight: 650; }
.definitionList dd { margin: 4px 0 0; color: var(--waste-muted); }
.regionList { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; font-size: 14px; }
.regionList li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--waste-line); padding: 8px 0; }
.regionList li > span:last-child { color: var(--waste-muted); }
.infoEnd { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; }
.infoEnd a { padding: 10px 0; min-height: 44px; }
.related { margin-top: 30px; }
.related a { display: inline-block; margin-right: 20px; padding: 8px 0; font-size: 14px; }
@media (max-width: 760px) {
  .container { padding-left: 22px; padding-right: 22px; }
  .header .container { min-height: 70px; }
  .brand { font-size: 18px; }
  .headerNote { font-size: 12px; text-decoration: none; }
  .main { padding-top: 34px; padding-bottom: 36px; }
  .intro h1 { text-wrap: balance; font-size: 34px; }
  .intro > p:last-child { font-size: 14px; }
  .mobileBreak { display: inline; }
  .searchForm { padding: 22px 18px; }
  .formFields { grid-template-columns: 1fr; gap: 19px; }
  .field label span { font-size: 11px; }
  .searchForm .primary { margin-top: 2px; }
  .chips { gap: 7px; }
  .chips > span { width: 100%; margin-bottom: 3px; }
  .browse > div { grid-template-columns: 1fr 1fr; column-gap: 25px; }
  .information h1 { font-size: 29px; }
  .information h2 { font-size: 20px; }
  .regionList { grid-template-columns: 1fr; }
  .sectionHeading h2 { font-size: 19px; }
  .results a { flex-wrap: wrap; gap: 8px 12px; }
  .results a > div { flex-basis: 65%; }
  .results p { font-size: 12px; }
  .results strong { font-size: 18px; }
  .detailHeader { display: block; margin-bottom: 22px; }
  .detailHeader h1 { font-size: 30px; }
  .detailRegion { width: 100%; margin-top: 24px; }
  .detailGrid { display: block; }
  .answer, .answerUnknown { padding: 22px 18px; }
  .answerUnknown h2 { font-size: 21px; }
  .answer h2 { font-size: 34px; }
  .detailAside { margin-top: 30px; }
  .dialog { padding: 20px; }
  .dialogHeader h2 { font-size: 22px; }
  .districts { grid-template-columns: repeat(3, 1fr); }
  .scopeTabs { gap: 6px; }
  .scopeTabs button { font-size: 13px; }
}
@media (max-width: 350px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .searchForm { padding: 18px 14px; }
  .intro h1 { text-wrap: balance; font-size: 31px; }
  .results a > div { flex-basis: 100%; }
  .dialog { padding: 16px; }
}
.headerNote { padding: 11px 0; min-height: 44px; text-decoration: none; }
.official h2 { font-size: 19px; margin: 0 0 16px; letter-spacing: -.035em; }

.feeTable tbody th { color:var(--waste-ink);background:transparent;font-size:14px;font-weight:500; }