goiintra/public_html/assets/css/customer_access.css

64 lines
2.8 KiB
CSS

/* =====================================================================
* customer_access.css
* Access Time / Closing Days 표시(칩) + 클릭 편집 박스 공용 스타일
* - customer_detail.php, map.php, shortInfo_lib.php, customer_access_display.php 공용
* - 클래스 기준(스코프 없음)이라 어느 화면에 넣어도 동일하게 적용됨
* ===================================================================== */
/* 필드 박스 (흰색) */
.at-field, .cd-field {
background:#fff; border:1px solid #ccc; border-radius:4px;
padding:8px 10px; min-height:36px; height:100%; box-sizing:border-box;
}
/* td 안에서 박스가 셀 높이를 채우도록 (td height:100% 는 auto 로 계산되므로 1px 시드) */
.td-text-info:has(> .box-clickable) { height:1px; }
/* Access Time */
.at-wrap { display:flex; flex-direction:column; gap:2px; }
.at-row { display:flex; align-items:center; gap:8px; line-height:1.6; }
.at-row.at-off { opacity:.55; }
.at-dow { display:inline-block; width:36px; font-weight:600; font-size:14px; color:#444; }
.at-dow.at-wknd { color:#c0392b; }
.at-win { display:flex; flex-wrap:wrap; gap:5px; }
.at-chip {
display:inline-block; padding:1px 8px; border-radius:4px;
background:#eef3fb; border:1px solid #cfddf2; color:#23548f;
font-size:14px; white-space:nowrap;
}
.at-dash { color:#bbb; font-size:14px; }
/* Closing Days */
.cd-wrap { display:flex; flex-direction:column; gap:5px; }
.cd-chip {
display:inline-flex; align-items:center; gap:6px;
padding:2px 9px; border-radius:4px; align-self:flex-start;
background:#fbf1f1; border:1px solid #e8c9c9; color:#a23a3a;
font-size:14px; white-space:nowrap;
}
.cd-range { font-weight:600; }
.cd-note { color:#8a6d3b; font-style:italic; font-size:13px; }
.cd-empty { color:#bbb; font-size:14px; }
/* 박스 전체 클릭 → 수정 팝업 */
.box-clickable { cursor:pointer; position:relative; transition:border-color .12s, background-color .12s; }
.box-clickable:hover { border-color:#7fb069; background:#fafdf7; }
.box-clickable::after {
content:"\270E"; position:absolute; top:5px; right:8px;
font-size:13px; color:#bbb; line-height:1;
}
.box-clickable:hover::after { color:#7fb069; }
/* "지금 닫힘" 경고 배지 (마커/Info버튼/모달 Access Time 공용) */
.closed-badge {
display:inline-flex; align-items:center; justify-content:center;
min-width:18px; height:18px; padding:0 5px; margin-left:6px;
background:#e53935; color:#fff; border-radius:9px;
font-size:13px; font-weight:700; line-height:1; vertical-align:middle;
}
/* 오늘 요일 강조 (주황 하이라이트 + 붉은 테두리) */
.at-row.at-today {
background:#fff6da; border:1px solid #e53935; border-radius:4px;
padding:1px 6px; margin:0 -7px;
opacity:1 !important; /* 오늘은 휴무여도 흐리게 하지 않음 */
}