/* 여기바방 3단계 화면: 고객 정리함 · 저장 조건 · 알림 · 손님용 안내 만들기.
   색·글자는 app.css 의 변수(--ink, --pin …)만 쓴다 — 회원 화면 디자인이 바뀌면 같이 따라간다. */
.yb3-page { position: fixed; left: 0; right: 0; bottom: 0; top: 56px; z-index: 25; overflow: auto; background: var(--bg, #f5f6f8); }
.yb3-page[hidden] { display: none; }
body.yb3-open { overflow: hidden; }
body.yb3-open .selbar { display: none; }
.yb3-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 18px 80px; }
.yb3-wrap > h1 { font-size: 22px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yb3-two { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
.yb3-list { background: var(--card, #fff); border: 1px solid var(--line, #e2e6eb); border-radius: var(--r, 10px); overflow: hidden; position: sticky; top: 0; }
.yb3-list .add { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line, #e2e6eb); }
.yb3-list .add .in { min-height: 36px; }
.yb3-item { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line2, #eef1f4); cursor: pointer; text-decoration: none !important; color: var(--ink, #15191f); }
.yb3-item:hover { background: #fafbfc; } .yb3-item.on { background: var(--pin-soft, #fff6cc); }
.yb3-item b { font-weight: 700; } .yb3-item small { color: var(--mute, #6c7683); display: block; }
.yb3-item .cnt { margin-left: auto; display: flex; gap: 4px; }
.yb3-sec { background: var(--card, #fff); border: 1px solid var(--line, #e2e6eb); border-radius: var(--r, 10px); padding: 16px; margin-bottom: 14px; }
.yb3-sec > h2 { font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yb3-sec > h2 .grow { flex: 1; }
.yb3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.yb3-room { border: 1px solid var(--line, #e2e6eb); border-radius: 10px; padding: 12px; margin-bottom: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; }
.yb3-room .t { font-weight: 700; } .yb3-room .p { font-weight: 800; font-size: 17px; white-space: nowrap; text-align: right; }
.yb3-room .m { color: var(--ink2, #3a424e); font-size: 14px; }
.yb3-room .pc { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; margin-top: 6px; }
.yb3-room .pc .in, .yb3-room .pc .sel { min-height: 34px; padding: 5px 9px; font-size: 14px; }
.yb3-room.off { opacity: .65; }
.yb3-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line2, #eef1f4); flex-wrap: wrap; }
.yb3-row:last-child { border-bottom: 0; }
.yb3-row .grow { flex: 1; min-width: 180px; }
.yb3-find { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.yb3-find .in { flex: 1; min-width: 180px; }
.yb3-link { font-family: Consolas, monospace; font-size: 13px; background: var(--bg, #f5f6f8); border-radius: 6px; padding: 4px 8px; word-break: break-all; }
.yb3-bell { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; border-radius: 8px; font-weight: 700; color: var(--ink2, #3a424e); text-decoration: none !important; white-space: nowrap; }
.yb3-bell b { background: var(--bad, #bf3528); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px; min-width: 18px; text-align: center; }
.yb3-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.yb3-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--line2, #eef1f4); align-items: center; }
.yb3-alert.unread .t { font-weight: 800; } .yb3-alert .t { font-weight: 600; }
.yb3-warn { background: var(--warn-soft, #fdf0dc); color: var(--warn, #a8560a); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
@media (max-width: 899px) {
  .yb3-wrap { padding: 14px 12px 80px; } .yb3-two { grid-template-columns: 1fr; } .yb3-list { position: static; }
  .yb3-two.picked .yb3-list { display: none; } .yb3-grid { grid-template-columns: 1fr; }
  .yb3-room { grid-template-columns: auto minmax(0, 1fr); } .yb3-room .p { grid-column: 2; text-align: left; } .yb3-room .pc { grid-column: 1 / 3; grid-template-columns: 1fr 1fr; }
  .yb3-back { display: inline-flex !important; }
}
.yb3-back { display: none; }
/* 고객의 '찾는 조건 (한 줄)' 아래: 알아들은 조건 + 맞는 방 보기 + 알림 (2026-11-14 조건을 하나로 합침) */
.yb3-cond { margin: -4px 0 12px; }
.yb3-cond.on { padding: 10px 12px; border-radius: 12px; background: var(--gold-soft, #f6f0e5); }
.yb3-cond-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; }
.yb3-cond-chips .k { margin-right: 4px; font-size: 13.5px; font-weight: 800; color: var(--ink, #111318); }
.yb3-cond-chips .ask-chip { padding: 4px 10px; font-size: 13.5px; }
.yb3-cond .row { gap: 8px 12px; } .yb3-cond .hint { margin: 0; }
.yb3-cond-miss { color: var(--warn, #8a5410) !important; font-weight: 700; }
html[data-mode="dark"] .yb3-cond.on { background: var(--soft); }

/* 동선 · 혼자 보러 가는 손님 안내 (2026-11-13) — 숫자·글은 크고 진하게, 적는 칸은 바로 옆에 */
.gd-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.gd-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; border-radius: 12px; background: var(--ink, #111318); color: #fff; margin-bottom: 10px; }
.gd-total b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.gd-total .hint { color: #d9d6cc; font-size: 13px; }
.gd-total.wait { background: var(--soft, #f1f1ee); color: var(--ink2, #2e333b); font-size: 14px; font-weight: 700; }
.gd-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.gd-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px 116px; gap: 6px 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--line, #e3e3df); border-radius: 11px; background: var(--card, #fff); }
.gd-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink, #111318); color: #fff; font-size: 13px; font-weight: 800; }
.gd-name { display: flex; flex-direction: column; min-width: 0; } .gd-name b { font-size: 15px; color: var(--ink, #111318); }
.gd-name .hint { font-size: 13px; }
.gd-leg { font-size: 12.5px; font-weight: 800; color: var(--ink, #111318); }
.gd-f { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 700; color: var(--mute, #5d636c); }
.gd-f small { font-weight: 600; }
.gd-in { min-height: 34px !important; padding: 5px 9px !important; font-size: 14.5px !important; font-weight: 700; }
.gd-warn { margin: 8px 0 0; color: var(--warn, #8a5410) !important; font-weight: 700; }
.gd-map { height: 360px; border: 1px solid var(--line, #e3e3df); border-radius: 14px; overflow: hidden; background: #eceae5; position: sticky; top: 10px; }
.gd-map-msg { display: grid; place-items: center; height: 100%; color: var(--mute, #5d636c); font-size: 14px; }
.gd-msg { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; }
.gd-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .gd-h .grow { flex: 1; } .gd-h b { font-size: 15px; }
.gd-note, .gd-text { width: 100%; font-family: inherit; font-size: 14px; line-height: 1.65; }
.gd-text { min-height: 300px; font-size: 14.5px; }
.gd-send { gap: 8px; margin-top: 8px; flex-wrap: wrap; } .gd-send .btn { min-height: 44px; font-size: 15px; padding: 0 16px; }
/* 손님 등록 없이 띄우는 창 (공실 찾기 선택 막대 · 방 상세, 2026-11-14) */
.modal.gd-modal { z-index: 90; }
.modal.gd-modal > div { max-width: 1120px; width: 100%; max-height: 92vh; padding: 18px 20px; }
.gd-in-modal > h2 { font-size: 18px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gd-in-modal > h2 .grow { flex: 1; }
.gd-in-modal .gd-map { height: 300px; top: 0; }
.gd-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; padding: 10px; border-radius: 12px; background: var(--gold-soft, #f6f0e5); }
.gd-who .in { min-height: 40px; font-size: 16px; font-weight: 700; }
.gd-who .gd-f span { color: var(--ink2, #2e333b); font-size: 12.5px; }
html[data-mode="dark"] .gd-who { background: var(--soft); }
html[data-mode="dark"] .gd-total:not(.wait), html[data-mode="dark"] .gd-no { background: #eef0f3; color: #111318; }
html[data-mode="dark"] .gd-total:not(.wait) .hint { color: #4d535c; }
@media (max-width: 899px) {
  .gd-top, .gd-msg { grid-template-columns: 1fr; } .gd-map { position: static; height: 280px; order: -1; }
  .gd-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); } .gd-name { grid-column: 2 / 4; } .gd-name + .gd-f { grid-column: 2; }
}
/* 고객 정리함 달력 (2026-11-14 사장님 "보기 어려워 — 달력 하나, 이번 달 손님 몇 명 정리됐는지"): ‹ 11월 › · 큰 숫자 4칸 · 날짜 칸 · 목록 */
.yb3-list { max-height: calc(100vh - 150px); overflow: auto; }
.yb3-mnav { display: flex; align-items: center; gap: 6px; padding: 10px 12px 4px; }
.yb3-mnav b { flex: 1; text-align: center; font-size: 17px; font-weight: 800; color: var(--ink, #111318); }
.yb3-mnav .nav { width: 34px; height: 34px; border: 1px solid var(--line, #e3e3df); border-radius: 9px; background: var(--card, #fff); font-size: 20px; line-height: 1; color: var(--ink, #111318); cursor: pointer; }
.yb3-mnav .nav:disabled { opacity: .35; cursor: default; }
.yb3-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 6px 10px 4px; }
.yb3-tile { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 7px; border: 1px solid var(--line, #e3e3df); border-radius: 10px; background: var(--card, #fff); cursor: pointer; }
.yb3-tile b { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--ink, #111318); font-variant-numeric: tabular-nums; }
.yb3-tile span { font-size: 12.5px; font-weight: 700; color: var(--ink2, #2e333b); white-space: nowrap; }
.yb3-tile.t-contract b { color: #13795b; } .yb3-tile.t-archive b { color: #6b6f76; } .yb3-tile:is(.t-open, .t-passed) b { color: #8a5410; }
.yb3-tile.on { border-color: var(--ink, #111318); box-shadow: inset 0 0 0 1px var(--ink, #111318); }
.yb3-msub { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 12px 6px; font-size: 13px; font-weight: 700; color: var(--ink2, #2e333b); }
.yb3-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 4px 10px 2px; }
.yb3-cal-w { text-align: center; font-size: 11.5px; font-weight: 800; color: var(--mute, #5d636c); padding: 2px 0; }
.yb3-cal-w.sun, .yb3-cal-d.sun .n { color: #c0362c; } .yb3-cal-w.sat { color: #2556c4; }
.yb3-cal-d { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; height: 36px; padding: 3px 0 0; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font: inherit; }
.yb3-cal-d.blank { cursor: default; }
.yb3-cal-d .n { font-size: 13px; font-weight: 700; color: var(--ink2, #2e333b); font-variant-numeric: tabular-nums; }
.yb3-cal-d.has .n { font-weight: 800; color: var(--ink, #111318); }
.yb3-cal-d:not(.blank):hover { background: var(--soft, #f4f3ef); }
.yb3-cal-d.today { border-color: var(--ink, #111318); }
.yb3-cal-d.on { background: var(--ink, #111318); } .yb3-cal-d.on .n { color: #fff; }
.yb3-cal-d .dots { display: flex; gap: 2px; }
.cd { display: inline-block; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; flex: none; }
.cd-new { background: #d08a12; } .cd-meet { background: #2556c4; } .cd-plan { background: #fff; box-shadow: inset 0 0 0 1.5px #2556c4; } .cd-contract { background: #13795b; }
.yb3-cal-d.on .cd-plan { background: transparent; box-shadow: inset 0 0 0 1.5px #9db8f2; }
.yb3-cal-key { display: flex; justify-content: center; gap: 10px; padding: 2px 10px 8px; border-bottom: 1px solid var(--line, #e3e3df); font-size: 11.5px; font-weight: 700; color: var(--mute, #5d636c); }
.yb3-cal-key span { display: inline-flex; align-items: center; gap: 4px; }
.yb3-mhead { padding: 7px 12px; background: var(--soft, #f4f3ef); border-bottom: 1px solid var(--line2, #eef1f4); font-size: 13px; font-weight: 800; color: var(--ink2, #2e333b); }
.yb3-mhead.row { display: flex; align-items: center; gap: 6px; } .yb3-mhead .grow { flex: 1; }
.yb3-item .grow { flex: 1; min-width: 0; }
.yb3-item-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge.c-carry { background: #fdf0dc; color: #8a5410; } .badge.c-new { background: #fff3cf; color: #7a5200; }
.yb3-roll { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; font-size: 13px; }
.yb3-roll label.row { gap: 6px; margin: 0; } .yb3-roll .sel { width: auto; min-height: 30px; padding: 2px 8px; font-size: 13px; }
.linkish { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--ink2, #2e333b); font: 700 13px var(--font, inherit); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.yb3-acts { flex-wrap: wrap; gap: 8px; } .yb3-acts .yb3-del { margin-left: auto; }
/* 목록에서 바로 동선 (2026-11-14) */
.yb3-item .cnt { align-items: center; }
.yb3-go-route { padding: 2px 9px; border: 1px solid var(--ink, #111318); border-radius: 999px; background: var(--ink, #111318); color: #fff; font: 800 12px var(--font, inherit); cursor: pointer; white-space: nowrap; }
.yb3-go-route:hover { background: #c9a463; border-color: #c9a463; color: #111318; }
html[data-mode="dark"] .yb3-go-route { background: #eef0f3; border-color: #eef0f3; color: #111318; }
html[data-mode="dark"] .badge.c-carry { background: #3a2f1c; color: #f3c27a; } html[data-mode="dark"] .badge.c-new { background: #3a331c; color: #f3d67a; }
html[data-mode="dark"] .yb3-cal-d.on { background: #eef0f3; } html[data-mode="dark"] .yb3-cal-d.on .n { color: #111318; }
html[data-mode="dark"] .yb3-tile.t-contract b { color: #5fd3a6; }
@media (max-width: 899px) { .yb3-list { max-height: none; overflow: visible; } }