/* 화학사고 지자체 대응 지원도구 — 공통 스타일 ── 무엇을 따르나 ────────────────────────────────────────── 색·글자·크기·모서리를 KRDS(대한민국 정부 디자인시스템)에서 가져옵니다. 행정·공공기관 디지털서비스가 지켜야 하는 규격이고, 지키면 접근성 기준도 함께 충족됩니다. 공식 토큰은 assets/krds/krds_tokens.css 에 **원본 그대로** 두고, 이 파일에서 우리가 쓰는 이름으로 잇습니다(--brand, --ink 처럼). 값을 여기 직접 적지 않는 이유는 KRDS 판이 올라가면 그 파일만 갈아끼우면 되게 하려는 것입니다. 어떤 토큰이 있는지는 docs/krds_요약.md 를 보세요. ── 밝음 / 고대비 두 가지 ───────────────────────────────── KRDS 에는 '다크 모드'라는 이름이 없고 대신 고대비(high-contrast) 모드가 있는데, 그것이 사실상 어두운 화면입니다. 사고는 밤에도 나므로 야간 근무자가 켤 수 있어야 합니다. 로 켜고, 단추와 기억은 assets/theme.js 가 맡습니다. */ /* ── 서체 — KRDS 표준 Pretendard GOV ───────────────────────── 굵기는 Regular·Bold 두 가지만 씁니다(KRDS 규정). 파일이 없거나 아주 드문 글자여서 빠져 있으면 맑은 고딕으로 대체되며, 깨지지는 않습니다. */ @font-face{ font-family:"Pretendard GOV"; src:url("fonts/PretendardGOV-Regular.subset.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Pretendard GOV"; src:url("fonts/PretendardGOV-Bold.subset.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap; } /* KRDS 토큰의 길이가 rem 으로 적혀 있어 뿌리를 10px 로 둡니다 — 1.7rem = 17px. (사용자가 브라우저 글자크기를 키우면 화면 전체가 같이 커집니다) */ html{font-size:62.5%} :root{ color-scheme:light; /* ── 색 (KRDS 밝은 모드) ─────────────────────────────────── */ --bg:var(--krds-light-color-surface-gray-subtler); /* var(--panel) */ --card:var(--krds-light-color-surface-white); /* #ffffff */ --panel:var(--krds-color-light-gray-5); --ink:var(--krds-light-color-text-basic); /* #1e2124 */ --ink2:var(--krds-light-color-text-subtle); /* #464c53 */ --ink3:var(--krds-color-light-gray-50); /* #6d7882 */ --line:var(--krds-light-color-border-gray-light); /* #cdd1d5 */ --line2:var(--krds-color-light-gray-10); /* var(--line2) */ /* 입력칸 테두리 — 상자 테두리(--line)보다 한 단 진하게. KRDS 가 입력칸에 쓰는 값입니다. 이 이름이 빠져 있으면 `border:1px solid var(--line-d)` 가 통째로 무효가 되어 입력칸 테두리가 아예 사라집니다(실제로 그랬음). */ --line-d:var(--krds-light-color-border-gray); /* #8a949e */ --brand:var(--krds-color-light-primary-50); /* #256ef4 */ --brand-d:var(--krds-color-light-primary-60); /* #0b50d0 */ --brand-l:var(--krds-color-light-primary-5); /* var(--brand-l) */ --ok:var(--krds-color-light-success-60); --ok-l:var(--krds-color-light-success-5); --warn:var(--krds-color-light-warning-60); --warn-l:var(--krds-color-light-warning-5); --err:var(--krds-color-light-danger-60); --err-l:var(--krds-color-light-danger-5); --info:var(--krds-color-light-information-60); --info-l:var(--krds-color-light-information-5); /* 알림 상자 테두리 — 옅은 바탕(-l)과 짙은 글자(기본) 사이 단계입니다. -b2 는 그보다 한 단 진해, 강조하는 상자에 씁니다. */ --brand-b:var(--krds-color-light-primary-20); --brand-b2:var(--krds-color-light-primary-30); --ok-b:var(--krds-color-light-success-20); --warn-b:var(--krds-color-light-warning-20); --warn-b2:var(--krds-color-light-warning-30); --err-b:var(--krds-color-light-danger-20); --err-b2:var(--krds-color-light-danger-30); --info-b:var(--krds-color-light-information-20); /* 지도 위 반투명 패널(축척·범례·조작단추) — 배경지도 위에서 글자가 읽히도록 거의 불투명하게 둡니다. 고대비 모드에서는 검정으로 뒤집힙니다. */ --glass:rgba(255,255,255,.96); --glass-2:rgba(255,255,255,.9); --glass-line:rgba(18,24,31,.14); --bdline:#9fb2c4; /* 행정경계선 — 배경을 가리지 않는 옅은 회청색 */ --route:#e0218a; /* 경로선 — 사고지점(빨강)·내 위치(파랑)와 안 겹치는 색 */ /* 진한 머리띠·역상 바탕 */ --deep:var(--krds-color-light-primary-60); /* #0b50d0 */ --on-deep:var(--krds-color-light-gray-0); --on-deep-2:var(--krds-color-light-primary-20); /* 짙은 바탕 위 흐린 글자 */ /* 지도 마커용 — KRDS 에 대응 색이 없는 우리 확장입니다. 이재민 임시주거시설을 화학사고 대피장소(초록)와 눈으로 갈라야 해서 따로 둡니다. */ --tmp:#6b4c9a; --tmp-l:#f1ecf8; /* 채운 색(파랑·초록·빨강) 위에 얹는 글자색. 고대비 모드에서는 그 색들이 밝아지므로 글자가 어두워져야 합니다 — 안 바꾸면 흰 글자가 안 보입니다. */ --on-brand:var(--krds-color-light-gray-0); /* '내 위치' 파랑 — 사고지점(빨강)과 절대 헷갈리면 안 되는 우리 확장색. -d 는 그 위에 얹는 글자(옅은 바탕에서 읽히도록 한 단 진하게). */ --me:#1668d8; --me-d:#0f4fa8; /* ── 글자 (KRDS 타이포그래피) ────────────────────────────── */ --fs-xs:1.3rem; /* body-xsmall 13px — 주석·꼬리표 */ --fs-s:1.5rem; /* body-small 15px — 보조 설명 */ --fs-m:1.7rem; /* body-medium 17px — 본문 기준 */ --fs-l:1.9rem; /* body-large 19px — 강조 본문·큰 버튼 */ --fs-h4:1.9rem; /* heading-small */ --fs-h3:2.4rem; /* heading-medium */ --fs-h2:3.2rem; /* heading-large */ --lh:1.6; /* 150% 이상 (KRDS 규정) */ /* ── 크기·모서리 (KRDS number 계단) ──────────────────────── */ --h-s:4rem; /* 작은 컨트롤 40px */ --h-m:4.8rem; /* 기본 컨트롤 48px */ --h-l:5.6rem; /* 주요 단추 56px */ --r-s:0.4rem; /* 4px */ --r:0.6rem; /* 6px — 단추·입력칸 */ --r-l:1rem; /* 10px — 카드 */ --r-max:1000px; /* 초점 표시 — KRDS 가 못 박은 값입니다(4px 파란 테두리). 바꾸지 마세요. */ --focus:0 0 0 .4rem var(--krds-light-color-border-primary); --ease:cubic-bezier(.22,.61,.36,1); } /* ── 고대비(어두운) 모드 ────────────────────────────────────── 같은 이름을 KRDS 고대비 토큰으로 다시 잇습니다. 아래 규칙들은 이름만 쓰므로 손댈 것이 없습니다. data-krds-mode="theme" 는 기기 설정을 따릅니다. */ html[data-krds-mode="high-contrast"], html[data-krds-mode="theme"] { color-scheme:dark } html[data-krds-mode="high-contrast"]{ --on-brand:var(--krds-color-high-contrast-gray-100); --me:#7cb3ff; --me-d:#a8ccff; --brand-b:var(--krds-color-high-contrast-primary-70); --brand-b2:var(--krds-color-high-contrast-primary-80); --ok-b:var(--krds-color-high-contrast-success-70); --warn-b:var(--krds-color-high-contrast-warning-70); --warn-b2:var(--krds-color-high-contrast-warning-80); --err-b:var(--krds-color-high-contrast-danger-70); --err-b2:var(--krds-color-high-contrast-danger-80); --info:var(--krds-color-high-contrast-information-30); --info-l:var(--krds-color-high-contrast-information-90); --info-b:var(--krds-color-high-contrast-information-70); --line-d:var(--krds-high-contrast-color-border-gray); --glass:rgba(0,0,0,.88); --glass-2:rgba(0,0,0,.72); --glass-line:rgba(255,255,255,.28); --bdline:#6d7882; --route:#ff8ac4; --bg:var(--krds-high-contrast-color-surface-gray-subtler); --card:var(--krds-high-contrast-color-surface-white); --panel:var(--krds-color-high-contrast-gray-90); --ink:var(--krds-high-contrast-color-text-basic); --ink2:var(--krds-high-contrast-color-text-subtle); --ink3:var(--krds-color-high-contrast-gray-40); --line:var(--krds-high-contrast-color-border-gray-light); --line2:var(--krds-color-high-contrast-gray-80); --brand:var(--krds-color-high-contrast-primary-30); --brand-d:var(--krds-color-high-contrast-primary-20); --brand-l:var(--krds-color-high-contrast-primary-90); --ok:var(--krds-color-high-contrast-success-30); --ok-l:var(--krds-color-high-contrast-success-90); --warn:var(--krds-color-high-contrast-warning-30); --warn-l:var(--krds-color-high-contrast-warning-90); --err:var(--krds-color-high-contrast-danger-30); --err-l:var(--krds-color-high-contrast-danger-90); --deep:var(--krds-color-high-contrast-gray-100); --on-deep:var(--krds-color-high-contrast-gray-0); --on-deep-2:var(--krds-color-high-contrast-gray-30); --tmp:#b79ee0; --tmp-l:#241a33; --focus:0 0 0 .4rem var(--krds-high-contrast-color-border-primary); } @media (prefers-color-scheme:dark){ html[data-krds-mode="theme"]{ --on-brand:var(--krds-color-high-contrast-gray-100); --me:#7cb3ff; --me-d:#a8ccff; --brand-b:var(--krds-color-high-contrast-primary-70); --brand-b2:var(--krds-color-high-contrast-primary-80); --ok-b:var(--krds-color-high-contrast-success-70); --warn-b:var(--krds-color-high-contrast-warning-70); --warn-b2:var(--krds-color-high-contrast-warning-80); --err-b:var(--krds-color-high-contrast-danger-70); --err-b2:var(--krds-color-high-contrast-danger-80); --info:var(--krds-color-high-contrast-information-30); --info-l:var(--krds-color-high-contrast-information-90); --info-b:var(--krds-color-high-contrast-information-70); --line-d:var(--krds-high-contrast-color-border-gray); --glass:rgba(0,0,0,.88); --glass-2:rgba(0,0,0,.72); --glass-line:rgba(255,255,255,.28); --bdline:#6d7882; --route:#ff8ac4; --bg:var(--krds-high-contrast-color-surface-gray-subtler); --card:var(--krds-high-contrast-color-surface-white); --panel:var(--krds-color-high-contrast-gray-90); --ink:var(--krds-high-contrast-color-text-basic); --ink2:var(--krds-high-contrast-color-text-subtle); --ink3:var(--krds-color-high-contrast-gray-40); --line:var(--krds-high-contrast-color-border-gray-light); --line2:var(--krds-color-high-contrast-gray-80); --brand:var(--krds-color-high-contrast-primary-30); --brand-d:var(--krds-color-high-contrast-primary-20); --brand-l:var(--krds-color-high-contrast-primary-90); --ok:var(--krds-color-high-contrast-success-30); --ok-l:var(--krds-color-high-contrast-success-90); --warn:var(--krds-color-high-contrast-warning-30); --warn-l:var(--krds-color-high-contrast-warning-90); --err:var(--krds-color-high-contrast-danger-30); --err-l:var(--krds-color-high-contrast-danger-90); --deep:var(--krds-color-high-contrast-gray-100); --on-deep:var(--krds-color-high-contrast-gray-0); --on-deep-2:var(--krds-color-high-contrast-gray-30); --tmp:#b79ee0; --tmp-l:#241a33; --focus:0 0 0 .4rem var(--krds-high-contrast-color-border-primary); } } *{box-sizing:border-box} [hidden]{display:none!important} /* display:grid/flex 가 hidden 을 덮지 않도록 */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ── 부드럽게 나타나기 ──────────────────────────────────────── 버튼을 눌러 새로 보이게 되는 요소들에 붙인다. [hidden] 을 뗄 때 (display:none → 보임) 브라우저가 애니메이션을 처음부터 다시 재생하므로, 자바스크립트로 시점을 맞출 필요 없이 CSS만으로 "누르면 부드럽게 나타남"이 된다. innerHTML 로 새로 그려지는 요소(문안 카드 등)에도 그대로 적용되며, 이 경우는 새로 생겨날 때마다 매번 재생된다. */ @keyframes revealIn{ from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} } /* 위로 살짝 밀려 올라오며 나타남 — 트리거 아래에서 위로 열리는 것(문자 생성칸)에 */ @keyframes slideUp{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} } /* 위에서 아래로 펼쳐지며 나타남 — 트리거 바로 아래 붙어 열리는 것(목록·추가 입력)에 */ @keyframes slideDown{ from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} } html{-webkit-text-size-adjust:100%;background:var(--bg)} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Pretendard GOV","Pretendard","Malgun Gothic","맑은 고딕", "Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,sans-serif; font-size:var(--fs-m); line-height:var(--lh); word-break:keep-all; display:flex;flex-direction:column;min-height:100vh; } @supports (min-height:100dvh){ body{min-height:100dvh} } .wrap{max-width:1200px;margin:0 auto;padding:0 24px 64px} /* ── 헤더 ─────────────────────────────────────────── */ /* 머리띠 — KRDS 는 흰 바탕에 아래 굵은 파란 선을 두는 방식입니다(정부 누리집 공통). 진한 남색을 넓게 깔던 예전 방식보다 본문과 대비가 분명해집니다. */ .top{background:var(--card);color:var(--ink);padding:14px 0; border-bottom:.3rem solid var(--brand)} .top .wrap{padding-bottom:0;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .top h1{margin:0;font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em; flex:1;min-width:200px;line-height:1.3} .top .sub{font-size:var(--fs-s);color:var(--ink2);font-weight:400} .top .act{display:flex;gap:8px;flex-wrap:wrap} .top button{background:var(--card);border-color:var(--line);color:var(--ink2); min-height:var(--h-s);padding:0 14px;font-size:var(--fs-s)} .top button:hover{border-color:var(--ink3);color:var(--ink)} /* 밝음·고대비 바꾸는 단추 (assets/theme.js 가 만듭니다) */ .modebtn{gap:6px} .modebtn svg{width:1.6rem;height:1.6rem;flex:none} .modebtn[aria-pressed=true]{border-color:var(--brand);color:var(--brand)} @media (max-width:560px){ .modebtn .mode-t{display:none} .modebtn{padding:0 10px} } /* 안내 띠 */ .note{background:var(--info-l);border-bottom:1px solid var(--info-b);color:var(--info); font-size:1.5rem;padding:8px 0;margin-bottom:16px} .note .wrap{padding-bottom:0} /* ── 지도에서 값을 들고 왔을 때 알리는 띠 ───────────────── 내가 입력하지 않은 값이 칸에 들어가 있는 상태이므로, 어느 칸에 무엇이 채워졌는지 그대로 적어 둔다(모르는 채로 발송되는 것이 가장 위험하다). 한 번만 뜨고, 닫으면 사라진다. */ /* 아래 여백을 두지 않는 이유: 바로 뒤에 안내 띠(.note)가 붙어 두 줄짜리 머리띠가 되고, 안내 띠가 없을 때는 발송 구분 칸이 남는 공간 가운데로 정렬되기 때문. */ .seedbar{background:var(--ok-l);border-bottom:1px solid var(--ok-b);color:var(--ok); font-size:1.5rem;padding:9px 0; animation:revealIn .3s var(--ease) both} .seedbar .wrap{padding-bottom:0;display:flex;align-items:flex-start;gap:10px} .seedbar .sb-t{flex:1;min-width:0} .seedbar b{font-weight:700} .seedbar i{font-style:normal;display:inline-block;margin:2px 4px 0 0;padding:1px 7px; background:var(--card);border:1px solid var(--ok-b);border-radius:20px;font-size:1.5rem;color:var(--ok)} .seedbar i em{font-style:normal;color:var(--ink3);margin-right:4px} .seedbar .sb-warn{display:block;margin-top:5px;font-size:1.3rem;color:var(--warn)} .seed-x{flex:none;border:0;background:transparent;color:var(--ok);opacity:.6; padding:0 2px;font-size:1.7rem;line-height:1;cursor:pointer} .seed-x:hover{opacity:1} /* ── 발송 구분 선택 ─────────────────────────────────── 버튼을 고르기 전에는 화면에 이것 하나뿐이므로, 위에 쏠리지 않고 남는 공간 가운데에 오도록 .stepsz 를 화면을 채우는 flex 축으로 둔다 (.toolstage 가 body의 남는 세로 공간을 다 가져가고, 그 안에서 다시 .stepsz 가 가운데 정렬). 구분을 고르면(body.has-stage) 문자 생성칸이 보여야 하므로 이 자리는 작은 띠로 접힌다 — 정사각형 그대로 두면 화면을 너무 많이 차지해 아래 내용이 밀려나기 때문. 카드 자체 크기(패딩·아이콘· 설명 줄)를 전환시켜 접고 펼치므로 방향 전환 없이 부드럽게 줄어든다. */ /* ‼ 줄어드는 애니메이션이 실제로 "보이려면" 두 상태 모두 구체적인 길이 값이어야 한다 — aspect-ratio:auto 나 flex-basis:auto 처럼 한쪽이 auto/none 인 값은 브라우저가 중간값을 보간하지 못해 트랜지션이 순간적으로 툭 끊겨 버린다 (실제로 그랬음). 그래서 아래에서는 정사각형도 aspect-ratio 대신 height 를 구체적인 값(clamp)으로 직접 주고, .stepsz 도 flex-basis 는 0 으로 고정한 채 flex-grow 숫자만 1↔0 으로 바꾼다. */ .toolstage{flex:1;display:flex;flex-direction:column;min-height:0} .stepsz{flex:1 1 0;display:flex;align-items:center;justify-content:center; padding:26px 0;transition:flex-grow .5s var(--ease),padding .5s var(--ease)} body.has-stage .stepsz{flex-grow:0;padding:14px 0 10px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%; max-width:760px;transition:max-width .5s var(--ease),gap .5s var(--ease)} body.has-stage .steps{max-width:1180px;gap:10px} .steps button.stp{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px; text-align:center;width:100%;height:clamp(150px,20vw,210px);min-height:0;padding:18px 14px 16px; border:1.5px solid var(--line);background:var(--card);border-radius:16px;line-height:1.35; color:var(--ink);box-shadow:0 1px 2px rgba(18,40,70,.05); transition:border-color .18s var(--ease),box-shadow .3s var(--ease), transform .18s var(--ease),background .18s var(--ease), height .45s var(--ease), padding .4s var(--ease),border-radius .4s var(--ease),gap .4s var(--ease)} .stp-ic{width:46px;height:46px;color:var(--brand);flex:none; transition:color .18s var(--ease),width .4s var(--ease),height .4s var(--ease)} .stp-ic svg{width:100%;height:100%;display:block} .steps button.stp b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.01em; transition:font-size .4s var(--ease)} .stp-d{font-size:1.3rem;color:var(--ink3);font-weight:500;max-height:2.4em;opacity:1; transition:color .18s var(--ease),max-height .35s var(--ease),opacity .25s var(--ease), margin .35s var(--ease)} .steps button.stp:hover{border-color:var(--brand);box-shadow:0 8px 20px rgba(11,87,164,.15); transform:translateY(-2px)} .steps button.stp:active{transform:translateY(0)} .steps button.stp[aria-pressed=true]{border-color:var(--brand-d);background:var(--brand); color:var(--on-brand);box-shadow:0 8px 22px rgba(11,87,164,.3)} .steps button.stp[aria-pressed=true] .stp-ic{color:var(--on-brand)} .steps button.stp[aria-pressed=true] .stp-d{color:#cfe0f5} /* 구분을 고른 뒤 — 정사각형을 접어 작은 띠로. 시야를 덜 차지하도록 아이콘·글자를 줄이고 설명 줄은 높이째 접어 사라지게 한다. */ body.has-stage .steps button.stp{height:60px;min-height:0;padding:8px 10px;border-radius:12px;gap:3px} body.has-stage .stp-ic{width:22px;height:22px} body.has-stage .steps button.stp b{font-size:1.5rem} body.has-stage .stp-d{max-height:0;opacity:0;margin-top:-3px;pointer-events:none} body.has-stage .steps button.stp:hover{transform:none} /* ── 2단 레이아웃 ─────────────────────────────────── */ /* ── ① 문자 도구 — 한 걸음씩 (단계형) ──────────────────────── 예전에는 왼쪽에 입력칸 여덟 개, 오른쪽에 결과 네 건이 동시에 떠 있었습니다. 지금은 한 화면에 한 묶음만 묻고 마지막에 문안을 봅니다. 그래서 두 칼럼이 아니라 가운데 한 줄이고, 폭을 읽기 좋은 길이로 잡습니다(KRDS 단계형 서식). */ /* width:100% 가 있어야 합니다 — 감싸는 .toolstage 가 세로 flex 라서, 가로 auto 여백만 두면 브라우저가 늘리기를 포기하고 내용 크기로 줄여 버립니다 (실제로 그래서 입력 상자가 300px 로 쪼그라들었습니다). */ .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start; width:100%;max-width:82rem;margin:0 auto; animation:slideUp .46s var(--ease) both} .panel.sticky{position:static} /* 한 줄이 되었으므로 따라붙을 이유가 없다 */ /* 진행 표시 — 지금 몇 걸음째인가. 누르면 그 걸음으로 갑니다. KRDS 의 단계 표시(_step_indicator.scss)를 우리 걸음 수에 맞춰 옮겼습니다. */ .stepbar{list-style:none;display:flex;gap:0;margin:0 auto 14px;padding:0; width:100%;max-width:82rem;overflow-x:auto;scrollbar-width:none} .stepbar::-webkit-scrollbar{display:none} .stepbar .stp-i{flex:1 0 auto;min-width:0;position:relative} .stepbar button{width:100%;display:flex;align-items:center;gap:.8rem; min-height:var(--h-s);padding:0 1.2rem 0 .8rem;border:0;border-radius:0; background:transparent;color:var(--ink3);font-size:var(--fs-s);white-space:nowrap; border-bottom:.3rem solid var(--line2)} .stepbar button:hover{background:var(--panel);color:var(--ink2)} .stepbar button i{flex:none;display:grid;place-items:center; width:2.4rem;height:2.4rem;border-radius:50%;font-style:normal; font-size:var(--fs-xs);font-weight:700; background:var(--line2);color:var(--ink2)} .stepbar button b{font-weight:400;overflow:hidden;text-overflow:ellipsis} /* 지금 걸음 */ .stepbar .on button{color:var(--brand-d);border-bottom-color:var(--brand)} .stepbar .on button i{background:var(--brand);color:var(--on-brand)} .stepbar .on button b{font-weight:700} /* 지나온 걸음 — 다 채웠으면 체크 */ .stepbar .done button{color:var(--ok)} .stepbar .done button i{background:var(--ok);color:var(--on-brand)} .stepbar .ok button i{background:var(--ok-l);color:var(--ok)} @media (max-width:720px){ /* 좁은 화면에서는 지금 걸음의 이름만 두고 나머지는 번호만 — 일곱 개 이름이 가로로 늘어서면 옆으로 밀려 무엇이 지금인지 안 보입니다. */ .stepbar .stp-i:not(.on) button b{display:none} .stepbar button{padding:0 .6rem;justify-content:center} .stepbar .stp-i{flex:0 0 auto} .stepbar .on{flex:1 1 auto} } /* 걸음 사이 이동 */ .stepnav{display:flex;gap:10px;align-items:center; width:100%;max-width:82rem;margin:16px auto 0} .stepnav .sn-sp{flex:1} .stepnav .sn-prev{min-height:var(--h-m)} .stepnav .sn-next{margin-left:auto;min-width:22rem} .stepnav .sn-first{margin-left:auto} @media (max-width:560px){ .stepnav{flex-wrap:wrap} .stepnav .sn-next{width:100%;margin-left:0;min-width:0} /* 못 채운 칸 줄 — 한 줄에 [제목][칸 이름들][채우러 가기]를 밀어 넣으면 가운데 칸이 좁아져 이름이 석 줄로 쪼개지고, 가운데 정렬이라 계단처럼 보였습니다. 좁은 화면에서는 칸 이름을 아랫줄로 내립니다. */ .nf-list button{flex-wrap:wrap;align-items:flex-start;gap:6px 10px;padding:10px 12px} .nf-list button span{flex:1 1 100%;order:3} .nf-list button em{margin-left:auto} } /* 아직 못 채운 칸 — 문안 자리에 대신 나옵니다 */ .needfill{padding:4px 0} .nf-hd{display:block;font-size:var(--fs-l);font-weight:700;color:var(--warn)} .nf-d{margin:6px 0 14px;font-size:var(--fs-s);color:var(--ink2);line-height:1.65} .nf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .nf-list button{width:100%;display:flex;align-items:center;gap:10px;text-align:left; min-height:var(--h-m);padding:10px 14px;border:1px solid var(--warn-b); background:var(--warn-l);border-radius:var(--r)} .nf-list button:hover{border-color:var(--warn);background:var(--card)} .nf-list button b{flex:none;font-size:var(--fs-m);color:var(--ink)} .nf-list button span{flex:1;min-width:0;font-size:var(--fs-s);color:var(--ink2)} .nf-list button em{flex:none;font-style:normal;font-size:var(--fs-s);font-weight:700; color:var(--brand-d)} .nf-list button em::after{content:" →"} .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 1px 3px rgba(18,40,70,.05)} .panel > h2{margin:0;padding:11px 16px;font-size:1.5rem;font-weight:700;color:var(--ink2); border-bottom:1px solid var(--line2);letter-spacing:.01em; display:flex;align-items:center;justify-content:space-between;gap:10px} .panel .body{padding:15px 16px} .sticky{position:sticky;top:14px} /* ── 폼 ───────────────────────────────────────────── */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px 12px} #fEvacExtra{animation:slideDown .3s var(--ease) both} .f{display:flex;flex-direction:column;gap:4px;min-width:0} .f.wide{grid-column:1/-1} .f label{font-size:1.5rem;font-weight:600;color:var(--ink2)} .f label .req{color:var(--err);margin-left:2px} .f .fh{font-size:1.3rem;color:var(--ink3);line-height:1.45} /* 입력칸 — KRDS 기본 크기 48px. 손가락으로도 누를 수 있고, 글자는 본문과 같은 17px 라 채워 넣은 값을 눈으로 확인하기 쉽습니다. */ input[type=text],input[type=time],select{ width:100%;min-height:var(--h-m);padding:0 12px; border:1px solid var(--line-d);border-radius:var(--r); background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-m)} select{padding-right:8px} /* 초점 표시는 KRDS 가 정한 4px 파란 테두리입니다 — 키보드로 쓰는 사람에게 지금 어디에 있는지 알려 주는 유일한 표시라 얇게 바꾸지 마세요. */ input:focus-visible,select:focus-visible,button:focus-visible, a:focus-visible,[tabindex]:focus-visible{ outline:none;box-shadow:var(--focus);border-radius:var(--r)} input:focus,select:focus{outline:none;border-color:var(--brand)} select[multiple]{padding:3px;min-height:150px} select[multiple] option{padding:5px 7px;border-radius:4px;line-height:1.35;font-size:1.5rem} /* 구분선이 있는 소제목 */ .sect{font-size:1.5rem;font-weight:700;color:var(--ink3);letter-spacing:.03em; margin:16px 0 9px;padding-top:13px;border-top:1px solid var(--line2)} .body > .sect:first-child{margin-top:0;padding-top:0;border-top:0} /* 한 걸음씩 화면에서는 그 걸음의 첫 소제목이 상자의 맨 위입니다 — 위에 구분선을 그으면 상자 머리와 소제목 사이가 두 줄로 갈라져 빈 띠처럼 보입니다. */ .step > .sect:first-child, .step > div > .sect:first-child{margin-top:0;padding-top:0;border-top:0} /* ── 사고정보 묶음 ───────────────────────────────────────── 처음 보는 근무자도 위에서부터 순서대로 채우면 되도록 번호를 매겨 묶었습니다. 다 채워야 다음이 열리는 방식은 아닙니다 — 급할 때는 아는 값부터 순서 없이 채울 수 있어야 합니다. */ /* 한 걸음에 한 묶음만 보이므로 위쪽 구분선을 두지 않습니다 — 묶음이 하나뿐인데 선을 그으면 상자 안이 빈 칸으로 갈라져 보입니다. */ .fcommon{margin:0} /* 한 걸음에 한 묶음만 보이므로 묶음 사이 여백이 필요 없습니다 — 남겨 두면 보이는 묶음이 마지막이 아닐 때 상자 아래에 빈 띠가 생깁니다. */ .fgrp{margin-bottom:0} .fgrp-hd{display:flex;align-items:baseline;gap:7px;margin-bottom:8px;flex-wrap:wrap} .fgrp-n{flex:none;width:18px;height:18px;border-radius:50%;background:var(--brand); color:var(--on-brand);font-size:1.3rem;font-weight:700;line-height:18px;text-align:center} .fgrp-hd b{font-size:1.5rem;font-weight:700;color:var(--ink2);letter-spacing:.01em} /* 입력칸이 하나뿐인 걸음에서 칸이 상자 폭 전체로 늘어나면, 짧은 값 하나를 넣는 자리가 팔십 글자 들어갈 것처럼 보입니다. 읽기 좋은 폭으로 묶습니다. */ .fgrp .f{max-width:40rem} .fgrp .f.wide{max-width:none} .fgrp-d{font-size:1.3rem;color:var(--ink3)} /* 대상지역 — 사고 위치와 헷갈리기 쉬운 항목이라 색을 넣어 눈에 띄게 함 */ .fgrp-accent{background:var(--brand-l);border:1px solid var(--brand-b);border-radius:8px; padding:12px 13px 13px} .fgrp-accent .fgrp-n{background:var(--brand-d)} .fgrp-accent .fgrp-d{color:var(--brand-d);font-weight:600} /* ── 버튼 ─────────────────────────────────────────── */ /* 단추 — KRDS 크기 계단을 씁니다. 기본 medium(48px), .sm 은 small(40px), .p(주요 동작)는 large(56px). 급할 때 눌러야 하는 것이 가장 큽니다. */ button{font:inherit;cursor:pointer;border-radius:var(--r); border:1px solid var(--line-d); background:var(--card);color:var(--ink); min-height:var(--h-m);padding:0 16px;font-size:var(--fs-m); display:inline-flex;align-items:center;justify-content:center;gap:6px} button:hover:not(:disabled){border-color:var(--ink3);background:var(--panel)} button:disabled{opacity:.4;cursor:not-allowed} button.p{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700; min-height:var(--h-l);padding:0 20px;font-size:var(--fs-l); border-radius:.8rem} button.p:hover:not(:disabled){background:var(--brand-d);border-color:var(--brand-d)} button.sm{min-height:var(--h-s);padding:0 12px;font-size:var(--fs-s)} .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* 사고유형 칩 */ .chips{display:flex;gap:6px;flex-wrap:wrap} .chips button{min-height:var(--h-s);padding:0 16px;font-size:1.7rem;border-radius:20px;border-width:1.5px} .chips button[aria-pressed=true]{background:var(--brand);border-color:var(--brand); color:var(--on-brand);font-weight:700} /* ── 하위 분류 고르는 줄 ──────────────────────────── 한 발송 구분 안에서 상황에 따라 문안이 갈릴 때 씁니다(도로 우회 알림). 바뀌는 것이 바로 아래 문안 묶음이므로 그 위에 붙이고, 문안 묶음 머리표 (.ohd)보다 눈에 덜 띄게 작게 둡니다 — 결론은 문안이지 이 줄이 아닙니다. */ .catbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:12px} .catbar .cat{padding:4px 11px;font-size:1.5rem;border-radius:20px;border-width:1.5px} .catbar .cat[aria-pressed=true]{background:var(--brand);border-color:var(--brand); color:var(--on-brand);font-weight:700} /* 작게 두는 것은 눈에 덜 띄게 하려는 것이지 누르기 어렵게 하려는 것이 아니다 — 손가락으로 누르는 화면에서는 높이를 40px 로 되돌린다(글씨는 그대로 작게). */ @media (pointer: coarse){ .catbar{gap:8px} .catbar .cat{min-height:40px;padding:0 14px} } /* 분류를 고르기 전 — 빈 칸만 남기지 않고 할 일을 적는다 */ .out-ask{margin:0;padding:26px 14px;text-align:center;font-size:1.5rem; color:var(--ink2);line-height:1.7} .out-ask b{color:var(--brand-d)} .out-ask span{display:block;margin-top:5px;font-size:1.3rem;color:var(--ink3)} /* ── 결과 문안 ────────────────────────────────────── 같은 사고정보로 알림 문안과 종료 문안이 함께 나오므로 그룹으로 묶어 표시하고, 발송 경로(긴급재난문자 / 자체 문자발송시스템)는 색과 테두리를 다르게 해서 한눈에 구분되게 합니다. 급할 때 잘못된 경로로 복사하는 것을 막기 위한 것입니다. */ .ogrp{margin-bottom:16px} .ogrp:last-child{margin-bottom:0} .ohd{display:flex;align-items:center;gap:7px;margin-bottom:7px; font-size:1.5rem;font-weight:700;color:var(--ink2)} .ohd:not(.fold)::before{content:"";width:3px;height:13px;background:var(--ink3);border-radius:2px} .ohd span{font-weight:400;font-size:1.3rem;color:var(--ink3)} /* 접히는 그룹 — 지금 보낼 문안이 먼저 보이도록 나중에 쓸 문안은 접어 둔다 */ .ohd.fold{width:100%;text-align:left;padding:7px 11px;background:var(--panel); border:1px solid var(--line);border-radius:7px;cursor:pointer;margin-bottom:0} .ohd.fold:hover{border-color:var(--brand);background:var(--brand-l)} .ohd.fold .cv{width:0;height:0;flex:none;border-left:5px solid var(--ink3); border-top:4px solid transparent;border-bottom:4px solid transparent; transition:transform .12s} .ohd.fold[aria-expanded=true]{margin-bottom:7px;border-color:var(--line);background:var(--panel)} .ohd.fold[aria-expanded=true] .cv{transform:rotate(90deg)} .ohd.fold em{margin-left:auto;font-style:normal;font-size:1.3rem;font-weight:600;color:var(--brand)} .ohd.fold .werr{margin-left:auto;font-size:1.3rem;font-weight:700;color:var(--err); background:var(--err-l);border:1px solid var(--err-b);border-radius:4px;padding:0 5px} .ohd.fold .werr + em{margin-left:7px} .out{border-radius:8px;margin-bottom:9px;overflow:hidden} .out:last-child{margin-bottom:0} .out > header{display:flex;align-items:center;gap:7px;padding:7px 11px; font-size:1.5rem;font-weight:700;flex-wrap:wrap} .out > header .ch{letter-spacing:-.01em} .out > header .no{font-size:1.3rem;font-weight:700;padding:1px 6px;border-radius:4px; font-variant-numeric:tabular-nums} .out > header .who{margin-left:auto;font-weight:500;font-size:1.3rem} /* 긴급재난문자 — 해당 지역 모든 휴대전화로 강제 송출. 진하게. */ .out.cbs{border:1.5px solid var(--brand);box-shadow:inset 4px 0 0 var(--brand-d)} .out.cbs > header{background:var(--deep);color:var(--on-deep);padding-left:14px} .out.cbs > header .no{background:rgba(255,255,255,.18);color:var(--on-deep)} .out.cbs > header .who{color:var(--on-deep-2)} /* 자체 문자발송시스템·음성전파 — 기관이 직접 보내는 경로. 옅게. */ .out.loc{border:1px solid var(--line);box-shadow:inset 4px 0 0 #c2ccd6} .out.loc > header{background:var(--panel);color:var(--ink2); border-bottom:1px solid var(--line2);padding-left:14px} .out.loc > header .no{background:var(--card);color:var(--ink2);border:1px solid var(--line)} .out.loc > header .who{color:var(--ink3)} .msg{padding:11px 12px 11px 14px;font-size:1.7rem;line-height:1.7; white-space:pre-wrap;background:var(--card)} .out.loc .msg{color:var(--ink2)} .out > footer{display:flex;justify-content:space-between;align-items:center;gap:8px; padding:6px 11px 6px 14px;border-top:1px solid var(--line2);flex-wrap:wrap;background:var(--card)} .cnt{font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700;color:var(--ok)} .cnt.near{color:var(--warn)} .cnt.over{color:var(--err)} .cnt small{font-weight:400;color:var(--ink3)} .cut{padding:0 12px 9px 14px;font-size:1.3rem;color:var(--warn);line-height:1.5;background:var(--card)} /* 이 문안만의 문제 — 다른 문안은 그대로 쓸 수 있어야 하므로 카드 안에 적는다 */ .out.bad{border-color:var(--err)!important;box-shadow:inset 4px 0 0 var(--err)!important} .oerr{padding:0 12px 9px 14px;font-size:1.3rem;color:var(--err);line-height:1.5; background:var(--card);font-weight:600} /* ── 알림 ─────────────────────────────────────────── */ .alert{padding:9px 12px;border-radius:7px;font-size:1.5rem;line-height:1.55; margin-bottom:9px;border:1px solid} .alert b{font-weight:700;margin-right:5px} .alert.e{background:var(--err-l);border-color:var(--err-b);color:var(--err)} .alert.w{background:var(--warn-l);border-color:var(--warn-b);color:var(--warn)} .alert.i{background:var(--brand-l);border-color:var(--brand-b);color:var(--brand-d)} .alert.s{background:var(--ok-l);border-color:var(--ok-b);color:var(--ok)} .alert ul{margin:3px 0 0;padding-left:16px} .alert li{margin-top:2px} /* ── 체크 ─────────────────────────────────────────── */ .chk{display:flex;align-items:flex-start;gap:7px;font-size:1.5rem; padding:4px 0;cursor:pointer;line-height:1.5;color:var(--ink2)} .chk input{margin:3px 0 0;flex:none;width:15px;height:15px;accent-color:var(--brand)} /* 체크박스 이름 아래 딸린 설명 — 괄호로 한 줄에 매달면 무엇을 켜는 것인지가 괄호에 묻히고, 좁은 화면에서 두 줄로 접히며 더 읽기 어려워집니다. (2026-09-08 사용자 지시 — "괄호 안 설명은 줄바꿈해서 밑줄로 이동") */ .chk i{display:block;font-style:normal;font-size:var(--fs-xs); color:var(--ink3);margin-top:2px;line-height:1.4} /* ── 물질정보 ─────────────────────────────────────── */ .matbar{margin-top:8px;border:1px solid var(--brand-b);background:var(--brand-l);border-radius:7px; font-size:1.5rem;overflow:hidden} .matbar > summary{padding:8px 11px;cursor:pointer;list-style:none;color:var(--brand-d); display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;line-height:1.5} .matbar > summary::-webkit-details-marker{display:none} .matbar > summary b{font-weight:700} .matbar > summary .more{margin-left:auto;font-size:1.3rem;color:var(--brand-d);white-space:nowrap} .matbar[open] > summary .more::after{content:" ▲"} .matbar:not([open]) > summary .more::after{content:" ▼"} .matbar .body{padding:0 11px 11px;background:var(--card);border-top:1px solid var(--brand-b2)} .matbar.none{background:var(--warn-l);border-color:var(--warn-b)} .matbar.none > summary{color:var(--warn)} .matbar dl{margin:11px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:1.5rem} .matbar dt{font-weight:600;color:var(--ink2);white-space:nowrap} .matbar dd{margin:0;line-height:1.55;white-space:pre-line;color:var(--ink)} .matbar .src{margin:10px 0 0;font-size:1.3rem;color:var(--ink3);line-height:1.5} /* ── 대피장소 찾기 ────────────────────────────────── */ .finder{border:1px solid var(--line);border-radius:7px;background:var(--panel); padding:11px;margin-top:8px;animation:slideDown .3s var(--ease) both} .finder .cntlbl{font-size:1.3rem;color:var(--ink3);font-weight:400;margin-left:5px} /* ── 참고 사례 ────────────────────────────────────── */ .case{border-bottom:1px solid var(--line2);padding:8px 0;font-size:1.5rem;line-height:1.6} .case:last-child{border-bottom:0} .case .meta{font-size:1.3rem;color:var(--ink3);margin-bottom:2px; display:flex;gap:6px;flex-wrap:wrap;font-variant-numeric:tabular-nums} /* ── 참고 사례 창 — "실제 발송 사례" 단추를 눌렀을 때만 뜬다. 나중에 100건 넘게 늘어나도 본문을 밀어내지 않도록 목록만 스크롤됩니다. */ .cbx-back{position:fixed;inset:0;z-index:1000;background:rgba(9,20,33,.55); display:flex;align-items:center;justify-content:center;padding:18px; animation:cbxFade .2s var(--ease) both} .cbx{background:var(--card);border-radius:12px;width:100%;max-width:680px; max-height:100%;display:flex;flex-direction:column;overflow:hidden; box-shadow:0 18px 48px rgba(0,0,0,.3);animation:revealIn .3s var(--ease) both} @keyframes cbxFade{from{opacity:0}to{opacity:1}} .cbx > header{display:flex;align-items:center;gap:8px;padding:11px 14px; background:var(--brand-d);color:var(--on-brand);flex:none} .cbx > header b{font-size:1.7rem} .cbx-n{font-size:1.5rem;color:var(--brand-b)} .cbx-x{margin-left:auto;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3); color:var(--on-brand);padding:2px 9px;font-size:1.7rem;line-height:1.4;flex:none} .cbx-x:hover{background:rgba(255,255,255,.3)} .cbx-alert{margin:11px 14px 0} .cbx-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;flex:none} .cbx-bar label{font-size:1.5rem;font-weight:700;color:var(--ink2)} .cbx-bar select{width:auto;min-width:150px} .cbx-body{overflow-y:auto;padding:0 14px 14px;flex:1;min-height:0} @media (max-width:560px){ .cbx-back{padding:0} .cbx{max-width:none;border-radius:0;height:100%} } @media print{ /* 고대비(어두운) 화면으로 보고 있어도 인쇄는 흰 종이에 검정으로 나가야 합니다. 토큰을 인쇄용으로 되돌립니다 — 안 하면 검정 바탕이 그대로 찍혀 토너를 다 쓰고 글자도 안 보입니다. */ html,html[data-krds-mode]{--card:#fff;--bg:#fff;--panel:#fff;--ink:#000;--ink2:#222;--ink3:#444; --line:#000;--line2:#666;--on-brand:#fff;--bdline:#666;--route:#000} .cbx-back{display:none!important} } /* ── 반응형 ───────────────────────────────────────── */ @media (max-width:980px){ .cols{grid-template-columns:1fr} .sticky{position:static} } @media (max-width:560px){ /* ⚠ 입력 칸은 **한 줄에 하나씩** (2026-09-08 사용자 지시 — "3칸이 위치가 애매함, 각 칸이 한줄씩 차지하도록 수정" · "박스의 크기도 다르고 화면 밖으로 칸이 넘어감"). `auto-fit,minmax(150px,1fr)` 이라 390px 화면에서 두 칸이 나란히 서는데, ① 시각 칸(input[type=time])은 브라우저가 정한 최소 너비가 그 칸보다 넓어 **오른쪽으로 삐져나갔습니다**(발생시각·집결 시각). ② 짝이 안 맞는 항목 (사업장·장소명, 반려동물 동반 대피소)은 혼자 반쪽만 차지해 크기가 들쭉날쭉 했습니다. 좁은 화면에서는 한 줄에 하나면 둘 다 없어집니다. `minmax(0,1fr)` 이라야 안의 칸이 줄어들 수 있습니다(1fr 만으로는 최소 너비가 min-content 라서 time 칸이 또 넘칩니다). */ .grid{grid-template-columns:minmax(0,1fr)} .wrap{padding:0 12px 48px} /* 상단 바 — 휴대전화에서 112px(화면의 1/6)를 쓰고 있었습니다. 제목과 단추는 그대로 두고 여백만 눌러 90px 쯤으로 낮춥니다. 아래 지도·문안이 그만큼 더 보입니다. */ .top{padding:6px 0} .top .wrap{gap:6px} .top h1{font-size:1.9rem} /* 도구 단추(자료 출처·인쇄·초기화·고대비)는 눌러야 하니 40px 을 지키되, 좌우 여백만 줄여 제목과 함께 두 줄에 딱 맞게 합니다. */ .top .act{gap:6px} .top button{padding:0 11px} /* ‼ 세로 가운데 정렬을 풉니다. 넓은 화면에서는 고를 것이 셋뿐인 첫 화면을 가운데 두는 것이 보기 좋지만, 휴대전화에서는 위아래로 280px 씩 빈 자리가 생겨 **화면이 고장 난 것처럼** 보였습니다(사용자 지적). 위에 붙입니다. */ .stepsz{padding:16px 0;align-items:flex-start} body.has-stage .stepsz{padding:10px 0 8px} .steps{gap:7px} /* 정사각형 크기도 height 로 직접 줘야 줄어들 때 매끄럽게 보간된다 (aspect-ratio 는 height 가 이미 정해져 있으면 무시되는 값이라 여기선 no-op) */ .steps button.stp{height:29vw;min-height:0;padding:9px 6px 8px;border-radius:13px;gap:6px} .stp-ic{width:30px;height:30px} .steps button.stp b{font-size:1.5rem} .stp-d{display:none} /* ‼ 접힌 띠를 52px 로 두었더니 '주민소산(대피명령) 알림' 이 두 줄이 되면서 **글자가 단추 밖으로 3px 삐져나왔습니다** — 모든 휴대전화 폭에서 그랬습니다. 이름은 기관이 쓰는 분류 이름이라 줄일 수 없으므로 띠를 60px 로 키웁니다. */ body.has-stage .steps button.stp{height:60px;min-height:0;padding:6px 6px} body.has-stage .stp-ic{width:19px;height:19px} body.has-stage .steps button.stp b{font-size:1.3rem} .panel .body{padding:13px} .msg{font-size:1.9rem} .matbar dl{grid-template-columns:1fr;gap:1px} .matbar dt{margin-top:6px} } /* 아주 좁은 화면(320px 급) — 세 분류를 나란히 두면 한 칸이 94px 밖에 안 되어 '주민소산(대피명령) 알림' 이 석 줄이 되고 정사각형 밖으로 넘쳤습니다. 칸을 높이고 아이콘·글자를 한 단 줄여 안에 들어오게 합니다. */ @media (max-width:400px){ .steps button.stp{height:38vw;padding:8px 4px 7px} .stp-ic{width:26px;height:26px} .steps button.stp b{font-size:1.4rem} } @media print{ .top{background:var(--card);color:#000;border-bottom:2px solid #000} .top .sub,.note,button,.noprint,.stepsz{display:none!important} body{background:var(--card);font-size:11pt;display:block} .cols{grid-template-columns:1fr} .panel{border:0} /* 인쇄물에서도 발송 경로가 구분되어야 합니다 (배경색은 인쇄되지 않을 수 있음) */ .out{break-inside:avoid;box-shadow:none!important} .out.cbs{border:2px solid #000} .out.loc{border:1px dashed #666} .out.cbs > header{background:var(--card);color:#000;border-bottom:1.5px solid #000} .out.cbs > header .no,.out.loc > header .no{background:var(--card);color:#000;border:1px solid #000} .out.cbs > header .who,.out.loc > header .who{color:#000} .ohd{color:#000} } /* ══ 주민 대피장소 찾기 ══════════════════════════════════════════ 지도가 주인공인 화면이라 한 화면에 꽉 채웁니다(스크롤 없이 지도·목록이 동시에 보이도록). 지도는 화면 픽셀 좌표계로 그리므로(assets/mapcore.js) 아래 선 굵기·글자 크기는 그대로 화면 픽셀이며 확대해도 변하지 않습니다. */ body.mapapp{display:flex;flex-direction:column;height:100vh;overflow:hidden} @supports (height:100dvh){ body.mapapp{height:100dvh} } .mapapp .top{flex:none;padding:11px 0} .mapapp .top .wrap{max-width:none;padding:0 16px} /* 조건 줄 — 시·도/시·군·구/찾는 범위는 오른쪽 목록 패널로 옮기고(.ms-find), 여기는 주소 검색·영향반경 물질·풍향·배경지도만 남겨 더 넓게 쓴다. 글자가 작아 안 보인다는 의견을 받아 줄 높이와 글자 크기를 키웠다. */ .mbar{flex:none;background:var(--panel);border-bottom:1px solid var(--line)} .mbar-in{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:14px 18px;min-height:64px} .mb-f{display:flex;flex-direction:column;gap:5px;font-size:1.5rem;font-weight:700;color:var(--ink2)} .mb-f select,.mb-f input[type=text]{width:auto;min-width:150px;font-weight:400; padding:8px 11px;font-size:1.7rem;border-radius:7px} /* 폭을 못 박습니다 — 안 박으면 브라우저가 글자 20자 들어갈 만큼(약 350px) 잡아, 조건 줄이 금방 두 줄로 넘어갑니다. */ .mb-f input[type=text]{width:20rem;min-width:0} .mb-addr{position:relative} .mb-addr input[type=text]{width:26rem} /* 조건 접기 단추 — 넓은 화면에서는 접을 이유가 없으므로 보이지 않는다 */ .mb-toggle{display:none} /* ③ 은 물질·풍향·배경지도까지 접어 둡니다 — 화면에 처음부터 고를 것이 많으면 어디부터 손대야 하는지 알 수 없습니다. 좁은 화면 규칙(.mb-toggle)과 같은 접기이되, 넓은 화면에서도 접힌 채로 시작합니다. */ .mb-toggle.always{display:inline-flex;align-items:center;gap:5px; padding:6px 12px;font-size:1.5rem;font-weight:700;color:var(--brand-d); background:var(--panel);border-radius:20px;align-self:flex-end} .resapp .mbar.folded .mb-more{display:none} .mb-toggle .mb-caret{width:13px;height:13px;flex:none} /* 접기 위해 감싼 상자. 넓은 화면에서는 이 상자가 없는 것처럼 동작해야 한다 — 그냥 두면 안에 든 물질·풍향·배경지도가 한 덩어리로 묶여 세로로 쌓이고, .mb-lyr 의 margin-left:auto 도 .mbar-in 기준이 아니게 되어 자리가 틀어진다. */ .mb-more{display:contents} /* 풍향 단추 — 실제 나침반(.windpop, JS 로 생성)은 이 단추를 누르면 뜬다 */ .mb-wind{position:relative} .windbtn{display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:1.7rem; font-weight:600;color:var(--ink);border-radius:7px;min-width:150px} .windbtn-ic{width:17px;height:17px;flex:none;color:var(--ink3)} .windbtn.on{border-color:var(--brand);background:var(--brand-l);color:var(--brand-d)} .windbtn.on .windbtn-ic{color:var(--brand-d)} /* ── 사고지점 정하기 (조건 줄 안) ───────────────────────────── 예전에는 지도 아래쪽 반투명 띠에 있었습니다. 이 도구에서 가장 먼저 하는 일인데 지도에 가려 있어 못 찾는 일이 있었습니다. 그래서 주소 검색 옆으로 올렸습니다. 한 덩어리로 읽히도록 옅은 바탕과 테두리를 두릅니다. */ .mb-acc{flex:none} .mb-accrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap; padding:4px 7px;background:var(--card);border:1px solid var(--line); border-radius:var(--r)} .mb-accrow .mb-ll{display:flex;align-items:center;gap:4px; font-size:1.3rem;font-weight:600;color:var(--ink2);white-space:nowrap} /* 좌표 칸은 짧습니다 — 소수점 여섯 자리까지 들어가면 됩니다. 전역 입력칸 규칙(폭 100% · 높이 48px)과 좁은 화면 규칙(.mb-f 의 width:auto)이 둘 다 이 줄을 늘려 버리므로, 선택자를 한 단 깊게 써서 확실히 이깁니다. */ .mb-acc .mb-accrow input[type=text]{flex:none;width:100px;min-width:0; min-height:var(--h-s);padding:0 8px;font-size:1.5rem;font-weight:400} .mb-accrow .sm{min-height:var(--h-s)} #btnAcc[aria-pressed=true]{background:var(--err);border-color:var(--err); color:var(--on-brand);font-weight:700} @media (pointer:coarse){ .mb-accrow .sm,.mb-accrow .btnme{min-height:40px} .mb-accrow input[type=text]{min-height:40px} } @media (max-width:860px){ /* 좁은 화면에서는 조건 줄 한 줄을 다 씁니다 — 단추와 좌표칸이 세로로 쪼개지면 어느 것이 한 묶음인지 알 수 없습니다. 자리를 어떻게 나누는지는 아래 좁은 화면 블록의 격자(.mb-accrow)에 적혀 있습니다 — 좌표칸 폭도 거기서 정합니다(격자 칸을 꽉 채움). */ .mb-acc{flex:1 1 100%} .mb-accrow{width:100%} .mb-accrow .mb-ll{font-size:1.3rem} } @media (pointer:coarse){ /* 손가락으로 누르는 화면 — 좌표칸도 40px 이상이어야 합니다 */ .mb-acc .mb-accrow input[type=text]{min-height:40px} } /* 배경지도 고르기 */ .mb-lyr{display:flex;gap:0;margin-left:auto} /* 배경지도 이름은 셋을 나란히 놓아야 하고 자주 누르는 것이 아니므로 보조 글자크기를 씁니다 — 그래야 조건 줄이 한 줄에 들어갑니다. */ .mb-lyr button{min-height:var(--h-s);padding:0 11px;font-size:var(--fs-s);border-radius:0;border-left-width:0;background:var(--card)} .mb-lyr button:first-child{border-radius:6px 0 0 6px;border-left-width:1px} .mb-lyr button:last-child{border-radius:0 6px 6px 0} .mb-lyr button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700} .mb-lyr button[aria-pressed=true] + button{border-left-color:var(--brand)} .mb-lyr button:disabled{background:var(--panel);color:var(--ink3);text-decoration:line-through} /* 주소·장소 검색 결과 — 사고물질 목록(.mpk)과 같은 모양을 그대로 쓴다 */ #addrPop.mpk{z-index:950} #addrPop .mpk-list{max-height:320px} /* 풍향 고르기 창 — 나침반 */ .windpop{position:fixed;z-index:950;background:var(--card);border:1px solid var(--brand); border-radius:10px;box-shadow:0 6px 24px rgba(16,32,48,.18);padding:12px;width:216px; animation:revealIn .2s var(--ease) both} .windpop-hd{font-size:1.5rem;font-weight:700;color:var(--ink2);margin-bottom:10px;text-align:center} .windpop-hd b{color:var(--brand-d)} .windrose{position:relative;width:168px;height:168px;margin:0 auto} .wr-ring{position:absolute;inset:8px;border:1.5px dashed var(--line);border-radius:50%} .wr-hub{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px; border-radius:50%;background:var(--ink3);z-index:1} .wr-cap{text-align:center;font-size:1.5rem;line-height:1.5;color:var(--ink2); margin:10px 0 12px} .wr-cap b{color:var(--brand-d);font-weight:800} .wr-b{position:absolute;width:34px;height:34px;margin:-17px;padding:0;border-radius:50%; font-size:1.3rem;font-weight:700;background:var(--card);display:flex;align-items:center;justify-content:center} .wr-b[aria-pressed=true]{background:var(--brand);border-color:var(--brand-d);color:var(--on-brand); box-shadow:0 0 0 3px var(--brand-l)} /* 풍하방향 화살표 — 나침반 가운데서 시작해 고른 방향의 반대쪽을 가리킨다. 기본자세(0deg)가 북쪽(위)을 향해야 rotate(풍하방향deg) 가 그대로 맞으므로, 막대는 가운데(바닥)에서 위로 자라도록 두고 그 끝점을 축으로 돌린다. */ .wr-arrow{position:absolute;left:50%;bottom:50%;width:3px;height:58px;background:var(--err); transform-origin:50% 100%;border-radius:2px 2px 0 0} .wr-arrow::after{content:"";position:absolute;left:50%;top:-1px;width:0;height:0; transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent; border-bottom:9px solid var(--err)} .windpop-clear{width:100%;justify-content:center;display:flex} .mbar-warn{flex:none;padding:8px 16px;background:var(--warn-l); border-bottom:1px solid var(--warn-b);color:var(--warn);font-size:1.5rem;line-height:1.55; animation:slideDown .26s var(--ease) both} .mbar-warn a{color:var(--brand-d);font-weight:700} /* 영향 참고 반경 줄 */ .mrad{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap; padding:7px 16px;background:var(--brand-l);border-bottom:1px solid var(--brand-b); animation:slideDown .26s var(--ease) both} .mr-lb{font-size:1.3rem;font-weight:700;color:var(--brand-d)} .mr-nm{font-size:1.5rem;color:var(--ink);margin-right:4px} .mr-none{font-size:1.5rem;color:var(--warn);font-weight:600} .mrad button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700} input[type=text].mr-in{width:92px;padding:4px 8px;font-size:1.5rem;flex:none} .mr-more{font-size:1.3rem;color:var(--brand-d);margin-left:4px} .mr-more > summary{cursor:pointer;font-weight:600} .mr-more dl{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px; background:var(--card);border:1px solid var(--brand-b2);border-radius:6px;padding:8px 10px; max-width:760px;color:var(--ink)} .mr-more dt{font-weight:600;color:var(--ink2);white-space:nowrap} .mr-more dd{margin:0;line-height:1.5} .mr-more .src{margin:5px 0 0;font-size:1.3rem;color:var(--ink3);line-height:1.5;max-width:760px} /* 사고지점 요약 줄 — "이 근방에 무엇이 있나"를 한 줄로 */ .msum{flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:8px 16px;background:var(--deep);color:var(--on-deep);font-size:1.5rem; animation:slideDown .26s var(--ease) both} /* 사고지점 주소 — 요약 줄 맨 앞. 문자로 넘어가는 값이므로 넘기기 전에 눈으로 확인할 수 있어야 한다. */ .ms-acc{display:flex;align-items:baseline;gap:6px; padding-right:14px;border-right:1px solid rgba(255,255,255,.22)} .ms-acc b{font-weight:700;color:var(--on-deep-2);font-size:1.3rem} .ms-acc i{font-style:normal;font-size:1.3rem;font-weight:700;color:var(--warn-b); border:1px solid rgba(240,217,168,.5);border-radius:20px;padding:0 6px} .ms-near{display:flex;align-items:baseline;gap:6px} .ms-near b{font-weight:700;color:var(--on-deep-2);font-size:1.3rem} .ms-near em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums} .ms-bands{display:flex;gap:8px;flex-wrap:wrap} .ms-b{background:rgba(255,255,255,.13);border-radius:20px;padding:1px 10px; font-variant-numeric:tabular-nums} .ms-b.z{opacity:.55} .ms-warn{background:rgba(255,255,255,.13);border-radius:20px;padding:1px 10px} .ms-warn.on{background:var(--err);font-weight:700} .ms-none{color:var(--on-deep-2)} .ms-more{margin-left:auto;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4); color:var(--on-brand);font-size:1.5rem;padding:3px 11px;font-weight:600} .ms-more:hover{background:rgba(255,255,255,.3);border-color:var(--on-brand)} /* 지도 + 목록 */ .mmain{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 440px} .mmap{position:relative;background:var(--panel);min-height:0;border-right:1px solid var(--line)} #map{position:absolute;inset:0;width:100%;height:100%;display:block; touch-action:none;cursor:grab} #map:active{cursor:grabbing} #map.crosshair{cursor:crosshair} #map .bg{fill:var(--panel)} #map .bds .bd{fill:none;stroke:var(--bdline);stroke-width:.8px} #map .bds .bd.on{stroke:var(--brand);stroke-width:1.6px} /* 거리 눈금 — 배경을 가리지 않게 얇고 옅게 */ #map circle.grid{fill:none;stroke:var(--info);stroke-width:1px;stroke-dasharray:3 4;opacity:.5} #map text.gridlbl{fill:var(--info);text-anchor:middle;font-weight:700;paint-order:stroke; stroke:var(--card);stroke-width:.32em;stroke-linejoin:round;pointer-events:none} /* 영향 참고 반경 */ #map circle.ring{fill:rgba(179,31,31,.07);stroke:var(--err);stroke-width:1.8px;stroke-dasharray:7 4} #map text.ringlbl{fill:var(--err);text-anchor:middle;font-weight:700;paint-order:stroke; stroke:var(--card);stroke-width:.32em;stroke-linejoin:round;pointer-events:none} /* 풍하방향 */ #map path.lee{fill:rgba(138,79,6,.10);stroke:rgba(138,79,6,.35);stroke-width:1px} #map text.leelbl{fill:var(--warn);text-anchor:middle;font-weight:700;paint-order:stroke; stroke:var(--card);stroke-width:.32em;stroke-linejoin:round;pointer-events:none} /* ── 사고지점 ↔ 고른 곳 경로선 ──────────────────────────────── 예전에는 얇은 점선이었는데, 배경지도를 깔면 도로 위에서 잘 보이지 않아 "어디로 가야 하는지"가 한눈에 안 들어왔습니다. 흰 테두리를 먼저 깔고 그 위에 굵은 색선을 올려 어떤 배경에서도 읽히게 합니다. 실선이 아니라 긴 점선인 것은 일부러입니다 — 이 선은 실제 도로 경로가 아니라 두 점을 잇는 직선이므로, 도로를 따라간 길로 보이면 안 됩니다. */ #map path.route-cas,#map path.route{pointer-events:none} /* 아래 마커를 가리지 않게 */ #map path.route-cas{fill:none;stroke:var(--card);stroke-width:9px;stroke-linecap:round;opacity:.92} #map path.route{fill:none;stroke:#e0218a;stroke-width:5px;stroke-linecap:round; stroke-dasharray:15 9;animation:routeIn .42s var(--ease) both} /* 길찾기로 받아 온 실제 도로 경로 — 직선이 아니라 진짜 길이므로 실선으로 긋는다. 점선은 "이건 직선이다"라는 표시였다. */ #map path.route.real{stroke-dasharray:none;stroke-linejoin:round;stroke-width:5.5px} @keyframes routeIn{from{stroke-dashoffset:70;opacity:0}to{stroke-dashoffset:0;opacity:1}} #map text.linklbl{fill:var(--route);text-anchor:middle;font-weight:700;paint-order:stroke; stroke:var(--card);stroke-width:.42em;stroke-linejoin:round;pointer-events:none} /* 대피장소 */ /* ── ② 대피장소 마커 — 두 층을 **아이콘으로도** 구분 ────────────── 화학사고 대피장소는 비상구(문+화살표), 이재민 임시주거시설은 집. 색(초록 ↔ 보라)에 모양까지 더해 색을 못 가려도 구별됩니다. ⚠ 어느 쪽이 진짜 대피처라는 뜻이 아닙니다 — 별개의 층입니다. */ #map g.mk{cursor:pointer} #map g.mk .pin-bg{fill:var(--ok);stroke:var(--card);stroke-width:1.8px} #map g.mk .pin-ic{fill:none;stroke:var(--on-deep); stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #map g.mk.hv .pin-bg{stroke:var(--ink);stroke-width:2.4px} #map g.mk.lee .pin-bg{stroke:var(--warn);stroke-width:2.6px} #map g.mk.in .pin-bg{fill:var(--err)} #map g.mk.on .pin-bg{stroke:var(--brand-d);stroke-width:3.2px} /* 이재민 임시주거시설 — 화학사고 대피장소(초록)와 한눈에 갈리게 보라로 둡니다. 빨강(사고지점·영향반경)·파랑(내 위치)과도 겹치지 않는 색입니다. 단, 영향 참고 반경 안에 든 곳은 자료 종류보다 위험 표시가 먼저입니다. */ #map g.mk.tmp .pin-bg{fill:var(--tmp)} #map g.mk.tmp.in .pin-bg{fill:var(--err)} #map text.mkl{fill:var(--ink);text-anchor:middle;font-weight:600;paint-order:stroke; stroke:var(--card);stroke-width:.28em;stroke-linejoin:round;pointer-events:none} #map text.mkl.on{fill:var(--brand-d)} #map text.mkh{fill:var(--ink3);text-anchor:middle;paint-order:stroke; stroke:var(--card);stroke-width:.3em;pointer-events:none} /* 사고지점 */ #map line.acc{stroke:var(--err);stroke-width:2.6px} #map circle.accdot{fill:none;stroke:var(--err);stroke-width:1.8px} #map text.acclbl{fill:var(--err);text-anchor:middle;font-weight:700;paint-order:stroke; stroke:var(--card);stroke-width:.32em;stroke-linejoin:round;pointer-events:none} /* ── 내 위치 ────────────────────────────────────────────────── 사고지점(빨강 십자)과 절대 헷갈리면 안 되므로 색도 모양도 다르게 둡니다 — 파란 동그라미입니다. 둘레의 옅은 원은 '이 안 어딘가'라는 뜻으로, 단말이 알려 준 오차 범위를 그대로 그린 것입니다. 실내에서는 이 원이 수백 미터까지 커지는데, 그 사실이 보여야 좌표를 곧이곧대로 믿지 않습니다. */ #map circle.me,#map circle.meacc{pointer-events:none} #map circle.meacc{fill:rgba(22,104,216,.12);stroke:rgba(22,104,216,.45);stroke-width:1.2px} #map circle.mepulse{fill:none;stroke:var(--me);stroke-width:2.2px; transform-box:fill-box;transform-origin:center; animation:mePulse 2.2s var(--ease) infinite;pointer-events:none} @keyframes mePulse{from{transform:scale(.3);opacity:.85}to{transform:scale(1);opacity:0}} #map circle.me{fill:var(--me);stroke:var(--card);stroke-width:2.6px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))} #map text.melbl{fill:var(--me-d);text-anchor:middle;font-weight:700;paint-order:stroke; stroke:var(--card);stroke-width:.32em;stroke-linejoin:round;pointer-events:none} /* 배경지도가 깔렸을 때 — 도로·건물 위에서 묻히지 않게 대비를 올린다 */ #map.hasbg .bg{fill:var(--line)} #map.hasbg .bds .bd{stroke:rgba(11,87,164,.28);stroke-width:.7px} #map.hasbg .bds .bd.on{stroke:var(--err);stroke-width:2px;stroke-dasharray:7 4;stroke-linejoin:round} #map.hasbg g.mk .pin-bg{stroke-width:2.2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} #map.hasbg text.mkl{stroke-width:.34em} #map.hasbg circle.grid{stroke-width:1.4px;opacity:.75} /* 지도 위 겹쳐 놓는 것들 */ .mapctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px} .mapctl button{width:32px;height:32px;min-height:0;padding:0;font-size:1.7rem;line-height:1; background:var(--glass)} /* 자리는 위 .mapleft 가 잡습니다 — 여기서 다시 절대 위치를 주면 그 줄에서 빠져나와 '가까운 곳' 카드와 다시 겹칩니다. */ .maplegend{display:flex;gap:9px;flex-wrap:wrap; background:var(--glass);border-radius:6px;padding:4px 9px; font-size:1.3rem;color:var(--ink2);pointer-events:none;max-width:100%} .maplegend .dot{display:inline-block;width:9px;height:9px;border-radius:50%; margin-right:4px;vertical-align:-1px;border:1.5px solid var(--ok);background:var(--card)} .maplegend .dot.tmp{border-color:var(--tmp)} /* ② 두 층의 아이콘 — 지도 마커와 같은 모양·같은 색. 색만으로 나누지 않으려고 넣은 그림이므로, 범례에서도 그림이 보여야 "이 표시가 저 종류" 가 이어집니다. */ .sh-ic{display:inline-block;width:1.7rem;height:1.7rem;flex:none; vertical-align:-.35rem;margin-right:2px} .sh-ic.sh-chem{color:var(--ok)} .sh-ic.sh-temp{color:var(--tmp)} .ms-kd .sh-ic{width:1.4rem;height:1.4rem;vertical-align:-.25rem;margin-right:1px} .ms-kd.chem .sh-ic,.ms-kd.temp .sh-ic{color:inherit} .maplegend .dot.ac{background:var(--err);border-color:var(--err)} .maplegend .dot.in{background:var(--err-l);border-color:var(--err)} .maplegend .dot.lee{background:rgba(138,79,6,.2);border-color:var(--warn)} .maplegend .dot.gr{background:none;border-style:dashed;border-color:var(--info)} .maplegend .dot.me{background:var(--me);border-color:var(--on-brand);box-shadow:0 0 0 1px var(--me)} /* 종류 이름의 꼬리 — 넓은 화면에서는 그대로 보인다 (좁은 화면에서만 감춤) */ .maplegend .lg-t{font-style:normal} /* 축척·주소는 왼쪽 아래. 겹쳐 그리기 줄(.mapacc)이 오른쪽 아래로 옮겨져 더 이상 피해 올라갈 필요가 없습니다. */ .mapscale{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px; background:var(--glass);border-radius:4px;padding:2px 7px;font-size:1.3rem} .mapscale i{display:block;height:4px;border:1px solid var(--ink2);border-top:0} .mapscale b{font-variant-numeric:tabular-nums;color:var(--ink2)} .mapaddr{position:absolute;left:10px;max-width:min(380px,calc(100% - 62px));bottom:38px; background:var(--glass);border:1px solid var(--line);border-radius:7px; padding:7px 11px;font-size:1.5rem;line-height:1.5; box-shadow:0 2px 8px rgba(0,0,0,.14);pointer-events:none; animation:revealIn .26s var(--ease) both} .mapaddr b{font-weight:700} .mapaddr i{font-style:normal;font-size:1.3rem;color:var(--ink3);margin-left:4px} .mapaddr span{display:block;color:var(--ink2);font-size:1.3rem} .mapaddr em{font-style:normal;font-size:1.3rem;color:var(--brand-d);font-weight:600} .mapaddr em + em::before{content:" · ";color:var(--ink3);font-weight:400} /* ── 유리 패널 ──────────────────────────────────────────────── 지도 위에 겹쳐 놓는 것들만 반투명으로 둡니다. 아래에 깔린 도로·건물이 비쳐 보여야, 이 패널이 지금 지도의 어디를 가리고 있는지 알 수 있습니다. 오른쪽 목록과 위쪽 조건 줄에는 쓰지 않습니다. 거기는 오래 들여다보며 읽는 곳이라, 급할 때 읽을 글자를 지도 무늬 위에 얹으면 안 됩니다. */ .maplegend,.mapscale,.mapaddr,.mnear,.mapctl button{ background:var(--glass-2); -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5); border:1px solid var(--glass-line); box-shadow:0 4px 18px rgba(10,32,60,.16)} .mapctl button:hover{background:var(--glass)} /* 흐림 효과를 지원하지 않는 브라우저에서는 글자가 지도 위에 그대로 얹혀 읽히지 않습니다. 그런 곳에서는 불투명에 가깝게 되돌립니다. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .maplegend,.mapscale,.mapaddr,.mnear,.mapctl button{background:var(--glass)} } /* ── 가까운 3곳 ─────────────────────────────────────────────── 오른쪽에 전체 목록이 이미 있는데도 따로 두는 이유는, 급할 때 필요한 것이 훑어볼 목록이 아니라 "그래서 어디로 보내면 되는가" 세 줄이기 때문입니다. 지도에서 눈을 떼지 않고 읽도록 지도 위에 겹쳐 둡니다. */ /* 지도 왼쪽 위 세로 줄 — 범례와 '가까운 곳' 카드를 담습니다. ‼ 예전에는 둘이 각자 지도에 절대 위치로 붙어 있었고, 카드의 top 을 "범례 한 줄 높이"인 46px 로 못 박아 두었습니다. ③은 종류가 여섯이라 범례가 늘 두세 줄(54~103px)이 되어 **카드가 범례 글자 위로 올라탔습니다** — 넓은 화면에서도 그랬습니다. 상자가 세로로 쌓아 주면 몇 줄이든 어긋나지 않습니다. 상자 자체는 손가락을 통과시키고(pointer-events:none) 안의 카드만 받습니다 — 빈 자리가 지도 끌기를 막으면 안 됩니다. */ .mapleft{position:absolute;left:10px;top:10px;z-index:4; display:flex;flex-direction:column;align-items:flex-start;gap:8px; max-width:calc(100% - 62px);pointer-events:none} .mapleft > *{pointer-events:auto} .mnear{position:static;width:min(272px,100%); border-radius:9px;padding:8px 9px 9px;font-size:1.5rem; animation:revealIn .3s var(--ease) both} /* 접힘 — 머리표만 남기고 지도를 비워 준다. 휴대전화의 기본 모습이다. 너비도 글자 길이에 맞춰 줄여야 지도를 가리지 않는다. */ .mnear.folded{width:auto;padding:0} .mnear-h{display:flex;align-items:center;gap:5px;width:100%;font-size:1.3rem;font-weight:700; color:var(--ink3);margin-bottom:4px;padding:0;border:0;background:none; font-family:inherit;text-align:left;cursor:pointer;border-radius:6px} .mnear-h:hover b{color:var(--brand)} .mnear-h b{color:var(--brand-d);font-size:1.3rem} .mnear.folded .mnear-h{margin:0;padding:6px 9px} .mnear-c{margin-left:auto;flex:none;width:14px;height:14px;color:var(--ink3); transition:transform .22s var(--ease)} .mnear.folded .mnear-c{transform:rotate(-90deg)} .mnear-it{display:block;width:100%;text-align:left;border:0;background:none; padding:5px 6px;border-radius:6px;cursor:pointer;font:inherit;color:inherit} .mnear-it + .mnear-it{border-top:1px solid rgba(10,40,80,.13)} .mnear-it:hover{background:rgba(11,87,164,.12)} .mnear-it.on{background:rgba(11,87,164,.18)} .mnear-r{display:flex;align-items:baseline;gap:6px} .mnear-r b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mnear-n{flex:none;width:15px;height:15px;border-radius:50%;background:var(--brand); color:var(--on-brand);font-size:1.3rem;font-weight:700;text-align:center;line-height:15px} .mnear-d{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;font-weight:700; color:var(--brand-d)} .mnear-t{display:block;color:var(--ink2);font-size:1.3rem;margin:1px 0 0 21px} .mnear-t em{font-style:normal;font-weight:700;color:var(--me-d)} .mnear-note{margin-top:5px;padding-top:5px;border-top:1px solid rgba(10,40,80,.13); font-size:1.3rem;color:var(--ink3);line-height:1.45} /* 내 위치 찾기 결과 알림 — 지도 위에 잠깐 떴다 사라집니다. 실패했을 때 다음에 무엇을 하면 되는지까지 적으므로 두세 줄이 될 수 있어, 조건 줄에 끼워 넣지 않고 지도 위에 따로 띄웁니다. */ /* 가운데 정렬을 transform 으로 하면 안 됩니다 — 나타나는 애니메이션 (revealIn)이 transform 을 덮어써서 가운데가 아니라 오른쪽으로 밀립니다. left/right 를 잡고 margin:auto 로 가운데에 둡니다. 오른쪽은 확대·축소 단추만큼 비워, 가로로 눕힌 휴대전화처럼 지도가 낮아도 부딪히지 않습니다. */ .mtoast{position:absolute;left:12px;right:64px;bottom:56px;margin:0 auto; width:fit-content;z-index:5; max-width:min(430px,100%);background:rgba(17,31,46,.92);color:var(--on-brand); border-radius:8px;padding:8px 13px;font-size:1.5rem;line-height:1.5; box-shadow:0 6px 22px rgba(0,0,0,.3);animation:revealIn .26s var(--ease) both} .mtoast.err{background:rgba(134,21,21,.95)} /* 좁은 화면에서는 폭을 다 쓰므로 축척 막대(왼쪽 아래) 위로 올립니다 */ @media (max-width:520px){ .mtoast{bottom:92px;right:12px} } .mtoast b{font-weight:700} /* 내 위치 단추 — 지도에 찍히는 파란 점과 같은 색으로 두어, 무엇이 어디에 표시되는 단추인지 누르기 전에 보이게 합니다. */ .btnme{display:inline-flex;align-items:center;gap:4px; border-color:#7fb0ea;color:var(--me-d);font-weight:700} .btnme:hover{background:var(--brand-l);border-color:var(--me)} .btnme[aria-busy=true]{opacity:.6;pointer-events:none} .btnme svg{width:13px;height:13px;flex:none} /* 지도에 겹쳐 그릴 것 켜고 끄기 — 지도 오른쪽 아래에 작게 붙여 둔다. 사고지점 정하기(찍기·내 위치·좌표)는 위 조건 줄(.mb-acc)로 옮겼습니다. */ .mapacc{position:absolute;right:0;bottom:0;display:flex;align-items:center; gap:8px;flex-wrap:wrap;padding:6px 10px;background:var(--glass); border-top:1px solid var(--line);border-left:1px solid var(--line); border-radius:var(--r) 0 0 0} .mapacc label{display:flex;align-items:center;gap:5px;font-size:1.3rem; font-weight:700;color:var(--ink2)} .mapacc .mapchks{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .mapacc .mapchk{font-weight:600} .mapacc .mapchk input{width:15px;height:15px;accent-color:var(--brand)} /* ── 손가락으로 쓰는 화면 ───────────────────────────────────── 마우스는 몇 픽셀이든 정확히 찍히지만 손가락은 그렇지 않습니다. 28px 짜리 단추는 마우스로는 충분해도 손으로는 자주 빗나가고, 사고 현장에서 장갑을 끼거나 급한 상태라면 더합니다. 손가락이 닿는 기기에서만 키웁니다 — 마우스 화면까지 키우면 지도를 덮는 면적만 늘어납니다. pointer:coarse 는 '주 입력장치가 손가락'이라는 뜻이라 휴대전화·태블릿에서 켜지고, 마우스를 쓰는 노트북·데스크톱에서는 켜지지 않습니다. */ @media (pointer: coarse) { .mapacc{gap:6px;padding:6px 8px} .mapacc .mapchk{min-height:40px;padding:0 4px} .mapacc .mapchk input{width:20px;height:20px} .mapctl button{width:40px;height:40px;font-size:1.9rem} .mapctl{gap:6px} /* 경고 띠 안의 링크 — 글줄 사이에 끼어 있어 세로로 얇았다 */ .mbar-warn a{display:inline-block;padding:10px 0} /* 요약 줄 안의 단추(범위 넓히기 등)도 손가락으로 누르는 것이다 */ .ms-more{min-height:40px;padding:0 14px;font-size:1.5rem} /* '가까운 3곳' 펴기 — 접혀 있을 때는 이것만 보이므로 누르기 쉬워야 한다 */ .mnear.folded .mnear-h{min-height:40px;padding:0 12px;font-size:1.5rem} .mnear-it{min-height:42px;padding:6px 7px} /* ⚠ **고른 줄 안의 링크·작은 단추**(2026-09-08). 자리를 아끼려고 얇게 두었는데 실제로 재어 보니 지도 링크 25px · 복사 단추 29px 이라, 손가락으로는 옆의 것을 같이 누릅니다(KRDS 40px). 줄을 고르기 전에는 이 조각들이 화면에 없어서 그동안 검사에 안 걸렸습니다 — `tests/mob` 이 이제 줄을 눌러 보고 잽니다. ③ 의 세부사항 창(`.rkd`)도 같은 조각을 씁니다. ⚠ 복사 단추는 선택자를 **한 단 깊게** 씁니다 — `.ms-cp button` 이 이 묶음보다 아래에 또 있어서, 같은 굵기로 쓰면 그쪽이 이깁니다. */ .shmap-ext a{min-height:40px;padding:0 11px;display:inline-flex;align-items:center} .ms-it .ms-cp button, .rkd .ms-cp button{min-height:40px;padding:0 12px} } #btnAcc[aria-pressed=true]{background:var(--err);border-color:var(--err);color:var(--on-brand);font-weight:700} /* 목록 */ .mside{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--card)} /* 대피장소로 찾는 기능(시·도/시·군·구/찾는 범위) — 조건 줄에서 이리로 옮겨, 대피장소 목록과 한 흐름(어디서 찾을지 → 무엇이 나왔는지)으로 붙였다 */ .ms-find{flex:none;padding:12px 13px 13px;background:var(--panel); border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:9px} .ms-find-row{display:flex;gap:9px} .ms-find-row .mb-f{flex:1;min-width:0} .ms-find .mb-f.wide{width:100%} .ms-find .mb-f select{width:100%;min-width:0} /* 여기까지 정한 사고지점·대피장소를 그대로 문자 작성으로 넘기는 단추. 목록 위, 조건 바로 아래 — "찾았으니 이제 문자" 순서 그대로 놓는다. */ .ms-tosms{flex:none;display:flex;align-items:center;gap:8px;width:100%; padding:10px 13px;border:0;border-bottom:1px solid var(--line2);border-radius:0; background:var(--brand);color:var(--on-brand);font-size:1.5rem;font-weight:700; text-align:left;cursor:pointer;animation:slideDown .28s var(--ease) both} .ms-tosms:hover{background:var(--brand-d)} .ms-tosms svg{flex:none;width:17px;height:17px} .ms-tosms span{flex:1;min-width:0} /* ── 두 가지 대피처 켜고 끄기 ───────────────────────────────── 화학사고 대피장소와 이재민 임시주거시설은 지정 목적도 관리기관도 다른 별개의 자료입니다. 어느 쪽을 보고 있는지가 늘 보여야 하므로, 켜고 끄는 단추 자체가 곧 범례이자 개수 표시입니다(색·이름·곳수를 한 줄에). */ .ms-lyrs{flex:none;display:flex;gap:6px;padding:8px 13px;background:var(--panel); border-bottom:1px solid var(--line2)} .ms-lyr{flex:1;min-width:0;display:flex;align-items:center;gap:5px;padding:7px 8px; border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink3); font-size:1.3rem;font-weight:700;line-height:1.3;cursor:pointer;text-align:left} .ms-lyr .dot{flex:none;display:inline-block;width:9px;height:9px;border-radius:50%; border:1.5px solid var(--ink3);background:var(--card)} .ms-lyr b{margin-left:auto;padding-left:4px;font-variant-numeric:tabular-nums} .ms-lyr.chem.on{border-color:var(--ok);background:var(--ok-l);color:var(--ok)} .ms-lyr.chem.on .dot{border-color:var(--ok)} .ms-lyr.temp.on{border-color:var(--tmp);background:var(--tmp-l);color:var(--tmp)} .ms-lyr.temp.on .dot{border-color:var(--tmp)} .ms-lyr:not(.on){text-decoration:line-through;text-decoration-thickness:1px} @media (pointer: coarse){ .ms-lyr{min-height:40px} } /* 목록에서 어느 자료의 줄인가 — 두 자료가 섞여 있을 때만 붙습니다 */ .ms-it .ms-kd{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:20px; font-size:1.3rem;font-weight:700;vertical-align:1px;white-space:nowrap} .ms-it .ms-kd.chem{background:var(--ok-l);color:var(--ok)} .ms-it .ms-kd.temp{background:var(--tmp-l);color:var(--tmp)} .ms-hd{flex:none;padding:9px 13px;font-size:1.5rem;font-weight:700;color:var(--ink2); border-bottom:1px solid var(--line2)} .ms-hd span{font-weight:400;color:var(--ink3)} .ms-tools{flex:none;display:flex;gap:6px;padding:7px 13px;background:var(--panel); border-bottom:1px solid var(--line2)} .ms-tools input[type=text]{flex:1;min-width:0;padding:5px 9px;font-size:1.5rem} .ms-tools select{width:auto;flex:none;padding:5px 6px;font-size:1.5rem} .ms-list{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable} /* ── PC — 목록 위 조건을 눌러 담아 목록을 길게 ──────────────────── 2026-09-08 사용자 지적 — "작게 바꾸어서 밑에 리스트가 좀 더 길게 보이도록 개선". 1863×939 화면에서 재 보니 오른쪽 패널 684px 가운데 **408px(60%)** 을 조건·단추가 쓰고 목록에 276px 만 남아 **두 줄**밖에 안 보였습니다. 줄 하나가 94px 이라 두 줄로는 견줄 수가 없습니다. 글자 크기는 그대로 두고 **이름표를 칸 옆으로** 옮기고 여백만 눌렀습니다 — 글자를 줄이면 "글씨가 작다" 는 예전 지적으로 되돌아갑니다. 손가락으로 쓰는 화면(≤860px)은 지금 배치가 이미 재어 둔 값이라 건드리지 않습니다(tests/mob 의 MAPSEEN 이 그 값을 지킵니다). */ @media (min-width:861px){ .ms-find{padding:9px 13px 10px;gap:7px} /* 이름표를 위가 아니라 **왼쪽**에 둡니다 — 한 칸에 22px 씩 줄어듭니다. */ .ms-find .mb-f{flex-direction:row;align-items:center;gap:7px} .ms-find .mb-f > span:first-child, .ms-find .mb-f{white-space:nowrap} .ms-find .mb-f select{flex:1;min-width:0} .ms-find .mb-f.wide{width:100%} .ms-lyrs{padding:6px 13px} .ms-lyr{padding:5px 8px} .ms-hd{padding:6px 13px} .ms-tools{padding:5px 13px} /* 칸 높이 — 전역 규칙이 48px(--h-m)로 못 박아 두어 여백만 줄여도 줄이 48px 그대로였습니다. **마우스로 쓰는 화면에서만** 38px 로 낮춥니다. 손가락으로 누르는 화면의 40px 규칙(@media pointer:coarse)은 그대로입니다 — 여기는 min-width:861px, 즉 사무실 PC 자리입니다. */ .ms-find .mb-f select, .ms-tools input[type=text],.ms-tools select, .ms-lyr{min-height:38px} } .ms-empty{padding:22px 14px;color:var(--ink3);font-size:1.5rem;line-height:1.8;margin:0} .ms-it{padding:8px 13px;border-bottom:1px solid var(--line2);cursor:pointer;font-size:1.5rem} .ms-it:hover{background:var(--panel)} .ms-it.on{background:var(--brand-l);box-shadow:inset 3px 0 0 var(--brand)} .ms-it.ring{background:var(--err-l)} .ms-it.ring:hover{background:var(--err-l)} .ms-it.ring.on{background:var(--err-b2);box-shadow:inset 3px 0 0 var(--err)} /* 이름 · 자료 딱지 · 상세 · 거리가 한 줄에 섭니다. 이재민 임시주거시설 층이 들어오면서 **자료 딱지(72px)가 늘어** 320px 화면에서 거리가 4px 밀려 화면 밖으로 나갔습니다. 잘라 낼 수 있는 것이 하나도 없습니다 — 이름을 줄이면 어느 시설인지 모르고, 거리는 이 화면에서 가장 중요한 값이며 (예전에 그 값이 잘려 문제가 됐습니다), 딱지를 그림만 남기면 "그림만으로 뜻을 전하지 않는다"는 규칙을 어깁니다. 그래서 **접어 내립니다.** */ .ms-it .l1{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .ms-it .l1 b{font-weight:700;min-width:0} .ms-it .l1 .dt{font-weight:400;font-size:1.3rem;color:var(--ink3)} .ms-it .l1 .d{margin-left:auto;flex:none;font-size:1.3rem;font-weight:700; color:var(--brand-d);font-variant-numeric:tabular-nums;white-space:nowrap} /* 거리 막대 — 줄끼리 견주어 보라고 넣는다 */ .ms-bar{height:3px;background:var(--line2);border-radius:2px;margin:4px 0 3px;overflow:hidden} .ms-bar i{display:block;height:100%;background:var(--brand);opacity:.55} .ms-it.ring .ms-bar i{background:var(--err);opacity:.7} /* 이동시간 줄 — 거리(미터)만으로는 대피 안내를 쓸 수 없어 함께 적는다. 어림값이라는 사실은 카드 아래 안내와 자료 출처에 적어 둔다. */ .ms-it .l6{font-size:1.3rem;margin-top:2px;color:var(--ink3)} .ms-it .l6 em{font-style:normal;font-weight:700;color:var(--me-d)} /* 길찾기로 받아 온 값이라는 표시 — 직선 어림값과 눈으로 구분되어야 한다 */ .ms-it .l6-tag{font-size:1.3rem;font-weight:700;color:var(--route); background:rgba(224,33,138,.1);border-radius:20px;padding:1px 7px} .ms-it .l2{color:var(--ink2);font-size:1.3rem;margin-top:2px;line-height:1.5} .ms-it .l3{color:var(--brand-d);font-size:1.3rem;margin-top:2px} .ms-it .l5{margin-top:3px;display:flex;gap:5px;flex-wrap:wrap} .ms-it .l5 .tag{font-size:1.3rem;padding:1px 7px;border-radius:20px;font-weight:700} .ms-it .l5 .tag.danger{background:var(--err-l);color:var(--err)} .ms-it .l5 .tag.lee{background:var(--warn-l);color:var(--warn)} .ms-it .l4{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .ms-cp{display:flex;gap:5px} .ms-cp button{min-height:0;padding:3px 9px;font-size:1.3rem} /* 자료 출처 창 */ #ver p{margin:0 0 9px;font-size:1.5rem;line-height:1.65;color:var(--ink2)} #ver p b{color:var(--ink)} #ver .src{margin-top:12px;padding-top:9px;border-top:1px solid var(--line2); font-size:1.3rem;color:var(--ink3)} @media (max-width:1080px){ .mmain{grid-template-columns:minmax(0,1fr) 380px} } @media (max-width:860px){ body.mapapp{height:auto;overflow:visible} .mmain{grid-template-columns:1fr;flex:none} /* 지도 높이 — 56vh(372px)는 지도로 쓰기에 답답하다는 지적을 받았습니다. 위쪽 바를 줄여 벌어 둔 만큼 지도를 키웁니다. 목록은 지도 아래로 이어지므로 지도가 화면을 다 덮어도 "아래에 더 있다"가 보입니다. */ .mmap{height:70vh;border-right:0} .mside{height:auto} .ms-list{overflow:visible} .ms-find-row{flex-wrap:wrap} .mb-lyr{margin-left:0} .mb-f select,.mb-f input[type=text]{width:auto;min-width:120px} .mb-addr input[type=text]{width:100%;min-width:150px} .windbtn{min-width:0} /* 겹쳐 그리기 줄 — 지도 오른쪽 아래 모서리에 딱 붙여 두었더니 글자가 화면 맨 끝까지 닿아 **잘린 것처럼** 보였습니다. 확대·축소 단추(right:10)와 같은 자리에 세우고 네 모서리를 둥글려 '패널'로 읽히게 합니다. */ .mapacc{right:10px;bottom:10px;gap:5px;padding:5px 8px;font-size:1.3rem; border-radius:var(--r);border:1px solid var(--line)} .mapacc label{gap:3px} .mapscale{bottom:10px} /* ‼ 지도 아래쪽에 세 가지(축척 막대·겹쳐 그리기 줄·고른 곳 카드)가 모입니다. 좁은 화면에서는 서로 밟고 올라서 글자를 가렸습니다 — 실제로 '고른 곳' 카드 위에 체크상자 판이 얹혀 주소가 안 보였습니다. 층을 나눕니다: 아래층 축척 막대(왼쪽) · 겹쳐 그리기 줄(오른쪽) 윗층 고른 곳 카드 아주 좁은 화면(320px 급)에서는 아래층 둘이 가로로도 부딪혀 (축척 ~132px · 판 107px~) 판을 한 층 더 올립니다. */ .mapaddr{bottom:68px;max-width:calc(100% - 20px)} /* 좁은 화면에서는 지도가 이미 작습니다 — 3곳 카드가 지도를 절반 넘게 가리지 않도록 폭을 줄이고, 안내 문구는 뺍니다(목록에도 같은 값이 있음). */ .mnear{width:min(224px,calc(100% - 62px));padding:6px 8px 7px;font-size:1.3rem} .mnear .mnear-note{display:none} /* ── 요약 줄 ───────────────────────────────────────────── ‼ 한 줄에 두고 옆으로 밀어 보게 했다가 되돌렸습니다. 내용이 820px 인데 화면은 390px 이라 **450px 이 화면 밖에 숨어** 있었고, 하필 잘리는 자리가 `가장 가까운 곳 ○○ 3.0km` 의 거리였습니다 — 이 화면에서 가장 중요한 값입니다. 오른쪽을 흐리게 해 두었지만 지도 화면에서 가로로 밀어 보는 사람은 없었습니다(사용자가 "깨진다"고 한 자리 중 하나). 그래서 **줄바꿈으로 되돌립니다.** 세 줄(약 76px)이 되지만 다 읽힙니다. 늘어난 만큼은 상단 바·조건 줄에서 줄여 메웠습니다. */ /* 세 줄이 76px 을 먹어 지도를 밀어냈습니다. 줄 수는 그대로 두고(값이 다 읽혀야 합니다) 줄 간격·여백만 눌러 20px 쯤 되찾습니다. */ .msum{flex-wrap:wrap;gap:1px 9px;padding:4px 12px;line-height:1.35;font-size:1.4rem} .ms-b{padding:1px 8px} /* 한 조각이 화면보다 넓을 수 있습니다 — 320px 화면에서 '가장 가까운 곳 ○○○ 6m 남서쪽 · 도보 1분' 이 325px 이라 페이지가 가로로 밀렸습니다. 줄바꿈을 허용하고 flex 가 줄일 수 있게 둡니다(min-width:0 이 없으면 flex 항목은 내용 크기 밑으로 줄어들지 않습니다). */ .msum > *{flex:0 1 auto;min-width:0} .ms-near{flex-wrap:wrap} .ms-bands{flex-wrap:wrap;gap:6px} .msum .ms-note{display:none} /* 같은 안내가 목록 아래에도 있다 */ /* ‼ margin-left:auto 는 줄바꿈되는 flex 에서 **혼자 한 줄**을 만듭니다. ③의 '다시 정하기'가 그래서 띠를 50px 키우고 있었습니다(오른쪽 끝에 덩그러니). 좁은 화면에서는 앞 조각 뒤에 그대로 붙입니다. */ .msum .ms-more,.msum .ms-again{margin-left:0} /* margin 을 풀어도 앞 조각(칩 세 개)이 줄을 다 채우면 여전히 혼자 내려갑니다. 차례를 바꿔 '사고지점 ○○' 뒤에 붙입니다 — 그 단추가 하는 일(처음 화면으로 돌아가 다시 정하기)과 가장 가까운 자리이기도 합니다. 문서 차례는 그대로여서 탭 이동·화면낭독기 순서는 바뀌지 않습니다. */ .msum .ms-acc{order:1} .msum .ms-again{order:2;min-height:40px;padding:0 12px} .msum .ms-near{order:3} .msum .ms-bands{order:4} /* ── 조건 줄 — 주소 검색만 남기고 접는다 ────────────────── 좁은 화면에서 조건이 세로로 쌓여 320px(화면 절반)을 차지했고, 정작 지도는 84px만 보였습니다. 주소·장소 검색은 가장 먼저 쓰는 것이라 늘 보이게 두고, 물질·풍향·배경지도는 필요할 때 펴 보게 합니다. */ /* 조건 줄이 휴대전화에서 283px — 화면의 3분의 1을 쓰고 지도는 56% 밖에 남지 않았습니다. 여백과 라벨 크기만 눌러 40px 쯤 줄입니다. ‼ 라벨 글자를 감추지는 않았습니다. ③의 '주소·장소·장비 검색' 은 장비 이름으로도 찾을 수 있다는 것을 알려 주는 유일한 자리입니다 — 빈칸 안내문 ("예) 김천시, 굴착기, 흡착포")만으로는 그 말이 전달되지 않습니다. 40px 아끼자고 쓰는 법을 지우지 않습니다. */ .mbar-in{gap:6px;padding:6px 12px;min-height:0} .mb-f{gap:2px;font-size:1.3rem;line-height:1.25} .mb-toggle{display:inline-flex;align-items:center;gap:4px;min-height:40px; padding:0 11px;font-size:1.5rem;font-weight:700;color:var(--ink2);flex:none} .mb-toggle .mb-caret{transition:transform .2s var(--ease)} .mb-toggle[aria-expanded=true] .mb-caret{transform:rotate(180deg)} .mbar.folded .mb-more{display:none} .mb-more{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;width:100%} /* 검색칸은 48px 였습니다 — 손가락으로 누르는 최소(40px)보다 8px 이 남아 있어, 그만큼 지도에 돌려줍니다. */ .mb-addr input[type=text]{width:100%;min-height:42px} /* ── 사고지점 줄 · 좁은 화면 배치 ──────────────────────────── ‼ 예전에는 그냥 flex-wrap 이라 브라우저가 남는 자리를 채우는 대로 접혀서 **위도는 첫 줄, 경도는 둘째 줄**로 갈라졌습니다(사용자 지적 — "위도, 경도 같은 버튼은 같은 줄에 있으면 좋겠다"). 자리를 격자로 못 박아 늘 이렇게 놓이게 합니다. [ 지도에서 찍기 ][ 내 위치 ] [ 위도 ___ ][ 경도 ___ ][ × ] 위도와 경도는 **한 쌍**이므로 반드시 같은 줄, 같은 폭입니다. */ .mb-accrow{display:grid;gap:5px;padding:4px 5px;width:100%; grid-template-columns:1fr 1fr auto; grid-template-areas:"pick me me" "lat lon clr"} .mb-accrow #btnAcc{grid-area:pick} .mb-accrow .btnme{grid-area:me} .mb-accrow label:nth-of-type(1){grid-area:lat} .mb-accrow label:nth-of-type(2){grid-area:lon} .mb-accrow #btnAccClear{grid-area:clr;width:40px;padding:0} /* 격자 칸을 꽉 채웁니다 — 폭을 못 박아 두면 칸 안에서 따로 놀아 위도·경도 칸의 오른쪽 끝이 서로 어긋나 보입니다. */ .mb-acc .mb-accrow input[type=text]{flex:1 1 auto;width:auto;min-width:0} .mb-accrow .mb-ll{min-width:0} .mb-accrow .sm,.mb-accrow .btnme{width:100%;justify-content:center} /* ── 조건 줄 전체를 세 줄로 ─────────────────────────────── '조건 더보기'가 혼자 한 줄(46px)을 쓰고 있었습니다. 검색칸 옆에 세우면 그 줄이 통째로 없어집니다. ‼ 문서 차례는 검색 → 사고지점 → 더보기 라서, 그냥 두면 더보기가 사고지점(폭 100%) 뒤로 밀려 셋째 줄로 갑니다. order 로 자리를 바꿉니다 — 문서 차례는 그대로라 화면낭독기·탭 이동은 안 바뀝니다. */ /* flex-basis 를 0 으로 둡니다 — auto 로 두면 칸의 '내용 크기'(약 350px)를 기준으로 잡아 옆에 40px 짜리 단추 하나가 못 들어가고 줄이 넘어갑니다. */ .mb-addr{flex:1 1 0;min-width:0;order:1} .mbar-in > .mb-toggle{align-self:flex-end;order:2} /* '사고지점' 이름표를 줄 위가 아니라 **왼쪽 옆**에 세웁니다 — 이름표만으로 한 줄(18px)을 쓰고 있었습니다. 격자로 두면 글자(이름 없는 칸)와 단추 상자가 나란히 놓입니다. 이름표를 지우지는 않습니다: 이 줄이 무엇인지 알려 주는 유일한 글자입니다. */ .mb-acc{flex:1 1 100%;order:3;display:grid;grid-template-columns:auto 1fr; align-items:center;gap:0 7px} .mb-more{order:4} /* 배경지도 경고 띠 — 원인 진단은 설치·설정하는 사람에게 필요한 내용이고, 현장에서 쓰는 사람에게는 굵은 첫 문장이면 충분합니다. 좁은 화면에서 여섯 줄까지 늘어나 지도를 밀어내므로 감춥니다. 망분리 환경에서는 이 띠가 늘 떠 있으므로 그냥 두면 계속 손해입니다. */ .mbar-warn{padding:7px 12px} .mbar-warn .wd{display:none} /* 범례 — ③은 종류가 넷이라 좁은 화면에서 세 줄(83px)이 되어 작은 지도의 22%를 덮었습니다. 글자 크기는 그대로 두고(줄이면 못 읽습니다) 종류 이름의 꼬리만 감춥니다: "폐기물 처리업체" → "폐기물". 풀어 쓴 이름은 오른쪽 목록의 종류 칩에 그대로 있습니다. */ /* 손가락 화면에서는 확대·축소 단추가 40px 로 커집니다(왼쪽 끝 = 폭-50px). 상자를 폭-58px 로 두었더니 2px 겹쳤습니다 — 72px 로 띄웁니다. */ .mapleft{max-width:calc(100% - 72px)} /* ③은 종류가 여섯이라 범례가 세 줄(78px)이 되어 작은 지도의 21%를 덮었습니다. 글자 크기는 그대로 두고(줄이면 못 읽습니다) 줄 간격과 조각 사이만 좁힙니다 — 두 줄로 내려옵니다. */ .maplegend{gap:2px 7px;padding:3px 7px;line-height:1.3} .maplegend span{white-space:nowrap} /* ③ '찾는 조건 바꾸기' 줄 — 조건 줄 바로 아래에 또 하나의 띠가 붙어 49px 을 씁니다. 누르는 자리는 줄 전체(폭 100%)라 넉넉하므로 위아래 여백만 줄여 지도에 돌려줍니다. ‼ 아래 `.rbar-toggle` 정의가 이 미디어 블록보다 **파일 뒤쪽**에 있어 같은 특정성으로는 집니다. 한 단 깊게 써서 확실히 이깁니다. */ .resapp .rbar{padding:0 12px} .resapp .rbar-toggle{padding:6px 0} .maplegend .lg-t{display:none} .maplegend .dot,.maplegend .rk-ic,.maplegend .sh-ic{margin-right:3px} .maplegend .rk-ic{width:1.5rem;height:1.5rem;vertical-align:-.3rem} } /* 태블릿·휴대전화 가로 — 폭이 넉넉하면 사고지점 줄을 한 줄로 폅니다. 두 줄 배치를 그대로 두면 '다시 찍기' 단추가 353px 까지 늘어나 우스꽝스럽고, 그만큼 지도가 낮아집니다. 위도·경도는 여기서도 나란히 붙어 있습니다. */ @media (min-width:561px) and (max-width:860px){ .mb-accrow{grid-template-columns:auto auto minmax(0,1fr) minmax(0,1fr) auto; grid-template-areas:"pick me lat lon clr"} .mb-accrow .sm,.mb-accrow .btnme{width:auto} } @media (max-width:400px){ /* 아주 좁은 화면 — 축척 막대(왼쪽 ~132px)와 겹쳐 그리기 줄(왼쪽 끝 107px)이 가로로 25px 부딪혔습니다. 줄을 한 층 올리고 고른 곳 카드도 그만큼 올립니다. */ .mapacc{bottom:46px} .mapaddr{bottom:104px} /* 320px 화면에서는 지도 위에 얹힌 것들이 네 줄(568px)까지 쌓여 지도가 74px 밖에 안 보였습니다. 글자 크기는 건드리지 않고 줄 간격·여백만 눌러 45px 쯤 되찾습니다 — 읽는 데 필요한 크기는 지킵니다. */ .mbar-warn{padding:5px 12px;font-size:1.4rem;line-height:1.45} .msum{padding:4px 10px;gap:1px 8px;line-height:1.4} .ms-bands{gap:4px} .mb-accrow{padding:2px 5px} } @media print{ body.mapapp{height:auto;overflow:visible;display:block} .mbar,.mapctl,.mapacc,.ms-tools,.mbar-warn,.ms-find,.windpop,#addrPop{display:none!important} .mmain{display:block} .mmap{position:relative;height:440px;page-break-inside:avoid;border:1px solid #000} .msum{background:var(--card);color:#000;border:1px solid #000;border-width:1px 0} .msum .ms-near b,.msum .ms-none{color:#333} .ms-b,.ms-warn{background:#eee;color:#000} .ms-warn.on{background:var(--card);border:1px solid #000;font-weight:700} .mside{height:auto} .ms-list{overflow:visible} .ms-it{break-inside:avoid} /* 유리 효과는 종이에서 배경이 빠져 글자만 흐리게 남습니다 — 불투명으로 되돌립니다. '가까운 3곳'은 인쇄물에서도 결론에 해당하므로 남기고, 접기 화살표만 뺍니다. */ .maplegend,.mapscale,.mapaddr,.mnear{background:var(--card)!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; border:1px solid var(--line)!important;box-shadow:none!important} .mnear-c{display:none!important} } a.btnlink{display:inline-block;text-decoration:none;color:var(--brand-d);font-weight:600; border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:1.5rem;background:var(--card)} a.btnlink:hover{border-color:var(--brand)} /* ══ ③ 방제자원 동원 ═══════════════════════════════════════ ② 주민 대피장소 찾기의 뼈대(.mmain / .mmap / .mside)를 그대로 쓰고, ③ 에만 있는 것(자원 종류 · 연락처 · 동원 목록)만 여기 더합니다. */ /* 자원 종류 색 — 색만으로 구분하면 배경지도 위에서 헷갈리고 색각 이상이 있으면 구분이 안 되므로, 목록·범례 표식은 모양도 함께 다르게 합니다. */ :root{ --rk-local:#0b57a4; /* 지자체 보유 장비 — 파랑 ● (가장 많고 가장 빠름) */ --rk-capsule:var(--err); /* 비상캡슐 — 빨강 ◆ (가장 급함) */ --rk-toxgas:#8a4f06; /* 독성가스 회수 — 갈색 ▲ */ --rk-waste:#6b4c9a; /* 폐기물 처리 — 보라 ● */ --rk-marine:#0b6b41; /* 해경 비축기지 — 초록 ■ */ --rk-water:#0e7c9e; /* 수질방제센터 — 청록 ■ */ /* ── 두 갈래 자료(업체 섭외 · 방제물품)의 종류 ────────────── 두 갈래는 한 화면에 함께 나오지 않으므로 색을 나눠 씁니다 — 같은 갈래 **안에서** 서로 달라야 하고, 갈래끼리는 겹쳐도 됩니다. 업체 carry 파랑 · mid 빨강 · recy 초록 · land 보라 · heavy 진회색 · toxgas 갈색 · water 청록 물품 local 파랑 · plant 갈색 · envbox 청록 · marine 초록 · shop 보라 · etc 진회색 색만으로 가르지 않습니다 — 마커·범례·목록에 종류마다 다른 그림이 함께 들어갑니다(res/app.js 의 ICONS). */ --rk-carry:var(--rk-local); --rk-mid:var(--rk-capsule); --rk-recy:var(--rk-marine); --rk-land:var(--rk-waste); --rk-heavy:#464c53; /* 중장비 — 기계. 위 여섯 색과 겹치지 않게 */ --rk-plant:var(--rk-toxgas); --rk-envbox:var(--rk-water); --rk-shop:var(--rk-waste); --rk-etc:#464c53; --rk-gov:var(--rk-local); /* 물품 — 지자체 */ --rk-nat:var(--rk-marine); /* 물품 — 국가기관 비축 */ } /* ── 자원 아이콘 ────────────────────────────────────────────── 자원 종류(6)와 필요한 것(7)에 각각 그림을 답니다(res/app.js 의 ICONS). 사용자 요구 — "아이콘만 보면 이게 무엇이겠구나 유추가 될만한" 것. ‼ **그림만으로 뜻을 전하지 않습니다.** 그림 옆에는 늘 이름이 붙어 있고 그림 자체는 aria-hidden 입니다 — 화면낭독기 사용자와, 그림이 안 그려진 경우에도 읽는 데 지장이 없어야 합니다. 색은 **지도 마커와 같은 색**을 씁니다. 지도에는 종류마다 색이 다른 동그라미가 찍히므로, 같은 색이라야 "이 색이 저 종류"가 이어집니다. (예전에는 범례에 마름모·세모를 썼는데 지도에 없는 모양이라 잘못 이어졌습니다. 색은 그대로 두고 모양만 뜻이 있는 그림으로 바꿨습니다.) */ .rk-ic{display:inline-block;width:1.7rem;height:1.7rem;flex:none; margin-right:5px;vertical-align:-.35rem;color:var(--ink3)} .rk-ic.rk-local{color:var(--rk-local)} .rk-ic.rk-capsule{color:var(--rk-capsule)} .rk-ic.rk-toxgas{color:var(--rk-toxgas)} .rk-ic.rk-waste{color:var(--rk-waste)} .rk-ic.rk-marine{color:var(--rk-marine)} .rk-ic.rk-water{color:var(--rk-water)} .rk-ic.rk-carry{color:var(--rk-carry)} .rk-ic.rk-mid{color:var(--rk-mid)} .rk-ic.rk-recy{color:var(--rk-recy)} .rk-ic.rk-land{color:var(--rk-land)} .rk-ic.rk-heavy{color:var(--rk-heavy)} .rk-ic.rk-plant{color:var(--rk-plant)} .rk-ic.rk-envbox{color:var(--rk-envbox)} .rk-ic.rk-shop{color:var(--rk-shop)} .rk-ic.rk-etc{color:var(--rk-etc)} .rk-ic.rk-gov{color:var(--rk-gov)} .rk-ic.rk-nat{color:var(--rk-nat)} /* ══ 시작 — 두 걸음 ══════════════════════════════════════════ 걸음 1 "무엇이 필요하세요?" → 걸음 2 "사고지점이 어디인가요?" → 결과. ── 왜 이렇게 바뀌었나 ──────────────────────────────────────── 예전에는 사고지점만 묻고 자원 470건을 전부 뿌린 뒤 "좁히고 싶으면 조건을 펴 보라"고 했습니다. 현장에서 담당자가 아는 것은 **지금 무엇이 필요한가** 이지 자원 종류가 아닙니다(사용자 요구). 필요한 것을 먼저 물으면 다음 화면에 나올 것이 이미 정해지고, 결과도 훑을 수 있는 양으로 줄어듭니다. ‼ 세로 가운데 정렬을 쓰지 않습니다 — 휴대전화에서 위쪽이 텅 비어 화면이 고장 난 것처럼 보입니다(7절). 위에 붙이고 아래 여백만 넉넉히 둡니다. */ .rz{flex:1;display:flex;justify-content:center;align-items:flex-start; padding:24px 18px 60px;animation:revealIn .34s var(--ease) both} body.has-acc .rz{display:none} /* 두 걸음을 마치기 전에는 지도·조건·목록을 아예 두지 않습니다. ③(body.resapp)에만 거는 규칙입니다 — ②는 시작 화면이 없습니다. */ body.resapp:not(.has-acc) .mbar, body.resapp:not(.has-acc) .rbar, body.resapp:not(.has-acc) .mbar-warn, body.resapp:not(.has-acc) .mrad, body.resapp:not(.has-acc) .msum, body.resapp:not(.has-acc) .mmain{display:none!important} .rz-in{width:100%;max-width:680px} /* ── 물품 고르기 걸음만 상자를 넓힙니다 ──────────────────────── 2026-09-08 사용자 지시 — "각 카테고리별로 되도록 한 줄에 끝나도록 개선". 상자가 680px 로 못 박혀 있어서, 칩이 가장 많은 묶음(차량·중장비 7개 952px · 작업도구 7개 952px)이 늘 **두 줄**로 접혔습니다. 한 묶음이 두 줄이 되면 어디까지가 그 묶음인지 눈으로 끊기지 않습니다. 1,040px 이면 가장 넓은 묶음도 한 줄에 들어갑니다. 화면이 좁으면 `94vw` 가 먼저 걸려 예전처럼 접히므로(줄바꿈은 그대로 살려 둡니다) 좁은 화면에서 글자가 잘리지는 않습니다. ⚠ 이 규칙은 **물품 걸음에만** 걸립니다 — 걸음 1(두 갈래)·걸음 3(사고지점)은 680px 그대로가 읽기 좋습니다. `wide-items` 는 res/app.js 가 붙입니다 (`:has()` 를 쓰면 낡은 브라우저에서 통째로 버려집니다). */ .rz-in.wide-items{max-width:min(1040px, 94vw)} .rz h2{margin:0 0 8px;font-size:3.2rem;font-weight:800;letter-spacing:-.02em; text-align:center} .rz-lead{margin:0 0 22px;font-size:1.7rem;color:var(--ink2);line-height:1.75; text-align:center} .rz-lead b{color:var(--brand-d)} /* ── 걸음 표시 ──────────────────────────────────────────────── ①의 진행 표시와 같은 방식입니다 — 눌러서 되돌아갈 수 있어야 합니다. 급할 때 아는 것부터 채우는 사람이 있습니다. */ .rz-bar{list-style:none;display:flex;gap:0;margin:0 0 20px;padding:0} .rz-b{flex:1 1 0;min-width:0} .rz-b button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px; padding:9px 6px;background:none;border:0;border-bottom:3px solid var(--line); font:inherit;font-size:1.5rem;color:var(--ink3);cursor:pointer} .rz-b button i{flex:none;display:grid;place-items:center;width:24px;height:24px; border-radius:50%;background:var(--line2);color:var(--ink2); font-style:normal;font-size:1.3rem;font-weight:700} .rz-b button b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rz-b button:hover{color:var(--ink2)} .rz-b.on button{color:var(--brand-d);border-bottom-color:var(--brand)} .rz-b.on button i{background:var(--brand);color:var(--on-brand)} .rz-b.on button b{font-weight:700} .rz-b.done button i{background:var(--ok);color:var(--on-brand)} /* ── 걸음 1 — 두 갈래 고르기 ────────────────────────────────── 업체 섭외 / 방제물품 찾기. 카드 두 장뿐이라 크게 두고, **무슨 일을 하는 자리인지**를 카드에 적습니다 — 이름만으로는 담당자가 알 수 없습니다. */ .rz-brs{display:grid;grid-template-columns:1fr;gap:12px} @media (min-width:720px){ .rz-brs{grid-template-columns:repeat(2,1fr)} } .rz-br{display:flex;flex-direction:column;align-items:flex-start;gap:6px; padding:20px 20px 18px;background:var(--card); border:1.5px solid var(--line);border-radius:14px; font:inherit;color:inherit;text-align:left;cursor:pointer; transition:border-color .16s,box-shadow .16s,background .16s} .rz-br:hover{border-color:var(--brand);box-shadow:0 3px 14px rgba(11,87,164,.14)} .rz-br[aria-pressed=true]{border-color:var(--brand);background:var(--brand-l)} .rz-br-ic{display:grid;place-items:center;width:5.2rem;height:5.2rem;margin-bottom:4px; border-radius:13px;background:var(--panel);color:var(--brand-d)} .rz-br-ic .rk-ic{width:3rem;height:3rem;margin:0;vertical-align:0;color:inherit} .rz-br-t{font-size:2.2rem;font-weight:800;letter-spacing:-.01em;line-height:1.3} .rz-br-d{font-size:1.6rem;color:var(--ink2);line-height:1.6} .rz-br-s{font-size:1.4rem;color:var(--ink3);line-height:1.55} .rz-br-n{margin-top:4px;font-size:1.3rem;font-weight:700;color:var(--ink3); font-variant-numeric:tabular-nums} /* 좁은 화면 — 갈래마다 어떤 것이 있는지 늘어놓은 줄(.rz-br-s)은 카드를 700px 까지 늘려 **둘째 카드가 화면 밖으로 밀려납니다.** 그 줄은 걸음 2 에서 어차피 다 보여 주므로, 화면에서만 비켜 둡니다 — 지우지 않고 자리만 뺐으므로 화면낭독기는 그대로 읽습니다. */ @media (max-width:620px){ .rz-br{padding:16px 16px 14px} .rz-br-t{font-size:2rem} .rz-br-s{position:absolute;width:1px;height:1px;margin:-1px; padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} } /* ── 걸음 2 — 갈래(업체) 또는 물품 고르기 ───────────────────── 업체는 허가 갈래 7가지(자료의 RES2_CATS), 물품은 표준 이름 27가지 (RES2_NAMES)입니다. 우리가 지어낸 분류가 아닙니다. 물품은 27가지라 카드로 두면 화면이 다섯 배로 길어집니다 — 분류마다 줄을 나눈 **칩**으로 두어 한눈에 훑게 합니다. */ /* 아래 여백은 '다음' 줄이 화면 아래에 붙어 있기 때문입니다(#rzP1 .rz-nav 는 sticky). 여백이 없으면 마지막 묶음('기타')이 그 줄에 가려 안 보입니다 — 2026-09-08 사용자 지적 "밑에 잘려서 보이지 않음". 묶음을 한 줄로 편 뒤에도 화면이 짧으면 몇 픽셀이 겹치므로 조금 띄워 둡니다. */ .rz-items{display:flex;flex-direction:column;gap:14px;padding-bottom:14px} .rz-igrp{display:flex;flex-wrap:wrap;align-items:center;gap:7px} .rz-igrp-t{display:flex;align-items:center;width:100%;gap:4px; font-size:1.4rem;font-weight:700;color:var(--ink2)} .rz-igrp-t .rk-ic{width:1.8rem;height:1.8rem;margin:0;vertical-align:0} .rz-item{display:inline-flex;align-items:center;gap:5px; min-height:3.6rem;padding:6px 11px;background:var(--card); border:1.5px solid var(--line);border-radius:999px; font:inherit;font-size:1.5rem;color:inherit;cursor:pointer; transition:border-color .14s,background .14s} .rz-item:hover{border-color:var(--brand)} .rz-item[aria-pressed=true]{border-color:var(--brand);background:var(--brand-l); color:var(--brand-d);font-weight:700} .rz-item-n{font-size:1.2rem;color:var(--ink3);font-variant-numeric:tabular-nums} .rz-item[aria-pressed=true] .rz-item-n{color:var(--brand-d)} @media (pointer: coarse){ .rz-item{min-height:4rem;padding:8px 13px} } /* ── 걸음 2 (업체) — 갈래 카드 ──────────────────────────────── 자료(RES2_CATS)에 있는 일곱 갈래를 그대로 씁니다. */ .rz-needs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} /* ‼ justify-content 를 못 박습니다 — 브라우저가