/* Scoped to the four national data disclosures. Map and chart colors stay semantic. */
:root {
  --disclosure-radius: 6px;
  --disclosure-control-radius: 4px;
  --disclosure-ink: #203c36;
  --disclosure-line: #d2ded8;
  --disclosure-accent: #0a695a;
  --disclosure-diagnosis-surface: #e7eeeb;
  --disclosure-insurance-surface: #f0f3f2;
  --disclosure-datamap-surface: #eaf2ee;
  --disclosure-updates-surface: #f4f6f5;
  --disclosure-white: #ffffff;
  --disclosure-enter-duration: 240ms;
  --disclosure-feedback-duration: 160ms;
  --disclosure-enter-distance: 8px;
}

.naru-disclosure {
  --disclosure-content-ink: var(--disclosure-text);
  background: var(--disclosure-fill) !important;
  color: var(--disclosure-text) !important;
  border-radius: var(--disclosure-radius) !important;
  border-color: var(--disclosure-line) !important;
  box-shadow: none !important;
}

.naru-disclosure > button {
  background-image: none !important;
  background-color: var(--disclosure-fill) !important;
  color: var(--disclosure-text) !important;
  border-radius: 0 !important;
  transition: opacity var(--disclosure-feedback-duration) ease-out;
}

.naru-disclosure--diagnosis {
  --disclosure-fill: var(--disclosure-diagnosis-surface);
  --disclosure-text: var(--disclosure-ink);
}

.naru-disclosure--insurance {
  --disclosure-fill: var(--disclosure-insurance-surface);
  --disclosure-text: var(--disclosure-ink);
}

.naru-disclosure--datamap {
  --disclosure-fill: var(--disclosure-datamap-surface);
  --disclosure-text: var(--disclosure-ink);
}

.naru-disclosure--updates {
  --disclosure-fill: var(--disclosure-updates-surface);
  --disclosure-text: var(--disclosure-ink);
}

.naru-disclosure > button span {
  color: inherit !important;
  opacity: 1 !important;
}

.naru-disclosure > button > span:last-child {
  border-radius: var(--disclosure-control-radius) !important;
  background: var(--disclosure-white) !important;
  color: var(--disclosure-accent) !important;
  border-color: var(--disclosure-line) !important;
}

.naru-disclosure button:focus-visible {
  outline: 3px solid var(--disclosure-accent);
  outline-offset: -4px;
}

.naru-disclosure:not(:has(> button)) button {
  border-radius: var(--disclosure-control-radius) !important;
}

/* Preserve contrasting labels on the existing light badges and controls. */
.naru-disclosure:not(:has(> button)) [style*="background"] {
  --disclosure-content-ink: var(--disclosure-ink);
}

.naru-disclosure:not(:has(> button)) :is(div, span, p, b, strong, small, a, td, th) {
  color: var(--disclosure-content-ink) !important;
}

.naru-disclosure:not(:has(> button)) > div:first-child > button {
  background: var(--disclosure-white) !important;
  color: var(--disclosure-accent) !important;
  border: 1px solid var(--disclosure-line) !important;
}

.naru-disclosure:not(:has(> button)) {
  animation: disclosure-enter var(--disclosure-enter-duration) ease-out both;
}

.naru-disclosure:not(:has(> button)) > div:first-child {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--disclosure-line);
}

@keyframes disclosure-enter {
  from {
    opacity: 0;
    transform: translateY(var(--disclosure-enter-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: hover) {
  .naru-disclosure > button:hover {
    outline: 1px solid var(--disclosure-accent);
    outline-offset: -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .naru-disclosure > button { transition: none; }
  .naru-disclosure:not(:has(> button)) { animation: none; }
}

.naru-region-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px 24px;
  padding: 16px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--disclosure-line);
  color: var(--disclosure-ink);
  font-size: 16px;
  line-height: 1.5;
}

.naru-region-nav-title {
  display: block;
  padding-block: 12px;
  font-weight: 700;
  grid-row: 1 / 3;
}

.naru-region-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  border-bottom: 1px solid var(--disclosure-line);
}

.naru-region-tabs button {
  display: block;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--disclosure-ink);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.naru-region-tabs button[aria-selected="true"] {
  color: var(--disclosure-accent);
  border-bottom-color: var(--disclosure-accent);
  font-weight: 700;
}

.naru-region-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  min-width: 0;
}

.naru-region-links[hidden] { display: none; }

.naru-region-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--disclosure-ink);
  text-decoration: none;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.naru-region-nav :is(button, a):focus-visible {
  outline: 2px solid var(--disclosure-accent);
  outline-offset: 4px;
}

@media (hover: hover) {
  .naru-region-tabs button:hover,
  .naru-region-links a:hover {
    color: var(--disclosure-accent);
    text-decoration: underline;
  }
}

@media (max-width: 767px) {
  .naru-region-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-block: 16px;
  }

  .naru-region-nav-title { grid-row: auto; padding-block: 0; }
  .naru-region-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Shared map summaries retain the SVG geometry and all data bindings. */
.naru-national-map,
.mjmapsg {
  --summary-ring-width: 12px;
  --summary-muted: #526763;
  --summary-rule: #cbdad5;
}

:is(.naru-national-map .mjmap, .mjmapsg) .rinfo text {
  font-family: inherit;
  letter-spacing: 0;
}

:is(.naru-national-map .mjmap, .mjmapsg) .rinfo circle {
  stroke-width: var(--summary-ring-width);
}

:is(.naru-national-map .mjmap, .mjmapsg) .rinfo circle:first-of-type {
  stroke: var(--summary-rule);
}

:is(.naru-national-map .mjmap, .mjmapsg) .rinfo text[font-size="42"] {
  font-size: 32px;
  font-weight: 700;
  fill: var(--disclosure-ink);
}

:is(.naru-national-map .mjmap, .mjmapsg) .rinfo text[font-size="19"],
:is(.naru-national-map .mjmap, .mjmapsg) .rinfo text[font-size="24"] {
  font-size: 22px;
  font-weight: 500;
  fill: var(--summary-muted);
}

:is(.naru-national-map .mjmap, .mjmapsg) .rinfo text[font-size="40"] {
  font-size: 44px;
  font-weight: 800;
  fill: var(--disclosure-ink);
}

:is(.naru-national-map .mjmap, .mjmapsg) .rinfo text[font-size="32"] {
  font-size: 26px;
  font-weight: 700;
  fill: var(--disclosure-accent);
}

:is(.naru-national-map .mjmap, .mjmapsg) .rinfo text[font-size="30"] {
  font-size: 24px;
  font-weight: 500;
  fill: var(--summary-muted);
}

.naru-national-map .mjmap .mjlegend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--summary-rule);
  color: var(--disclosure-ink);
}

.naru-national-map .mjmap .mjlegend .lgtitle {
  grid-column: 1 / -1;
  margin: 0 0 16px;
  font-size: 26px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--disclosure-ink);
}

.naru-national-map .mjmap .mjlegend .lgrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

.naru-national-map .mjmap .mjlegend .lgchip {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border-color: var(--summary-rule);
}

.naru-national-map .mjmap .mjlegend .lgtxt {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
}

.naru-national-map .mjmap .mjlegend .lgnote {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 20px;
  line-height: 1.65;
  color: var(--summary-muted);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.mjmap .mk-dokdo {
  --island-label-size: 20px;
  --island-label-font: "AppleMyungjo", "Batang", serif;
}

.mjmap .mk-dokdo .mk-lbl {
  font-family: var(--island-label-font);
  font-size: var(--island-label-size) !important;
  font-weight: 500;
  letter-spacing: 0;
}

/* Scope to the regional detail surface containing the existing KPI strip. */
:is(div:has(> .d-only > .nrstat), .naru-sigungu-report, .naru-sandan-report) {
  --detail-radius: 4px;
  --detail-text-gap: 12px;
  --detail-section-gap: 16px;
  --detail-reading-leading: 1.8;
}

div:has(> .d-only > .nrstat) > .nrcard,
div:has(> .d-only > .nrstat) > .d-only > .nrstat,
div:has(> .d-only > .nrstat) > .m-only,
div:has(> .d-only > .nrstat) > .m-only > div {
  border-radius: var(--detail-radius) !important;
}

div:has(> .d-only > .nrstat) > .nrcard {
  margin-block: var(--detail-section-gap) !important;
}

div:has(> .d-only > .nrstat) > .nrcard:not(.nrstat) {
  line-height: var(--detail-reading-leading) !important;
}

div:has(> .d-only > .nrstat) > .nrcard > div:first-child {
  margin-bottom: var(--detail-text-gap) !important;
}

div:has(> .d-only > .nrstat) > .nrcard > div[style*="color:"][style*="font-size:"],
div:has(> .d-only > .nrstat) > .nrcard > div[style*="background:"] {
  line-height: var(--detail-reading-leading) !important;
  margin-block: var(--detail-text-gap) !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

div:has(> .d-only > .nrstat) > .nrcard > div[style*="background:"] {
  border-radius: var(--detail-radius) !important;
  padding: 12px 16px !important;
}

div:has(> .d-only > .nrstat) .nrstat {
  line-height: 1.5;
}

div:has(> .d-only > .nrstat) .nrstat-l {
  margin-bottom: 8px;
}

div:has(> .d-only > .nrstat) .nrstat-v + div {
  margin-top: 8px !important;
}

.naru-sigungu-report .nrcard,
.naru-sigungu-report .nrcard [style*="border-radius:"] {
  border-radius: var(--detail-radius) !important;
}

.naru-sigungu-report .nrcard:not(.nrstat) {
  margin-block: var(--detail-section-gap) !important;
  line-height: var(--detail-reading-leading) !important;
}

.naru-sigungu-report .nrcard:not(.nrstat) > div:first-child {
  margin-bottom: var(--detail-text-gap) !important;
}

.naru-sigungu-report .nrcard:not(.nrstat) > div[style*="color:"][style*="font-size:"] {
  margin-block: var(--detail-text-gap) !important;
  line-height: var(--detail-reading-leading) !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.naru-sigungu-report .nrcard > div[style*="background:"][style*="line-height:"] {
  padding: 12px 16px !important;
}

.naru-sigungu-report .nrstat { line-height: 1.5; }
.naru-sigungu-report .nrstat-l { margin-bottom: 8px; }
.naru-sigungu-report .nrstat-v + div { margin-top: 8px !important; }

.naru-sigungu-report .tapRow {
  padding-block: 8px !important;
}

.naru-sandan-report .nrcard,
.naru-sandan-report [style*="border-radius:"] {
  border-radius: var(--detail-radius) !important;
}

.naru-sandan-report > .nrcard {
  margin-block: var(--detail-section-gap) !important;
}

.naru-sandan-report .nrcard > div:first-child {
  margin-bottom: var(--detail-text-gap);
}

.naru-sandan-report .nrcard > div[style*="line-height:"],
.naru-sandan-report details > div,
.naru-sandan-report p,
.naru-sandan-report ul,
.naru-sandan-report ol {
  line-height: var(--detail-reading-leading) !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.naru-sandan-report details,
.naru-sandan-report details > div,
.naru-sandan-report p,
.naru-sandan-report .nrcard > div[style*="line-height:"] {
  margin-top: var(--detail-text-gap) !important;
}

.naru-sandan-report details > div {
  padding: 12px 16px !important;
}

.naru-sandan-report li + li {
  margin-top: 8px;
}

.naru-sandan-report .tapRow {
  padding-block: 8px !important;
}

.naru-app--nation {
  max-width: none !important;
}

.naru-product-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.naru-guide-trigger {
  display: block; min-height: 44px; padding: 8px 12px;
  color: #155d53; background: #fff; border: 1px solid #b8cec8;
  border-radius: 4px; font: inherit; font-size: 16px; white-space: nowrap; cursor: pointer;
}
.naru-guide-layer { --guide-accent: #176f61; --guide-enter: 240ms; }
.naru-guide-mask { position: fixed; inset: 0; background: #102b2580; z-index: 11000; pointer-events: none; }
.naru-guide-frame { position: fixed; box-sizing: border-box; border: 2px solid var(--guide-accent); border-radius: 4px; z-index: 11001; pointer-events: none; }
.naru-guide-note {
  position: fixed; z-index: 11002; box-sizing: border-box;
  width: 360px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 24px; border: 1px solid #c6d8d2; border-radius: 4px;
  background: #fff; color: #233b35; box-shadow: 0 16px 48px #102b2533;
  font-size: 16px; line-height: 1.65; animation: naru-guide-enter var(--guide-enter) ease-out both;
}
.naru-guide-note small { display: block; color: #52675f; font-size: 14px; margin-bottom: 8px; }
.naru-guide-note h2 { font-size: 22px; line-height: 1.4; margin: 0 0 16px; letter-spacing: 0; }
.naru-guide-note p { margin: 0 0 24px; word-break: keep-all; overflow-wrap: anywhere; }
.naru-guide-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.naru-guide-actions button { display: block; min-height: 44px; padding: 8px 12px; border: 1px solid #b8cec8; border-radius: 4px; background: #fff; color: #24483e; font: inherit; cursor: pointer; }
.naru-guide-actions .primary { background: var(--guide-accent); border-color: var(--guide-accent); color: #fff; }
.naru-guide-trigger:focus-visible,.naru-guide-note:focus-visible,.naru-guide-actions button:focus-visible { outline: 3px solid #176f61; outline-offset: 4px; }
@media (hover: hover) { .naru-guide-trigger:hover,.naru-guide-actions button:not(.primary):hover { background: #e9f2ef; } .naru-guide-actions .primary:hover { background: #105648; } }
@keyframes naru-guide-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .naru-guide-note { animation: none; } }
@media (max-width: 767px) { .naru-product-header { grid-template-columns: minmax(0,1fr) auto; } .naru-guide-trigger { grid-column: 2; grid-row: 2; } .naru-guide-note { padding: 16px; } }

.naru-ministry-logo {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .naru-product-header { gap: 8px; }
  .naru-ministry-logo { width: 120px; }
}

.naru-app--nation .naru-main-content {
  max-width: none !important;
  width: 100%;
}

.naru-national-stage {
  --national-map-content-width: 832px;
  --shortcut-reserve: 352px;
  --shortcut-surface: #ffffff;
  position: relative;
  padding: 16px 16px 16px var(--shortcut-reserve);
  min-height: 232px;
  box-sizing: border-box;
  background: #eaf4fb;
  border-radius: 6px;
}

.naru-national-stage > .naru-national-map {
  width: 100%;
  max-width: var(--national-map-content-width);
  margin-inline: auto;
  box-sizing: border-box;
}

.naru-map-shortcuts {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  width: 320px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  margin: 0 !important;
  padding: 8px;
  border: 1px solid var(--disclosure-line);
  border-radius: 4px;
  background: var(--shortcut-surface);
  box-shadow: 0 4px 16px rgb(32 60 54 / 10%);
}

.naru-map-shortcuts > div:first-child {
  font-size: 13px !important;
  line-height: 1.5;
  letter-spacing: 0 !important;
  color: var(--disclosure-ink) !important;
}

.naru-map-shortcuts > div:last-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px !important;
}

.naru-map-shortcuts button {
  display: block;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0;
  word-break: keep-all;
  white-space: nowrap;
  overflow-wrap: normal;
}

.naru-map-shortcuts button:focus-visible {
  outline: 2px solid var(--disclosure-accent);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .naru-national-stage { padding: 232px 0 0; }
}

@media (max-width: 767px) {
  .naru-map-shortcuts { top: 8px; left: 8px; max-width: calc(100% - 16px); }
  .naru-map-shortcuts > div:last-child { grid-template-columns: minmax(0, 1fr); }
}

.naru-main-content {
  animation: naru-map-enter 240ms ease-out both;
}

@keyframes naru-map-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .naru-main-content { animation: none; }
}