/* lifemap.ayo.pe.kr — 공중화장실·무료와이파이·무인민원발급기 독자 스킨 (2026-09-27, 사이트 고유 디자인 규칙).
 *
 * 콘셉트: **공공 안내 사인(웨이파인딩) × 픽토그램**. 화장실·와이파이·발급기는 "지금 가장 가까운 곳이
 * 어디냐" 를 급하게 찾는 곳이라 역·청사 천장에 달린 흑연색 안내판·노란 화살표·정사각 픽토그램 말투로 화면을 짠다.
 * site.css(디자인 A) 위에 덮어쓰고 전부 body.site-lifemap 아래로 가둔다 — 다른 사이트에 새지 않는다.
 *
 *   헤더   : 흑연색 천장 안내판 + 노란 "i" 정보 표지 · 글꼴 IBM Plex Sans KR 굵게
 *   탭     : 안내판 칸(가는 세로 구분선 · 선택 칸은 노란 바탕)
 *   요약표 : 정보 패널(검은 머리칸 + 흰 값칸)
 *   질답   : 안내 항목 — 질문 앞 정사각 "?" 픽토그램, 답은 굵은 왼쪽 선
 *   목록   : 방향 안내 줄(오른쪽 노란 화살표 칸)
 *   지역   : 출구 번호판 같은 흑연 타일
 *   메뉴   : 픽토그램 큰 타일(메뉴마다 공공 사인 색 — 초록·파랑·보라)
 *
 * ⚠️ 광고 유닛(<ins>·.ad-top·.ad-row 안쪽)에는 배경·테두리·라벨을 씌우지 않는다(site.css 애드센스 절).
 * ⚠️ 질문(h2)과 답(p) 사이에 요소를 끼우지 않는다 — 장식은 ::before/::after 로만.
 * ⚠️ 명도 대비를 먼저 본다 — 급할 때 보는 화면이라 흐린 회색 글씨를 쓰지 않는다.
 */

body.site-lifemap {
  --fg: #111418;
  --fg-soft: #30363d;
  --muted: #59616b;
  --line: #d4d8dd;
  --line-soft: #e6e9ec;
  --bg: #ffffff;
  --bg-soft: #f1f3f5;
  --accent: #1560bd;
  --accent-strong: #0d4a94;
  --accent-soft: #e5eefb;
  --accent-wash: #f3f7fd;
  --accent-line: #b7cdee;
  --graphite: #23272d;
  --graphite-2: #333941;
  --sign: #ffc72c;            /* 안내 노랑 */
  --wc: #12805c;              /* 화장실 초록 */
  --wifi: #1560bd;            /* 와이파이 파랑 */
  --kiosk: #6a3fb0;           /* 민원 보라 */
  --radius: 6px;
  --wrap: 880px;
  background: #eceef0;
  font-family: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

body.site-lifemap main,
body.site-lifemap .site-foot,
body.site-lifemap .ad-top,
body.site-lifemap .top-search { max-width: var(--wrap); }

body.site-lifemap h1,
body.site-lifemap .brand,
body.site-lifemap .qa-head,
body.site-lifemap section.list > h2,
body.site-lifemap section.children > h2,
body.site-lifemap section.other-sites > h2,
body.site-lifemap .near h2,
body.site-lifemap .mapsec-head,
body.site-lifemap .source h2,
body.site-lifemap .menu-cards li > a {
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* ── 헤더: 천장 안내판 ───────────────────────────────────────────────── */
body.site-lifemap .site-head {
  max-width: none;
  margin: 0 0 8px;
  padding: 16px max(20px, calc((100% - var(--wrap)) / 2 + 20px));
  border-bottom: 5px solid var(--sign);
  background: var(--graphite);
  gap: 12px 24px;
}
body.site-lifemap .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  line-height: 1.2;
}
/* 정보 표지 "i" */
body.site-lifemap .brand::before {
  content: "i";
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 4px;
  background: var(--sign);
  color: var(--graphite);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 700;
}
body.site-lifemap .brand a { color: #fff; }
body.site-lifemap .brand a:hover { color: var(--sign); text-decoration: none; }
body.site-lifemap .site-head nav {
  gap: 0;
  border: 1px solid #4a525c;
  border-radius: 4px;
  overflow: hidden;
}
body.site-lifemap .site-head nav a {
  padding: 7px 16px;
  border-radius: 0;
  background: transparent;
  color: #e9ecef;
  font-size: 14.5px;
  font-weight: 500;
}
body.site-lifemap .site-head nav a + a { border-left: 1px solid #4a525c; }
body.site-lifemap .site-head nav a::after { content: " →"; color: var(--sign); }
body.site-lifemap .site-head nav a:hover { background: var(--graphite-2); color: #fff; text-decoration: none; }
body.site-lifemap .site-head nav a.on { background: var(--sign); color: var(--graphite); font-weight: 700; }
body.site-lifemap .site-head nav a.on::after { color: var(--graphite); }

/* 검색창 */
body.site-lifemap .site-search input[type="search"] {
  border: 2px solid var(--graphite);
  border-radius: 4px;
  background: #fff;
}
body.site-lifemap .site-search input[type="search"]:focus { outline: 3px solid var(--sign); border-color: var(--graphite); }
body.site-lifemap .site-search button {
  border-radius: 4px;
  background: var(--graphite);
  color: var(--sign);
  font-weight: 700;
}
body.site-lifemap .site-search button:hover { background: #000; }

/* ── 제목·경로 ───────────────────────────────────────────────────────── */
body.site-lifemap .crumb { font-size: 13px; }
body.site-lifemap .crumb a { color: var(--fg-soft); }
body.site-lifemap .crumb a::after { content: " ▸ "; color: #8a939d; }
body.site-lifemap .crumb span { color: var(--fg); font-weight: 700; }

body.site-lifemap h1 {
  font-size: 30px;
  line-height: 1.3;
  color: var(--fg);
  margin: 14px 0 20px;
  padding: 6px 0 6px 18px;
  border-left: 10px solid var(--sign);
}
body.site-lifemap .lead { margin: 0 0 22px; color: var(--fg-soft); }
body.site-lifemap .data-date {
  display: inline-block;
  margin: 0 0 16px;
  padding: 3px 10px;
  border-radius: 3px;
  background: var(--graphite);
  color: #fff;
  font-size: 12.5px;
}

/* ── 요약표: 정보 패널 ───────────────────────────────────────────────── */
body.site-lifemap .summary {
  border: 2px solid var(--graphite);
  border-radius: 6px;
  background: #fff;
}
body.site-lifemap .summary th {
  background: var(--graphite);
  color: #fff;
  font-weight: 500;
  font-size: 13.5px;
}
body.site-lifemap .summary tr + tr th { border-top-color: #3f464f; }
body.site-lifemap .summary tr + tr td { border-top: 1px solid var(--line); }
body.site-lifemap .summary td { font-weight: 500; }
body.site-lifemap .summary td a:not(.btn) { color: var(--accent-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

body.site-lifemap .btn { border-radius: 4px; }
body.site-lifemap .btn-phone { border: 2px solid var(--graphite); color: var(--graphite); background: var(--sign); font-weight: 700; }
body.site-lifemap .btn-phone:hover { background: #ffd65c; color: #000; border-color: #000; }
body.site-lifemap .phone-note { color: var(--muted); }

/* ── 질답: 안내 항목 ─────────────────────────────────────────────────── */
body.site-lifemap .qa-head { font-size: 19px; color: var(--fg); }
body.site-lifemap .qa-head::before {
  content: "?";
  width: 26px; height: 26px;
  border-radius: 3px;
  background: var(--graphite);
  color: var(--sign);
  font-size: 16px;
}
body.site-lifemap .qa-list {
  padding: 4px 20px;
  border: 0;
  border-top: 4px solid var(--graphite);
  border-radius: 0 0 6px 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
body.site-lifemap .qa-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
body.site-lifemap .qa-item h2 { align-items: flex-start; font-size: 17px; color: var(--fg); }
body.site-lifemap .qa-item h2::before {
  content: "Q";
  width: 24px; height: 24px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--sign);
  color: var(--graphite);
  font-size: 13px;
  font-weight: 700;
}
body.site-lifemap .qa-item p {
  margin-left: 11px;
  padding-left: 21px;
  border-left: 3px solid var(--line);
  color: var(--fg-soft);
}

/* ── 지도·주변 ───────────────────────────────────────────────────────── */
body.site-lifemap .mapsec-head { color: var(--fg); }
body.site-lifemap .map-box { border-radius: 6px; }
body.site-lifemap .near { border-top: 4px solid var(--graphite); margin-top: 44px; }
body.site-lifemap .near h2 {
  padding-left: 0;
  border-left: 0;
  font-size: 17.5px;
  color: var(--fg);
}
body.site-lifemap .near h2::before {
  content: "→";
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-right: 10px;
  border-radius: 3px;
  background: var(--graphite);
  color: var(--sign);
  font-size: 15px;
  vertical-align: 1px;
}
body.site-lifemap .near-block {
  padding: 2px 18px 16px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
body.site-lifemap .near > .near-block > p,
body.site-lifemap .near ul,
body.site-lifemap .near .more { padding-left: 0; }
body.site-lifemap .near ul li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
body.site-lifemap .dist { background: var(--sign); color: var(--graphite); border-radius: 3px; font-weight: 700; }

/* ── 목록: 방향 안내 줄 ──────────────────────────────────────────────── */
body.site-lifemap section.list > h2,
body.site-lifemap section.children > h2,
body.site-lifemap section.other-sites > h2 {
  font-size: 18px;
  color: var(--fg);
  border-bottom: 4px solid var(--graphite);
}
body.site-lifemap .place-list { display: grid; gap: 8px; }
body.site-lifemap .place-list li {
  position: relative;
  padding: 12px 58px 12px 16px;
  border-bottom: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
body.site-lifemap .place-list li::after {
  content: "→";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 44px;
  display: grid;
  place-items: center;
  border-radius: 0 6px 6px 0;
  background: var(--graphite);
  color: var(--sign);
  font-size: 20px;
  font-weight: 700;
}
body.site-lifemap .place-list li:hover { box-shadow: 0 0 0 2px var(--sign); }
body.site-lifemap .place-list li > a { color: var(--fg); font-weight: 700; }
body.site-lifemap .place-list li.ad-row { padding: 0; background: none; box-shadow: none; border-radius: 0; }
body.site-lifemap .place-list li.ad-row::after { content: none; }
body.site-lifemap .cat { background: var(--bg-soft); color: var(--fg-soft); border-radius: 3px; border: 1px solid var(--line); }
body.site-lifemap .addr { color: var(--muted); }

/* ── 지역: 흑연 타일 ─────────────────────────────────────────────────── */
body.site-lifemap .region-links {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
body.site-lifemap .region-links li {
  padding: 10px 12px;
  border-bottom: 0;
  border-radius: 4px;
  background: var(--graphite);
}
body.site-lifemap .region-links li:hover { background: #000; box-shadow: inset 0 -4px 0 var(--sign); }
body.site-lifemap .region-links li > a { color: #fff; font-weight: 500; }
body.site-lifemap .region-links .count {
  padding: 0 6px;
  border-radius: 2px;
  background: var(--sign);
  color: var(--graphite);
  font-weight: 700;
}

/* 첫 화면 메뉴: 픽토그램 타일 */
body.site-lifemap .menu-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
body.site-lifemap .menu-cards li {
  --c: var(--wc);
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
  padding: 16px;
  border: 0;
  border-radius: 6px;
  background: var(--c);
}
body.site-lifemap .menu-cards li::before {
  content: "WC";
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 4px;
  background: #fff;
  color: var(--c);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -1px;
}
body.site-lifemap .menu-cards li:nth-child(2) { --c: var(--wifi); }
body.site-lifemap .menu-cards li:nth-child(2)::before {
  content: "";
  /* 와이파이 부채꼴 — 동심원 세 겹의 위쪽만 보이게 */
  background:
    radial-gradient(circle at 50% 78%, var(--c) 0 5px, transparent 5.5px),
    radial-gradient(circle at 50% 78%, transparent 0 11px, var(--c) 11.5px 16px, transparent 16.5px 22px, var(--c) 22.5px 27px, transparent 27.5px) 0 0 / 100% 78% no-repeat,
    #fff;
}
body.site-lifemap .menu-cards li:nth-child(3) { --c: var(--kiosk); }
body.site-lifemap .menu-cards li:nth-child(3)::before { content: "민원"; font-size: 19px; }
body.site-lifemap .menu-cards li:hover { box-shadow: inset 0 -6px 0 var(--sign); }
body.site-lifemap .menu-cards li > a { color: #fff; font-size: 21px; align-self: end; }
body.site-lifemap .menu-cards .count { color: rgba(255, 255, 255, .9); font-size: 13px; align-self: start; }

/* ── 출처·삭제요청·바닥 ───────────────────────────────────────────────── */
body.site-lifemap .source h2 { color: var(--fg); font-size: 17px; }
body.site-lifemap .removal {
  border: 2px solid var(--graphite);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}
body.site-lifemap .removal::before { content: none; }
body.site-lifemap .removal-icon { border-radius: 4px; background: var(--sign); color: var(--graphite); }
body.site-lifemap .btn-removal { background: var(--graphite); box-shadow: none; }
body.site-lifemap .btn-removal:hover { background: #000; }

body.site-lifemap .site-foot {
  max-width: none;
  margin-top: 56px;
  padding: 22px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 44px;
  border-top: 5px solid var(--sign);
  background: var(--graphite);
  color: #d0d5db;
}
body.site-lifemap .site-foot a { color: var(--sign); }

body.site-lifemap main.not-found .lead {
  padding: 14px 16px;
  border-radius: 6px;
  background: #fff;
  border-left: 8px solid var(--sign);
}

@media (max-width: 600px) {
  body.site-lifemap .site-head { padding: 14px 16px; }
  body.site-lifemap .brand { font-size: 19px; }
  body.site-lifemap .brand::before { width: 30px; height: 30px; font-size: 20px; }
  body.site-lifemap .site-head nav { width: 100%; }
  body.site-lifemap .site-head nav a { flex: 1; text-align: center; padding: 7px 6px; font-size: 13.5px; }
  body.site-lifemap h1 { font-size: 24px; border-left-width: 8px; padding-left: 13px; }
  body.site-lifemap .qa-item p { margin-left: 0; padding-left: 14px; }
  body.site-lifemap .region-links { grid-template-columns: 1fr 1fr; }
  body.site-lifemap .menu-cards { grid-template-columns: 1fr; }
}

/* ── 다크 모드: 야간 안내판 ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body.site-lifemap {
    --fg: #f1f3f5;
    --fg-soft: #cdd3da;
    --muted: #a3acb6;
    --line: #353b43;
    --line-soft: #2a2f36;
    --bg: #181b1f;
    --bg-soft: #22262b;
    --accent: #7fb0f0;
    --accent-strong: #a6c8f5;
    --accent-soft: #1b2738;
    --accent-wash: #161d28;
    --accent-line: #2d4466;
    --graphite: #0c0e10;
    --graphite-2: #1f2328;
  }
  body.site-lifemap { background: #121417; }
  body.site-lifemap .summary,
  body.site-lifemap .qa-list,
  body.site-lifemap .near-block,
  body.site-lifemap .place-list li,
  body.site-lifemap .removal,
  body.site-lifemap main.not-found .lead,
  body.site-lifemap .site-search input[type="search"] { background: #1c2025; color: var(--fg); }
  body.site-lifemap .summary,
  body.site-lifemap .removal,
  body.site-lifemap .site-search input[type="search"] { border-color: #4a525c; }
  body.site-lifemap .qa-list { border-top-color: var(--sign); }
  body.site-lifemap .near,
  body.site-lifemap section.list > h2,
  body.site-lifemap section.children > h2,
  body.site-lifemap section.other-sites > h2 { border-color: #4a525c; }
  body.site-lifemap .region-links li { background: #262b31; }
  body.site-lifemap .btn-removal { background: #333941; }
  body.site-lifemap .btn-phone { color: #111418; border-color: var(--sign); }
  body.site-lifemap .site-head nav a.on,
  body.site-lifemap .site-head nav a.on::after,
  body.site-lifemap .dist,
  body.site-lifemap .region-links .count,
  body.site-lifemap .qa-item h2::before,
  body.site-lifemap .removal-icon { color: #111418; }
  body.site-lifemap .menu-cards li::before { background: #f1f3f5; }
  body.site-lifemap .menu-cards li:nth-child(2)::before {
    background:
      radial-gradient(circle at 50% 78%, var(--c) 0 5px, transparent 5.5px),
      radial-gradient(circle at 50% 78%, transparent 0 11px, var(--c) 11.5px 16px, transparent 16.5px 22px, var(--c) 22.5px 27px, transparent 27.5px) 0 0 / 100% 78% no-repeat,
      #f1f3f5;
  }
}