/* ===================================================================== BYB(아파트) 앱 디자인 시스템 — 공용 토큰 + 컴포넌트 --------------------------------------------------------------------- - 목표: cafe.php / guesthouse.php 등에 흩어진 BYB 토큰·컴포넌트를 한 곳으로. - 채택: 화면 를 달면 이 시스템을 사용한다. - 안전: 토큰(:root)을 제외한 모든 규칙을 .byb-app 로 스코프해서, 기존 하이링크(default.css) 화면에는 전혀 영향이 없다(옵트인). - 폰트: Pretendard @font-face 는 default.css 에 이미 선언됨(같은 head 로드). ===================================================================== */ :root{ --pri:#2A66D8; --pri-press:#1e57c2; /* 포인트/누름 (아파트링크 로고색 #2A66D8) */ --ink:#1B1C1E; --sub:#8A9099; /* 본문/보조 텍스트 */ --line:#ECEEF1; --bg:#F4F5F7; /* 구분선/배경 */ --ok-bg:#E7F7EE; --ok:#12A85B; /* 성공(토스트/배지) */ --req-bg:#FFEAEA; --req:#F0484A; /* 경고/위험 */ --warn-bg:#FFF4E5; --warn:#F5A623; /* 주의 */ --card-radius:16px; --card-shadow:0 1px 4px rgba(20,30,50,.05); } /* ── 베이스 (옵트인) ──────────────────────────────────────── */ body.byb-app{ background:var(--bg); color:var(--ink); font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif; max-width:480px; margin:0 auto; position:relative; font-size:14px; letter-spacing:-0.01em; } .byb-app *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } .byb-app button{ font-family:inherit; } .byb-app a{ color:inherit; text-decoration:none; } .byb-app .screen{ display:none; min-height:100vh; padding-bottom:96px; } .byb-app .screen.on{ display:block; } .byb-app .wrap{ padding:16px; } /* ── 헤더 ─────────────────────────────────────────────────── */ .byb-app .topbar{ position:sticky; top:0; z-index:30; height:52px; display:flex; align-items:center; gap:8px; padding:0 8px; background:#fff; border-bottom:1px solid var(--line); } .byb-app .topbar h1{ font-size:17px; font-weight:700; margin:0; flex:1; } .byb-app .iconbtn{ width:40px; height:40px; border:none; background:transparent; font-size:24px; line-height:1; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; } /* ── 카드 ─────────────────────────────────────────────────── */ .byb-app .card{ background:#fff; border-radius:var(--card-radius); padding:16px; box-shadow:var(--card-shadow); } .byb-app .card + .card{ margin-top:12px; } /* ── 섹션 타이틀 / 키-밸류 ────────────────────────────────── */ .byb-app .sec-title{ font-size:15px; font-weight:800; margin:22px 0 8px; } .byb-app .kv{ background:#F7F8FA; border-radius:14px; padding:6px 14px; } .byb-app .kv-row{ display:flex; padding:11px 0; font-size:13.5px; border-bottom:1px solid #EFF1F4; } .byb-app .kv-row:last-child{ border-bottom:none; } .byb-app .kv-row .k{ width:92px; color:var(--sub); flex:0 0 auto; } .byb-app .kv-row .v{ color:var(--ink); font-weight:500; flex:1; } /* ── 탭 ───────────────────────────────────────────────────── */ .byb-app .tabs{ display:flex; border-bottom:1px solid var(--line); } .byb-app .tab{ flex:1; text-align:center; padding:13px 0; font-size:14.5px; font-weight:600; color:var(--sub); background:none; border:none; cursor:pointer; position:relative; } .byb-app .tab.on{ color:var(--ink); font-weight:700; } .byb-app .tab.on::after{ content:''; position:absolute; left:20%; right:20%; bottom:-1px; height:2px; background:var(--ink); border-radius:2px; } /* ── 배지 / 칩 ────────────────────────────────────────────── */ .byb-app .badge-open{ display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--ok-bg); color:var(--ok); } .byb-app .badge-closed{ background:#F0F1F4; color:#8A9099; } .byb-app .chip{ display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:#EEF4FF; color:var(--pri); } /* ── 버튼 ─────────────────────────────────────────────────── */ .byb-app .btn{ border:none; border-radius:12px; font-weight:700; cursor:pointer; font-family:inherit; } .byb-app .btn-pri{ background:var(--pri); color:#fff; } .byb-app .btn-pri:active{ background:var(--pri-press); } .byb-app .btn-pri:disabled{ background:#C5CBD3; } .byb-app .btn-ghost{ background:#F0F1F4; color:#4B5159; } .byb-app .btn-line{ background:#fff; color:var(--ink); border:1px solid #D7DCE3; } .byb-app .btn-block{ display:block; width:100%; height:52px; font-size:16px; } /* ── 하단 고정 액션바 ─────────────────────────────────────── */ .byb-app .actionbar{ position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto; background:#fff; border-top:1px solid var(--line); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:flex; gap:10px; align-items:center; z-index:40; } /* ── 바텀시트/모달 마스크 ─────────────────────────────────── */ .byb-app .mask{ position:fixed; inset:0; background:rgba(17,20,26,.5); display:none; align-items:center; justify-content:center; z-index:60; padding:24px; } .byb-app .mask.on{ display:flex; } .byb-app .sheet{ background:#fff; border-radius:20px; padding:22px; width:100%; max-width:360px; } /* ── 토스트 (앱 내부 알림, CRM crmToast 와 별개) ─────────── */ .byb-app .toast{ position:fixed; left:50%; bottom:108px; transform:translateX(-50%); background:rgba(17,20,26,.9); color:#fff; padding:11px 18px; border-radius:24px; font-size:13.5px; z-index:80; display:none; max-width:88%; } .byb-app .toast.on{ display:block; } /* ── 빈 상태 ──────────────────────────────────────────────── */ .byb-app .byb-empty{ text-align:center; color:#A6ACB4; padding:48px 16px; font-size:14px; } .byb-app .byb-empty .e-ic{ font-size:34px; margin-bottom:10px; } .byb-app .byb-empty .e-t{ font-size:15px; font-weight:700; color:#8A9099; margin-bottom:4px; } /* ── 리스트 행 ────────────────────────────────────────────── */ .byb-app .list-row{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); } .byb-app .list-row:last-child{ border-bottom:none; } /* ── 홈 메뉴 그리드 (BYB 4열: 라운드 컬러 아이콘박스) ──────── */ .byb-app .byb-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px 6px; } .byb-app .byb-grid .g-item{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; color:var(--ink); } .byb-app .byb-grid .g-ic{ width:52px; height:52px; border-radius:16px; background:#EEF4FF; display:flex; align-items:center; justify-content:center; font-size:24px; } .byb-app .byb-grid .g-ic img{ width:26px; height:26px; } .byb-app .byb-grid .g-item span{ font-size:12.5px; font-weight:600; color:#4B5159; line-height:1.3; }