/* 시안 CSS(base.css) 위에 얹는 것들
   — 그누보드 게시판이 들어갈 자리, 폰 메뉴, 시안에 없던 구역 */

/* ── 그누보드가 쓰는 자리 ── */
#hd_login_msg{position:fixed;left:0;top:0;z-index:999;background:var(--ink);color:#fff;
  font-size:12px;padding:6px 12px}
#hd_login_msg a{text-decoration:underline;margin-left:6px}

.sub-main{padding-bottom:120px}
.sub-hero{padding:46px 0 0}
.sub-hero h1{font:800 clamp(32px,4.2vw,56px)/1.25 var(--serif);letter-spacing:-.06em;margin:18px 0 0}
.sub-body{padding-top:48px;min-height:360px}
/* 게시판 스킨이 옛 고정폭이라 넘치지 않게 가둔다 */
.sub-body table{max-width:100%}
.sub-body img{max-width:100%;height:auto}

/* ── 숫자 ── */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:84px;
  border-top:1px solid var(--line);padding-top:38px}
.stat-row strong{display:block;font:800 clamp(30px,3.4vw,46px) var(--serif);letter-spacing:-.05em}
.stat-row span{font-size:12px;letter-spacing:.08em;color:#6c796f}

/* ── 히어로 조작 단추 ── */
.hero-ctrl{position:absolute;right:48px;bottom:38px;z-index:3;display:flex;align-items:center;gap:14px}
.hero-ctrl button{width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.18);color:#fff;font-size:15px}
.hero-ctrl button:hover{background:rgba(0,0,0,.42)}
.hero-dots{display:flex;gap:7px}
.hero-dots b{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;display:block}
.hero-dots b.on{background:#fff;width:20px;border-radius:4px}

/* ── 시공현장 ── */
.sites{padding:130px 0}
.site-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;margin-top:54px}
.site-card{display:block}
.site-photo{display:block;aspect-ratio:4/3;overflow:hidden;background:#e7e4da}
.site-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.site-card:hover .site-photo img{transform:scale(1.06)}
.site-card strong{display:block;font:700 17px/1.5 var(--serif);letter-spacing:-.04em;margin:15px 0 5px}
.site-card small{font-size:11px;color:#7a867d;letter-spacing:.06em}

/* ── 공사실적 카드 안쪽 ── */
.project-card a{justify-content:space-between}
.project-card small{opacity:.8}

/* ── 꼬리말 ── */
.site-foot{background:var(--deep);color:rgba(255,255,255,.8);padding:70px 0 54px;position:relative}
.site-foot .brand span{color:#fff}
.site-foot .brand-mark i{background:#b7ce88}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.16)}
.foot-nav{display:flex;gap:26px;flex-wrap:wrap}
.foot-nav a{font-size:13px}
.foot-nav a:hover{color:#c5dc98}
.foot-info{padding-top:28px;font-size:13px;line-height:1.95}
.foot-info a:hover{color:#c5dc98;text-decoration:underline}
.foot-name{font:700 16px var(--serif);color:#fff;margin:0 0 8px;letter-spacing:-.02em}
.foot-info .copy{margin:18px 0 0;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.45)}
.to-top{position:absolute;right:48px;top:62px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff}

/* ── 폰 메뉴 ── */
.nav-toggle{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0}
.nav-toggle i{display:block;height:2px;width:22px;background:currentColor;transition:.25s;margin-inline:auto}
.topbar .nav-toggle{color:#fff}
.sub-header .nav-toggle{color:var(--ink)}
.nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{position:fixed;inset:0;z-index:60;background:var(--deep);color:#fff;
  padding:96px 28px 40px;display:flex;flex-direction:column;justify-content:space-between;
  overflow-y:auto}
.mobile-nav[hidden]{display:none}
.mobile-nav nav{display:flex;flex-direction:column}
.mobile-nav nav a{font:700 26px/1 var(--serif);letter-spacing:-.04em;padding:19px 0;
  border-bottom:1px solid rgba(255,255,255,.14)}
.mobile-nav-foot{padding-top:28px;font-size:13px;line-height:1.9;color:rgba(255,255,255,.72)}
.mobile-nav-foot a{display:block;font:700 22px var(--serif);color:#c5dc98;margin-bottom:6px}
body.nav-open{overflow:hidden}

@media(max-width:860px){
  .topbar nav, .sub-header nav, .menu-link{display:none}
  .nav-toggle{display:flex}
  .topbar, .sub-header{height:76px}
  .hero-ctrl{right:20px;bottom:22px}
  .hero-credit{left:20px;bottom:86px}
  .to-top{right:20px;top:auto;bottom:40px}
  .stat-row{grid-template-columns:1fr;gap:0}
  .stat-row div{display:flex;align-items:baseline;gap:14px;padding:14px 0;
    border-bottom:1px solid var(--line)}
  .stat-row strong{font-size:28px}
  .site-grid{grid-template-columns:1fr 1fr;gap:20px 14px}
  .sites{padding:84px 0}
  .foot-top{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){
  .site-grid{grid-template-columns:1fr}
  .mobile-nav nav a{font-size:22px;padding:16px 0}
}

/* 옛 게시판 표는 저 혼자 옆으로 넘긴다 (쪽 전체가 밀리지 않게) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table-scroll table{min-width:540px}
/* 게시판 안의 고정폭 요소들도 가둔다 */
.sub-body > *{max-width:100%}
.sub-body iframe{max-width:100%}

/* 지도를 못 불러왔을 때 */
.map-fallback{display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:#e7e4da;border:1px solid var(--line);text-align:center;padding:24px}
.map-fallback p{margin:0;font-size:14px;color:#6c796f}
.map-fallback a{font:700 17px var(--serif);color:var(--moss);border-bottom:1px solid var(--moss);padding-bottom:4px}
.map-fallback small{font-size:12px;color:#7a867d}

/* 배너 사진이 밝으면 머리말 글씨가 묻힌다. 위쪽만 살짝 깔아 준다.
   (사진이 어두우면 거의 티가 안 난다) */
.hero::before{content:"";position:absolute;inset:0 0 auto;height:210px;z-index:1;
  background:linear-gradient(rgba(6,24,16,.52),rgba(6,24,16,0));pointer-events:none}
.topbar{z-index:2}