/* 가맹 상담 화면 (4차 디자인, 2026-10-16 한승 선택: 시안 B '지도가 화면 전체')
   방향: 지도를 창 끝까지 깔고, 상담 메모(왼쪽)와 안내(오른쪽)는 지도 위에 뜬 흰 판.
   - 회사 파랑(#0067B3)은 저장 단추와 '지금 선택된 것'에만.
   - 지사 색은 이름 앞 점으로만. 색으로 채운 판·왼쪽 색 띠·남색 막대·노란 단추는 쓰지 않는다(1·2차에서 한승: 싫다, 촌스럽다).
   - 입력 칸은 테두리 대신 옅은 회색 칸. 글꼴은 SUIT. */
:root {
  color-scheme: light;
  --bg: #e9edf2; --surface: #ffffff; --sunk: #f2f5f8; --hover: #eef4fa;
  --ink: #18212e; --ink2: #4f5a6a; --muted: #858e9c;
  --line: #e6eaf0; --line2: #cfd6df;
  --accent: #0067b3; --accent-dk: #00528f; --accent-weak: #e7f1fa;
  --warn-bg: #fdf6e3; --warn-ink: #7a5a12;
  --store: #1d6f5c; --school: #3b5ba9; --apt: #8f99a8;
  --branch: #8b92a0;
  --shadow: 0 1px 2px rgba(20,30,45,.06), 0 4px 14px rgba(20,30,45,.08);
  --float: 0 2px 6px rgba(20,30,45,.08), 0 12px 32px rgba(20,30,45,.14);
  --font: "SUIT", "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  --r: 10px;
  --memo-w: 360px; --guide-w: 380px; --gap: 12px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.55 var(--font); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; display: flex; flex-direction: column; }
button, select, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ── 위 막대 ── */
.top { flex: none; position: relative; z-index: 900; display: flex; align-items: center; gap: 20px; padding: 0 16px; height: 56px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: baseline; gap: 7px; font-size: 15px; letter-spacing: -.02em; }
.brand b { font-weight: 800; }
.brand span { color: var(--accent); font-weight: 700; }
.views { display: flex; gap: 2px; background: var(--sunk); border-radius: 12px; padding: 3px; margin-right: auto; }
.views button { border: 0; background: none; padding: 6px 15px; border-radius: 9px; cursor: pointer; color: var(--ink2); font-weight: 600; font-size: 13.5px; }
.views button:hover { color: var(--ink); }
.views button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(20,30,45,.12); }
.count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 2px; }

.btn { border: 1px solid var(--line2); background: var(--surface); padding: 6px 14px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.btn:hover { background: var(--sunk); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dk); }
.btn.danger { color: #b42318; }
.btn.danger:hover { background: #fef3f2; }
.btn:disabled { opacity: .55; cursor: default; }

/* ── 상담 화면: 지도가 창 전체, 왼쪽·오른쪽 판은 지도 위에 뜬다 ── */
.consult { flex: 1; min-height: 0; position: relative; display: grid; grid-template-columns: var(--memo-w) minmax(0, 1fr) var(--guide-w); grid-template-rows: minmax(0, 1fr); }
.mapwrap { grid-column: 1 / -1; grid-row: 1; }
/* 왼쪽 줄은 판 두 개: 위 담당 지사 찾기, 아래 상담 메모 */
.leftcol { grid-column: 1; grid-row: 1; z-index: 850; margin: var(--gap); min-height: 0; display: flex; flex-direction: column; gap: var(--gap); pointer-events: none; }
.leftcol > *, .consult > .guide { pointer-events: auto; background: var(--surface); border-radius: 16px; box-shadow: var(--float); }
.leftcol > .lookup { flex: none; }
.leftcol > .memo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.consult > .guide { grid-column: 3; grid-row: 1; z-index: 850; margin: var(--gap); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }

.step { padding: 18px 20px 20px; display: grid; gap: 12px; }
.form .step + .step { border-top: 1px solid var(--line); }
.step-h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.step-h i { font-style: normal; color: var(--muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.step-sub { flex-basis: 100%; margin-top: -2px; font-weight: 500; font-size: 12px; color: var(--muted); letter-spacing: 0; }

/* 담당 지사 찾기: 왼쪽 위 판 */
.lookup { padding: 16px 20px 14px; display: grid; gap: 12px; position: relative; z-index: 2; }
.lookup-h { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }

/* 지역 찾기 */
.combo { position: relative; }
.combo input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; background: var(--sunk); font-size: 16px; font-weight: 600; }
.combo input::placeholder { font-weight: 500; color: var(--muted); }
.combo input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
#regionList { position: absolute; z-index: 1200; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border-radius: 12px; box-shadow: var(--float); max-height: 320px; overflow-y: auto; }
#regionList li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; cursor: pointer; border-radius: 8px; }
#regionList li[aria-selected="true"], #regionList li:hover { background: var(--hover); }
#regionList .br { color: var(--ink2); font-size: 12.5px; white-space: nowrap; }
#regionList .br i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.hint { margin: -2px 0 0; color: var(--muted); font-size: 12px; }

/* 담당 지사: 지사 색은 이름 앞 점으로만(빨간 지사가 분홍 판이 되지 않게) */
.answer { border-radius: 14px; background: var(--sunk); padding: 14px 16px 12px; }
.answer.empty { background: none; border: 1.5px dashed var(--line2); }
.answer-empty { margin: 0; font-size: 13px; color: var(--muted); }
.answer .where { margin: 0; font-size: 12.5px; color: var(--ink2); font-weight: 500; }
.answer .who { margin: 2px 0 0; display: flex; align-items: center; gap: 9px; font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
.answer .who .bd { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--branch); }
.answer .contact { margin: 12px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink2); }
.answer .contact b { color: var(--ink); font-weight: 700; }
.answer .contact .num { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; background: var(--surface); border: 0; box-shadow: 0 0 0 1px var(--line2); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.answer .contact .num:hover { box-shadow: 0 0 0 1px var(--accent); color: var(--accent); }
.answer details { margin-top: 10px; font-size: 12.5px; color: var(--ink2); }
.answer summary { cursor: pointer; font-weight: 600; }
.answer details p { margin: 6px 0 0; line-height: 1.6; }
.answer .sub { margin: 6px 0 0; font-size: 12.5px; color: var(--ink2); }
.answer .near { margin: 10px 0 0; font-size: 12.5px; color: var(--ink2); padding-top: 10px; border-top: 1px solid var(--line2); }

/* 메모 양식 */
.form { display: flex; flex-direction: column; flex: 1; }
.form label, .form legend { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 5px; min-width: 0; }
.form legend { padding: 0; margin-bottom: 5px; }
.form input, .form select, .form textarea, .editor input, .editor select, .editor textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; }
.form textarea, .editor textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.65; }
.form input:focus, .form select:focus, .form textarea:focus, .editor input:focus, .editor select:focus, .editor textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-weak); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg { display: flex; background: var(--sunk); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { flex: 1; border: 0; background: none; padding: 7px 0; border-radius: 9px; cursor: pointer; color: var(--ink2); font-weight: 600; font-size: 13.5px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(20,30,45,.14); }
.topics { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; align-items: center; }
.topics-empty { color: var(--muted); font-size: 12px; font-weight: 500; }
.topic { display: inline-flex; align-items: center; gap: 2px; background: var(--accent-weak); color: #0b4f86; border-radius: 999px; padding: 3px 4px 3px 11px; font-size: 12.5px; font-weight: 600; }
.topic button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0 4px; font-size: 14px; line-height: 1; opacity: .7; }
.editing { margin: 14px 20px 0; background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.editing button { white-space: nowrap; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; font-weight: 700; }

/* 상담 메모: 큰 메모 칸이 이 단계의 중심 */
.memo-box { display: grid; gap: 12px; }
.memo-box input { background: var(--sunk); border-color: transparent; }
.memo-box textarea { min-height: 200px; background: var(--sunk); border-color: transparent; border-radius: 12px; font-size: 15px; line-height: 1.7; padding: 12px 14px; }
.memo-box input:focus, .memo-box textarea:focus { background: var(--surface); }
.memo-label { color: var(--ink) !important; font-weight: 700 !important; font-size: 13px !important; }

/* 저장 줄: 판 맨 아래에 늘 붙어 있음 */
.savebar { position: sticky; bottom: 0; margin-top: auto; padding: 14px 20px 16px; background: var(--surface); border-top: 1px solid var(--line); display: grid; gap: 6px; z-index: 5; }
.save-row { display: flex; gap: 8px; align-items: stretch; }
.savebar .counselor { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.savebar .counselor input { flex: 1; min-width: 0; height: 46px; border-radius: 12px; }
.savebar .counselor input.missing { border-color: #d92d20; box-shadow: 0 0 0 3px #fee4e2; }
.savebar .btn.primary { height: 46px; padding: 0 22px; border-radius: 12px; font-size: 15px; white-space: nowrap; }
.save-msg { font-size: 12.5px; color: var(--ink2); margin: 0; }
.save-msg:empty { display: none; }
.save-msg.err { color: #b42318; }

/* ── 지도 ── 지도 위 도구는 양쪽 판을 피해서 둔다 */
.mapwrap { position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: #eef0f2; }
#map.picking, #map.picking .leaflet-interactive { cursor: crosshair !important; }
.leaflet-container { font-family: var(--font); }
.leaflet-container:focus { outline: none; }
.leaflet-container:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.leaflet-top.leaflet-left { left: calc(var(--memo-w) + var(--gap)); top: 2px; }
.leaflet-bottom.leaflet-right { right: calc(var(--guide-w) + var(--gap)); }
.leaflet-bar { border: 0 !important; box-shadow: var(--float) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-bar a { color: var(--ink2) !important; border-color: var(--line) !important; }
.basemap { position: absolute; z-index: 800; left: calc(var(--memo-w) + var(--gap) + 62px); top: 12px; display: flex; gap: 2px; background: var(--surface); border-radius: 12px; padding: 3px; box-shadow: var(--float); }
.basemap button { border: 0; background: none; padding: 6px 12px; border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.basemap button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 700; }
.map-tools { position: absolute; z-index: 800; right: calc(var(--guide-w) + var(--gap) * 2); top: 12px; display: flex; gap: 6px; }
.map-btn { border: 0; background: var(--surface); padding: 8px 14px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 13px; box-shadow: var(--float); color: var(--ink); }
.map-btn:hover { background: var(--sunk); }
.map-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.pick-hint { position: absolute; z-index: 800; left: 50%; top: 62px; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 12px; box-shadow: var(--float); pointer-events: none; }
.layers { position: absolute; z-index: 800; left: calc(var(--memo-w) + var(--gap) * 2); bottom: 24px; display: grid; gap: 6px; background: var(--surface); border-radius: 14px; padding: 12px 14px; font-size: 12.5px; box-shadow: var(--float); min-width: 164px; }
.layers label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--ink); }
.layers label.group { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line); font-weight: 700; }
.layers input { margin: 0; accent-color: var(--accent); }
.brands { display: grid; gap: 4px; padding-left: 21px; }
.brands label { font-weight: 500; color: var(--ink2); }
.brands .n { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.sw { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.sw.store { background: var(--store); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--store); width: 8px; height: 8px; }
.sw.school { background: #fff; border: 2px solid var(--school); }
.sw.apt { background: var(--apt); }
.zoom-hint { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; max-width: 170px; }
.pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.leaflet-tooltip.tip { font: 12.5px/1.45 var(--font); padding: 6px 10px; border-radius: 10px; border: 0; box-shadow: var(--float); }
.leaflet-tooltip.tip b { font-weight: 700; }

/* 지도 글자표(늘 떠 있는 이름). 클릭을 막지 않는다.
   층: 지사 이름(가장 아래, 영역 위) < 학교·가맹점 이름 < 표시점 */
.lbl-layer { position: absolute; left: 0; top: 0; pointer-events: none; }
.lbl { position: absolute; white-space: nowrap; pointer-events: none; font-size: 11.5px; line-height: 1; padding: 3px 6px; border-radius: 6px; color: var(--ink); background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(20,30,45,.08), 0 1px 3px rgba(20,30,45,.1); }
.lbl small { color: var(--school); font-size: 11px; font-weight: 700; margin-left: 3px; font-variant-numeric: tabular-nums; }
.lbl.store { background: var(--store); color: #fff; font-weight: 700; font-size: 12px; box-shadow: 0 1px 4px rgba(20,30,45,.25); }
.lbl.store small { color: rgba(255,255,255,.82); font-weight: 600; }
.lbl.branch { background: none; box-shadow: none; padding: 0; font-size: 13px; font-weight: 800; letter-spacing: -.02em; color: var(--bc, #555e6e); text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff; opacity: .9; }

/* ── 안내 탭 ── */
.tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; padding: 6px 8px 0; }
.tabs button { border: 0; background: none; padding: 13px 0 12px; cursor: pointer; color: var(--muted); font-weight: 600; position: relative; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 800; }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 26%; right: 26%; bottom: -1px; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; }
.tab-count { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; vertical-align: 1px; }
.tab-count:empty { display: none; }
.tab { padding: 20px 20px 32px; }
.tab h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.tab h3 { margin: 24px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tab h3 .aside { font-weight: 500; color: var(--muted); font-size: 12px; }
.lead { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.empty-note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* 숫자 네 칸 */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fact { background: var(--sunk); border-radius: 12px; padding: 12px 14px; }
.fact .k { font-size: 12px; color: var(--ink2); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.fact .v { margin-top: 2px; font-size: 26px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.2; }
.fact .v small { font-size: 12.5px; font-weight: 600; color: var(--ink2); margin-left: 2px; }
.fact .s { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.list { margin: 0; padding: 0; list-style: none; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.list li:last-child { border-bottom: 0; }
.list .r { color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.list button.link { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; color: var(--ink); font-weight: 600; }
.list button.link:hover { color: var(--accent); }
.bdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--sunk); color: var(--ink2); margin-left: 6px; vertical-align: 1px; font-weight: 600; }
.tag.in { background: var(--warn-bg); color: var(--warn-ink); }

.brandbars { display: grid; gap: 8px; }
.brandbar { display: grid; grid-template-columns: 76px 1fr 30px; gap: 10px; align-items: center; font-size: 12.5px; }
.brandbar .t { height: 6px; background: var(--sunk); border-radius: 3px; overflow: hidden; }
.brandbar .t i { display: block; height: 100%; border-radius: 3px; }
.brandbar .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink2); }

.callout { margin: 12px 0 0; background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.src { margin-top: 12px; font-size: 11.5px; color: var(--muted); }

/* 가맹비 */
.fee-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fee-table th, .fee-table td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fee-table thead th { font-weight: 600; color: var(--muted); font-size: 12px; padding-top: 0; }
.fee-table td.a, .fee-table th.a { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fee-table .note { display: block; color: var(--muted); font-size: 12px; }
.fee-table tr.sum td { font-weight: 800; font-size: 16px; border-bottom-color: var(--line2); }
.fee-table tr.extra td { color: var(--ink2); border-bottom: 0; }
.rules { margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink2); display: grid; gap: 5px; }
.calc { margin-top: 16px; background: var(--sunk); border-radius: 14px; padding: 14px; display: grid; gap: 12px; }
.calc .inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc label { display: grid; gap: 5px; font-size: 12px; color: var(--ink2); font-weight: 600; }
.calc input { height: 38px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 10px; width: 100%; font-variant-numeric: tabular-nums; background: var(--surface); }
.calc .out { font-size: 13px; color: var(--ink2); }
.calc .out b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--ink); }
.mark-btn { border: 1px solid var(--line2); background: var(--surface); border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer; white-space: nowrap; font-weight: 600; color: var(--ink2); }
.mark-btn:hover { background: var(--sunk); }
.mark-btn[aria-pressed="true"] { background: var(--accent-weak); border-color: transparent; color: #0b4f86; font-weight: 700; }
.mark-btn[aria-pressed="true"]::before { content: "✓ "; }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 28px 0 10px; }
.sec-head h3 { margin: 0; }
.sec-head:first-child { margin-top: 0; }

/* Q&A */
.faq-bar { display: flex; gap: 6px; align-items: center; }
#faqQ { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; background: var(--sunk); font-size: 14px; }
#faqQ:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.faq-bar .btn { height: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 6px; }
.chips button { border: 0; background: var(--sunk); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink2); font-weight: 600; }
.chips button:hover { color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.faq-state { font-size: 12px; color: var(--warn-ink); background: var(--warn-bg); padding: 8px 10px; border-radius: 10px; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 12px 0; display: flex; gap: 8px; align-items: baseline; font-weight: 600; }
.qa summary:hover { color: var(--accent); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); position: relative; top: -2px; margin-right: 2px; transition: transform .15s; }
.qa[open] summary::before { transform: rotate(45deg); }
.qa .cat { flex: none; font-size: 11px; color: var(--muted); font-weight: 500; margin-left: auto; white-space: nowrap; }
.qa .body { padding: 0 0 14px 16px; }
.qa .a { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink); white-space: pre-line; }
.qa .foot { margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.qa .who { font-size: 11.5px; color: var(--muted); margin-right: auto; }
.qa mark { background: #fff1b8; color: inherit; border-radius: 2px; }
.check { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--warn-ink); background: var(--warn-bg); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.edit-btn { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 3px 6px; }
.edit-btn:hover { text-decoration: underline; }
.gaps { margin-top: 18px; font-size: 12.5px; color: var(--ink2); background: var(--sunk); border-radius: 12px; padding: 10px 12px; }
.gaps summary { cursor: pointer; font-weight: 600; }
.gaps ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; }
.gaps li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); }

/* 일정 */
.grow { flex: 1; align-self: center; }
.ev { display: grid; grid-template-columns: 50px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ev .day { text-align: center; align-self: start; background: var(--sunk); border-radius: 12px; padding: 6px 0 7px; }
.ev .day .m { display: block; font-size: 11px; font-weight: 700; color: var(--accent); }
.ev .day .d { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev .day .w { display: block; font-size: 10.5px; color: var(--muted); }
.ev.past { opacity: .55; }
.ev.past .day .m { color: var(--muted); }
.ev .t { font-size: 14.5px; font-weight: 700; margin: 0; }
.ev .soon { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.ev .meta { margin: 3px 0 0; font-size: 12.5px; color: var(--ink2); }
.ev .memo { margin: 6px 0 0; font-size: 13px; white-space: pre-line; }
.ev .foot { margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.ev .who { font-size: 11.5px; color: var(--muted); margin-right: auto; }
.upcoming { margin: 0 0 20px; background: var(--accent-weak); border-radius: 14px; padding: 4px; }
.upcoming h3 { margin: 0; padding: 7px 10px 5px; font-size: 12px; font-weight: 700; color: #0b4f86; }
.upcoming button { display: flex; width: 100%; gap: 10px; border: 0; background: var(--surface); padding: 9px 10px; text-align: left; cursor: pointer; font-size: 13px; border-radius: 10px; }
.upcoming button + button { margin-top: 3px; }
.upcoming button:hover { background: #fafcfe; }
.upcoming .when { flex: none; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* 고치기 창 */
.editor { border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(20,30,45,.28); }
.editor::backdrop { background: rgba(20,30,45,.4); }
.editor form { display: grid; gap: 14px; padding: 22px 24px 20px; }
.editor h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.editor label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.editor label .sub { font-weight: 500; color: var(--muted); }
.editor label.inline { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.editor label.inline input { width: auto; height: auto; }
.editor-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.editor-actions .spacer { flex: 1; }

/* ── 상담 기록 화면 ── */
.records { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px; gap: 12px; }
.records-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.records-bar input, .records-bar select { height: 40px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); }
.records-bar input { width: 280px; max-width: 100%; }
.records-bar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.rec-summary { color: var(--ink2); font-size: 12.5px; font-weight: 600; margin-right: auto; }
.table-wrap { flex: 1; min-height: 0; overflow: auto; background: var(--surface); border-radius: 16px; box-shadow: var(--float); }
#recTable { width: 100%; border-collapse: collapse; font-size: 13px; }
#recTable th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 700; color: var(--ink2); font-size: 12px; padding: 12px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
#recTable td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
#recTable tbody tr { cursor: pointer; }
#recTable tbody tr:hover { background: var(--hover); }
#recTable td.memo-cell { max-width: 320px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#recTable td.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
#recTable .due { color: #b42318; font-weight: 700; }
.status { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; background: var(--sunk); white-space: nowrap; font-weight: 600; color: var(--ink2); }
.status.s-계약진행 { background: var(--accent-weak); color: #0b4f86; }
.status.s-종료 { color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.rec-empty { text-align: center; color: var(--muted); padding: 56px 16px; margin: 0; }

.toast { position: fixed; z-index: 2000; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.2); }

/* ── 좁은 화면 ── */
@media (max-width: 1280px) { :root { --memo-w: 330px; --guide-w: 350px; } }
/* 세로로 쌓을 때는 뜬 판을 풀고 지도를 따로 둔다 */
@media (max-width: 1020px) {
  body { display: block; }
  .top { position: sticky; top: 0; z-index: 1500; gap: 10px; }
  .brand span { display: none; }
  .consult { display: flex; flex-direction: column; }
  .leftcol { margin: 0; gap: 0; order: 1; }
  .leftcol > *, .consult > .guide { margin: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .leftcol > .memo { border-top: 1px solid var(--line); }
  .mapwrap { order: 2; height: 62vh; }
  .consult > .guide { order: 3; }
  .tabs { padding-top: 0; }
  .leaflet-top.leaflet-left { left: 0; }
  .leaflet-bottom.leaflet-right { right: 0; }
  .basemap { left: 58px; }
  .map-tools { right: 12px; top: 56px; }
  .pick-hint { top: 104px; }
  .layers { left: 12px; }
  .records { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }