/* 금호환경 새 홈페이지 공통 스타일.
   옛 사이트의 배치(가로 1000px 본문, 흰 머리, 6칸 메뉴, 상단 그림, 회색 바닥)를 따르되 코드는 새로 짰다.
   폰 화면에서는 메뉴가 ☰ 버튼으로 접힌다. */

:root {
  --ink: #222;
  --muted: #777;
  --line: #d5d5d5;
  --blue: #1c6ac9;
  --blue-light: #609fe0;
  --menu-bg: #2a3a4f;
  --menu-hover: #c5e465;
  --gray-bg: #f3f3f3;
  --width: 1000px;
  --wide: 1240px; /* 왼쪽 메뉴 + 본문 */
  --soft: #f4f7fb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  word-break: keep-all; overflow-wrap: break-word; /* 한글은 띄어쓰기 단위로 줄바꿈 */
  font: 15px/1.7 "Nanum Gothic", "나눔고딕", "맑은 고딕", "Malgun Gothic", sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; border: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ── 머리 ── */
.top { background-position: center top; background-repeat: repeat-x; border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
.top-in { width: var(--width); max-width: 100%; margin: 0 auto; height: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.logo { margin: 0; line-height: 0; }
.logo img { width: auto; height: 50px; } /* 새 로고 = 가로로 긴 투명 PNG (2026-10-30) */
.nav-toggle { display: none; font-size: 26px; background: none; border: 0; cursor: pointer; color: var(--ink); }

.gnb { background: #fff; border-top: 1px solid var(--line); }
.gnb .m1 { width: var(--width); max-width: 100%; margin: 0 auto; display: flex; }
.gnb .m1-li { flex: 1; position: relative; text-align: center; }
.gnb .m1-li > a { display: block; line-height: 46px; font-size: 17px; color: #333; }
.gnb .m1-li.on > a, .gnb .m1-li:hover > a { color: var(--blue); font-weight: 700; }
.gnb .m2 {
  display: none; position: absolute; left: 0; right: 0; top: 46px;
  background: var(--menu-bg); padding: 8px 0; text-align: left; box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.gnb .m1-li:hover .m2, .gnb .m1-li:focus-within .m2 { display: block; }
.gnb .m2 > li > a { display: block; padding: 7px 18px; color: #fff; font-size: 14px; }
.gnb .m2 a:hover, .gnb .m2 a.on { color: var(--menu-hover); text-decoration: underline; }
.gnb .m3 > li > a { display: block; padding: 3px 18px 3px 28px; color: #dfe6ee; font-size: 13px; }

/* ── 상단 그림(가운데 그림 + 좌우로 이어지는 배경) ── */
.visual { position: relative; overflow: hidden; display: flex; justify-content: center; }
/* 좌우 그림은 가운데 1000px 그림 바깥 여백만 채운다 (옛 사이트와 같은 방식) */
.visual .v-left, .visual .v-right { position: absolute; top: 0; bottom: 0; width: calc(50% - 500px); }
.visual .v-left { left: 0; background-position: right top; }
.visual .v-right { right: 0; background-position: left top; }
.visual .v-center { position: relative; z-index: 1; display: block; max-width: none; height: 100%; width: auto; }

/* ── 본문 ── */
main { min-height: 400px; position: relative; }
/* 왼쪽 메뉴 + 본문 두 칸 (대메뉴 아래 쪽에서만). 홈은 한 칸 그대로 */
main.has-side { width: var(--wide); max-width: 100%; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; }
main.has-side .content { width: auto; padding: 0 0 80px; }
.side { padding-top: 56px; }
.side-head { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 16px; border-bottom: 2px solid var(--blue); }
.side-head .num { font-size: 30px; line-height: 1; color: var(--blue-light); font-weight: 400; letter-spacing: -1px; }
.side-head strong { display: block; font-size: 21px; line-height: 1.2; color: #1f2a37; }
.side-head small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9aa3ad; }
.side ul { border-bottom: 1px solid #e6e6e6; }
.side li + li { border-top: 1px solid #ececec; }
.side li a { display: flex; justify-content: space-between; align-items: center; padding: 13px 10px; font-size: 15px; color: #444; transition: background .15s, color .15s; }
.side li a::after { content: "›"; color: #b9c0c8; font-size: 18px; line-height: 1; }
.side li a:hover { background: var(--soft); color: var(--blue); }
.side li a.on { background: var(--soft); color: var(--blue); font-weight: 700; box-shadow: inset 3px 0 0 var(--blue); }
.side li a.on::after { color: var(--blue); }
.content { width: var(--width); max-width: 100%; margin: 0 auto; padding: 0 16px 80px; }
.title-loc { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 56px 0 36px; padding-bottom: 18px; border-bottom: 1px solid #e6e6e6; }
.title-loc h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.5px; color: #1f2a37; line-height: 1.3; }
.loc { color: #777; font-size: 13px; white-space: nowrap; }
.loc a { text-decoration: none; }
.loc a:hover { color: var(--blue); }
.loc span + span::before { content: "\00a0\00a0>\00a0\00a0"; color: #aaa; }

/* 3단 메뉴 탭 (사업소개) */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 30px; }
.tabs a { flex: 0 0 calc(20% - 2px); padding: 13px 6px; text-align: center; border: 1px solid #d6dbe1; color: #3d4752; font-size: 14px; line-height: 1.4; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.tabs a:hover { background: var(--soft); color: var(--blue); border-color: #b9cfea; }
.tabs a.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }

/* 회사가 웹 편집기로 쓴 본문 — 옛 글을 그대로 넣으므로 넓은 표·그림만 화면에 맞춘다 */
.editor { text-align: justify; overflow-x: auto; }
.editor > table, .editor > div, .editor > p { max-width: 100%; } /* 옛 글에 박힌 고정 폭(950px 등)이 본문 칸을 넘지 않게. 지도 안쪽 부품은 건드리면 깨지므로 바로 아래 칸만 */
.editor img { height: auto !important; }
/* 사업소개 본문 안의 옛 탭 버튼. 원래 본문 속 <style> 에 있던 규칙을 옮겨 왔다 (2026-10-29, tools/extract.py strip_style) */
.editor .btn { display: flex; align-items: center; justify-content: center; height: 58px; line-height: 1.3; min-width: 0; padding: 0 8px; width: calc(20% - 1px); text-align: center; border: 1px solid #d6dbe1; color: #3d4752; float: left; font-size: 14px; margin: 0 1px 2px 0; }
.editor .btn p, .editor .btn1 p { margin: 0; }
/* 버튼 줄 다음 글은 버튼 아래에서 시작 (버튼은 글 속에 float 로 하나씩 박혀 있다) */
.editor > a:has(> .btn, > .btn1) + :not(a) { clear: both; padding-top: 4px; }
/* 옛 글은 버튼 5개마다 <br> 로 줄을 끊었다 → 폰(한 줄 3개)에서 빈칸이 생기므로 버튼 사이의 <br> 는 숨긴다 */
.editor > a:has(> .btn, > .btn1) + br:has(+ a > .btn, + a > .btn1) { display: none; }
.editor .btn:hover { background: var(--soft); color: var(--blue); border-color: #b9cfea; }
.editor .btn1 { display: flex; align-items: center; justify-content: center; height: 58px; line-height: 1.3; padding: 0 8px; width: calc(20% - 1px); text-align: center; background: #1c6ac9; border: 1px solid #1c6ac9; color: #fff; float: left; font-size: 14px; margin: 0 1px 2px 0; font-weight: bold; }

.no-content { text-align: center; padding: 80px 0; font-size: 16px; color: #555; }
.no-content span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.no-content .btns { margin-top: 30px; display: flex; gap: 8px; justify-content: center; }

.btn { display: inline-block; min-width: 150px; padding: 14px 20px; text-align: center; font-size: 14px; border: 0; cursor: pointer; font-family: inherit; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-gray { background: #8a8a8a; color: #fff; }

/* ── 게시판 ── */
.total { margin-bottom: 10px; color: var(--muted); }
.total b { color: var(--blue); }

.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.photo-grid a { display: block; border: 1px solid #ddd; padding: 18px 18px 22px; }
.photo-grid a:hover { border-color: var(--blue-light); }
.photo-grid .thumb { display: block; position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #eee; }
.photo-grid .thumb img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: transform .3s; }
.photo-grid a:hover .thumb img { transform: scale(1.05); }
.photo-grid .t { display: block; margin-top: 14px; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-grid .w { display: block; margin-top: 10px; color: #8a8a8a; font-size: 13px; }
.photo-grid .d { color: #8a8a8a; font-size: 13px; }

.text-list { border-top: 2px solid #333; }
.text-list li { display: flex; align-items: center; border-bottom: 1px solid #e3e3e3; min-height: 46px; }
.text-list .no { width: 70px; text-align: center; color: var(--muted); }
.text-list .no img { vertical-align: middle; }
.text-list .file { width: 30px; text-align: center; }
.text-list .title { flex: 1; padding: 10px; }
.text-list a.title:hover { color: var(--blue); text-decoration: underline; }
.text-list .date { width: 100px; text-align: center; color: var(--muted); font-size: 13px; }
.text-list li.notice { background: #f8f8f8; font-weight: 700; }

.paging { display: flex; justify-content: center; gap: 4px; margin-top: 30px; }
.paging a { min-width: 30px; height: 30px; line-height: 28px; text-align: center; border: 1px solid #ccc; color: #555; }
.paging a.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }

.view-head { border-top: 2px solid #333; border-bottom: 1px solid #ccc; padding: 16px 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.view-head h3 { margin: 0; font-size: 20px; color: #1f2a37; }
.view-head .info { color: var(--muted); font-size: 13px; }
.view-files { border-bottom: 1px solid #e3e3e3; padding: 12px 10px; font-size: 14px; }
.view-files a { color: var(--blue); margin-right: 14px; }
.view-files a::before { content: "📎 "; }
.view-body { padding: 30px 10px; border-bottom: 1px solid #ccc; }
.view-body .add-img { text-align: center; margin-bottom: 20px; }
.view-body .add-img img { display: block; margin: 0 auto 10px; }
.view-nav { display: flex; justify-content: flex-end; margin-top: 20px; }

/* ── 온라인문의 양식 ── */
.form-table { width: 100%; border-collapse: collapse; border-top: 2px solid #333; }
.form-table th, .form-table td { border-bottom: 1px solid #e3e3e3; padding: 10px; text-align: left; }
.form-table th { width: 150px; background: #f8f8f8; font-weight: 700; }
.form-table input, .form-table textarea { width: 100%; padding: 8px; border: 1px solid #ccc; font: inherit; }
.form-table textarea { min-height: 220px; }
.form-agree { margin: 20px 0; padding: 14px; background: #f8f8f8; font-size: 13px; }
.form-actions { text-align: center; }

/* ── 홈 ── */
.home-blocks > div { width: 100%; }
.home-blocks .main_content_block { width: var(--width); max-width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.home-blocks .main_banner_area { line-height: 0; }

.popup { position: absolute; z-index: 100; background: #505050; padding: 3px; color: #fff; max-width: calc(100vw - 16px); }
.popup .p-title { font-size: 12px; padding: 4px 6px; font-weight: 700; }
.popup .p-body { background: #fff; line-height: 0; }
.popup .p-close { display: flex; justify-content: flex-end; gap: 14px; padding: 6px 8px; font-size: 12px; }
.popup button { background: none; border: 0; color: #ddd; cursor: pointer; font: inherit; }
.popup button:hover { color: #fff; }

/* ── 바닥 ── */
.bottom { background: #f3f3f3; border-top: 1px solid var(--line); }
.bottom-menu { font-size: 14px; width: var(--width); max-width: 100%; margin: 0 auto; padding: 12px 16px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.bottom-menu ul { display: flex; gap: 18px; }
.bottom-menu .private { color: var(--blue); font-weight: 700; }
.to-top { color: var(--muted); font-size: 12px; }
.copyright { width: var(--width); max-width: 100%; margin: 0 auto; padding: 24px 16px 40px; display: flex; gap: 20px; align-items: center; color: #666; font-size: 13px; line-height: 1.8; }
.copyright .f-logos { flex: none; display: flex; flex-direction: column; gap: 22px; } /* 금호환경 위 · 미국법인 아래 */
.copyright .f-logo { display: block; width: auto; height: 30px; } /* 바탕 투명 PNG, 두 로고 높이를 맞춘다 */
.copyright p { margin: 0; }

/* ── 폰 화면 ── */
@media (max-width: 1020px) {
  .top-in { height: 70px; }
  .logo img { max-height: 44px; }
  .nav-toggle { display: block; }
  .gnb { display: none; background-image: none !important; }
  .nav-open .gnb { display: block; }
  .gnb .m1 { flex-direction: column; }
  .gnb .m1-li { text-align: left; border-bottom: 1px solid var(--line); }
  .gnb .m1-li > a { padding: 0 16px; }
  .gnb .m2 { display: block; position: static; box-shadow: none; }
  .visual { height: auto !important; max-height: 220px; }
  .visual .v-center { width: 100%; height: auto; }
  .visual .v-left, .visual .v-right { display: none; }
  main.has-side { display: block; padding: 0 16px; }
  .side { display: none; } /* 폰은 ☰ 메뉴와 위 탭으로 충분 */
  .title-loc { flex-direction: column; align-items: flex-start; gap: 6px; margin: 28px 0 24px; }
  .title-loc h2 { font-size: 24px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .photo-grid a { padding: 10px 10px 14px; }
  .photo-grid .t { font-size: 14px; }
  .tabs a { flex-basis: calc(50% - 2px); }
  .text-list .no, .text-list .file { display: none; }
  .copyright { flex-direction: column; align-items: flex-start; }
  .form-table th { width: 90px; }
  .popup { left: 8px !important; top: 80px !important; width: auto !important; }
  .loc { white-space: normal; }
  .editor { text-align: left; } /* 좁은 화면에서 양쪽 맞춤은 단어 사이가 벌어진다 */
  .editor .btn, .editor .btn1 { width: calc(33.333% - 1px); height: 54px; font-size: 13px; padding: 0 4px; }
}

/* ===== 고객지원 모던 개편 (2026-10-29) ===== */
/* FAQ 아코디언 */
.faq{margin-top:10px}
.faq details{border:1px solid #e3e3e3;border-radius:10px;margin-bottom:10px;background:#fff;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;gap:12px;align-items:flex-start;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{color:#b5272e;font-weight:800;flex:0 0 auto}
.faq summary .t{font-weight:600;flex:1;line-height:1.5}
.faq summary .x{color:#9a9a9a;font-size:19px;line-height:1;transition:.2s;flex:0 0 auto}
.faq details[open] summary .x{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid #eee}
.faq .a{padding:16px 18px 18px 46px;color:#555;font-size:14px;line-height:1.8}
.faq .a .muted{color:#999}
.faq .a img{max-width:100%;height:auto}
/* 공지사항 소식 카드 */
.news-grid{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news-grid a{display:block;text-decoration:none;color:inherit;border:1px solid #e6e6e6;border-radius:12px;overflow:hidden;background:#fff;transition:.15s}
.news-grid a:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.08);border-color:#2f7d4f}
.news-grid .thumb{display:block;height:150px;background:#f3f3f3;overflow:hidden;position:relative}
.news-grid .thumb img{width:100%;height:100%;object-fit:cover}
.news-grid .thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:700;letter-spacing:1px;background:linear-gradient(135deg,#2f7d4f,#245f3d)}
.news-grid .t{display:block;padding:14px 15px 4px;font-size:14.5px;font-weight:600;line-height:1.45}
.news-grid .d{display:block;padding:0 15px 15px;color:#999;font-size:12px}
@media(max-width:800px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.news-grid{grid-template-columns:1fr}}
/* CONTACT 지도 */
.contact-map{margin-top:22px;clear:both}

/* ── 첫 화면 슬라이드 (2026-10-30, components/Hero.astro) ── */
.hero {
  --brand: #a11b55; /* KH 로고 크림슨 */
  --hero-h: clamp(440px, 60vh, 600px);
  position: relative; height: var(--hero-h); overflow: hidden; background: #0c141d; color: #fff; isolation: isolate;
  touch-action: pan-y; cursor: grab; user-select: none; /* 가로 끌기는 슬라이드가, 세로는 화면 스크롤이 받는다 */
}
.hero.is-dragging { cursor: grabbing; }
.hero-track, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease; z-index: 1; }
.hero-in { width: var(--wide); max-width: 100%; height: 100%; margin: 0 auto; padding: 0 40px; position: relative; display: flex; align-items: center; }

/* 사진 슬라이드: 사진 위에 왼쪽부터 어두운 막을 깔아 글자를 읽히게 한다 */
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.06); transition: transform 7s ease-out; }
.hero-slide.is-active .hero-bg { transform: scale(1); }
.is-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(9,15,24,.62) 0%, rgba(9,15,24,.36) 36%, rgba(9,15,24,0) 62%),
    linear-gradient(0deg, rgba(9,15,24,.38) 0%, rgba(9,15,24,0) 24%);
}
.is-photo .hero-in { z-index: 2; }

.hero-copy { max-width: 560px; padding-bottom: 40px; }
.hero-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.is-active .hero-copy > * { opacity: 1; transform: none; }
.is-active .hero-copy > :nth-child(2) { transition-delay: .08s; }
.is-active .hero-copy > :nth-child(3) { transition-delay: .16s; }
.is-active .hero-copy > :nth-child(4) { transition-delay: .24s; }
.is-active .hero-copy > :nth-child(5) { transition-delay: .32s; }

.hero-eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--brand); }
.hero-client { display: block; width: 180px; height: auto; margin: 0 0 18px; }
.hero-title { margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.35); font-size: 40px; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.hero-sub { margin: 14px 0 0; text-shadow: 0 1px 10px rgba(0,0,0,.4); font-size: 17px; color: rgba(255,255,255,.82); }

/* 조달청 슬라이드: 남색 바탕 + 오른쪽 인증서 */
.is-cert { background: radial-gradient(120% 90% at 85% 40%, #1d4f8c 0%, #12305a 45%, #0b1b33 100%); }
.is-cert .hero-in { justify-content: space-between; gap: 48px; }
.is-cert .hero-title { font-size: 36px; }
.hero-facts { margin: 26px 0 0; display: grid; gap: 12px; }
.hero-facts div { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: baseline; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.hero-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #f0c56a; }
.hero-facts dd { margin: 0; font-size: 15px; color: rgba(255,255,255,.9); }
.hero-cert { margin: 0 60px 40px 0; flex: none; position: relative; transform: translateY(16px); opacity: 0; transition: transform .9s ease .2s, opacity .9s ease .2s; }
.is-active .hero-cert { opacity: 1; transform: none; }
/* 종이 한 장 + 뒤에 살짝 비껴 놓인 종이 한 장 → 책상 위 서류처럼 */
.hero-cert::before { content: ""; position: absolute; inset: 0; background: #e9edf3; border-radius: 2px; transform: rotate(-4deg) translate(-10px, 6px); box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); }
.hero-cert img { position: relative; display: block; height: 340px; width: auto; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 34px 60px -24px rgba(0,0,0,.75); }

/* 아래 조작줄: 번호 · 진행 막대 · 화살표 */
.hero-ctrl { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; z-index: 3; pointer-events: none; }
.hero-ctrl .hero-in { align-items: center; gap: 22px; }
.hero-ctrl button, .hero-ctrl .hero-dots { pointer-events: auto; }
.hero-count { font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.hero-count b { color: #fff; }
.hero-dots { display: flex; gap: 8px; }
.hero-dot { width: 56px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.hero-dot span { display: block; width: 100%; height: 2px; background: rgba(255,255,255,.28); position: relative; overflow: hidden; }
.hero-dot span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-dot.is-active span::after { animation: hero-fill 6s linear forwards; }
.hero.is-paused .hero-dot.is-active span::after { animation: none; transform: scaleX(1); }
@keyframes hero-fill { to { transform: scaleX(1); } }
.hero-arrows { margin-left: auto; display: flex; gap: 8px; }
.hero-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.15); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); transition: background .2s, color .2s; }
.hero-arrow:hover { background: #fff; color: #111; }
.hero button:focus-visible, .hero a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-bg, .hero-copy > *, .hero-cert { transition: none !important; }
  .hero-dot.is-active span::after { animation: none; transform: scaleX(1); }
}

@media (max-width: 1020px) {
  .hero { --hero-h: 520px; }
  .hero-in { padding: 0 20px; }
  .hero-copy { padding-bottom: 70px; }
  .hero-title, .is-cert .hero-title { font-size: 27px; }
  .hero-sub { font-size: 15px; }
  .hero-client { width: 140px; }
  .hero-eyebrow { margin-bottom: 16px; }
  .is-photo::before { background: linear-gradient(0deg, rgba(9,15,24,.78) 0%, rgba(9,15,24,.4) 50%, rgba(9,15,24,0) 85%); }
  .is-photo .hero-in { align-items: flex-end; }
  .is-cert .hero-in { flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; }
  .hero-cert { display: none; }
  .br-pc { display: none; }
  .hero-ctrl { height: 64px; }
  .hero-dot { width: 36px; }
  .hero-arrow { width: 38px; height: 38px; font-size: 20px; }
}

/* 오시는길: 옛 글의 2칸 표(왼쪽 연락처 · 오른쪽 카카오 지도)를 폰에서는 위아래로 쌓는다.
   지도 폭은 extract.py 의 fit_roughmap() 이 본문 칸에 맞춰 그리게 한다 (지도 안쪽 부품엔 CSS 를 걸지 않음) */
@media (max-width: 1020px) {
  .editor table:has([id^="daumRoughmapContainer"]),
  .editor table:has([id^="daumRoughmapContainer"]) > tbody,
  .editor table:has([id^="daumRoughmapContainer"]) > tbody > tr,
  .editor table:has([id^="daumRoughmapContainer"]) > tbody > tr > td { display: block; width: 100% !important; height: auto !important; }
}

/* 지도 아래 "네이버 지도로 보기" (오시는길·CONTACT US) */
.naver-map { margin: 14px 0 0; clear: both; }
.btn-naver { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 20px; background: #03c75a; color: #fff; font-weight: 700; border-radius: 4px; }
.btn-naver:hover { background: #02b351; }