/* =========================================================
   전사 위험성평가 — 사내 시스템 톤
   · 상단 GNB + 좌측 LNB + 전폭 본문 구조.
   · 폭 고정 없이 모니터 해상도에 따라 본문이 늘어난다.
   · 돋보기 모드(시니어 친화)는 CSS 변수만 바꾼다. 레이아웃 코드는 하나다.
   ========================================================= */

:root {
    /* ---- 치수 (일반 모드) ---- */
    --fs:       13px;   /* 표 본문 */
    --fs-form:  14px;   /* 입력 */
    --fs-menu:  15px;   /* GNB */
    --fs-lnb:   14px;
    --fs-title: 18px;   /* 페이지 제목 */
    --fs-sm:    12px;
    --fs-num:   30px;

    --top-h:    64px;   /* 상단바 높이 */
    --side-w:   230px;  /* 좌측 메뉴 폭 */
    --ctl-h:    32px;   /* 입력창 높이 */
    --btn-h:    32px;
    --cell-y:   9px;    /* 표 세로 패딩 */
    --gap:      20px;
    --radius:   3px;
    --dash-h:   460px;  /* 대시보드 지도·목록 칸 높이 (좌우 끝선을 맞추는 기준) */
    --dash-h2:  620px;  /* 전사 지도 대시보드 — 지도를 크게 본다 */
    /* 하단 목록 = 섹션제목 32+10 + 표 테두리 2 + 머리글 38 + 행 46.2 x 6 → 6행 + 여유 3px
       행 높이가 소수점(46.19)이라 딱 맞추면 마지막 행이 1px 잘린다. */
    --dash-h3:  362px;

    /* ---- 색 ---- */
    --top:      #1268b3;
    --top-dk:   #0d4f92;
    --side:     #1c3f66;
    --side-hd:  #16334f;
    --side-on:  #2c6ca8;
    --side-tx:  #cfdcea;

    --ink:      #222b36;
    --ink-2:    #63707f;
    --line:     #d5dde5;
    --line-2:   #e8edf2;
    --paper:    #ffffff;
    --ground:   #eef2f6;
    --th:       #dce9f5;
    --filter:   #f7f9fc;

    --btn:      #1a6db5;
    --btn-dk:   #0f4c88;
    --link:     #1268b3;

    --lv1: #2f6fd0;
    --lv2: #c08800;
    --lv3: #dd6b00;
    --lv4: #cf2f2f;
    --lv5: #8c1414;
    --ok:  #17805c;
}

/* ---- 돋보기 모드 : 시니어 친화 ---- */
html[data-mode="large"] {
    --fs:       18px;
    --fs-form:  19px;
    --fs-menu:  19px;
    --fs-lnb:   18px;
    --fs-title: 25px;
    --fs-sm:    16px;
    --fs-num:   42px;

    --top-h:    80px;
    --side-w:   290px;
    --ctl-h:    48px;
    --btn-h:    48px;
    --cell-y:   16px;
    --gap:      26px;
    --dash-h:   560px;
    --dash-h2:  700px;
    /* 돋보기 모드는 행이 73.8px 로 커진다 : 41+10+2+59.5+73.8x6 = 555.3 → 559 */
    --dash-h3:  559px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Malgun Gothic", "맑은 고딕", -apple-system, sans-serif;
    font-size: var(--fs);
    line-height: 1.5;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- 안내 배너 ---------------- */
.mock {
    background: #fffaf0; border-bottom: 1px solid #e8d9b4; color: #7a5b00;
    font-size: var(--fs-sm); padding: 5px 16px;
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.mock b { background: #7a5b00; color: #fff; padding: 1px 7px; border-radius: 2px; }
.mock a { color: #7a5b00; text-decoration: underline; }

/* ---------------- 상단 GNB ---------------- */
.gnb {
    display: flex; align-items: stretch;
    height: var(--top-h); background: var(--top); color: #fff;
}
.gnb__logo {
    width: var(--side-w); flex-shrink: 0;
    background: var(--top-dk);
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 22px; color: #fff;
}
.gnb__logo b { font-size: calc(var(--fs-menu) * 1.05); letter-spacing: -.02em; display: block; }
.gnb__logo span { font-size: var(--fs-sm); opacity: .8; }
.gnb__logo:hover { text-decoration: none; }

/* 좌측 메뉴 접기 토글 — 로고(=LNB 폭)와 메뉴 사이에 둔다 */
.lnbtog {
    flex-shrink: 0; width: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--top-dk); border: 0; border-left: 1px solid rgba(255,255,255,.18);
    color: #fff; cursor: pointer; padding: 0;
}
.lnbtog:hover { background: rgba(255,255,255,.16); }
.lnbtog__ar { font-size: var(--fs-sm); line-height: 1; }
/* 접힌 상태에서는 화살표가 반대를 가리킨다 */
html[data-lnb="off"] .lnbtog__ar { transform: rotate(180deg); }

.gnb__menu { display: flex; align-items: stretch; flex: 1; min-width: 0; overflow: hidden; }
.gnb__menu a {
    display: flex; align-items: center; padding: 0 22px;
    color: #fff; font-size: var(--fs-menu); font-weight: 600; white-space: nowrap;
}
.gnb__menu a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.gnb__menu a.on { background: rgba(0,0,0,.16); }

.gnb__right { display: flex; align-items: center; gap: 14px; padding: 0 20px; flex-shrink: 0; }
.gnb__user { font-size: var(--fs-sm); color: #d6e7f7; white-space: nowrap; }
.gnb__btn {
    height: var(--btn-h); padding: 0 14px;
    border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius);
    background: transparent; color: #fff;
    font-family: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
}
.gnb__btn:hover { background: rgba(255,255,255,.16); }

/* 돋보기 토글 */
.zoom {
    display: inline-flex; align-items: center; gap: 7px;
    height: var(--btn-h); padding: 0 14px;
    border: 1px solid rgba(255,255,255,.6); border-radius: 999px;
    background: transparent; color: #fff;
    font-family: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.zoom:hover { background: rgba(255,255,255,.16); }
html[data-mode="large"] .zoom { background: #fff; color: var(--top-dk); border-color: #fff; }

/* 알림 배지 */
.alerts { display: flex; gap: 8px; }
.al {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    height: var(--btn-h); padding: 0 13px;
    border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius);
    color: #fff; font-size: var(--fs-sm); white-space: nowrap;
}
.al:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.al__n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; padding: 0 5px;
    background: #e02b1d; color: #fff; border-radius: 999px;
    font-size: 11px; font-weight: 800; line-height: 1;
}
html[data-mode="large"] .al__n { min-width: 26px; height: 26px; font-size: 15px; }

/* ---------------- 레이아웃 ---------------- */
.layout { display: flex; align-items: stretch; min-height: calc(100vh - var(--top-h)); }

/* 좌측 LNB */
.lnb { width: var(--side-w); flex-shrink: 0; background: var(--side); color: var(--side-tx); }

/* 접힌 상태 : LNB 와 로고를 숨기고 본문이 폭을 전부 쓴다.
   display:none 이면 화면 낭독기에서도 사라지므로 접기 의도와 일치한다. */
html[data-lnb="off"] .lnb { display: none; }
html[data-lnb="off"] .gnb__logo { width: auto; }
.lnb__hd {
    background: var(--side-hd); color: #fff;
    padding: 0 22px; height: calc(var(--top-h) - 4px);
    display: flex; align-items: center;
    font-size: calc(var(--fs-title) * .92); font-weight: 700;
}
.lnb__grp { border-bottom: 1px solid rgba(255,255,255,.09); }
.lnb__grp > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(var(--cell-y) + 5px) 22px;
    color: var(--side-tx); font-size: var(--fs-lnb); font-weight: 600;
}
.lnb__grp > a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.lnb__grp.on > a { background: var(--side-on); color: #fff; }
.lnb__sub { background: rgba(0,0,0,.16); }
.lnb__sub a {
    display: block; padding: calc(var(--cell-y) + 2px) 22px calc(var(--cell-y) + 2px) 34px;
    color: var(--side-tx); font-size: var(--fs-lnb);
}
.lnb__sub a:hover { color: #fff; text-decoration: none; }
.lnb__sub a.on { color: #fff; font-weight: 700; }

/* 본문 — 남는 폭을 전부 채운다 */
.main { flex: 1; min-width: 0; background: var(--ground); padding: var(--gap); }
.panel {
    background: var(--paper); border: 1px solid var(--line);
    padding: var(--gap); min-height: calc(100vh - var(--top-h) - var(--gap) * 2);
}

/* ---------------- 페이지 제목 ---------------- */
.ptitle {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--gap); flex-wrap: wrap; margin-bottom: calc(var(--gap) * .8);
}
.ptitle h1 {
    margin: 0; font-size: var(--fs-title); font-weight: 700;
    display: flex; align-items: center; gap: 9px;
}
.ptitle h1::before {
    content: ""; width: 3px; height: calc(var(--fs-title) * .95);
    background: var(--top); display: block;
}
.ptitle .tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------------- 조회 조건 박스 ---------------- */
.srch {
    background: var(--filter); border: 1px solid var(--line);
    padding: calc(var(--gap) * .7) var(--gap);
    display: flex; align-items: center; gap: calc(var(--gap) * 1.2);
    flex-wrap: wrap; margin-bottom: calc(var(--gap) * .7);
}
.srch__f { display: flex; align-items: center; gap: 10px; }
.srch__f > label { font-weight: 700; color: #3c4856; white-space: nowrap; font-size: var(--fs-form); }
.srch .sp { flex: 1; }

/* ---------------- 입력 ---------------- */
input[type=text], input[type=date], input[type=month], input[type=number], input[type=password], select {
    height: var(--ctl-h); padding: 0 10px;
    border: 1px solid #b9c5d2; border-radius: var(--radius);
    background: #fff; color: var(--ink);
    font-family: inherit; font-size: var(--fs-form);
}
textarea {
    width: 100%; padding: 8px 10px; min-height: calc(var(--ctl-h) * 2.2);
    border: 1px solid #b9c5d2; border-radius: var(--radius);
    background: #fff; color: var(--ink);
    font-family: inherit; font-size: var(--fs-form); line-height: 1.6; resize: vertical;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--top); box-shadow: 0 0 0 2px rgba(18,104,179,.16);
}
input:disabled, textarea:disabled, select:disabled { background: #eef1f4; color: #94a0ad; }
input.w-full, select.w-full { width: 100%; }

/* ---------------- 버튼 ---------------- */
.b {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--btn-h); padding: 0 16px;
    border: 1px solid #b9c5d2; border-radius: var(--radius);
    background: #fff; color: var(--ink);
    font-family: inherit; font-size: var(--fs-form); font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.b:hover { background: #f2f5f8; text-decoration: none; }
.b--go   { background: var(--btn);    border-color: var(--btn);    color: #fff; }
.b--go:hover { background: #15619f; }
.b--main { background: var(--btn-dk); border-color: var(--btn-dk); color: #fff; }
.b--main:hover { background: #0a3d70; }
.b--del  { color: var(--lv4); border-color: #e2b6b6; }
.b--del:hover { background: #fdf3f3; }
.b--sm   { height: calc(var(--btn-h) * .85); padding: 0 11px; font-size: var(--fs-sm); }
.b:disabled, .b.lock { opacity: .45; cursor: not-allowed; }
.bs { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.bs--end { justify-content: flex-end; }

/* ---------------- 건수 ---------------- */
.count { font-size: var(--fs-form); font-weight: 700; margin: 0 0 8px; }
.count b { color: var(--top); }

/* ---------------- 표 ---------------- */
.tblwrap { overflow-x: auto; border-top: 2px solid #7f97ad; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs); }
table.tbl th, table.tbl td {
    padding: var(--cell-y) 10px;
    border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
    text-align: center; vertical-align: middle;
}
table.tbl th {
    background: var(--th); color: #1c3049; font-weight: 700;
    border-bottom: 1px solid #b9cbdd; white-space: nowrap;
}
table.tbl td:last-child, table.tbl th:last-child { border-right: none; }
table.tbl td.l, table.tbl th.l { text-align: left; }
table.tbl tbody tr:hover { background: #f4f8fc; }
table.tbl tbody tr.rowlink { cursor: pointer; }
table.tbl tbody tr.sel { background: #eaf2fb; }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* 정의형 입력 표 — 사내 등록화면 표준 */
table.form { width: 100%; border-collapse: collapse; border-top: 2px solid #7f97ad; font-size: var(--fs-form); }
table.form th, table.form td {
    padding: calc(var(--cell-y) + 2px) 14px;
    border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.form th {
    width: 150px; background: var(--th); color: #1c3049; font-weight: 700;
    text-align: left; border-right: 1px solid #c4d5e6; white-space: nowrap;
}
html[data-mode="large"] table.form th { width: 210px; }
table.form td { background: #fff; }
table.form th .req { color: #cf2f2f; }
table.form .tip { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--fs-sm); margin-top: 2px; }

/* ---------------- 등급 ---------------- */
.lv {
    display: inline-block; min-width: 34px; padding: 3px 9px; border-radius: var(--radius);
    font-weight: 800; color: #fff; text-align: center; font-size: var(--fs);
}
.lv0 { background: #b6c0cb; color: #445; }
.lv1 { background: var(--lv1); } .lv2 { background: var(--lv2); }
.lv3 { background: var(--lv3); } .lv4 { background: var(--lv4); }
.lv5 { background: var(--lv5); }

.st {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--line);
    background: #f1f4f7; color: #4a5765; white-space: nowrap;
}
.st--wait { background: #fff5e3; color: #86540a; border-color: #ecd5a8; }
.st--todo { background: #fdeeee; color: #a02020; border-color: #efc0c0; }
.st--done { background: #e8f4ee; color: #12664a; border-color: #b6ddca; }
.st--go   { background: #e7f0fa; color: #0f4c88; border-color: #bcd6ef; }

/* ---------------- 빈도·강도 선택 ---------------- */
/* 검색 팝업으로 고르는 입력칸 (사용자 선택 등).
   읽기전용 칸 + [찾기] 버튼을 한 줄로 붙인다. 칸을 눌러도 팝업이 열린다. */
.fpick { display: flex; gap: 6px; align-items: center; }
.fpick input[readonly] { background: #fff; cursor: pointer; }
.fpick input[readonly]:hover { border-color: var(--top); }
.fpick > .b { flex-shrink: 0; }

.pick { display: flex; gap: 6px; flex-wrap: wrap; }
.pick button {
    min-width: calc(var(--ctl-h) * 1.15); height: var(--ctl-h);
    padding: 0 10px;
    border: 1px solid #b9c5d2; border-radius: var(--radius);
    background: #fff; color: var(--ink);
    font-family: inherit; font-size: var(--fs-form); font-weight: 700; cursor: pointer;
}
.pick button:hover { border-color: var(--top); }
.pick button.on { background: var(--top); border-color: var(--top); color: #fff; }
.pick-desc { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-sm); }
.pick-desc.on { color: var(--ink); font-weight: 700; }

/* 등급 결과 */
.calcbox { display: flex; align-items: center; gap: 14px; }
.calcbox__n {
    min-width: calc(var(--fs-num) * 2); height: calc(var(--fs-num) * 1.55);
    border-radius: var(--radius); background: #b6c0cb; color: #445;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-num); font-weight: 800; line-height: 1;
}
.calcbox__t b { display: block; font-size: calc(var(--fs-form) * 1.15); }
.calcbox__t span { color: var(--ink-2); font-size: var(--fs-sm); }

/* 안내·경고 문구.
   display:flex 로 두면 안 된다 — <b> 같은 요소마다 별개의 플렉스 항목이 되어
   한 문장이 여러 칸으로 조각난다. 문장은 일반 흐름(block)으로 흘러야 한다.
   아이콘·체크박스를 글과 나란히 두어야 할 때만 .alert--row 를 쓴다. */
.alert {
    padding: 10px 14px; border-radius: var(--radius); font-size: var(--fs-form);
    display: block; margin: 10px 0; line-height: 1.55;
}
.alert--row { display: flex; gap: 9px; align-items: center; }
.alert a { font-weight: 700; }
.alert--w { background: #fff6e6; border: 1px solid #eed7a6; color: #7d5400; }
.alert--e { background: #fdeeee; border: 1px solid #efc0c0; color: #98201f; }
.alert--i { background: #eaf2fb; border: 1px solid #bfd7ef; color: #0f4c88; }

/* ---------------- 아코디언 (위험요인) ---------------- */
.acc { border: 1px solid var(--line); margin-bottom: 8px; background: #fff; }
.acc.open { border-color: var(--top); }
.acc__hd {
    display: flex; align-items: center; gap: 14px;
    padding: calc(var(--cell-y) + 3px) 14px; cursor: pointer;
}
.acc.open .acc__hd { background: var(--th); border-bottom: 1px solid #b9cbdd; }
.acc__no {
    min-width: calc(var(--ctl-h) * .85); height: calc(var(--ctl-h) * .85);
    background: #eef2f6; border: 1px solid var(--line); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: var(--fs); flex-shrink: 0;
}
.acc.open .acc__no { background: var(--top); border-color: var(--top); color: #fff; }
.acc__ttl { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-form); }
.acc__ttl small { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--fs-sm);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc__ar { color: var(--ink-2); }
.acc__bd { display: none; padding: var(--gap); }
.acc.open .acc__bd { display: block; }

/* ---------------- 페이지네이션 ---------------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: var(--gap); }
.pager a, .pager span {
    min-width: var(--btn-h); height: var(--btn-h); padding: 0 9px;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-form);
}
.pager .on { background: var(--top); border-color: var(--top); color: #fff; font-weight: 700; }

/* ---------------- 모달 ---------------- */
.mask { position: fixed; inset: 0; background: rgba(20,30,45,.5); display: flex;
    align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.dlg { background: #fff; border: 1px solid var(--line); width: 100%; max-width: 720px;
    max-height: 92vh; overflow: auto; }
.dlg__hd { background: var(--top); color: #fff; padding: 12px 18px;
    display: flex; align-items: center; justify-content: space-between; }
.dlg__hd h2 { margin: 0; font-size: var(--fs-title); font-weight: 700; }
.dlg__bd { padding: var(--gap); }
.dlg__ft { padding: 14px var(--gap); border-top: 1px solid var(--line); background: #f7f9fc;
    display: flex; gap: 8px; justify-content: center; }
.xb { border: none; background: none; color: #fff; font-size: 1.5em; cursor: pointer; line-height: 1; }

/* ---------------- 기타 ---------------- */
.muted { color: var(--ink-2); }
.sm { font-size: var(--fs-sm); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* 열 폭을 지정한 대로 지키는 표.
   기본(auto) 레이아웃은 내용이 길면 표를 넓히거나 셀을 줄바꿈해서 행 높이가 튄다.
   fixed 로 두면 지정 폭이 그대로 지켜지고, 남는 폭은 width 없는 열이 받는다. */
table.tbl--fixed { table-layout: fixed; width: 100%; }

/* 긴 내용을 한 줄로 자른다 (전체는 title 로 보여 준다).
   표 안에서는 tbl--fixed 와 함께 써야 폭이 묶여 ellipsis 가 동작한다.
   td 뿐 아니라 div 에도 쓰므로 요소를 한정하지 않는다. */
.ell {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb0 { margin-bottom: 0; }
/* ---------------- 대시보드 2단 배치 ----------------
   좌측 지도 + 우측 목록. 폭이 모자라면 지도를 위, 목록을 아래로 쌓는다.
   좁은 화면에서 억지로 나란히 두면 지도도 표도 못 읽는다.

   두 칸을 반씩 나눈다. 위·아래 블록의 열 폭이 같아야 오른쪽 끝선이 맞는다. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1200px) {
    .dash { grid-template-columns: minmax(0, 1fr); }
}

/* 행 높이를 고정해 좌·우 칸의 아래 끝선을 맞춘다.
   내용이 많은 쪽(현장 목록)은 늘어나는 대신 <b>칸 안에서 스크롤</b>한다.
   고정하지 않으면 그리드 행 높이가 더 긴 쪽에 맞춰져 지도 아래에 빈 공간이 생긴다. */
.dash--rows { grid-auto-rows: var(--dash-h); }
.dash--rows > * { display: flex; flex-direction: column; min-height: 0; }
.dash--rows .tblwrap { flex: 1; min-height: 0; overflow-y: auto; }
/* 스크롤해도 어떤 열인지 알 수 있게 머리글을 고정한다.
   th 에만 걸면 안 된다 — sticky 는 담고 있는 블록(thead) 안에서만 붙으므로
   thead 가 스크롤로 밀려나면 같이 사라진다. thead 자체를 고정해야 한다. */
.dash--rows .tblwrap thead { position: sticky; top: 0; z-index: 2; }
/* border-collapse: collapse 에서는 머리글 테두리가 함께 붙지 않아 내용이 비쳐 보인다.
   배경을 명시하고 아래쪽 선을 그려 준다. */
.dash--rows .tblwrap thead th { background: var(--th); box-shadow: inset 0 -1px 0 var(--line); }
/* flex:1 은 flex-basis:0 이므로 지도에 준 height 보다 우선한다 (남는 높이를 채운다) */
.dash--rows #map, .dash--rows .alert--mapoff { flex: 1; }

@media (max-width: 1200px) {
    /* 1단으로 쌓이면 높이를 고정할 이유가 없다 */
    .dash--rows { grid-auto-rows: auto; }
    .dash--rows .tblwrap { flex: none; max-height: var(--dash-h); }
    .dash--rows #map, .dash--rows .alert--mapoff { flex: none; height: var(--dash-h); }
}

.sect { margin: var(--gap) 0 10px; font-size: calc(var(--fs-title) * .85); font-weight: 700;
    padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.dock { position: sticky; bottom: 0; background: #f7f9fc; border-top: 1px solid var(--line);
    margin: var(--gap) calc(var(--gap) * -1) calc(var(--gap) * -1);
    padding: 12px var(--gap); display: flex; align-items: center; justify-content: space-between;
    gap: var(--gap); flex-wrap: wrap; }

/* ---------------- 반응형 ---------------- */
@media (max-width: 1600px) {
    .gnb__menu a { padding: 0 16px; }
}
@media (max-width: 1500px) {
    /* 헤더 우측이 넘치지 않도록 안내 문구부터 접는다 */
    .gnb__user { display: none; }
    .gnb__right { gap: 10px; padding: 0 14px; }
}
@media (max-width: 1400px) {
    :root { --side-w: 200px; }
    .gnb__menu a { padding: 0 12px; font-size: calc(var(--fs-menu) * .95); }
}
@media (max-width: 1200px) {
    .gnb__menu { display: none; }
    :root { --side-w: 180px; }
}
@media (max-width: 820px) {
    .layout { display: block; }
    .lnb { width: 100%; }
    .lnb__hd { height: auto; padding: 12px 18px; }
    .gnb__logo { width: auto; }
}

/* ---------------- 지도 마커 ---------------- */
.site-marker { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.site-marker__dot {
    display: block; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.site-marker--star .site-marker__star {
    font-size: 26px; line-height: 1;
    text-shadow: 0 0 3px #fff, 0 1px 4px rgba(0,0,0,.4);
}
.site-marker:hover .site-marker__dot { transform: scale(1.25); }

/* 지도 인포윈도우.
   폭을 고정한다 — 주소가 길면 박스가 늘어나 지도를 가리고, 줄바꿈이 생기면
   아래 항목들이 밀려 내려가 레이아웃이 깨진다.
   넘치는 이름·주소는 … 로 자르고 전체는 title(마우스 올림)로 보여 준다. */
.site-info { width: 246px; padding: 12px 14px; font-size: var(--fs); line-height: 1.6; }
.site-info__title,
.site-info__addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-info__title { font-weight: 700; margin-bottom: 2px; }
.site-info__addr { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: 8px; }
.site-info__row { display: flex; justify-content: space-between; gap: 12px; }
.site-info__label { color: var(--ink-2); flex-shrink: 0; }
.site-info__row > :last-child { white-space: nowrap; }
/* 돋보기 모드는 글자가 커지므로 박스도 넓힌다 */
html[data-mode="large"] .site-info { width: 330px; }