/* 온라인 문의 창 — 지사안내(branch.php)·지사모집(branch-recruit.php)이 같이 쓴다 */
.branch-modal-box .hp-field { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.branch-modal-overlay { position: fixed; inset: 0; background: rgba(20,14,18,.55); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.branch-modal-overlay.open { opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s; }
.branch-modal-box { background: #fff; border-radius: 16px; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; padding: 32px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.25); transform: translateY(16px) scale(.98); transition: transform .28s cubic-bezier(.2,.8,.3,1); }
.branch-modal-overlay.open .branch-modal-box { transform: none; }
@media (prefers-reduced-motion: reduce) { .branch-modal-overlay, .branch-modal-box { transition: none; } }
.branch-modal-box h2 { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 20px; }
.branch-modal-box h2 span { color: var(--pink); }
.branch-modal-close { position: absolute; top: 16px; right: 16px; background: var(--wash); border: none; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-3); cursor: pointer; transition: all .2s; }
.branch-modal-close:hover { background: var(--pink); color: #fff; }
.branch-modal-box .form-group { margin-bottom: 16px; }
.branch-modal-box label { display: block; font-size: .87rem; font-weight: 600; color: var(--gray); margin-bottom: 6px; }
.branch-modal-box .req { color: var(--pink); }
.branch-modal-box input, .branch-modal-box textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: .93rem; box-sizing: border-box; font-family: inherit; transition: border .2s; }
.branch-modal-box input:focus, .branch-modal-box textarea:focus { outline: none; border-color: var(--pink); }
/* 한 줄 칸은 높이를 고정해 브라우저마다 같게 (날짜 칸은 크롬·아이폰에서 저마다 높이가 달랐다) */
.branch-modal-box input:is([type="text"], [type="tel"], [type="date"]):not(.hp-field) { height: 40px; }
/* 아이폰 사파리는 날짜 칸을 자체 모양(회색 배경·가운데 정렬)으로 그리고, 비어 있으면 높이가 줄며
   폭이 창 밖으로 나가기도 한다 → 기본 모양을 걷어내고 다른 칸과 같은 폭·왼쪽 정렬로 */
.branch-modal-box input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; background: #fff; text-align: left; }
.branch-modal-box input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.branch-modal-box .bm-sub { font-weight: 400; color: var(--ink-3); }
.bm-choice { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.bm-choice legend { font-size: .87rem; font-weight: 600; color: var(--gray); margin-bottom: 6px; padding: 0; }
.bm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.branch-modal-box .bm-pills label { position: relative; margin: 0; font-weight: 500; cursor: pointer; }
.branch-modal-box .bm-pills input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.bm-pills span { display: block; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: .88rem; color: var(--gray); background: #fff; transition: border-color .15s, background .15s, color .15s; }
.bm-pills label:hover span { border-color: var(--pink-light); }
.bm-pills input:checked + span { border-color: var(--pink); background: var(--pink-pale); color: var(--pink-dark); font-weight: 700; }
.bm-pills input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.bm-agree { background: var(--wash); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.branch-modal-box .bm-agree label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--dark); cursor: pointer; }
.branch-modal-box .bm-agree input { width: auto; padding: 0; margin: 0; flex: none; accent-color: var(--pink); }
.bm-agree p { font-size: .78rem; line-height: 1.6; color: var(--ink-3); margin: 0; word-break: keep-all; }
.bm-agree a { color: var(--pink); }
.branch-modal-msg { font-size: .85rem; color: #dc3545; margin-bottom: 10px; min-height: 1em; }
.branch-modal-submit { width: 100%; padding: 13px; background: var(--pink); color: #fff; border: none; border-radius: 8px; font-size: .95rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; }
.branch-modal-submit:hover { background: var(--pink-dark); }
.branch-modal-submit:disabled { background: #ddd; cursor: not-allowed; }
.branch-modal-success { text-align: center; padding: 20px 0; font-size: .95rem; color: var(--dark); line-height: 1.8; }
.branch-modal-success i { font-size: 2.6rem; color: #28a745; display: block; margin-bottom: 14px; }