/* ─────────────────────────────────────────────────────────
   C — 이천부발역에피트모델하우스.pages.dev · 초록빛 — site.css 뒤에 붙어 덮어쓴다.

   A 와 확실히 달라야 한다. 같은 현장이라도 두 사이트가 닮으면
   손님이 대번에 알아보고, 검색엔진은 한쪽을 복제로 본다.

   A : 밝은 바탕 · 딥틸 · 둥근 모서리 · 사진이 오른쪽
   B : 짙은 바탕 · 구릿빛 · 각진 모서리 · 사진이 왼쪽

   색만 바꾸는 게 아니라 모서리·자간·배치까지 바꿔야 달라 보인다.
   ───────────────────────────────────────────────────────── */

:root{
  --ink:#12201C;
  --body:#5f636b;
  --muted:#93979f;
  --line:#e3e4e8;
  --bg:#ffffff;
  --tint:#F1F6F4;          /* 따뜻한 회색 */
  --point:#1F6F5C;         /* 구릿빛 */
  --point-2:#145747;
  --gold:#12201C;          /* B 는 보조 포인트를 먹빛으로 */
  --shadow:0 1px 2px rgba(22,24,28,.05),0 10px 28px rgba(22,24,28,.08);
  --hd:78px;
}

/* ── 각진 모서리로 ─────────────────────────────────── */
.bt{border-radius:2px;padding:16px 34px;letter-spacing:.01em}
.sec__pic img,.art__pic img,.unit__one img,.types__one,
.rg__form,.rg__side,.men__sub,.quick__one{border-radius:2px}
.hero__tag{border-radius:2px}

/* ── 머리 ──────────────────────────────────────────── */
.hd{border-bottom:1px solid var(--line)}
.hd__logo b{letter-spacing:-.02em;font-weight:900}
.hd__logo span{letter-spacing:.26em}
.hd__tel b{color:var(--point)}
.men__top,.men__list>li>a{font-weight:600;font-size:15px;letter-spacing:0}

/* 켜진 메뉴 밑에 짧은 줄 — A 에는 없는 표시 */
.men__list>li>.men__top::after{content:'';display:block;height:2px;width:0;background:var(--point);
  margin:-22px auto 0;transition:width .22s}
.men__list>li:hover>.men__top::after,
.men__list>li.open>.men__top::after{width:20px}

/* ── 첫 화면 — 아래에서 위로 어둡게, 글은 가운데 ────── */
.hero__veil{background:linear-gradient(0deg,rgba(12,13,16,.82) 0%,rgba(12,13,16,.30) 55%,rgba(12,13,16,.42) 100%)}
.hero__in{align-items:center;text-align:center}
.hero__tag{align-self:center;border-color:rgba(255,255,255,.4);letter-spacing:.06em;font-size:12px}
.hero__ttl{letter-spacing:-.03em;font-weight:900}
.hero__bts{justify-content:center}
.hero__dots i{height:2px;border-radius:0}

/* ── 숫자 줄 — A 는 색바탕, B 는 흰 바탕에 줄 ───────── */
.num{background:#fff;border-bottom:1px solid var(--line);color:var(--ink)}
.num__in{padding:44px 20px}
.num__one{border-left:1px solid var(--line)}
.num__one:first-child{border-left:0}
.num__one b{color:var(--point);font-weight:900}
.num__one span{color:var(--body);opacity:1}
.num__one small{color:var(--muted);opacity:1}

/* ── 본문 토막 — 사진을 왼쪽으로 (A 와 좌우가 뒤집힌다) ── */
.sec{grid-template-columns:1.15fr 1fr;padding:104px 20px}
.sec__in{order:2}
.sec--flip .sec__in{order:0}
.sec--flip .sec__pic{order:2}
.sec__en{color:var(--point);letter-spacing:.26em;font-size:11.5px}
.sec__ttl{font-weight:900;letter-spacing:-.035em}
.sec__more{border-bottom-width:1px;border-color:var(--ink);color:var(--ink);font-weight:700}
.sec__more:hover{color:var(--point);border-color:var(--point)}

/* ── 타입 — A 는 넷을 나란히, B 는 둘씩 크게 ────────── */
.types{background:var(--tint)}
.types__hd{text-align:left}
.types__grid{grid-template-columns:repeat(2,1fr);gap:24px}
.types__one img{aspect-ratio:16/9}
.types__one:hover{transform:none;box-shadow:0 0 0 2px var(--point)}
.types__txt{display:flex;align-items:baseline;gap:10px;padding:18px 20px 22px}
.types__txt b{font-weight:900}
.types__txt span{color:var(--point);font-weight:700}

/* ── 바로가기 ──────────────────────────────────────── */
.quick__one{border-radius:2px;text-align:center;padding:30px 18px}
.quick__one:hover{background:var(--ink);border-color:var(--ink)}
.quick__one:hover b,.quick__one:hover span{color:#fff}

/* ── 서브 머리 — 더 낮고 가운데 정렬 ────────────────── */
.shero{height:300px;text-align:center}
.shero::after{background:linear-gradient(0deg,rgba(12,13,16,.8),rgba(12,13,16,.36))}
.shero__en{letter-spacing:.26em}
.shero__ko{font-weight:900;letter-spacing:-.035em}

/* ── 안쪽 쪽 ───────────────────────────────────────── */
.art__in{text-align:left;border-left:3px solid var(--point);padding-left:20px}
.art__en{color:var(--point);letter-spacing:.26em}
.art__ttl{font-weight:900}
.art__sub{text-align:left;border-bottom:1px solid var(--line);padding-bottom:10px}

/* ── 표 ────────────────────────────────────────────── */
.tbl{border-top-color:var(--ink)}
.tbl th{background:#fff;border-right:1px solid var(--line);color:var(--ink)}
.tbl__wrap{max-width:860px}

/* ── 유니트 탭 — 밑줄 대신 칠하기 ───────────────────── */
.unit__tabs{gap:6px;border-bottom:0;margin-bottom:28px}
.unit__tab{border:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.unit__tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.unit__tab.on small{opacity:.7}

/* ── 등록 ──────────────────────────────────────────── */
.rg{grid-template-columns:1fr 1.6fr}
.rg__form{order:2}
.rg__side{background:var(--ink)}
.rg__sidetel{color:var(--point)}
.rg__row input:focus,.rg__row select:focus,.rg__row textarea:focus{
  border-color:var(--point);box-shadow:0 0 0 3px rgba(167,90,50,.12)}
.rg__agree input{accent-color:var(--point)}
.rg__msg.ok{color:var(--point)}

/* ── 등록 띠 ───────────────────────────────────────── */
.cta{background:var(--ink);border-top:0}
.cta__en{color:var(--point)}
.cta__ttl{color:#fff;font-weight:900}
.cta__sub{color:rgba(255,255,255,.72)}
.cta .bt--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta .bt--line:hover{background:rgba(255,255,255,.1)}

/* ── 꼬리 ──────────────────────────────────────────── */
.ft{background:#101114}
.ft__tel{color:var(--point)}

/* ── 떠 있는 버튼 — 둥근 원 대신 모난 막대 ──────────── */
.fab{right:0;bottom:0;gap:0;flex-direction:row}
.fab__tel,.fab__rg{width:auto;height:56px;border-radius:0;padding:0 20px;
  flex-direction:row;gap:8px;box-shadow:none}
.fab__tel{background:var(--ink)}
.fab__tel span{font-size:11px}
.fab__tel b{font-size:15px}
.fab__rg{background:var(--point);font-size:14px;line-height:1.2}

@media (max-width:820px){
  .sec{grid-template-columns:1fr}
  .sec__in,.sec--flip .sec__in,.sec--flip .sec__pic{order:0}
  .types__grid{grid-template-columns:1fr}
  .num__one{border-left:0}
  .rg{grid-template-columns:1fr}
  .rg__form{order:0}
  .fab{right:0;left:0;justify-content:stretch}
  .fab__tel,.fab__rg{flex:1;justify-content:center}
}