@charset "utf-8";
/* layout.css — shared layout (header, menu, tabbar) + page sections */

/* Container */
.container { max-width: var(--mobile-max); margin: 0 auto; min-height: 100%; background: #fff; position: relative; padding-top: var(--mobile-header-h); padding-bottom: calc(var(--mobile-tabbar-h) + 12px); overflow: hidden;}
.container.--overflow-visible { overflow: visible; }

/* Focus ring */
.container a:focus-visible, .container button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mobile-focus); border-radius: 4px; }
@media (forced-colors: active) {
  .container a:focus-visible, .container button:focus-visible { outline: 2px solid; box-shadow: none; }
}

/* Visually hidden */
.blind { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/******************** Header ********************/
.header { position: fixed; top: 0; left: 0; right: var(--scrollbar-w, 0px); max-width: var(--mobile-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: var(--mobile-header-h); padding: 0 var(--mobile-pad); background: var(--bg-surface, #fff); z-index: 800; border-bottom: 1px solid var(--border-subtle); box-shadow: 0 4px 4px rgba(0, 0, 0, .05);}
.header__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.header__emblem { width: auto; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.header__emblem img { width: 100%; height: 100%; object-fit: contain; }
.header__title-group { min-width: 0; }
.header__title { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.header__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 32px; height: 44px; background: transparent; border: none; color: var(--text-primary); font-weight: 600; cursor: pointer; border-radius: 8px; transition: var(--ease);}
.header__btn:hover {color: var(--text-blue); }
.header__btn svg { width: 20px; height: 20px; }
.header__btn span { font-size: 0.8125rem; line-height: 1; white-space: nowrap; }
#menuBtn > img {width: 24px; height: auto;}

/******************** Full menu ********************/
.menu-overlay { position: fixed; top: 0; bottom: 0; left: max(0px, calc((100vw - var(--scrollbar-w, 0px) - var(--mobile-max)) / 2)); right: max(0px, calc((100vw - var(--scrollbar-w, 0px) - var(--mobile-max)) / 2)); background: rgba(0,0,0,0.5); z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;}
.menu-overlay.is-open { opacity: 1; pointer-events: auto; }
.menu { position: fixed; top: 0; bottom: 0; right: max(0px, calc((100vw - var(--scrollbar-w, 0px) - var(--mobile-max)) / 2)); width: 80%; max-width: 280px; background: #fff; z-index: 901; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); display: none; flex-direction: column;}
.menu.is-open { transform: translateX(0); display: flex;}
.menu__hd { display: flex; align-items: center; justify-content: space-between; height: var(--mobile-header-h); padding: 0 var(--mobile-pad); border-bottom: 1px solid var(--border-subtle, #e4e8ef); flex-shrink: 0; }
.menu__title { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); }
.menu__close { width: 32px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-secondary, #5a6a82); cursor: pointer; border-radius: 8px; }
.menu__close img { width: 18px; height: 18px; }
.menu__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }

/******************** Notice popup (재사용 템플릿) ********************/
.notice-popup-overlay { position: fixed; top: 0; bottom: 0; left: max(0px, calc((100vw - var(--scrollbar-w, 0px) - var(--mobile-max)) / 2)); right: max(0px, calc((100vw - var(--scrollbar-w, 0px) - var(--mobile-max)) / 2)); background: rgba(0,0,0,0.5); z-index: 950; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.notice-popup-overlay.is-open { opacity: 1; pointer-events: auto; }
.notice-popup { position: fixed; top: 50%; left: 50%; width: calc(100% - 48px); max-width: calc(var(--mobile-max) - 48px); background: #fff; border-radius: var(--mobile-radius); box-shadow: var(--shadow-lg); z-index: 951; padding: 20px; display: none; flex-direction: column; gap: 16px; transform: translate(-50%, -50%) scale(0.96); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; }
.notice-popup:focus { outline: none; }
.notice-popup.--sm { max-width: 240px; }
.notice-popup.--md { max-width: 300px; }
.notice-popup.is-open { display: flex; transform: translate(-50%, -50%) scale(1); opacity: 1; }
.notice-popup__hd { display: flex; align-items: center; gap: 8px; }
.notice-popup__icon { width: 22px; height: 22px; flex-shrink: 0; }
.notice-popup__title { flex: 1; font-size: 1.125rem; font-weight: 700; color: var(--text-primary); }
.notice-popup__close { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; border-radius: 6px; }
.notice-popup__close img { width: 16px; height: 16px; }
.notice-popup__body p { font-size: 1rem; color: var(--text-secondary); line-height: 1.5; }
.notice-popup__btns { display: flex; gap: 8px; }
.notice-popup__btns .btn { flex: 1; }

/******************** Main ********************/
/* quick links */
.menu__quick { display: flex; justify-content: space-between; gap: 8px; list-style: none; margin: 0; padding: 1rem 2rem;  background: var(--bg-muted)}
.menu__quick-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.menu__quick-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background:#fff; box-shadow: var(--shadow-sm);}
.menu__quick-icon img { width: auto; height: 22px; }
.menu__quick-icon.--blue   { background: var(--river-color, #185FA5); color: #fff; }
.menu__quick-icon.--purple { background: var(--chat-color, #6C4CE0); color: #fff; }
.menu__quick-icon.--dark   { background: #1a2236; color: #fff; }
.menu__quick-icon.--yellow { background: #FFF3D6; color: #B36B00; }
.container a.menu__quick-item:focus-visible { outline: none; box-shadow: none; border-radius: 0; }
.container a.menu__quick-item:focus-visible .menu__quick-icon { box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--mobile-focus); }
.menu__quick-label { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); text-align: center;}
/* Menu sections */
.menu__nav { display: flex; flex-direction: column; }
.menu__section { padding: var(--mobile-pad); border-top: 1px solid var(--border-subtle, #e4e8ef); }
.menu__section:first-child { border-top: none; padding-top: 0;}
.menu__section-title { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; position:relative; display: inline-block; box-shadow:inset 0 -6px 0 0 #D0E3FF;}
.menu__section-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu__section-list a { display: block; padding: 8px 2px; font-size: 1rem; color: var(--text-secondary, #5a6a82); line-height: 1.2; transition: var(--ease)}
.menu__section-list a:hover { color: var(--text-blue); font-weight: 600; }
/* Menu footer */
.menu__footer { padding: 1rem; border-top: 1px solid var(--border-subtle, #e4e8ef); display: flex; flex-direction: column; gap: 8px; }
.menu__opencheck { width: 130px; display: block;}
.menu__opencheck img {width: 100%;}
.menu__license { font-size: 0.875rem; color: var(--text-subtle, #5a6a82); line-height: 1.5; }
.menu__license a { color: var(--mobile-focus, #185FA5); text-decoration: underline; font-weight: 600; }
.menu__version { font-size: 0.8125rem; color: var(--text-subtle, #5a6a82); }
.menu__copyright { font-size: 0.8125rem; color: var(--text-subtle, #5a6a82); }
/* Tabbar (fixed) */
.tabbar { position: fixed; left: 0; right: var(--scrollbar-w, 0px); bottom: 0; height: var(--mobile-tabbar-h); max-width: var(--mobile-max); margin: 0 auto; background: #fff; border-top: 1px solid var(--border-subtle, #e4e8ef); display: flex; z-index: 800; box-shadow: 0 -2px 8px rgba(0,0,0,0.05); }
.tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-subtle); font-size: .875rem; font-weight: 500; text-align: center; }
.tabbar__item svg { width: 22px; height: 22px;}
.tabbar__item.is-active { color: #fff; background: var(--accent); }
/* CTA cards */
.cta-cards { display: flex; gap: var(--mobile-grid); padding: 16px var(--mobile-pad) 0; }
.cta-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: var(--mobile-radius); padding: 1.5rem 1rem 0; color: #fff; overflow: hidden; position: relative; min-height: 220px; }
.cta-card.--river { background: url(../img/bg_ctacard_river.png) center bottom no-repeat var(--river-color); background-size: contain;}
.cta-card.--urban { background: url(../img/bg_ctacard_urban.png) center bottom no-repeat var(--urban-color); background-size: contain;}
.cta-card__title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.cta-card__desc { font-size: 0.875rem; line-height: 1.2; color: rgba(255,255,255,0.92); font-weight: 300; letter-spacing: -.02rem}
.cta-card__illust { margin-top: auto; align-self: stretch; height: 74px; }
/* Chat banner */
.chat-banner { display: flex; align-items: center; gap: 12px; margin: 16px var(--mobile-pad) 0; padding: 14px 14px; background-color: #EFEFFD; border:1px solid rgba(98,76,209, .2); border-radius: var(--mobile-radius); }
.chat-banner__icon { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: start; justify-content: start; background: url('../img/img_chat_bg.png') no-repeat top left; background-size: 93% auto;}
.chat-banner__icon img { width: 40px; height: auto; color: #fff; margin: 4px 0 0 5px;}
.chat-banner__body { flex: 1 1 0; min-width: 0; }
.chat-banner__title { font-size: 1.125rem; font-weight: 700; color: var(--chat-text); line-height: 1.3; letter-spacing: -.06rem; display: block;}
.chat-banner__title span { color:var(--chat-color); }
.chat-banner__desc { font-size: 0.8125rem; color: #5b4d84; margin-top: 2px; display:inline-block; line-height: 1;}
.chat-banner__arrow { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--chat-color); display: flex; align-items: center; justify-content: center; }
.chat-banner__arrow svg { width: 16px; height: 16px; color: #fff; }
/* Region list */
.region-hd { display: flex; align-items: center; justify-content: space-between; padding: 32px var(--mobile-pad) 16px; }
.region-hd__title { display: flex; align-items: center; gap: 6px; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }
.region-hd__title img { width: 20px; height: auto;}
.region-hd__more { font-size: 0.8125rem; color: var(--text-secondary, #5a6a82); display: flex; align-items: center; gap: 2px; }
.region-hd__more svg { width: 14px; height: 14px; }
.region-scroll { display: flex; gap: var(--mobile-grid); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 var(--mobile-pad) 8px; cursor: grab; margin: 0 16px;}
.region-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.region-scroll::-webkit-scrollbar { display: none; }
.region-card { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; border: 1px solid var(--border-subtle, #e4e8ef); border-radius: var(--mobile-radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background-color: #fff;}
.region-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.region-card__name { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; letter-spacing: -.05rem;}
.region-card__nav { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-default, #d0d7e3); display: flex; align-items: center; justify-content: center; background: transparent; }
.region-card__nav svg { width: 12px; height: 12px; color: var(--text-secondary, #5a6a82); }
.region-card__info-list { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 6px; }
.region-card__badge {font-size: 0.8rem; color: var(--river-color); background: var(--accent-dim); border-radius: 4px; padding: 2px 6px; min-width: 60px; text-align: center;}
.region-card__addr { font-size: 0.9rem; color: var(--text-secondary, #5a6a82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Illustration banner */
.illust-banner { margin: -90px 0 0; background: url(../img/img_mainillust.png) center bottom no-repeat; background-size: cover; height: 200px; }
/* Family site */
.family { padding: 24px var(--mobile-pad) 16px; }
.family__title { display: flex; align-items: center; gap: 6px; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.family__title svg { width: 18px; height: 18px; }
.family__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mobile-grid); }
.family__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 1rem .5rem; border: 1px solid var(--border-subtle, #e4e8ef); border-radius: var(--mobile-radius); text-align: center; min-width: 0; }
.family__logo { width: auto; height: 12px; }
.family__logo img { height: 100%; width: auto; display: block; }
.family__name { font-size: 0.8125rem; color: var(--text-secondary);  font-weight: 500;  line-height: 1.3; }
.family__name strong {font-size: 1.1em;  font-weight: 700; display: block; color: var(--text-blue)}

/******************** Splash ********************/
body.splash-page { background: #256EF4; overflow: hidden; }
.splash { max-width: var(--mobile-max, 540px); margin: 0 auto; height: 100%; display: flex; flex-direction: column; }
.splash__top { flex-shrink: 0; padding: 32px 16px 0; text-align: center; }
.splash__logo { height: 26px; width: auto; }
.splash__mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 16px 32px; text-align: center; min-height: 0; }
.splash__title { color: #fff; font-size: 2.375rem; line-height: 1.2; font-weight: 400;}
.splash__title strong { font-weight: 700; }
.splash__visual { width: 68%; max-width: 260px; height: auto; }
.splash__desc { color: #fff; font-size: 1rem; line-height: 1.5; }
.splash__footer { flex-shrink: 0; position: relative; width: 100%; }
.splash__footer-bg { display: block; width: 100%; height: auto; }
.splash__copyright { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; color: rgba(255,255,255, .7); font-size: .9rem; line-height: 1.2; padding: 0 16px; font-weight: 300; }

/******************** GIS ********************/
.gis-content { position: fixed; top: var(--mobile-header-h); bottom: var(--mobile-tabbar-h); left: 0; right: var(--scrollbar-w, 0px); max-width: var(--mobile-max); margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; }
.gis-topbar { display: flex; align-items: center; gap: var(--mobile-pad); padding: 8px var(--mobile-pad); flex-shrink: 0; }
.gis-tabs { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.gis-tabs__item { flex: 1; padding: 0.625em 0.25em; background: #fff; color: var(--text-secondary); font-size: 1rem; font-weight: 500; border-radius: var(--r-md); max-width: 120px;}
.gis-tabs__item:last-child { border-right: none; }
.gis-tabs__item.is-active { background: var(--accent-active); color: #fff; }
.gis-search-btn { display: flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 0.625rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--r-md); background: #fff; color: var(--text-secondary); font-size: 0.875rem; }
.gis-search-btn img { width: 16px; height: 16px; }
.gis-search-btn > span {font-weight: 500;}
.subpage-panel { position: fixed; top: 0; left: 0; right: var(--scrollbar-w, 0px); bottom: 0; max-width: var(--mobile-max); margin: 0 auto; padding: 0; background: #fff; z-index: 850; display: flex; flex-direction: column; overflow: hidden; }
.subpage-panel:not([hidden]) { animation: searchPanelIn var(--ease); }
.subpage-panel.--with-tabbar { bottom: var(--mobile-tabbar-h); }
@keyframes searchPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Gis > Search panel*/
.subpage-header { height: var(--mobile-header-h); display: flex; align-items: center; gap: 8px; flex-shrink: 0; box-shadow: 0 4px 4px rgba(0, 0, 0, .05); padding: 0 var(--mobile-pad); z-index: 3;}
.line-tabs { display: flex; width: 100%; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); align-items: center; justify-content: center; background: #fff; z-index: 1;}
.line-tabs__item { flex: 1; padding: 14px 2px; font-size: 1rem; font-weight: 500; color: #809ec4; text-align: center; border-bottom: 3px solid transparent; margin-bottom: -1px; position:relative;}
.line-tabs__item::before {width: 1px; height: 50%; background-color: var(--text-subtle); content:''; position:absolute; top: 25%; right:0;}
.line-tabs__item:last-child::before { display: none; }
.line-tabs__item.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;}
.line-tabs.--scroll { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.line-tabs.--scroll::-webkit-scrollbar { display: none; }
.line-tabs.--scroll .line-tabs__item { flex: 0 0 auto; white-space: nowrap; padding: 12px 14px; min-width: 140px;}
.line-tabs.--sticky { position: sticky; top: var(--mobile-header-h); z-index: 700; background: #fff /*#f3f7ff;*/ }

.search-panel__panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: var(--mobile-pad);}
.search-panel__panel > .subtabs { margin-bottom: 12px; }
.subtabs { display: flex; gap: 8px; flex-shrink: 0; }
.subtabs__item { flex: 1; padding: 0.8rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--r-sm); background: #fff; color: var(--text-secondary); font-size: 1rem; font-weight: 600; max-width: 120px;}
.subtabs__item.is-active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700;}
.search-panel__form { display: flex; flex-direction: column; gap: var(--mobile-grid); flex-shrink: 0;}
.search-panel__inputrow { display: flex; gap: 8px; }
.search-panel__inputrow .btn { flex-shrink: 0; border-radius: var(--r-md) !important; min-width: 80px; }

.search-panel__results { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #EDEDED; border-radius: var(--r-md); padding: var(--mobile-pad); box-shadow: 0 0 8px 0 rgb(234 240 251);}
.search-panel__results-hd { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.search-panel__results-hd strong { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.badge { padding: 6px 16px; border-radius: 999px; background: var(--accent-dim); color: var(--accent-text); font-size: .8625rem; font-weight: 600; }
.badge.--local, .badge.--national { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border-radius: var(--r-sm); font-size: 12px; font-weight: 400; color: #fff; margin-right: 6px; margin-top: -2px;}
.badge.--local { background: #C42DF8; }
.badge.--national { background: #0065D9; }
.search-panel__count { margin-left: auto; font-size: 1rem; color: var(--text-secondary); }
.search-panel__empty { padding: 40px 0; font-size: 1rem; color: var(--text-subtle); text-align: center; }
.search-panel__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0;}
.search-panel__list li { display: flex; align-items: center; gap: 8px; padding: 14px 8px; border-bottom: 1px solid var(--border-subtle); }
.search-panel__list li:last-child { border-bottom: none; }
.search-panel__list li img { width: 18px; height: 18px; flex-shrink: 0; }
.search-panel__list li span { flex: 1; min-width: 0; font-size: 1rem; color: var(--text-primary);color: var(--text-muted); }
.search-panel__list li span > strong {font-weight: 700; color: var(--text-primary); }
/* GIS map area */
.gis-map { position: relative; flex: 1; min-height: 0; /*margin: 0 var(--mobile-pad); border-radius: var(--mobile-radius);*/ overflow: hidden; }
.gis-map__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gis-map__controls { position: absolute; top: var(--mobile-pad); right: var(--mobile-pad); display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.gis-map__ctrl-item { position: relative; width: 44px; }
.gis-map__ctrl { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);}
.gis-map__ctrl img { width: 24px; height: 24px; }
.gis-map__ctrl.is-active { background: var(--accent); }
.gis-map__ctrl.--static { cursor: default; }

/* GIS map facility icons (지하차도/대피소/수위관측소/배수펌프장 등) */
.gis-map__icon { position: absolute; width: 32px; height: auto; transform: translate(-50%, -100%); z-index: 2; pointer-events: none;}

/* 지하차도 등 클릭 가능한 지도 마커 + 정보 팝업 */
.gis-map__marker { position: absolute; transform: translate(-50%, -100%); z-index: 3; }
.gis-map__marker-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.gis-map__marker-btn img { display: block; width: 32px; height: auto; }
.map-marker-popup { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 10; min-width: 180px; }
.map-marker-popup.--md { width: 200px; }
.map-marker-popup.--lg { width: 240px; }
.map-marker-popup__box { background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; }
.map-marker-popup__body { padding: .8625rem; display: flex; flex-direction: column; gap: 6px; }
.map-marker-popup__title { font-size: 1rem; font-weight: 700; color: var(--text-blue); line-height: 1.2;}
.map-marker-popup__arrow { display: block; width: 0; height: 0; margin: -1px auto 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; filter: drop-shadow(0 2px 1px rgba(0,0,0,.06)); }

/* Layer select popup (from map layer control button) */
.layer-popup { position: absolute; top: 0; right: calc(100% + 8px); width: 168px; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; z-index: 1000;}
/*.layer-popup.--bottom, .setting-popup.--bottom { top: auto; bottom: 0; }*/
.popup-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700; }
.popup-hd .badge { flex-shrink: 0; background: #fff; color: var(--accent-text); padding: 4px 8px; font-size: 0.69rem; }
.layer-popup__list { list-style: none; margin: 0; padding: 4px 0; }
.layer-popup__item { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid #ECECEE;}
.layer-popup__item:last-child {border-bottom: none;}
.layer-popup__dot { width: 16px; height: 16px; border-radius: 50%; border: 4px solid; background: #fff; flex-shrink: 0; }
.layer-popup__dot.--line { border: none; background-image: linear-gradient(-45deg, transparent 40%, currentColor 40%, currentColor 55%, transparent 55%) }
.layer-popup__dot.--line.--national { color: #2141AE; }
.layer-popup__dot.--line.--local { color: #60C6EC; }
.layer-popup__label { flex: 1; font-size: 1rem; color: var(--text-primary); font-weight: 500; cursor: pointer; }

/* Map setting popup (from map setting control button) */
.setting-popup { position: absolute; top: 0; right: calc(100% + 8px); width: 200px; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; z-index: 1000;}
.setting-popup__body { padding: 14px; display: flex; flex-direction: column; gap: 18px; }
.setting-popup__row { display: flex; flex-direction: column; gap: 16px; }
.setting-popup__label-row { display: flex; align-items: center; justify-content: space-between; }
.setting-popup__label { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.setting-popup__value { font-size: 1rem; font-weight: 700; color: var(--accent); }
#mapStyleSelect { font-size: 0.8625rem; font-weight: 400; }

.range-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--accent) var(--fill, 100%), var(--border-default) var(--fill, 100%)); outline: none; }
.range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: var(--shadow-sm), 0 0 0 8px var(--accent-glow); }
.range-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; box-shadow: var(--shadow-sm), 0 0 0 8px var(--accent-glow); }
.gis-legend-wrap { position: absolute; left: var(--mobile-pad); bottom: var(--mobile-pad); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gis-legend { background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); padding: 0.5rem; min-width: 100px; }
.gis-legend__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gis-legend__title { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); }
.gis-legend__toggle { width: 16px; height: 16px; }
.gis-legend__toggle img { width: 100%; height: 100%; transform: rotate(90deg); transition: transform var(--ease); }
.gis-legend__toggle[aria-expanded="false"] img { transform: rotate(-90deg); }

.gis-legend__bar { margin-top: 6px; display: flex; height: 16px; overflow: hidden; transition: height var(--ease); gap: 1px; }
.gis-legend__item { flex: 1; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, .2); text-align: center; border-radius: 2px; line-height: 1.1}
.gis-legend__label { display: none; font-size: 0.625rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.gis-legend.is-expanded { min-width: 160px; }
.gis-legend.is-expanded .gis-legend__bar { height: 32px; }
.gis-legend.is-expanded .gis-legend__label { display: block;}
.gis-scale { padding: 0.375rem 0.75rem; border-radius: var(--r-sm); background: rgba(10,20,40,0.75); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.gis-sheet-handle-wrap { display: flex; justify-content: center; position: absolute; top:-22px; left: 50%; transform: translateX(-50%); z-index: 1000; flex-shrink: 0; background: #ECF2FE;border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm);}
.gis-sheet-handle { width: 60px; height: 22px;  display: flex; align-items: flex-start; justify-content: center; }
.gis-sheet-handle img { width: 16px; height: 16px; transform: rotate(90deg); transition: transform var(--ease); margin-top: 4px; }
.gis-sheet-handle[aria-expanded="false"] img { transform: rotate(-90deg); }

/* gis bottom */
.bottom-sheet { flex-shrink: 0; margin: 0; position: relative;}
.bottom-sheet__freq { position: relative; display: flex; align-items: center; gap: 16px; background: #ECF2FE; padding: .6rem 0 .6rem 1rem; font-size:1rem;}
.bottom-sheet__freq::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; background: linear-gradient(to right, rgba(236,242,254,0), rgba(236,242,254,1)); pointer-events: none; }
.bottom-sheet__freq-label { flex-shrink: 0; font-size:1em; font-weight: 600; color: var(--text-primary);  position:relative; line-height: 1.1; padding-right: 1em;}
.bottom-sheet__freq-label::before {width: 1px; height: 14px; background-color: rgba(0,0,0, .6); content:''; position:absolute; top: calc(50% - 7px); right:0;}
.bottom-sheet__freq-scroll { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; overflow-x: auto; padding-right: 8px;}
.bottom-sheet__freq-scroll::-webkit-scrollbar { display: none; }
.freq-item { flex-shrink: 0; padding: 0.3rem .8rem; border-radius: 999px; color: var(--text-secondary); font-weight: 400; white-space: nowrap; font-size:1em;}
.freq-item.is-active { background: var(--accent-active); color: #fff; font-weight: 600; }
.gis-freq-info { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 16px; height: 16px; margin: -4px 0 0 0; padding: 0;}
.gis-freq-info img { width: 100%; height: auto; }
.gis-freq-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; padding: 0 1rem; background: #F5F7FA; color: var(--text-subtle); font-size: .8125rem; transition: max-height .25s ease, opacity .2s ease, padding .25s ease; }
.gis-freq-note.is-open { max-height: 60px; opacity: 1; padding: 10px 1rem; }
.gis-freq-note p { margin: 0; }
.gis-freq-note__close { flex-shrink: 0; width: 18px; height: 18px; padding: 0; display: flex; align-items: center; justify-content: center; }
.gis-freq-note__close img { width: 10px; height: 10px; }
.bottom-sheet.is-collapsed .bottom-sheet__detail { display: none; }
.bottom-sheet__detail { margin: 1rem; }
.bottom-sheet__breadcrumb { display: flex; flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-muted); }
.bottom-sheet__breadcrumb span + span::before { content: '>'; margin: 0 8px; }
.bottom-sheet__title-row { display: flex; align-items: start; gap: 8px; margin-top: 4px; }
.bottom-sheet__title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); line-height: 1;}
.favorite-btn { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: -1px;}
.favorite-btn img { width: 100%; height: 100%; }
.bottom-sheet__info { margin-top: 8px; font-size: 1rem; color: var(--text-secondary); }
.bottom-sheet__detail .btn-wrap { margin-top: 16px; }

/******************** Sub header ********************/
.header__back { width: 32px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none;}
.header__back img { width: 28px; height: auto; }
.header__back:hover { background: var(--bg-elevated); }
.header__title.--center { flex: 1; text-align: center; font-size: 1.125rem; }
.header__spacer { width: 32px; height: 44px; flex-shrink: 0; }

/******************** Chatbot ********************/
.chat-content { position: fixed; top: var(--mobile-header-h); bottom: 0; left: 0; right: 0; max-width: var(--mobile-max); margin: 0 auto; background: #f0f3f8; display: flex; flex-direction: column; overflow: hidden; }
.chat-welcome { flex: 1; min-height: 0; overflow-y: auto; padding: 24px var(--mobile-pad); text-align: center; }
@keyframes chatWelcomeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chatCharIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.chat-welcome__greet { font-size: 1.1rem; font-weight: 600; line-height: 1.5; color: var(--text-primary); margin: 1rem 0}
.chat-welcome__greet strong { color: var(--accent); font-weight: 700;}
.chat-type__ch { opacity: 0; display: inline-block; white-space: pre; animation: chatCharIn .35s ease-out forwards; font-weight: 600;}
.chat-type__cursor { display: inline-block; width: 0; height: 1.05em; vertical-align: text-bottom; border-right: 1px solid var(--text-secondary); margin-left: 1px; animation: chatCursorBlink .8s steps(2) infinite; }
@keyframes chatCursorBlink { from { border-color: var(--text-secondary); } to { border-color: transparent; } }
.chat-welcome__notice { margin-top: 12px; font-size: 0.8125rem; color: var(--text-subtle); animation: chatWelcomeIn .55s ease .95s both; }
.chat-bot { display: flex; align-items: center; justify-content: center; margin: 0; animation: chatWelcomeIn .55s ease both; }
.chat-bot__img { width: 260px; height: auto; }
.chat-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mobile-grid); }
.chat-tile-grid.--fill { display: flex; flex-wrap: wrap; }
.chat-tile-grid.--fill > * { flex: 1 1 calc((100% - 2 * var(--mobile-grid)) / 3); min-width: 0; }
.chat-tile { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--border-subtle); background: #fff; }
.chat-link-icon {width: 40px !important; height: 40px !important; background: #F2F4FA; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.chat-link-icon img {width: 20px !important; height: 20px !important;}
.chat-cate { list-style: none; margin: 0; padding: 0; animation: chatWelcomeIn .9s ease .75s both; }
.chat-cate__item { width: 100%; gap: 8px; padding: 1rem 0.5rem; border-radius: var(--mobile-radius); }
.chat-cate__item img { width: 50px; height: 50px; }
.chat-cate__item span { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); text-align: center; line-height: 1; letter-spacing: -.07em;}
.chat-input { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 12px var(--mobile-pad) 16px; background: #fff; border-top: 1px solid var(--border-subtle); border-top-left-radius: 24px; border-top-right-radius: 24px;}
.chat-input__field { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid transparent; font-size: 1rem; color: var(--text-primary); font-family: inherit; background: #F5F5F4; border-radius: 22px !important; transition: border-color var(--ease), box-shadow var(--ease); }
.chat-input__field::placeholder { color: var(--text-subtle); }
.chat-input__field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 0.125rem var(--accent-dim); }
.chat-input__send { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.chat-input__send img { width: 16px; height: 16px; transform: rotate(-90deg); }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: var(--mobile-pad);}
.chat-msg { display: flex; gap: 8px; margin-bottom: 20px; }
.chat-msg:not([hidden]) { animation: chatMsgIn 0.2s ease; }
.chat-msg.--user { justify-content: flex-end; }
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg__avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chat-msg__avatar img { width: 70%; height: 70%; object-fit: contain; }
.chat-msg__content { display: flex; flex-direction: column; max-width: min(78%, 360px); }
.chat-msg.--user .chat-msg__content { align-items: flex-end; }
.chat-msg.--bot .chat-msg__content { align-items: flex-start; width: 100%; max-width: min(84%, 360px); }
.chat-msg__bubble { padding: 0.6875rem 0.875rem; font-size: 1rem; line-height: 1.3; border-radius: var(--mobile-radius); }
.chat-msg.--user .chat-msg__bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 0; }
.chat-msg.--bot .chat-msg__bubble { background: #fff; color: var(--text-primary); border: 1px solid var(--border-subtle); border-bottom-left-radius: 0; }
.chat-msg__time { margin-top: 4px; font-size: 0.75rem; color: var(--text-subtle); }
.chat-card { width: 100%; margin-top: 8px; padding: 1rem; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--mobile-radius); }
.chat-card__title { font-size: 1rem; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
.chat-card__form + .chat-card__title { margin-top: 16px; }
.chat-card__title > span { font-weight: 600 !important; }
.chat-card__info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.875rem; }
.chat-card__info dt { color: var(--text-muted); }
.chat-card__info dd { color: var(--text-primary); font-weight: 500; text-align: right; }
.chat-card__info.--fill { padding: 0.75rem 1rem; background: #EEF3FE; border: 1px solid #D7E5FF; border-radius: var(--mobile-grid); gap: 0;}
.chat-card__info.--fill dt, .chat-card__info.--fill dd {border-bottom: 1px solid #D7E5FF; padding: .4em 0;}
.chat-card__info.--fill dt:last-child, .chat-card__info.--fill dd:last-child {border-bottom: none;}
.chat-card__subtitle { margin-top: 16px; margin-bottom: 8px; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.chat-card__map { position: relative; width: 100%; height: 140px; margin-top: 12px; border-radius: var(--mobile-grid); overflow: hidden; background-color: #f9f9f9; border: 1px solid rgba(0, 0, 0, .1); transition: height var(--ease);}
.chat-card__map.is-expanded { height: 300px; }
.chat-card__map > img { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -100%); }
.chat-card__map .udp__zoom {width: 32px; right: var(--mobile-grid); top: var(--mobile-grid);}
.chat-card .btn-wrap { margin-top: 12px; display:flex; flex-wrap: wrap;}
.chat-card__desc { font-size: 1rem; color: var(--text-secondary); line-height: 1.4; }
.chat-card__hint, .chat-card__org-name, .chat-faq__q { font-size: 1rem; font-weight: 600; color: var(--text-primary);}
.chat-card__hint { margin-top: 12px; }
.chat-card__links { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.chat-card__links a { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); font-size: 1rem; font-weight: 600; color: var(--accent-text); }
.chat-card__links img { width: 14px; height: 14px; }
.chat-card__links a .--tit {font-size: 1rem; font-weight: 600; color: var(--accent-text);}
.chat-card__links a .--tit > span {font-size: .8625em; font-weight: 400; display: block; margin: 0; line-height: 1.2; color: var(--text-muted);}
.chat-related-list { list-style: none; margin: 10px 0 0; padding: 0; }
.chat-related-list > li + li { border-top: 1px solid var(--border-subtle); }
.chat-related-list a { display: flex; align-items: center; gap: 10px; padding: 0.7rem 0.25rem; }
.chat-related-list__q { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-dim); color: var(--accent-text); font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.chat-related-list__txt { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.chat-related-list__arrow { flex-shrink: 0; width: 6px; height: 6px; border-top: 2px solid var(--text-subtle); border-right: 2px solid var(--text-subtle); transform: rotate(45deg); }
.chat-card__options { margin-top: 12px; }
.chat-card__option { gap: 6px; padding: 0.75rem 0.5rem; border-radius: var(--r-sm); }
.chat-addr-list { margin-top: 12px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.chat-addr-list::-webkit-scrollbar { width: 4px; }
.chat-addr-list::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 999px; }
.chat-addr-list__item { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--accent); border-radius: var(--mobile-radius); background: var(--accent-dim); color: var(--accent-text); font-size: 0.9rem; font-weight: 500; text-align: left; }
.chat-addr-list__item::after { content: ''; width: 7px; height: 7px; flex-shrink: 0; margin-left: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.chat-card__option img { width: 36px; height: 36px; }
.chat-card__option span { font-size: .9rem; font-weight: 600; color: var(--text-secondary);}
.chat-card__form { display: flex; flex-direction: column; gap: var(--mobile-grid); margin-top: 12px; }
.chat-card__form .chat-input__field { flex: none; width: 100%; border-radius: var(--r-md) !important; }
.chat-card__orglist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.chat-card__org { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); }
.chat-card__org-tel { margin-top: 2px; font-size: 0.8125rem; color: var(--text-muted); }
.chat-card__org-btn { flex-shrink: 0; padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.chat-faq__item { border-bottom: 1px solid var(--border-subtle); }
.chat-faq__item:last-child { border-bottom: none; }
.chat-faq__q { width: 100%; display: flex; align-items: start; justify-content: space-between; gap: 8px; padding: 0.875rem 0; text-align: left; }
.chat-faq__icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-muted); transform: rotate(0deg); transition: transform var(--ease); }
.chat-faq__q > span {font-size:1.025rem; font-weight: 600;}
.chat-faq__q[aria-expanded="true"] .chat-faq__icon { transform: rotate(180deg); }
.chat-faq__a { padding: 0 0 1rem; font-size: 1rem; color: var(--text-secondary); line-height: 1.5; }
.chat-faq__a p + p { margin-top: 8px; }
.chat-faq__a strong { font-weight: 500; color: var(--text-blue); }

/* chat-faq --card: 항목을 개별 카드로 분리 + +/- 토글 아이콘 */
.chat-faq.--card { display: flex; flex-direction: column; gap: 10px; }
.chat-faq.--card .chat-faq__item { border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: #fff; padding: var(--mobile-pad); transition: border-color var(--ease), background var(--ease); }
.chat-faq.--card .chat-faq__item.is-active { border-color: var(--accent); background: var(--accent-dim); }
.chat-faq.--card .chat-faq__q { padding: 0; }
.chat-faq.--card .chat-faq__a { padding: .875rem 0 0; }
.chat-faq__toggle { position: relative; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--accent-dim); transition: background var(--ease); }
.chat-faq__toggle::before, .chat-faq__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--accent); border-radius: 1px; transition: transform var(--ease), background var(--ease); }
.chat-faq__toggle::before { width: 8px; height: 1px; transform: translate(-50%, -50%); }
.chat-faq__toggle::after { width: 1px; height: 8px; transform: translate(-50%, -50%); }
.chat-faq__q[aria-expanded="true"] .chat-faq__toggle { background: var(--accent); }
.chat-faq__q[aria-expanded="true"] .chat-faq__toggle::before, .chat-faq__q[aria-expanded="true"] .chat-faq__toggle::after { background: #fff; }
.chat-faq__q[aria-expanded="true"] .chat-faq__toggle::after { transform: translate(-50%, -50%) scaleY(0); }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chat-quick__item { padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: #fff; color: var(--accent-text); font-size: 0.8125rem; font-weight: 500; }

/* Status cards: error/success/warning feedback */
.chat-status { width: 100%; margin-top: 8px; padding: 1.5rem 1rem; text-align: center; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--mobile-radius); }
.chat-status__icon { display: block; width: 48px; height: 48px; margin: 0 auto 12px; }
.chat-status__title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.chat-status__desc { margin-top: 6px; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }
.chat-status .btn-wrap {align-items: stretch; margin-top: 16px; }
.chat-status.--success { background: var(--s-normal-dim); border-color: rgba(34,135,56,.2); }
.chat-status.--warning { background: var(--s-caution-dim); border-color: rgba(158,106,0,.2); }

/******************** Chatbot answer template ********************/
.tpl-wrap { max-width: var(--mobile-max); margin: 0 auto; padding: 24px var(--mobile-pad) 60px; background: #f0f3f8; }
.tpl-title { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.tpl-desc { font-size: 1rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 24px; }
.tpl-section { margin-bottom: 32px; }
.tpl-section__label { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: var(--r-sm); font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); }

/******************** Intro ********************/
.subpage-wrap { padding: 20px var(--mobile-pad); }
.intro-summary { display: flex; align-items: stretch; border-radius: var(--mobile-radius); background:url(../img/img_intro01.png) 102% 100% no-repeat #EFF7FE; overflow: hidden; background-size: auto 100px;}
.intro-summary__body { flex: 1; min-width: 0; padding: 16px; }
.intro-summary__title { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.intro-summary__desc { font-size: 1rem; color: var(--text-secondary); line-height: 1.2; padding-right: 6rem}
.intro-section { margin-top: 32px; }
.section-title { display: flex; align-items: center; gap: 8px; color: var(--text-primary); margin-bottom: 12px; }
.section-title img {width: 0.9375rem; height: 1.25rem;flex-shrink: 0; }
.intro-section__desc { font-size: .9375rem; color: var(--text-secondary); line-height: 1.4; }
.intro-section .subtabs__item {max-width:none}
.intro-callout { margin-top: 16px; padding: 16px; background: var(--bg-muted); border-radius: var(--r-md); }
.intro-callout__item { font-size: .9375rem; color: var(--text-secondary); line-height: 1.4; }
.intro-callout__item + .intro-callout__item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.intro-gallery { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; list-style: none; margin: 20px 0 0; padding: 0 0 4px; cursor: grab; }
.intro-gallery.is-dragging { cursor: grabbing; }
.intro-gallery::-webkit-scrollbar { display: none; }
.intro-gallery__item { flex: 0 0 80%; }
.intro-gallery__caption { display: block; font-size: .9375rem; font-weight: 700; color: var(--text-primary); text-align: center; margin-bottom: 8px; }
.intro-gallery__item img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border-subtle); }

/******************** Role page ********************/
.role-cards { display: flex; gap: 12px; margin-top: 16px; }
.role-card { flex: 1; min-width: 0; padding: 20px 12px; text-align: center; background: var(--bg-muted); border-radius: var(--r-md); }
.role-card__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #FFF; display: flex; align-items: center; justify-content: center; box-shadow: inset 2px 2px 6px 0 rgba(206,222,235,1); }
.role-card__icon img { width: 50px; height: 50px; }
.role-card__desc { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.4; }

.role-panel { margin-top: 16px; }
.role-bullet-list { list-style: none; margin: 0; padding: 16px; background: var(--bg-muted); border-radius: var(--r-md); }
.role-bullet-list__item { display: flex; gap: 10px; }
.role-bullet-list__item + .role-bullet-list__item { margin-top: 16px; }
.role-bullet-list__dot { flex-shrink: 0; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: transparent; border: 3px solid var(--accent)}
.role-bullet-list__title { display: block; font-size: .9375rem; font-weight: 600; color: var(--text-primary); }
.role-bullet-list__desc { display: block; margin-top: 2px; font-size: .9375rem; color: var(--text-secondary); line-height: 1.4; }
.role-panel__img { display: block; width: 100%; height: auto; border-radius: var(--r-md); margin-top: 16px; }
.role-plain-list { list-style: none; margin: 0; padding: 0; }
.role-plain-list li { position: relative; padding-left: 14px; font-size: .9375rem; color: var(--text-secondary); line-height: 1.5; }
.role-plain-list li + li { margin-top: 10px; }
.role-plain-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-secondary); }
.role-diagram { margin-top: 16px; }
.role-diagram__arrow { display: flex; align-items: center; justify-content: center; width: 130px; height: 90px; margin: 4px auto; padding-bottom: 16px; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); color: var(--text-primary); font-size: 1.1rem; font-weight: 700; line-height: 1.3; text-align: center; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(236, 242, 254, 1) 100%);}

/******************** Info card (통일 박스: 제작경위 슬라이드 / 시나리오 / 제작 다이어그램 공용) ********************/
.info-card { border: 1px solid #C9D9FB; border-radius: var(--mobile-radius); overflow: hidden; background: #fff; }
.info-card + .info-card { margin-top: 1rem; }
.info-card__hd { padding: var(--mobile-grid); text-align: center; font-size: 1rem; font-weight: 700; color: var(--accent); background: var(--accent-dim); border-bottom: 1px solid #C9D9FB; }
.info-card__body { padding: 1rem; }
.info-card__title { display: block; text-align: center; font-size: .9375rem; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }

.info-card__list { list-style: none; margin: 0; padding: 0; }
.info-card__list li { position: relative; padding-left: 12px; font-size: .9375rem; color: var(--text-secondary); line-height: 1.4; }
.info-card__list li + li { margin-top: .5em; }
.info-card__list li::before { content: '-'; position: absolute; left: 0; }
.info-card__sublist { list-style: none; margin: 6px 0 0; padding: 0; }
.info-card__sublist li { position: relative; padding-left: 12px; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }
.info-card__sublist li + li { margin-top: 4px; }
.info-card__sublist li::before { content: '-'; position: absolute; left: 0; }
.info-card__img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); margin-top: 12px; }

.info-card__row { display: flex; align-items: center; gap: 12px; }
.info-card__row + .info-card__row { margin-top: 16px; }
.info-card__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; }
.info-card__icon img { width: 40px; height: 40px; }
.info-card__row-title { display: block; font-size: .9375rem; font-weight: 600; color: var(--text-primary); }
.info-card__row-desc { display: block; margin-top: 2px; font-size: .9375rem; color: var(--text-secondary); }

/* 슬라이드 안에 들어갈 때만: 카드 폭/스냅 지정 */
.slide > .info-card { flex: 0 0 76%; scroll-snap-align: start; }
.slide > .info-card + .info-card { margin-top: 0; }

/******************** Slide (generic drag-scroll carousel + dots) ********************/
.slide { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; list-style: none; margin: 16px 0 0; padding: 4px 0; cursor: grab; scroll-snap-type: x mandatory; }
.slide.is-dragging { cursor: grabbing; }
.slide::-webkit-scrollbar { display: none; }

.slide-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; }
.slide-dots__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; cursor: pointer; }
.slide-dots__dot.is-active { background: var(--accent); }

.timeline { position: relative; margin-top: 16px; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: #C9D9FB; }
.timeline__item { position: relative; }
.timeline__item + .timeline__item { margin-top: 24px; }
.timeline__dot { position: absolute; left: -26px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-sizing: border-box; }
.timeline__year { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.timeline__title { position: relative; display: block; padding-left: 12px; font-size: 0.9375rem; font-weight: 700; color: var(--text-secondary); line-height: 1.5; }
.timeline__title::before { content: '-'; position: absolute; left: 0; }
.timeline__desc { display: block; margin-top: 2px; padding-left: 12px; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }

/******************** Top button (맨 위로 이동, 플로팅) ********************/
.top-btn { position: fixed; right: calc(max(0px, (100vw - var(--scrollbar-w, 0px) - var(--mobile-max)) / 2) + 16px); bottom: calc(var(--mobile-tabbar-h) + 16px); width: 44px; height: 44px; border-radius: 50%; background: var(--accent); border: none; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; z-index: 700; cursor: pointer; }
.top-btn img { width: 16px; height: 16px; transform: rotate(-90deg); }
.top-btn.--panel { position: absolute; bottom: 16px; }
.top-btn.--flush { bottom: 16px; }
    
/******************** Detail panel (gis 상세정보 보기) ********************/
#detailContent { position: fixed; top: var(--mobile-header-h); left: 0; right: var(--scrollbar-w, 0px); bottom: 0; max-width: var(--mobile-max); margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; position: relative; }
.detail-summary { flex-shrink: 0; padding: var(--mobile-pad); border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: #fff; box-sizing: border-box; position: relative;}
.detail-summary.--float { margin: 1rem; box-shadow: 0 0 8px 0 rgb(234 240 251); }
.detail-summary__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 6px; padding-right: 80px; }
.detail-summary__title { flex: 1; min-width: 0; font-size: 1.1875rem; font-weight: 700; color: var(--text-primary); cursor: pointer; }
.detail-summary__title-input { flex: 1; min-width: 0; font-size: 1.1875rem; font-weight: 700; color: var(--text-primary); font-family: inherit; border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-dim); padding: 2px 8px; outline: none; }
.detail-summary__list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-flow: column wrap; gap: 4px;}
.detail-summary__list li { position: relative; padding-left: 10px; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.3;}
.detail-summary__list li::before { content: '-'; position: absolute; left: 0; }
.detail-summary .btn-wrap { margin-top: 14px; }
.detail-favorite {  display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; position: absolute; right: 1rem; top: 1rem;}
.detail-favorite__icon { width: 40px; height: 40px; border-radius: 50%; background: #eceef3; display: flex; align-items: center; justify-content: center; }
.detail-favorite__icon img { width: 20px; height: 18px; }
.detail-favorite__label { font-size: 0.75rem; font-weight: 600; color: #BDC3CC; }
.detail-favorite[aria-pressed="true"] .detail-favorite__icon { background: #FFF3D6; }
.detail-favorite[aria-pressed="true"] .detail-favorite__label { color: #B36B00; }

.detail-body { padding: 0 var(--mobile-pad);}
.detail-body > .intro-summary {margin: 1.25rem 0 1.5rem;}
.detail-body.detail-scroll { padding-bottom: 40px; }

.link-list { display: flex; flex-direction: column; }
.link-list a { display: block; padding: 12px 4px; font-size: 1rem; color: var(--text-primary); }

/* 지하차도 상세보기 패널 */
.udp__media { position: relative; height: 36vh; background: var(--bg-muted, #EEF2F8); flex-shrink: 0; transition: height var(--ease); }
.udp__media.is-expanded { height: calc(100vh - var(--mobile-header-h)); }
.detail-scroll.is-locked { overflow: hidden; }
.udp__location { display: flex; align-items: center; gap: 6px; margin: 16px 0 20px; }
.udp__location img { width: 20px; height: 20px; flex-shrink: 0; }  
.udp__location strong { font-size: 1.1875rem; font-weight: 700; color: var(--text-primary); }
.udp__source { margin: 16px 0 0; font-size: 0.8125rem; color: var(--text-subtle, #5a6a82); line-height: 1.5; }
.detail-section { padding: 1.5rem 0 0; }
.detail-section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.detail-section-hd .section-title { margin-bottom: 0; }

.detail-dl { display: flex; flex-direction: column; gap: 6px; }
.detail-dl__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.detail-dl__row dt { flex-shrink: 0; font-size: 1rem; color: var(--text-muted); min-width: 100px;}
.detail-dl__row dd { font-size: 1rem; font-weight: 600; color: var(--text-primary); text-align: left; flex: 1; line-height: 1.3;}
.detail-dl__col { display: flex; flex-direction: column; gap: 0; }
.detail-dl__col dt { font-size: 1rem; color: var(--text-muted); }
.detail-dl__col dd { font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.3;}
.detail-dl__col.--total dt, .detail-dl__col.--total dd { font-weight: 700; color: var(--text-primary); }
.detail-dl__row.--total dt, .detail-dl__row.--total dd { font-weight: 700; color: var(--text-primary); }

.detail-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-subtle);}
.detail-table th { padding: 12px 8px; background: var(--bg-muted); font-size: 0.925rem; font-weight: 700; color: var(--text-secondary); text-align: left; }
.detail-table th:last-child { text-align: right; }
.detail-table td { padding: 12px 8px; border-bottom: 1px solid var(--border-subtle); font-size: 0.925rem; color: var(--text-primary); line-height: 1;}
.detail-table td:last-child { text-align: right; }

.udp__zoom {position: absolute; right: var(--mobile-pad); top: var(--mobile-pad); display: flex; flex-direction: column; gap: 8px; }

/******************** My region (내 관심지역) ********************/
.region-list-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.region-list-hd .section-title { margin-bottom: 0; }
.region-count { font-size: 1rem; color: var(--text-secondary); }
.region-count strong { color: var(--accent); font-weight: 700; }

.region-list { display: flex; flex-direction: column; gap: 16px; }

/******************** Error help (화면 오류 해결 방법) ********************/
.cache-guide { display: flex; flex-direction: column; gap: 28px; }
.cache-guide__item { display: flex; flex-direction: column; gap: 8px; }
.cache-guide__app { font-size: 1.1875rem; font-weight: 700; color: var(--text-primary); }
.cache-guide__img { width: 100%; max-width: 570px;}

/******************** Map guide (지도안내) ********************/
.map-guide__subtitle { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); margin: 20px 0 10px; }
.map-guide__desc { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }
.numbered-list { list-style: none; margin: 0; padding: 0; counter-reset: numbered; }
.numbered-list li { position: relative; padding-left: 22px; font-size: 1rem; color: var(--text-secondary); line-height: 1.6; counter-increment: numbered; }
.numbered-list li::before { content: counter(numbered) '.'; position: absolute; left: 0; font-weight: 600; color: var(--text-primary); }
.numbered-list li + li { margin-top: 6px; }

.empty-state { display: flex; align-items: center; justify-content: center; min-height: 240px; color: var(--text-muted); font-size: 1rem; font-weight: 600; }

/* 이미지 자리에 "이미지 준비중" 표시 (실제 이미지 위 오버레이) */
.img-wip { position: relative; display: block; }
.img-wip::after { content: '이미지 준비중'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border-radius: var(--r-md); color: var(--text-muted); font-size: 1rem; font-weight: 600; }

.usage-slide__item { flex: 0 0 100%; scroll-snap-align: start; }
.usage-slide__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; justify-content: center; }
.usage-slide__media { display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: var(--text-muted); font-size: 1rem; font-weight: 600; }
.usage-slide__media img {width: 100%; max-width: 300px;}
#guideSlide {margin: 0 40px; gap: 0; }
.usage-step__item { display: none; padding: 20px 4px 0; }
.usage-step__item.is-active { display: block; }
.usage-step__item p { font-size: 1em; color: var(--text-secondary); }
.usage-step__num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.usage-step__title { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }

/******************** Survey ********************/
.survey-panel { padding: 32px var(--mobile-pad) calc(var(--survey-footer-h) + 24px); }
#surveyIntro { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--mobile-header-h)); text-align: center; gap: 16px; }
.survey-intro__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; }
.survey-intro__icon img { width: 32px; height: 32px; }
.survey-intro__title { font-size: 1.375rem; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.survey-intro__title strong { color: var(--accent); font-weight: 700;}
.survey-intro__desc { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; }
.survey-intro__desc strong { font-weight: 600; color:var(--accent); }
#surveyIntro .btn { width: 100%; height: 48px; margin-top: 8px; }

.survey-q__num { font-size: 1.75rem; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.survey-q__text { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); line-height: 1.5; margin-bottom: 24px; }

.survey-options { display: flex; flex-direction: column; gap: 10px; }
.survey-option { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: #fff; text-align: left; }
.survey-option__num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--text-muted); font-size: 0.875rem; font-weight: 700; }
.survey-option__label { font-size: 1.0625rem; color: var(--text-secondary); }
.survey-option.is-active { border-color: var(--accent); }
.survey-option.is-active .survey-option__num { background: var(--accent); color: #fff; }
.survey-option.is-active .survey-option__label { color: var(--text-primary); font-weight: 700; }
.survey-hint { margin-top: 16px; font-size: 0.875rem; color: var(--text-muted); }
.survey-panel--text { position: fixed; top: var(--mobile-header-h); left: 0; right: var(--scrollbar-w, 0px); bottom: var(--survey-footer-h); max-width: var(--mobile-max); margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; padding: 32px var(--mobile-pad); }
.survey-textarea { flex: 1; margin-top: 16px; resize: none; background: var(--accent-dim);}
.survey-complete { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--mobile-header-h) - var(--survey-footer-h)); text-align: center; gap: 16px; padding: 0 var(--mobile-pad); }
.survey-complete__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; }
.survey-complete__icon img { width: 32px; height: 32px; }
.survey-complete__desc { font-size: 1.0625rem; color: var(--text-primary); line-height: 1.6; }

.survey-footer { position: fixed; left: 0; right: var(--scrollbar-w, 0px); bottom: 0; max-width: var(--mobile-max); margin: 0 auto; height: var(--survey-footer-h); padding: 16px var(--mobile-pad); background: #fff; border-top: 1px solid var(--border-subtle); z-index: 700; box-sizing: border-box; }
.survey-footer .btn { width: 100%; height: 48px; }

/* GIS map area */
.gis-map, .gis-map * {-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;}
.gis-map .ol-viewport {-ms-touch-action: none; touch-action: none;}
.gis-map canvas, .gis-map img, .gis-map svg {-webkit-user-drag: none; user-drag: none;}
.gis-legend-wrap {z-index: 1;}
.ol-scale-line {background-color: none; position: static; width: 100%;}
.ol-scale-line-inner {border: none; color: none; border-top: none; margin: 0; background-color: none; font-size: 12px; margin: 0; width: 100%  !important;}
.gis-map__controls {z-index: 1;}
.measure-distance {background:#F8F8F8;border:1px solid rgb(36,87,231);padding:6px;border-radius:4px;box-shadow:rgba(0,0,0,.05) 0 0 0 1px inset;font-size:14px;font-weight:700;color:#0B1F65;line-height:1.2;letter-spacing:-.04rem;}
.measure-distance__text {font-size:14px;font-weight:700;color:#0B1F65;line-height:1;}
.measure-distance__close {background:rgb(36,87,231);padding:6px 8px;border-radius:4px;box-shadow:rgba(0,0,0,.05) 0 0 0 1px inset;font-size:14px;font-weight:700;color:#fff;line-height:1;border-left:0;margin-left:4px;text-align:center;}

/* GIS 튜토리얼 */
#tutorialOverlay { background: rgba(0,0,0,.9); }
.gis-tutorial { position: fixed; top: 2rem; bottom: 0; left: 0; right: var(--scrollbar-w, 0px); max-width: var(--mobile-max); margin: 0 auto; z-index: 951; display: flex; flex-direction: column; }
.gis-tutorial__hd { position: relative; flex-shrink: 0;padding: 24px; }
.gis-tutorial__accent-bar { display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: 10px; }
.gis-tutorial__title { display: block; color: #fff; font-size: 1.4rem; font-weight: 600; line-height: 1.3; }
.gis-tutorial__title-accent { color: var(--accent);  font-weight: 800;}
.gis-tutorial__subtitle { margin-top: 8px; color: #fff; font-size: 0.9375rem; }
.gis-tutorial__close { position: absolute; top: -1rem; right: 50%; transform: translateX(50%); flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.gis-tutorial__close img { width: 16px; height: 16px; filter: invert(1); }
.gis-tutorial .slide { flex: 1; min-height: 0; margin: 0; }
.gis-tutorial .usage-slide__item { display: flex; align-items: center; justify-content: center; }
.gis-tutorial .usage-slide__item img { max-width: 100%; max-height: 100%; object-fit: contain;}
.gis-tutorial .slide-dots { flex-shrink: 0; margin-top: 12px; }
.gis-tutorial__check { flex-shrink: 0; padding: 24px; display: flex; align-items: center; justify-content: left; gap: 8px; color: #fff; font-size: .9375rem; cursor: pointer; }
.gis-tutorial__check-box { width: 20px; height: 20px; flex-shrink: 0; border: 1.5px solid #fff; border-radius: 4px; }
#tutorialHideChk:checked + .gis-tutorial__check-box { background: var(--accent) url(../img/ico_check_wh.svg) no-repeat center; background-size: 12px; border-color: var(--accent); }
#facilityDataSource {font-size: .7em; line-height: 1.2; display: block; border-top: 1px dashed #ddd; padding: 1em 0 0;}
/* responsive 390 */
@media (max-width: 390px) {
    :root { --mobile-tabbar-h: 60px; }
    .header__brand {gap: 4px; }
    .header__emblem { height: 32px; }
    .header__title {font-size: 1rem;}
    .chat-banner__title {font-size: 1rem;}
    .cta-card {min-height: auto;}
    .tabbar__item {font-size: .7625rem;}
    .chat-cate__item img { width: 40px; height: 40px; }
    .gis-map__ctrl-item {width: 38px; }
    .gis-map__ctrl {width: 38px; height: 38px;}
    .chat-cate__item span {font-size: .865rem;}

}