/* ── 베누스토 공개 홈 — 2026-08 디자인 개편 (B안: 아이보리 분할)
   레퍼런스 실측 규칙: 포인트 색 없음(강조는 다크 #2F2C29 하나),
   모서리 3px 고정, Pretendard, 아이보리 띠(#F4F2EE)로 구역 분할.
   bn- 접두사로 포털 스타일과 분리. 편집 모드 훅(data-sk 등)은 그대로 유지. ── */
:root {
  /* 2026-08-23 (2차): 레퍼런스 3곳의 무채색에 맞춤. 채도를 거의 0까지 내렸다.
     실측 — 소프트콘크리트 글자 #222222 / 림디자인 #333333·다크블록 #1F1F1F / 리썸 #2D2D2D.
     띠 채도 변화: #EEEBE2(26%) → #F4F2EE(21%) → #F4F4F2(4%) */
  --bn-band: #F4F4F2;   /* 구역 구분 배경 (거의 무채색) */
  --bn-navbg: #FDFDFC;  /* 상단 메뉴바 — 거의 순백 (F4F4F2 → FAFAF9 → FDFDFC) */
  --bn-bg: #FDFDFC;     /* 본문 바탕 — 상단 메뉴바와 같은 톤.
                           순백(#FFF)이면 메뉴바·페이지머리와 색이 갈라져 보인다 (2026-08-23) */
  --bn-ink: #282828;    /* 글자 — 레퍼런스 #222~#333 의 가운데 */
  --bn-sub: #6C6C6A;    /* 보조 글자 */
  --bn-dim: #8E8E8B;    /* 흐림 글자 */
  --bn-line: #E6E6E3;   /* 선 */
  --bn-dark: #262626;   /* 강조 (유일한 강조색) */
  --bn-menu: #55554F;   /* 상단 메뉴 글자 — 검정보다 옅은 회색기 */
  --bn-r: 3px;          /* 모서리 — 전부 3px 고정 */
  --bn-photo-r: 8px;    /* 사진만 예외로 조금 더 둥글게 (2026-08-23 사장님 지시) */
  --bn-navh: 88px;      /* 상단 띠 높이 (62 → 124 → 100 → 88px)
                           대문 높이와 모바일 메뉴 위치가 이 값에 딸려 있다 */
}
body { background: var(--bn-bg); color: var(--bn-ink); }
/* 내용이 짧은 페이지(진행 과정·약속 등)에서도 하단이 화면 맨 아래에 붙게 한다 */
/* 위(메뉴바)·아래(푸터)는 밝은 #FDFDFC, 가운데 본문은 아이보리 #F4F4F2 —
   대문과 같은 배치다. 가운데가 도드라져야 시선이 거기로 간다 (2026-08-23 사장님 지시) */
.container.bn-main { max-width: none; padding: 0; display: flex; flex-direction: column;
                     background: var(--bn-band); }
.site-footer { display: none; } /* 공개 홈은 자체 푸터 사용 */

/* 내비게이션 — 아이보리 불투명 띠 */
.bn-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 26px;
  background: var(--bn-navbg);
  border-bottom: 1px solid rgba(45, 45, 45, .10);
  padding: 0 clamp(18px, 5vw, 56px); height: var(--bn-navh);
}
.bn-logo { text-decoration: none; line-height: 1.15; }
.bn-logo .en {
  display: block; font-size: 17px; letter-spacing: .3em;
  color: var(--bn-ink); font-weight: 600;
}
.bn-logo .ko { display: block; font-size: 10.5px; letter-spacing: .5em; color: var(--bn-sub); }
.bn-nav-links { display: flex; gap: 22px; margin-left: auto; }
.bn-nav-links a {
  /* 검정(#282828)이 너무 진해서 회색기를 섞었다 (2026-08-23 사장님 지시).
     마우스를 올리면 원래 진한 색으로 돌아와 눌리는 곳이라는 게 보인다 */
  color: var(--bn-menu); text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.bn-nav-links a:hover { color: var(--bn-ink); border-bottom-color: var(--bn-dark); }
.bn-nav-links a.bn-active { color: var(--bn-ink); }
/* SNS 아이콘 — 블로그·인스타그램·유튜브 (2026-08-23 사장님 지시: 작게).
   18px 정사각. 색은 글자색 하나로 간다 — 브랜드색(초록·보라·빨강)을 넣지 말 것,
   이 홈페이지는 강조색이 다크 하나뿐이다 */
.bn-sns { display: inline-flex; align-items: center; gap: 10px; }
/* .bn-nav-links a 의 밑줄(border-bottom)·여백이 아이콘에 걸리지 않게 덮어쓴다 */
.bn-nav-links .bn-sns a {
  display: inline-flex; padding: 0; border-bottom: 0;
  color: var(--bn-ink); opacity: .78; transition: opacity .15s;
}
.bn-nav-links .bn-sns a:hover { opacity: 1; border-bottom: 0; }
.bn-sns svg { width: 22px; height: 22px; display: block; }   /* 18 → 22px 로 키움 (2026-08-23) */

/* 오른쪽 끝 「업무 도구」 — 세로선으로 구분한 작은 글자 */
.bn-login {
  color: var(--bn-sub); text-decoration: none; font-size: 12.5px;
  border-left: 1px solid var(--bn-line); padding: 4px 0 4px 18px;
  white-space: nowrap;
}
.bn-login:hover { color: var(--bn-dark); }
@media (max-width: 720px) { .bn-nav-links { display: none; } }

/* 공통 섹션 */
.bn-section { padding: clamp(48px, 8vw, 96px) clamp(18px, 6vw, 72px); }
.bn-inner { max-width: 1120px; margin: 0 auto; }
.bn-h2 {
  font-size: clamp(24px, 3.4vw, 34px); font-weight: 500; line-height: 1.35;
  margin: 0 0 14px; color: var(--bn-ink); letter-spacing: -.01em;
}
.bn-lead { color: var(--bn-sub); font-size: 15.5px; margin: 0; max-width: 560px; }

/* 히어로 — 좌측 글 / 우측 시공 사진 풀블리드 (사진이 화면 오른쪽 끝까지 닿는다) */
.bn-hero { overflow: hidden; background: var(--bn-band); padding: 0; }
.bn-hero .bn-inner {
  max-width: none; margin: 0; padding: 0;
  /* 글 칸은 620px 에서 멈추고, 남는 폭은 전부 사진이 가져간다.
     1fr 1.08fr 로 두면 넓은 모니터에서 글 칸이 900px 넘게 벌어져 글이 왼쪽 구석에 몰린다 */
  display: grid; grid-template-columns: minmax(320px, 620px) 1fr; gap: 0;
  /* 대문은 첫 화면 하나로 끝난다 — 나머지는 메뉴로 들어가서 본다.
     상단 띠 + 아래 줄 78px 을 뺀 나머지를 대문이 채운다 (레퍼런스 3곳 모두 딱 한 화면) */
  min-height: calc(100vh - var(--bn-navh) - 78px);
}
.bn-hero .bn-inner > div:first-child {
  /* 왼쪽 여백을 오른쪽보다 넉넉히 — 화면 끝에 바짝 붙지 않게 (2026-08-23).
     가운데 정렬도 해봤으나 왼쪽 정렬이 낫다는 판단으로 되돌림 */
  padding: clamp(32px, 4vw, 64px) clamp(20px, 3.4vw, 56px)
           clamp(32px, 4vw, 64px) clamp(28px, 5vw, 92px);
  /* 글 묶음(제목·소개·링크)을 세로 가운데에 둔다.
     예전엔 소개문에 margin-bottom:auto 를 줘서 링크를 바닥까지 밀었는데,
     대문이 한 화면(760px)으로 커지면서 가운데가 458px 텅 비었다 */
  display: flex; flex-direction: column; justify-content: center;
}
.bn-h1 {
  /* 화면이 넓어지면 같이 커진다 — 1280px 에서 33px, 넓은 모니터에서 최대 44px */
  font-size: clamp(26px, 2.6vw, 44px); font-weight: 500; line-height: 1.44;
  letter-spacing: -.01em; color: var(--bn-ink); margin: 0 0 18px;
}
.bn-h1 em { font-style: normal; color: inherit; }
.bn-hero-sub {
  color: var(--bn-sub); font-size: clamp(14.5px, 0.95vw, 17px); line-height: 1.85;
  margin: 0; max-width: 34ch;
}
.bn-cta-row { margin-top: 32px; display: flex; gap: 24px; flex-wrap: wrap; }
/* CTA — 버튼 아님. 밑줄 텍스트 링크 (.primary/.ghost 구분 없이 같은 모양) */
.bn-cta {
  display: inline-block; text-decoration: none; font-weight: 500; font-size: 13.5px;
  color: var(--bn-ink); background: none; border: 0;
  border-bottom: 1px solid var(--bn-ink); border-radius: 0; padding: 0 0 4px;
}
.bn-cta:hover { opacity: .65; }

/* 히어로 사진 — 칸을 꽉 채운다 (radius 0, 여백 0) */
.bn-hero .bn-inner > div:last-child { position: relative; overflow: hidden; }
.bn-hero .bn-inner > .bn-hero-media { position: relative; overflow: hidden; }
.bn-hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 0; display: block;
}
/* ── 대문 사진 슬라이드 (최대 4장, 좌우 화살표) ──
   슬라이드는 겹쳐 놓고 켜진 것만 보인다. 화살표·점은 슬라이드 바깥에 둔다 —
   안에 넣으면 수정 모드에서 화살표를 눌러도 사진 고르기 창이 열린다 */
.bn-hero-media { position: relative; overflow: hidden; }
.bn-hero-slides { position: absolute; inset: 0; }
.bn-hero-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  /* 5초마다 저절로 넘어간다 — 전환이 짧으면 툭 끊겨 보여서 넉넉히 준다 */
  /* 천천히 바뀌게 — 짧으면 툭 끊겨 보인다 (2026-08-23 사장님 지시로 .35 → .9 → 1.6초) */
  /* 겹쳐 넘어가는 시간만 늘린다 — 한 장이 머무는 시간(STAY 4초)은 그대로.
     sine in-out 곡선이라 시작·끝이 부드럽다 (2026-08-23: .35 -> .9 -> 1.6 -> 2.2초) */
  transition: opacity 2.2s cubic-bezier(.37, 0, .63, 1);
}
.bn-hero-slide.on { opacity: 1; pointer-events: auto; }
.bn-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .82); color: var(--bn-ink);
  font-size: 26px; line-height: 1; padding: 0 0 3px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.bn-hero-arrow:hover { background: #fff; }
.bn-hero-arrow.prev { left: 16px; }
.bn-hero-arrow.next { right: 16px; }
.bn-hero-dots {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 3; display: flex; gap: 7px;
}
.bn-hero-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .55);
}
.bn-hero-dot.on { background: #fff; }
@media (max-width: 820px) {
  .bn-hero-arrow { width: 38px; height: 38px; font-size: 22px; }
  .bn-hero-arrow.prev { left: 10px; }
  .bn-hero-arrow.next { right: 10px; }
}

/* 사진이 없을 때의 빈 판 (편집 모드에서 자리 표시) */
.bn-hero-empty { position: absolute; inset: 0; background: var(--bn-line); border-radius: 0; }
@media (max-width: 820px) {
  .bn-hero .bn-inner { grid-template-columns: 1fr; min-height: 0; }
  .bn-hero .bn-inner > div:last-child,
  .bn-hero .bn-inner > .bn-hero-media { min-height: 240px; }
}

/* 구역 배경 교대 (대문 아이보리 → 서비스 흰색 → 시공 사례 아이보리 → CTA 흰색 → 푸터 아이보리) */
.bn-services { background: transparent; }
.bn-folio-home { background: var(--bn-band); }
.bn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; }
@media (max-width: 860px) { .bn-cards { grid-template-columns: 1fr; } }
.bn-card {
  background: #FFFFFF; border: 1px solid var(--bn-line); border-radius: var(--bn-r);
  padding: 30px 26px;
}
.bn-card svg { width: 36px; height: 36px; stroke: var(--bn-dark); margin-bottom: 16px; }
.bn-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--bn-ink); }
.bn-card p { margin: 0; color: var(--bn-sub); font-size: 14px; line-height: 1.75; }

/* 포트폴리오 */
/* minmax(0,1fr): 편집 모드의 현장 이름(nowrap)이 길어도 열이 밀려 벌어지지 않게 —
   1fr 만 쓰면 이름 긴 현장이 있는 열만 넓어져 사진 크기가 제각각이 된다 (폴드에서 실제 발견) */
.bn-folio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
@media (max-width: 860px) { .bn-folio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bn-folio { grid-template-columns: 1fr; } }
.bn-folio-card {
  border-radius: var(--bn-photo-r); overflow: hidden; border: 1px solid var(--bn-line);
  background: #FFFFFF; text-decoration: none;
}
.bn-folio-visual { height: 190px; position: relative; overflow: hidden; background: var(--bn-band); }
.bn-folio-visual .tag {
  position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.9);
  color: var(--bn-ink); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 10px; border-radius: var(--bn-r);
}
.bn-folio-body { padding: 16px 18px 18px; }
.bn-folio-body h4 { margin: 0 0 5px; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; color: var(--bn-ink); }
.bn-folio-body p { margin: 0; font-size: 12.5px; color: var(--bn-sub); line-height: 1.6; }
.bn-folio-note { margin-top: 18px; font-size: 12px; color: var(--bn-dim); }

/* 진행 과정 */
.bn-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 40px; }
@media (max-width: 860px) { .bn-steps { grid-template-columns: 1fr 1fr; } }
.bn-step { border-top: 1px solid var(--bn-line); padding-top: 16px; }
.bn-step.on { border-top: 2px solid var(--bn-dark); padding-top: 15px; }
.bn-step .no { font-size: 12.5px; color: var(--bn-dim); letter-spacing: .14em; font-weight: 600; }
.bn-step h4 { margin: 6px 0 6px; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; color: var(--bn-ink); }
.bn-step p { margin: 0; font-size: 12.5px; color: var(--bn-sub); line-height: 1.65; }

/* 약속 — 아이보리 띠 */
/* 약속 페이지도 다른 하위 페이지와 같은 톤 — 색이 아니라 선으로 나눈다 */
.bn-promise { background: transparent; }   /* 가운데 아이보리 바탕 그대로 */
.bn-promise .bn-h2 { color: var(--bn-ink); }
.bn-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 48px); margin-top: 36px; }
@media (max-width: 860px) { .bn-promise-grid { grid-template-columns: 1fr; } }
.bn-promise-item { border-left: 2px solid var(--bn-dark); padding-left: 18px; }
.bn-promise-item h4 { color: var(--bn-ink); margin: 0 0 8px; font-size: 16.5px; font-weight: 500; letter-spacing: -.01em; }
.bn-promise-item p { color: var(--bn-sub); margin: 0; font-size: 13.5px; line-height: 1.75; }

/* 상담 문의 */
.bn-contact .bn-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .bn-contact .bn-inner { grid-template-columns: 1fr; } }
.bn-phone {
  font-size: clamp(26px, 4vw, 40px); font-weight: 600;
  color: var(--bn-ink); letter-spacing: -.01em; text-decoration: none; display: inline-block;
  border-bottom: 2px solid var(--bn-dark); padding-bottom: 4px; margin: 8px 0 16px;
}
.bn-contact-info { color: var(--bn-sub); font-size: 14px; line-height: 2; }
.bn-contact .bn-card { border: 1px solid var(--bn-line); }
/* 문의 폼의 '보내기'는 실제 동작 버튼이라 밑줄 링크가 아니라 버튼 모양을 유지한다 */
.bn-contact button.bn-cta {
  font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
  background: var(--bn-dark); color: #fff; border-radius: var(--bn-r); padding: 12px 24px;
}
.bn-contact button.bn-cta:hover { opacity: 1; background: #1E1C1A; }

/* 푸터 — 아이보리 띠, 왼쪽 회사명 / 오른쪽 끝 전화번호 */
.bn-footer {
  margin-top: auto;              /* 페이지가 짧아도 화면 맨 아래로 */
  background: var(--bn-bg);      /* 바탕과 같은 톤 — 위쪽 선으로만 나뉜다 */
  border-top: 1px solid rgba(45, 45, 45, .12);
  padding: 20px clamp(18px, 6vw, 72px); display: flex; gap: 16px; flex-wrap: wrap;
  align-items: center; color: var(--bn-sub); font-size: 12px;
  min-height: 78px; box-sizing: border-box;   /* 어느 페이지에서나 같은 높이 */
}
/* 회사명이 왼쪽 끝을 잡고 나머지를 오른쪽으로 밀어낸다 */
.bn-footer .copy { margin-right: auto; }
.bn-footer .note { color: var(--bn-dim); }
.bn-footer-tel {
  margin-left: 16px;   /* 안내 문구가 있으면 그 뒤, 없으면 그대로 오른쪽 끝 */
  /* 왼쪽 회사명(© VENUSTO)과 같은 색 — 2026-08-23 사장님 지시 */
  color: var(--bn-sub);
  display: inline-flex; align-items: center; gap: 7px;   /* 수화기 표시와 번호를 한 줄로 */ text-decoration: none; font-size: 14px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap;
}
.bn-footer-tel:hover { color: var(--bn-dark); text-decoration: underline; }

/* ── 다중 페이지 공통 ── */
.bn-nav-links a.bn-active { border-bottom-color: var(--bn-dark); }
/* 페이지 상단 제목 띠 (아이보리) */
.bn-page-hero {
  /* 대문이 아닌 페이지는 머리·본문·아래줄이 전부 같은 톤이고 선으로만 나뉜다 */
  background: transparent;   /* 가운데 아이보리 바탕을 그대로 쓴다 */
  /* 제목 바로 아래 가로선은 없앴다 (2026-08-23 사장님 지시) — 선이 없어도 위아래 색으로 나뉜다.
     다시 넣지 말 것. 상단 메뉴바 아래 선과 아래줄 위 선만 남긴다 */
  padding: clamp(36px, 5vw, 60px) clamp(18px, 6vw, 72px) 0;
}
/* 제목 칸 바로 뒤의 본문은 위 여백을 줄인다 —
   제목 칸 아래 60px + 본문 위 96px 이 겹쳐 200px 가까이 비어 보였다 (2026-08-23) */
.bn-page-hero + .bn-section { padding-top: clamp(22px, 3vw, 40px); }
.bn-cta-band {
  background: var(--bn-dark); border-radius: var(--bn-r);
  padding: clamp(30px, 5vw, 52px); text-align: center;
}
.bn-cta-band h2 { color: #FFFFFF; font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }
.bn-cta-band p { color: rgba(255, 255, 255, .72); margin: 0 0 22px; font-size: 14.5px; }
/* 어두운 배너 안에서는 밑줄 링크가 흰색 */
.bn-cta-band .bn-cta { color: #fff; border-bottom-color: #fff; }
.bn-more { text-align: center; margin-top: 30px; }
.bn-more .bn-cta { margin: 0 12px; }

/* 모바일 메뉴 */
.bn-menu-btn {
  display: none; margin-left: auto; border: 1px solid var(--bn-line); background: none;
  border-radius: var(--bn-r); padding: 9px 13px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--bn-ink);
  /* 좁은 화면에서 "☰ 메뉴"가 세로로 쪼개지지 않게 */
  white-space: nowrap; flex: 0 0 auto; line-height: 1.2;
  min-height: 38px; /* 터치 목표 최소 크기 */
}
@media (max-width: 720px) {
  .bn-menu-btn { display: block; }
  .bn-nav-links {
    display: none; position: absolute; top: var(--bn-navh); left: 0; right: 0;
    background: var(--bn-band); border-bottom: 1px solid rgba(45, 45, 45, .10);
    flex-direction: column; gap: 0; padding: 8px 0;
  }
  .bn-nav-links.open { display: flex; }
  .bn-nav-links a { padding: 12px 24px; border-bottom: none; }
  /* SNS 는 접힌 메뉴 안에서 한 줄로 나란히 — 메뉴 항목처럼 세로로 쌓이면 안 된다 */
  .bn-sns { padding: 14px 24px 6px; gap: 14px; }
  .bn-sns svg { width: 24px; height: 24px; }   /* 폰에서는 조금 더 크게 */
}

/* 문의 폼 */
.bn-input {
  border: 1px solid var(--bn-line); border-radius: var(--bn-r); padding: 11px 13px;
  font: inherit; font-size: 14px; background: #FFFFFF; color: var(--bn-ink);
  width: 100%; box-sizing: border-box;
}
.bn-input::placeholder { color: var(--bn-dim); }
.bn-input:focus { outline: 2px solid var(--bn-dark); }

/* ── 관리자 화면-수정 모드 (홈페이지 설정에서 들어왔을 때) ── */
.bn-editbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: #FFFFFF; border: 1px solid var(--bn-line); border-radius: var(--bn-r);
  padding: 9px 12px 9px 16px; box-shadow: 0 6px 26px rgba(45, 45, 45, .18);
  max-width: calc(100vw - 24px);
}
.bn-editbar .tag {
  background: var(--bn-dark); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 3px 11px; border-radius: var(--bn-r); white-space: nowrap;
}
.bn-editbar .hint { font-size: 12.5px; color: var(--bn-sub); }
.bn-editbar .quit {
  font-size: 13px; font-weight: 600; color: var(--bn-sub); text-decoration: none;
  border: 1px solid var(--bn-line); border-radius: var(--bn-r); padding: 8px 15px; white-space: nowrap;
}
.bn-editbar .quit:hover { color: var(--bn-ink); border-color: var(--bn-sub); }
.bn-editbar button {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--bn-dark); border-radius: var(--bn-r); padding: 9px 18px;
  background: var(--bn-dark); color: #fff;
}
.bn-editbar button:disabled { opacity: .45; cursor: default; }
.bn-editbar button.ghost {
  background: #FFFFFF; color: var(--bn-sub); border-color: var(--bn-line);
}
.bn-editbar button.ghost:hover { color: var(--bn-ink); border-color: var(--bn-sub); }
.bn-editbar .btn-like {
  font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--bn-dark); border-radius: var(--bn-r); padding: 9px 18px;
  background: var(--bn-dark); color: #fff;
}
@media (max-width: 620px) { .bn-editbar .hint { display: none; } }

[data-sk].bn-editing {
  outline: 2px dashed var(--bn-dark); outline-offset: 3px; border-radius: var(--bn-r);
  cursor: text; min-width: 1em;
}
[data-sk].bn-editing:focus { outline-style: solid; background: rgba(47, 44, 41, .06); }

/* ── 칸 위치 바꾸기 (수정 모드) ── */
/* 칸 하나 — 마우스를 올리면 ◀ ▶ 가 뜬다 */
.bn-movable { position: relative; outline: 1px dashed var(--bn-line); outline-offset: 6px; }
.bn-boxtools {
  position: absolute; left: 50%; transform: translateX(-50%); top: -14px;
  display: flex; gap: 6px; opacity: 0; transition: opacity .15s; z-index: 30;
}
.bn-movable:hover .bn-boxtools { opacity: 1; }
.bn-boxtools button, .bn-sectools button, .bn-coltools button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1;
  background: #FFFFFF; color: var(--bn-ink);
  border: 1px solid var(--bn-line); border-radius: var(--bn-r); padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(45, 45, 45, .12);
}
.bn-boxtools button:hover, .bn-sectools button:hover, .bn-coltools button:hover {
  border-color: var(--bn-dark); color: var(--bn-dark);
}
.bn-boxtools button:disabled, .bn-coltools button:disabled, .bn-sectools button:disabled {
  opacity: .3; cursor: default; box-shadow: none;
}
.bn-coltools button.on { background: var(--bn-dark); border-color: var(--bn-dark); color: #fff; }

/* 구역 하나 — 위아래로 */
.bn-sec-edit { position: relative; outline: 1px dashed var(--bn-line); outline-offset: -8px; }
.bn-sectools {
  position: absolute; right: 16px; top: 12px; display: flex; align-items: center; gap: 6px;
  opacity: 0; transition: opacity .15s; z-index: 30;
}
.bn-sec-edit:hover .bn-sectools { opacity: 1; }
.bn-sectools span, .bn-coltools span { font-size: 12px; color: var(--bn-sub); }

/* 한 줄에 놓을 칸 수 · 대문 좌우 바꾸기 */
.bn-coltools {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 12px;
}

/* 한 줄에 놓을 칸 수 지정 (기본이 아니면 이 값이 이긴다) */
[data-cols="1"] { grid-template-columns: 1fr !important; }
[data-cols="2"] { grid-template-columns: repeat(2, 1fr) !important; }
[data-cols="3"] { grid-template-columns: repeat(3, 1fr) !important; }
[data-cols="5"] { grid-template-columns: repeat(5, 1fr) !important; }
@media (max-width: 760px) {
  [data-cols="2"], [data-cols="3"], [data-cols="5"] { grid-template-columns: 1fr !important; }
}

/* 대문 글↔사진 좌우 바꾸기 */
.bn-hero .bn-inner.bn-flip > div:first-child { order: 2; }
.bn-hero .bn-inner.bn-flip > div:last-child { order: 1; }

/* 지금 보고 있는 페이지의 메뉴 — 테두리로 위치를 알리고, 그 자리에서 이름을 고친다 */
.bn-nav-links .bn-nav-here {
  color: var(--bn-ink); font-size: 13.5px; font-weight: 600; padding: 4px 0;
  display: inline-block; border-bottom: 2px solid var(--bn-dark);
}

/* 사진 자리 — 마우스를 올리면 버튼이 뜬다 */
.bn-imgslot { position: relative; outline: 2px dashed var(--bn-dark); outline-offset: 5px; border-radius: var(--bn-r); }
.bn-imgtools {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px;
  display: flex; gap: 8px; opacity: 0; transition: opacity .15s;
}
.bn-imgslot:hover .bn-imgtools, .bn-imgslot:focus-within .bn-imgtools { opacity: 1; }
.bn-imgtools button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: rgba(47, 44, 41, .88); color: #fff; border: 0;
  border-radius: var(--bn-r); padding: 9px 16px; backdrop-filter: blur(3px);
}
.bn-imgtools button.del { background: rgba(140, 52, 46, .88); }
.bn-busy { cursor: progress; }
.bn-busy .bn-imgtools button { pointer-events: none; opacity: .6; }

/* 편집 모드: 시공 사례 순서 바꾸기 · 새 현장 추가 */
.bn-folio-slot { display: flex; flex-direction: column; gap: 8px; }
.bn-folio-ops { display: flex; align-items: center; gap: 8px; }
.bn-folio-ops form { display: flex; gap: 5px; }
.bn-folio-ops button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #FFFFFF; color: var(--bn-ink);
  border: 1px solid var(--bn-line); border-radius: var(--bn-r); padding: 4px 11px;
}
.bn-folio-ops button:disabled { opacity: .3; cursor: default; }
.bn-folio-ops .nm { flex: 1; min-width: 0; font-size: 13px; color: var(--bn-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-folio-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--bn-line); border-radius: var(--bn-r); min-height: 200px; padding: 20px;
}
.bn-folio-add button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--bn-dark); color: #fff; border: 0; border-radius: var(--bn-r); padding: 11px 22px;
}
.bn-folio-add span { font-size: 12.5px; color: var(--bn-sub); text-align: center; }

/* 편집 모드에서 시공 사례 카드 = 그 현장 편집 화면으로 */
a.bn-folio-edit { position: relative; }
a.bn-folio-edit::after {
  content: "✏️ 이 현장 편집"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(47, 44, 41, .88); color: #fff; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--bn-r); opacity: 0; transition: opacity .15s;
}
a.bn-folio-edit:hover::after { opacity: 1; }

/* 사진 지원 */
.folio-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
a.bn-folio-link { text-decoration: none; color: inherit; display: block; }

/* ── 시공 사례 (현장별 페이지) ── */
.bn-folio-visual .count {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(47, 44, 41, .62); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--bn-r);
}
.bn-folio-meta { margin: 0 0 4px; font-size: 12px; color: var(--bn-dim); font-weight: 600; }
a.bn-folio-link { transition: opacity .15s ease; }
a.bn-folio-link:hover { opacity: .92; }

.bn-detail { max-width: 900px; }
.bn-detail-meta span + span::before { content: " · "; color: var(--bn-sub); }
.bn-detail-body {
  white-space: pre-line; line-height: 1.9; font-size: 15px; color: var(--bn-ink);
  margin-bottom: 30px; max-width: 720px;
}
.bn-detail-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .bn-detail-photos { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.bn-detail-photos img {
  width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--bn-photo-r); border: 1px solid var(--bn-line);
  cursor: pointer; transition: opacity .15s ease;   /* 돋보기 대신 손가락 (사장님 지시) */
}
.bn-detail-photos img:hover { opacity: .88; }
.bn-detail-tip { margin: 10px 0 0; font-size: 12px; color: var(--bn-dim); }

/* 사진 크게 보기 (클릭 시 화면 가득) */
.bn-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgba(20, 19, 18, .95);
}
.bn-lightbox.on { display: flex; }
/* 어두운 배경에서 끌 때 파란 선택(하이라이트)이 생기지 않게 — 끌기는 사진 넘기기 동작이다 */
.bn-lightbox, .bn-lightbox * {
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bn-lightbox img {
  max-width: 94vw; max-height: 90vh; object-fit: contain;
  cursor: pointer;   /* 끌어서 넘길 수 있는 곳 — 화살표 말고 손가락 (2026-08-23 사장님 지시) */
  border-radius: var(--bn-photo-r); box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.bn-lightbox button {
  position: absolute; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 26px; line-height: 1; padding: 12px 16px; border-radius: var(--bn-r);
}
.bn-lightbox button:hover { background: rgba(255, 255, 255, .2); }
.bn-lightbox .lb-close { top: 14px; right: 14px; }
.bn-lightbox .lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.bn-lightbox .lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.bn-lightbox .lb-count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .8); font-size: 13px; letter-spacing: .06em;
}
@media (max-width: 560px) {
  .bn-lightbox .lb-prev, .bn-lightbox .lb-next { font-size: 20px; padding: 10px 12px; }
}
.bn-detail-nav {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 38px;
}
@media (max-width: 560px) {
  .bn-detail-nav { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ── 시공 사례: 사진 위주 + 마우스 올리면 아파트명 ── */
.bn-folio-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .bn-folio-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bn-folio-lg { grid-template-columns: 1fr; gap: 14px; } }
.bn-folio-lg .bn-folio-visual { height: auto; aspect-ratio: 4 / 3; }

.bn-folio-hover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center;
  background: rgba(47, 44, 41, .5);
  opacity: 0; transition: opacity .25s ease;
}
.bn-folio-hover h4 {
  margin: 0; color: #fff; font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 600; letter-spacing: -.01em; line-height: 1.4;
}
.bn-folio-hover p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 13px; }
.bn-folio-card:hover .bn-folio-hover { opacity: 1; }
.bn-folio-card .bn-folio-visual img.folio-photo { transition: transform .35s ease; }
.bn-folio-card:hover .bn-folio-visual img.folio-photo { transform: scale(1.03); }

/* 사진이 아직 없는 현장은 이름을 항상 보여준다 (가릴 사진이 없으니) */
.bn-folio-card.noimg .bn-folio-hover { opacity: 1; background: transparent; }
.bn-folio-card.noimg .bn-folio-hover h4 { color: var(--bn-ink); }
.bn-folio-card.noimg .bn-folio-hover p { color: var(--bn-sub); }
/* 사진 없는 칸의 배경 — 아이보리 판 (도형 장식 없음) */
.bn-folio-visual .noimg-bg { position: absolute; inset: 0; background: var(--bn-band); }

/* 터치 화면(폰)은 마우스 호버가 없다 — 아래쪽에 이름을 항상 띄운다 */
@media (hover: none) {
  .bn-folio-hover {
    opacity: 1; justify-content: flex-end; align-items: flex-start; text-align: left;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(25, 24, 22, .62) 100%);
  }
  .bn-folio-hover h4 { font-size: 15.5px; }
  .bn-folio-hover p { font-size: 12px; }
}

/* ── 업무 도구 / 설정 카드 ── */
.bn-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .bn-tools { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bn-tools { grid-template-columns: 1fr; } }
a.bn-tool-card {
  display: block; text-decoration: none; color: inherit;
  background: #FFFFFF; border: 1px solid var(--bn-line); border-radius: var(--bn-r);
  padding: 22px 20px 20px;
  transition: border-color .18s ease;
}
a.bn-tool-card:hover { border-color: var(--bn-dark); }
.bn-tool-card h4 {
  margin: 0 0 5px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--bn-ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bn-tool-card p { margin: 0; font-size: 12.5px; color: var(--bn-sub); line-height: 1.6; }
.bn-tool-card .state {
  display: inline-block; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--bn-dim);
}
a.bn-tool-card.locked { opacity: .72; }
.bn-tool-badge {
  font-style: normal; background: var(--bn-dark); color: #fff;
  font-size: 11px; font-weight: 600; border-radius: var(--bn-r); padding: 2px 9px;
}
.bn-tool-badge.ok { background: var(--bn-dark); }
.bn-tool-badge.off { background: var(--bn-dim); }

/* 업무 도구 화면의 직원 로그인 줄 — 게스트에게만 나온다 */
.bn-portal-signin {
  margin: 18px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.bn-portal-signin .hint { font-size: 12.5px; color: var(--bn-dim); }
/* 휴대폰에서 손가락으로 누를 만한 크기 (밑줄 링크는 높이가 27px 밖에 안 된다) */
.bn-portal-signin a {
  padding: 11px 0 8px; font-size: 15px;
  border-bottom-width: 2px;
}

/* ── 수정 중에만 나오는 대문 사진 칸 표시줄 ──
   네 칸 중 어디에 사진이 있고 어디가 비었는지 한눈에 보이게. 눌러서 그 칸으로 이동한다.
   점(.bn-hero-dot)만 있으면 어느 칸이 비었는지 몰라 '사진이 사라졌다'고 오해한다 */
.bn-hero-tabs {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: center; max-width: 92%;
}
.bn-hero-tab {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--bn-ink);
  border: 1px solid rgba(45, 45, 45, .18); border-radius: var(--bn-r);
  padding: 6px 11px; white-space: nowrap;
}
.bn-hero-tab.on { background: var(--bn-dark); color: #fff; border-color: var(--bn-dark); }
.bn-hero-tab.empty { color: var(--bn-dim); border-style: dashed; }
.bn-hero-tab.empty.on { color: #fff; }
.bn-hero-tabnote {
  width: 100%; text-align: center; font-size: 11.5px; color: #fff;
  background: rgba(47, 44, 41, .72); border-radius: var(--bn-r); padding: 4px 10px;
}

/* ── 수정 모드의 대문 사진 4칸 ──
   방문자 화면은 슬라이드지만, 수정 중에는 네 칸을 한 번에 펼쳐 바로 누르게 한다.
   슬라이드로 두면 가려진 칸을 못 눌러 사진을 못 고친다 (실제로 그랬다) */
.bn-hero-edit {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  align-content: center; padding: 6px;
}
.bn-hero-cell {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--bn-band); border-radius: var(--bn-photo-r);
}
.bn-hero-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bn-hero-cell.empty { border: 2px dashed var(--bn-line); background: #fff; }
.bn-hero-cell .no {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(38, 38, 38, .82); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--bn-r);
}
.bn-hero-cell.empty .no { background: var(--bn-dim); }
/* 빈 칸은 버튼을 늘 보여 준다 — 마우스를 올려야 나오면 넣을 수 있는 줄 모른다 */
.bn-hero-cell.empty .bn-imgtools { opacity: 1; }
.bn-hero-edit-note {
  grid-column: 1 / -1; margin: 4px 2px 0; font-size: 12px; color: var(--bn-dim); line-height: 1.6;
}
@media (max-width: 820px) {
  .bn-hero-edit { grid-template-columns: 1fr 1fr; }
}

/* 푸터 전화번호 옆 수화기 표시 — 글자색을 그대로 따라간다 */
.bn-footer-tel .ico { width: 14px; height: 14px; flex: 0 0 auto; }

/* 「설정」 — 관리자에게만. 「업무 도구」 오른편에 **같은 글자 크기·색**으로 붙는다(.bn-login 을 함께 쓴다).
   세로 구분선은 앞의 '업무 도구' 하나면 충분하므로 여기선 뺀다 */
.bn-setting { border-left: 0; padding-left: 14px; }

/* 사진 자리 바꾸기 단추 (◀ ▶) — 사진 버튼 옆에 작게 */
.bn-imgtools button.mv { padding: 9px 12px; font-size: 14px; line-height: 1; }
.bn-imgtools button.mv:disabled { opacity: .35; cursor: default; }

/* 시공 사례 페이지 넘김 — 현장이 9곳을 넘으면 나온다 */
.bn-pager {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-top: 34px;
}
.bn-pager a, .bn-pager span {
  min-width: 38px; min-height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; text-decoration: none; color: var(--bn-menu);
  border: 1px solid var(--bn-line); border-radius: var(--bn-r);
}
.bn-pager a:hover { color: var(--bn-ink); border-color: var(--bn-dark); }
.bn-pager .on { background: var(--bn-dark); border-color: var(--bn-dark); color: #fff; font-weight: 600; }

/* 끌어서 순서 바꾸기 — 끌리는 중 표시 (대문 4칸·시공 사례 카드 공용) */
[data-drag-sort] [data-drag-key] { cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-drag-sort] [data-drag-key]:active { cursor: grabbing; }
.bn-drag-on { opacity: .45; outline: 2px dashed var(--bn-dark); outline-offset: 2px; }