/* brandshell.css — 홈페이지와 본앱이 **함께 쓰는** 머리띠·바닥 값. * * 왜 파일을 따로 두는가. 지시: "색·글꼴·높이는 홈페이지와 같은 값을 공유해서, * 한쪽을 고치면 다른 쪽도 따라가게." 값을 두 파일에 각각 적어 두면 언젠가 갈라진다. * 그래서 값은 **여기 한 곳에만** 있고, home.html 과 index.html 은 이 파일을 읽어 쓴다. * * 🚨 여기 있는 것은 '브랜드 띠' 의 값뿐이다. 본문 색(테마 여섯 개 × 밝게/어둡게)은 * 각자 파일에 그대로 있다 — 머리띠는 테마와 무관하게 남색으로 고정이고, * 본문만 테마를 따른다. * 🚨 이 파일은 같은 서버에서 내려온다. 바깥에서 받아오는 것은 하나도 없다 * (test-home 이 그것을 검사한다). */ :root{ /* ---- 색 ---- */ --bsNavy:#12213B; /* 머리띠 바탕 */ --bsNavy2:#0C1729; /* 바닥 바탕 */ --bsGold:#C9A227; /* 강조 */ --bsGold2:#A98B2E; --bsGold3:#E4C769; /* 밝은 금색 — 글자에 쓴다 */ --bsOn:#FFFFFF; /* 머리띠 위 글자 */ --bsOn2:#D7DEEA; /* 머리띠 위 흐린 글자 */ --bsOn3:#B9C6D9; /* 바닥 글자 */ --bsOn4:#93A2BA; /* 바닥 흐린 글자 */ --bsEdge:rgba(201,162,39,.22); /* 머리띠 아래 금색 실선 */ --bsLine:rgba(255,255,255,.12); /* 바닥 속 가는 줄 */ /* ---- 글꼴 ---- */ --bsSans:"Malgun Gothic","Noto Sans KR","Apple SD Gothic Neo","Noto Sans Bengali","Nirmala UI","Shonar Bangla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* ---- 높이 ---- */ /* 🚨 지시는 '휴대폰 56px 이하, PC 64px 안팎'. 실측해 보니 홈페이지 머리띠가 PC 58px · 휴대폰 55px 였다. 둘이 같아야 한다는 요구가 먼저라 **홈페이지 값에 맞췄다** — 지시한 범위 안이기도 하다(56 이하 / 64 안팎). 여기를 고치면 양쪽이 같이 움직인다. */ --bsHeadH:58px; --bsHeadHsm:56px; /* ---- 층 ---- */ /* 🚨 층수도 여기서 정한다. 모달·시트는 머리띠 **위**를, 드롭다운은 머리띠에 안 가리게. */ --bsZHead:40; --bsZDrop:60; --bsZOver:120; } /* ================= 머리띠 (본앱) ================= 홈페이지의 .top 과 같은 모양이되, 안에 들어가는 것만 본앱 것이다. */ .bshead{ position:sticky;top:0;z-index:var(--bsZHead); background:var(--bsNavy); border-bottom:1px solid var(--bsEdge); display:flex;align-items:center;gap:10px; padding:0 16px;height:var(--bsHeadH); font-family:var(--bsSans); /* 🚨 테마를 바꿔도 머리띠는 남색 고정이다. 본문만 테마를 따른다. */ color:var(--bsOn); color-scheme:dark; } @media (max-width:919px){ .bshead{height:var(--bsHeadHsm);padding:0 12px;gap:8px} } /* 🚨 좁은 화면 규칙은 이 파일 아래쪽 **'좁은 화면' 칸**에 모아 두었다. 여기에 적으면 안 된다 — .bsbtn · .bstimer · .bscomp 의 본디 값이 아래에 있고, 힘이 같은 규칙끼리는 **나중에 적힌 쪽이 이기기** 때문이다. 실제로 좁은 화면용 글자 크기·여백이 여기 적혀 있던 동안 한 번도 먹지 않았다(320px 에서도 큰 단추 그대로였고, 남은 시간 칸이 어느 폭에서나 60px 로 똑같이 재진 것이 그 증거다). */ /* ================= 제품 이름 묶음 (로고 + 이름 + 태그라인) ================= 🚨 홈페이지·본앱·로그인·바닥이 **이 한 벌**을 쓴다. 한쪽에만 따로 적어 두면 언젠가 한쪽에서만 글자가 달라진다 — 실제로 본앱 머리띠만 옛 이름으로 남았던 적이 있다. 🚨 머리띠의 제품 이름은 **그림(금색 Afdal ERP 글자)** 이다 — 네 언어 화면 어디서나 영문을 크게. 한국어·벵골어 화면에서는 그 말로 적은 이름을 밑에 작게 단다(brandMarkPaint). 🚨 자리가 모자랄 때 접는 차례: ① 태그라인 ② 이름 글자. 그러고 나면 마크만 남는다. 'Afdal' 만 남고 'ERP' 가 떨어지는 단계는 **없다** — 이름은 그림 한 장이다. */ .bsbrand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto; background:none;border:0;padding:0;cursor:pointer;font-family:inherit;min-width:0} .bsbrand img{width:auto;height:24px;display:block;flex:0 0 auto} /* 그림이 뜨면 이름 글자는 읽어 주는 기계에만 남긴다(그림이 안 뜨면 글자가 보인다) */ .bsbrand.hasword>b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .bsbrand .bsub.bsloc{letter-spacing:.04em;text-transform:none;font-size:11.5px} /* 영문 문구(CONNECTING PEOPLE · EMPOWERING BUSINESS)는 길다 — 촘촘히 적고, 넓은 화면에서만 단다 */ .bsbrand .bsub:not(.bsloc){letter-spacing:.1em;font-size:9.5px} @media (max-width:1099.98px){.bshead .bsbrand .bsub:not(.bsloc){display:none}} .bsbrand b{font-size:16.5px;letter-spacing:.01em;font-weight:800; white-space:nowrap; /* 'Afdal ERP' 는 절대 두 조각이 되지 않는다 */ color:var(--bsOn)} .bsbrand span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700; white-space:nowrap;color:var(--bsGold3)} /* ① 태그라인부터 접는다 */ @media (max-width:640px){.bsbrand span{display:none}} /* 머리띠 위의 단추들 — 홈페이지 언어 알약과 같은 모양 */ .bshead .bsbtn{ background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--bsOn2); border-radius:999px;padding:6px 11px;font-size:12.5px;cursor:pointer;font-family:inherit; line-height:1.2;white-space:nowrap;flex:0 0 auto; } .bshead .bsbtn:hover{color:var(--bsGold3);border-color:var(--bsGold2)} .bshead .bsbtn.on{background:var(--bsGold);border-color:var(--bsGold);color:#1A1405;font-weight:800} .bshead .bsbtn svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* 🚨 넓은 화면은 홈페이지처럼 알약 넷, 좁은 화면은 한 칸으로 접는다. 둘 다 markup 에 있고 CSS 가 가른다 — 자바스크립트로 가르면 폭이 바뀔 때마다 다시 그려야 한다. */ .bshead .bslangs{display:none;gap:4px;flex:0 0 auto} .bshead .bslangs .bsbtn{padding:4px 9px;font-size:11.5px} @media (min-width:1100px){ .bshead .bslangs{display:flex} .bshead #langbtn{display:none} } .bshead .bsspacer{flex:1;min-width:0} /* 회사 고르기 — 좁은 화면에서도 최소 폭을 지킨다 (test-brandfit) */ .bshead .bscomp{ background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);color:var(--bsOn); border-radius:999px;padding:6px 10px;font-size:12.5px;font-family:inherit; max-width:230px;min-width:104px;flex:0 1 auto;text-overflow:ellipsis; } .bshead .bscomp option{color:#141C2B;background:#fff} /* 로그아웃 타이머 — 도움말(?)이 있던 자리 */ .bshead .bstimer{ background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--bsOn2); border-radius:999px;padding:6px 10px;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; cursor:pointer;flex:0 0 auto;line-height:1.2;font-variant-numeric:tabular-nums; } .bshead .bstimer.warn{color:#1A1405;background:var(--bsGold);border-color:var(--bsGold);font-weight:800} /* ================= 머리띠 · 좁은 화면 ================= 🚨 여기가 **본디 값 뒤**다. 좁은 화면 규칙은 반드시 이 칸에 적는다 — 위쪽에 적으면 힘이 같은 본디 값에 밀려 한 줄도 안 먹는다(예전에 그렇게 죽어 있었다). 자리가 모자랄 때 접는 차례 — 일하는 데 필요한 것을 마지막까지 남긴다: ① 문구(CONNECTING PEOPLE …) 640px ② 언어 · 로그아웃 → ☰ 서랍으로 내려보냄 430px ③ 제품 이름 그림을 조금 줄임 360px 마크 · 회사 상자 · 남은 시간은 어느 폭에서도 사라지지 않는다. 'Afdal' 만 남고 'ERP' 가 떨어지는 단계는 어디에도 없다 — 이름은 그림 한 장이다. */ /* 🚨 600px 까지 같은 크기를 쓴다. 예전에는 430px 에서 끊겨 있어서, 431px 이 되는 순간 글자와 여백이 한꺼번에 큰 값으로 뛰는데 자리는 1px 밖에 안 늘어 머리띠가 넘쳤다. */ @media (max-width:600px){ .bshead{padding:0 8px;gap:4px} .bshead .bsbtn{padding:5px 8px;font-size:12px} .bshead .bstimer{padding:5px 7px;font-size:12px} /* 🚨 회사 상자가 줄어들 여지를 남겨 둔다. 예전에는 여기서도 최소 104px 이라 431px 에서 '720:00' 처럼 한 글자 긴 남은 시간이 오면 3px 넘컬다. */ .bshead .bscomp{font-size:12px;padding:5px 8px;min-width:88px;max-width:38vw} } /* ② 언어와 로그아웃을 ☰ 서랍으로 내려 이름 자리를 만든다. 🚨 왜 이 둘인가 — 재 보고 정했다. 430px 아래에서 이름 글자는 92px 을 먹는데 390px 머리띠에 남는 자리는 20px 뿐이라 72px 이 모자랐다. · 회사 상자를 최소까지 줄여야 42px · 남은 시간을 아이콘만 남겨야 30px · 둘을 다 해야 겨우 92px — 그러면 **일하는 데 필요한 두 가지** (지금 어느 회사 장부인가 · 얼마 뒤 잠기는가)를 둘 다 못 읽는다. · 언어(36~41px)와 로그아웃(39px)은 합쳐 83px 이고, 하루에 한 번 쓸까 말까 한다. 그래서 회사 상자와 남은 시간은 건드리지 않고 이 둘을 서랍으로 내렸다. 홈페이지도 좁아지면 언어를 ☰ 안으로 넣는다 — 같은 규칙이다. 🚨 내려보낸 자리(서랍 아래쪽)는 index.html 의 .navfoot 이 맡는다. 여기서 감추기만 하고 거기서 안 그리면 좁은 화면에서 **로그아웃할 길이 사라진다** — 둘은 한 쌍이다. */ @media (max-width:430px){ /* 언어·로그아웃을 감추는 줄은 이 파일 맨 아래에 있다 — .bshead #logoutbtn 의 본디 값(display:inline-flex)이 더 뒤에 있어서 여기에 적으면 그 줄에 밀린다. 한 번 그렇게 죽어 있었다. */ .bshead .bscomp{min-width:84px;max-width:34vw} /* 🚨 남은 시간은 보통 '29:14' 다섯 글자지만, 유휴 잠금을 꺼 둔 설치본에서는 '720:00' 여섯 글자가 된다(그때는 최대 시간이 남은 시간이 된다). 그 한 글자 때문에 넘치지 않도록 좁은 화면에서만 조금 줄여 둔다. */ .bshead .bstimer{padding:5px 6px;font-size:11.5px} } /* ③ 그래도 자리가 없으면 마지막으로 이름 글자를 접고 마크만 남긴다. 🚨 접는 폭을 실측해서 정했다 — 언어·로그아웃을 서랍으로 내리고 좋은 뒤에는, 긴 회사 이름(제에이츠시스템 국제무역 주식회사)과 여섯 글자짜리 남은 시간('720:00')을 동시에 놓고 재도 **320px 까지 넘치지 않는다.** 300px 에서야 10px 넘친다. 그래서 접는 자리를 320px 아래로 내렸다 — 실제 휴대폰 중 가장 좁은 것이 320px 이니, 이 규칙은 그보다 더 좁은 틀에 들어갔을 때를 위한 마지막 안전망이다. */ @media (max-width:360px){ .bshead{padding:0 6px;gap:3px} .bshead .bsbtn{padding:4px 6px;font-size:11.5px} .bshead .bstimer{padding:4px 6px;font-size:11.5px} .bshead .bscomp{min-width:72px;max-width:30vw;font-size:11.5px;padding:4px 6px} } /* 360px 보다 좁은 틀(320px 휴대폰)에서만 로고를 조금 낮춘다 — 비율은 그대로 */ @media (max-width:339.98px){.bshead .bsbrand img{height:34px}} /* ================= 본앱 머리띠 줄 세우기 (2026-09-28) ================= ☰ | 로고 | 회사 이름 칸 | 남은 시간. 🚨 로고는 높이 24px·폭은 그림 비율대로(width:auto) — 폭을 정하지 않는다. ☰·로고·남은 시간은 줄지 않고, **회사 이름 칸만** 남은 폭에 맞춰 줄며 긴 이름은 끝이 '…' 가 된다. 🚨 이 칸은 위의 좁은 화면 규칙들보다 **뒤에** 있어야 한다(힘이 같으면 뒤가 이긴다). */ .bshead .menubtn,.bshead .bsbrand,.bshead .bstimer{flex-shrink:0} .bshead .bsbrand img{height:44px;width:auto;max-width:none;flex:0 0 auto} /* 28u — 로고 전체라 높이를 올린다. 휴대폰 40px */ @media (max-width:919.98px){.bshead .bsbrand img{height:40px}} .bshead .bscomp{flex:1 1 auto;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden} @media (max-width:919.98px){.bshead .bscomp{max-width:none}} @media (max-width:339.98px){.bshead .bsbrand img{height:34px}} @media (max-width:319.98px){ .bsbrand b{display:none} } /* ================= 바닥 (본앱) ================= 홈페이지 footer 와 같은 모양. 화면에 붙이지 않고 본문 맨 아래에 둔다. */ .bsfoot{ /* 10.07l — 아이패드·아이폰 홈 막대 자리(안전 영역)까지 바닥글 색으로 채운다(꼬리말 아래 밝은 띠가 보이던 것) */ background:var(--bsNavy2);color:var(--bsOn3);padding:34px 0 calc(26px + env(safe-area-inset-bottom,0px));font-size:13px; font-family:var(--bsSans);margin-top:auto;color-scheme:dark; } .bsfoot .bswrap{max-width:1140px;margin:0 auto;padding:0 20px} .bsfoot .bsfgrid{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-start;justify-content:space-between} .bsfoot a{color:#CFD9E8;text-decoration:none} .bsfoot a:hover{color:var(--bsGold3);text-decoration:underline} .bsfoot .bsflinks{display:flex;gap:16px;flex-wrap:wrap} .bsfoot .bsftag{margin-top:6px;color:var(--bsOn4)} .bsfoot .bsvd{margin-top:16px;padding-top:13px;border-top:1px solid var(--bsLine); font-size:12px;line-height:1.75;color:var(--bsOn4)} .bsfoot .bsvdline{display:flex;flex-wrap:wrap;gap:1px 15px} .bsfoot .bsvdseg{white-space:nowrap} .bsfoot .bsvdaddr{white-space:normal} .bsfoot .bsver{margin-top:9px;font-size:11.5px;letter-spacing:.03em;color:var(--bsOn4)} /* 🚨 휴대폰에서는 아래쪽 메뉴 막대와 빠른작업 단추가 바닥을 가린다 — 그만큼 비워 둔다 */ @media (max-width:919px){.bsfoot{padding-bottom:104px}} @media (max-width:600px){.bsfoot .bswrap{padding:0 16px}} /* 한글은 낱말째로 넘어가게 (홈페이지와 같은 규칙) */ .bshead,.bsfoot{word-break:keep-all;overflow-wrap:break-word} /* ================= 인쇄 ================= 🚨 머리띠와 바닥은 인쇄에 **절대** 나오지 않는다. 세금계산서·급여명세서·증명서· 사원증·명함·라벨에 남색 띠가 찍히면 서류가 못 쓰게 된다. */ @media print{ .bshead,.bsfoot{display:none !important} } /* ================= 이름 · 설명 · 표시 가 나란히 선 줄 ================= 🚨 좁은 화면에서 옆으로 넘치던 **뿌리**가 여기 있었다. 세 칸을 한 줄에 가로로 세우고 이름 칸에 flex:0 0 auto 를 주면, 긴 이름이 폭을 먼저 다 가져가고 설명 칸에는 글자 한두 개 폭만 남는다. 그러면 설명이 "서명/을/맡긴/그/문서" 처럼 세로로 쌓이고, 표시(알약)는 카드 밖으로 밀려나고, 문서 전체가 화면보다 넓어진다. 한국어에서도 똑같이 깨진다 — 벵골어만의 문제가 아니다. 🚨 overflow-x:hidden 으로 가리지 않는다. 가리면 넘친 글자가 **읽을 수 없게** 될 뿐 배치는 그대로다. 배치 자체를 고친다. 🚨 이 규칙을 여기(공통)에 두는 이유: 외부 연동 목록이 나중에 바뀌거나 없어져도, 같은 모양의 줄이 어디에 새로 생기든 같은 자리에서 고쳐지게 하려는 것이다. 새로 만드는 줄에는 class="bsrow" 를 주고 이름·설명·표시에 각각 .nm · .ds · .bg 를 붙이면 된다. (홈페이지의 .extrow 는 옛 이름 그대로 받아 준다.) */ .bsrow,.extrow{ display:grid; /* 좁을 때 — 첫 줄: 이름(왼쪽) + 표시(오른쪽). 둘째 줄: 설명(전체 폭). */ /* 🚨 표시 칸의 상한은 **칸 쪽**에 건다(fit-content(40%)), 알약에 max-width 로 걸지 않는다. 격자 칸 안에서 % 는 '그 칸의 폭' 을 기준으로 풀리기 때문에, 알약에 max-width:40% 를 주면 48px 짜리 칸의 40% = 19px 가 되어 '국/내' 처럼 두 글자가 세로로 쪼개진다. 한 번 당해 본 자리다. fit-content(40%) = 필요한 만큼만, 다만 줄의 40% 를 넘지 않게. */ grid-template-columns:minmax(0,1fr) fit-content(40%); grid-template-areas:"nm bg" "ds ds"; column-gap:12px;row-gap:4px;align-items:start; } /* 🚨 이 한 줄이 없으면 위의 배치가 소용없다 — 격자·flex 칸의 최소 폭 기본값은 auto(= 내용 폭)라서, 긴 낱말 하나가 칸을 화면 밖까지 밀어낸다. */ .bsrow>*,.extrow>*{min-width:0} .bsrow>.nm,.extrow>b{ grid-area:nm; /* 🚨 이름에 white-space:nowrap 를 주지 않는다. 한 줄로 버티려다 옆으로 넘친다. */ white-space:normal; overflow-wrap:anywhere; /* 끊을 데 없는 긴 낱말(URL·복합어)도 끊는다 */ word-break:keep-all; /* 한국어는 낱말째로 넘어간다 */ } .bsrow>.ds,.extrow>span:not(.extwhere):not(.bg){ grid-area:ds; overflow-wrap:anywhere;word-break:keep-all; } .bsrow>.bg,.extrow>.extwhere{ grid-area:bg;justify-self:end;text-align:right; flex:0 0 auto; /* 줄어들지 않는다 */ /* 알약·배지는 카드 안에서 줄바꿈된다 — 한 줄로 버티면 그것이 곧 넘침이다. 🚨 여기서는 anywhere 를 쓰지 않는다. anywhere 는 '최소 폭 = 한 글자' 로 만들어 격자가 이 칸을 한 글자까지 짓눌러도 된다고 여기게 한다. break-word 는 자리를 잴 때는 낱말째로 세고, 정말 넘칠 때만 끊는다 — 우리가 원하는 것은 그쪽이다. */ white-space:normal;overflow-wrap:break-word; } /* 넓은 화면에서만 세 칸을 한 줄에 세운다 — 설명이 가장 넓다. 🚨 1100px 아래에서는 위의 두 줄 배치를 그대로 쓴다. 600~1100px 에서 세 칸을 세우면 설명 칸이 다시 좁아져 같은 증상이 돌아온다. */ @media (min-width:1100px){ .bsrow,.extrow{ grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) max-content; grid-template-areas:"nm ds bg"; align-items:baseline; } /* 넓은 화면에서는 상한이 필요 없다 — 위의 fit-content 대신 max-content 를 쓴다 */ } /* 어디에 있든 그림이 칸보다 넓어지지 않게 — 넘침의 흔한 두 번째 원인 */ img,svg,video,canvas{max-width:100%} /* 🚨 입력칸이 줄어들지 않아 생기는 넘침 — flex·격자 칸의 최소 폭 기본값은 auto(= 내용 폭)이고, 입력칸은 그 위에 브라우저가 정한 기본 폭(size 속성, 대략 스무 글자)까지 얹는다. 그래서 `flex:1` 을 줘도 320px 화면에서 314px 를 고집하다가 옆으로 삐져나간다. 한 곳에서 풀어 둔다 — 새로 만드는 화면마다 다시 걸리지 않게. */ input,select,textarea{min-width:0;max-width:100%} /* ================= 머리띠 단추 — 남색 위의 한 벌 ================= 🚨 머리띠가 남색이 되면서, 밝은 화면용 옷(--surface2 바탕 · --line 테두리)을 그대로 입고 있던 단추들이 색이 뒤섞였다. 메뉴(☰)가 가장 심했다 — 밝은 알약 위에 흰 줄이라 거의 안 보였다. 여기서 한 벌로 맞춘다. 🚨 모양 값은 여기에만 적는다. index.html 의 인라인