@charset "utf-8";
/* ─────────────────────────────────────────────────────────
   (주)지디컴퍼니 gdcompany.net
   공통 스타일. 페이지마다 본문 구성은 다르지만 여기서 나온다.
   ───────────────────────────────────────────────────────── */

@font-face{
  font-family:Pretendard; font-style:normal; font-weight:400 800;
  font-display:swap; src:url(/assets/font/Pretendard-subset.woff2) format("woff2");
}
/* 영문 전용 세리프. 한글은 안 들어 있고 영문·숫자만 잘라 넣었다.
   고딕만 쓰면 어디서나 보는 화면이 된다 — 영문에 세리프를 섞어 결을 만든다. */
@font-face{
  font-family:Playfair; font-style:normal; font-weight:400;
  font-display:swap; src:url(/assets/font/Playfair-400.woff2) format("woff2");
}
@font-face{
  font-family:Playfair; font-style:normal; font-weight:500;
  font-display:swap; src:url(/assets/font/Playfair-500.woff2) format("woff2");
}
@font-face{
  font-family:Playfair; font-style:italic; font-weight:400;
  font-display:swap; src:url(/assets/font/Playfair-400i.woff2) format("woff2");
}

:root{
  /* 로고에서 뽑은 색 */
  --청록:#006c89;        /* 흰 바탕 대비 5.9 — 글씨로 써도 된다 */
  --청록진:#00536a;
  --청록연:#e8f1f4;
  --주황:#f26921;        /* 대비 3.1 — 큰 글씨·선·장식에만 */
  --주황진:#c74d10;      /* 작은 글씨용, 대비 4.6 */
  --주황연:#fdf0e9;

  /* 지명원에서 뽑은 색 */
  --차콜:#2c353c;
  --차콜진:#1c2329;
  --차콜연:#3d4852;
  --구리:#c28a65;
  --구리밝은:#e8c9ae;    /* 어두운 바탕 위 작은 글씨 */

  --먹:#16191d;
  --글:#333a42;
  --재:#5b6570;
  --연재:#8a939d;
  --선:#e3e6e9;
  --선연:#eef0f2;
  --바탕연:#f6f7f8;
  --바탕아이보리:#f8f7f4;

  /* 움직임 */
  --뜸:cubic-bezier(.16,1,.3,1);
  --탁:cubic-bezier(.4,0,.2,1);

  /* 가로폭 */
  --폭:1220px;
  --폭좁:920px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--글);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  font-size:17px; line-height:1.8; letter-spacing:-.016em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,video,svg{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
p{margin:0; word-break:keep-all}
h1,h2,h3,h4{margin:0; line-height:1.3; word-break:keep-all; font-weight:700}
/* 한글 제목은 자간을 좁혀야 덩어리로 읽힌다. 크기가 클수록 더 좁게.
   ★ 이 세 줄은 반드시 위 공통 규칙 뒤에 둔다 — 앞에 두면 덮인다. */
h1{letter-spacing:-.048em}
h2{letter-spacing:-.042em}
h3{letter-spacing:-.034em}
h4{letter-spacing:-.03em}
button{font:inherit; color:inherit}
table{border-collapse:collapse; width:100%}

.안{width:min(var(--폭),calc(100% - 44px)); margin-inline:auto}
.안.좁{width:min(var(--폭좁),calc(100% - 44px))}

.건너뛰기{position:absolute; left:-9999px}
.건너뛰기:focus{left:16px; top:16px; z-index:200; background:#fff; padding:12px 18px; border:2px solid var(--청록)}
a:focus-visible,button:focus-visible{outline:2px solid var(--주황); outline-offset:3px; border-radius:2px}

/* ══ 머리 ══════════════════════════════════════════════ */
.머리{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.975);
  border-bottom:1px solid var(--선)}
.머리 .안{display:flex; align-items:center; gap:30px; height:80px}
.로고{display:flex; align-items:center; gap:11px; margin-right:auto}
.로고 img{width:64px}
.로고 b{font-size:15px; font-weight:700; letter-spacing:-.025em; color:var(--먹)}

/* 메뉴 — 밑줄이 가운데에서 양쪽으로 자란다 */
.메뉴{display:flex; gap:34px}
.메뉴 a{position:relative; display:inline-block; padding:10px 0;
  font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--재);
  transition:color .32s var(--탁)}
.메뉴 a::after{content:""; position:absolute; left:50%; right:50%; bottom:2px; height:2px;
  background:var(--주황); transition:left .34s var(--뜸), right .34s var(--뜸)}
.메뉴 a:hover{color:var(--먹)}
.메뉴 a:hover::after{left:0; right:0}
.메뉴 a[aria-current="page"]{color:var(--먹); font-weight:700}
.메뉴 a[aria-current="page"]::after{left:0; right:0}

/* 전화 — 꽉 찬 네모 대신 얇은 선. 올리면 청록이 차오른다 */
.전화{position:relative; display:inline-flex; align-items:baseline; gap:9px;
  padding:11px 20px 11px 19px; white-space:nowrap; overflow:hidden;
  border:1px solid var(--선); border-radius:2px; color:var(--먹);
  font-size:18px; font-weight:800; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  transition:border-color .34s var(--탁), color .34s var(--탁)}
.전화{isolation:isolate}
.전화::before{content:""; position:absolute; inset:0; z-index:-1;
  background:var(--청록); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--뜸)}
.전화 small{font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--청록);
  transition:color .34s var(--탁)}
.전화:hover{border-color:var(--청록); color:#fff}
.전화:hover::before{transform:scaleX(1)}
.전화:hover small{color:var(--구리밝은)}

.메뉴단추{display:none; flex:0 0 auto; padding:10px 2px 8px; margin-left:2px;
  background:none; border:none; cursor:pointer;
  font-size:12.5px; font-weight:800; letter-spacing:.15em; color:var(--차콜);
  border-bottom:2px solid var(--주황); transition:color .3s}
.메뉴단추:active{color:var(--청록)}

.펼침{position:fixed; left:0; right:0; top:62px; z-index:55;
  background:var(--차콜); color:#fff; max-height:0; overflow:hidden;
  transition:max-height .42s var(--뜸); box-shadow:0 12px 28px rgba(0,0,0,.24)}
.펼침.열림{max-height:76vh; overflow-y:auto}
.펼침 ul{padding:6px 0}
.펼침 li{border-bottom:1px solid rgba(255,255,255,.09)}
.펼침 li:last-child{border-bottom:none}
.펼침 a{display:flex; align-items:center; justify-content:space-between;
  padding:17px 22px; font-size:16.5px; font-weight:700; letter-spacing:-.025em; color:#fff}
.펼침 a small{font-size:11.5px; font-weight:600; letter-spacing:.1em; color:var(--구리밝은)}
.펼침 a:active{background:rgba(255,255,255,.07)}
.펼침 .전화줄{display:flex; align-items:center; justify-content:center; gap:9px;
  margin:12px 18px 20px; padding:16px; background:var(--청록); border-radius:3px;
  font-size:18px; font-weight:800; letter-spacing:-.02em; color:#fff}
.덮개{position:fixed; inset:0; z-index:54; background:rgba(15,19,23,.45);
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s}
.덮개.열림{opacity:1; visibility:visible}

/* ══ 페이지 첫 화면 ═══════════════════════════════════ */
/* 메인은 영상, 나머지 페이지는 띠 하나 */
.첫판{position:relative; background:var(--차콜); color:#fff; overflow:hidden}
/* 영상을 못 틀거나 poster 를 못 읽는 기기(카톡 인앱 등)에서도
   첫 화면이 비지 않도록 바탕에 사진을 깔아 둔다. */
.첫판 .바탕{position:absolute; inset:0; z-index:0;
  background:#2c353c url(/assets/img/photo/hero-1200.jpg) center/cover no-repeat}
.첫판 .바탕 video,.첫판 .바탕 img{width:100%; height:100%; object-fit:cover}
.첫판::after{content:""; position:absolute; inset:0; z-index:1}
.첫판 .안{position:relative; z-index:2}

/* 메인용 — 크게, 영상 위 */
.첫판.큰{min-height:min(88vh,780px); display:flex; align-items:center}
.첫판.큰::after{background:linear-gradient(100deg,
  rgba(28,34,40,.74) 0%, rgba(28,34,40,.42) 30%,
  rgba(28,34,40,.12) 62%, rgba(28,34,40,0) 100%)}
.첫판.큰 .안{padding:clamp(80px,11vw,124px) 0;
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 4px 22px rgba(0,0,0,.45)}
.첫판.큰 h1{font-size:clamp(2.2rem,6vw,4.2rem); line-height:1.12; margin-bottom:14px}
.첫판.큰 h1 em{font-family:Playfair,Georgia,serif; font-style:italic; display:block;
  font-size:.42em; font-weight:400; color:var(--구리밝은);
  letter-spacing:.005em; margin-top:16px}
.첫판.큰 .설명{max-width:33em; color:#fff; font-size:clamp(1rem,1.5vw,1.12rem); margin-top:27px}

/* 속장용 — 낮게, 사진 위 */
.첫판.띠{padding:clamp(72px,9vw,112px) 0 clamp(60px,7vw,84px)}
.첫판.띠 .바탕 img{opacity:.34}
.첫판.띠::after{background:linear-gradient(92deg,
  rgba(28,34,40,.94) 0%, rgba(28,34,40,.76) 48%, rgba(28,34,40,.46) 100%)}
.첫판.띠 h1{font-size:clamp(1.9rem,4.4vw,2.9rem); margin-bottom:16px}
.첫판.띠 .설명{max-width:40em; color:rgba(255,255,255,.88); font-size:clamp(1rem,1.4vw,1.08rem)}
.첫판 .라벨{font-family:Playfair,Georgia,serif; font-size:12.5px; font-weight:500;
  letter-spacing:.3em; color:var(--구리밝은); margin-bottom:22px; text-transform:uppercase}

/* 빵부스러기 */
.길{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:26px;
  font-size:13.5px; color:rgba(255,255,255,.62)}
.길 a:hover{color:#fff}
.길 span{color:rgba(255,255,255,.34)}
.길 strong{color:var(--구리밝은); font-weight:600}

/* 스크롤 안내 점 */
.아래표시{position:absolute; left:50%; bottom:26px; z-index:2; transform:translateX(-50%);
  width:1px; height:44px; background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.55))}
.아래표시::after{content:""; position:absolute; left:-2px; top:0; width:5px; height:5px;
  border-radius:50%; background:var(--구리); animation:흘러 2.4s ease-in-out infinite}
@keyframes 흘러{0%{top:0;opacity:0}30%{opacity:1}100%{top:40px;opacity:0}}

/* 첫 화면 글자 차례로 */
.차례 > *{opacity:0; transform:translateY(22px); animation:떠오름 .95s var(--뜸) forwards}
.차례 > :nth-child(1){animation-delay:.12s}
.차례 > :nth-child(2){animation-delay:.28s}
.차례 > :nth-child(3){animation-delay:.44s}
.차례 > :nth-child(4){animation-delay:.60s}
.차례 > :nth-child(5){animation-delay:.76s}
@keyframes 떠오름{to{opacity:1; transform:none}}

/* ══ 마디·머리글 ═════════════════════════════════════ */
.마디{padding:clamp(72px,9vw,124px) 0}
.마디.연{background:var(--바탕연)}
.마디.아이보리{background:var(--바탕아이보리)}
.마디.짙{background:var(--차콜); color:#fff}
.마디.빽빽{padding:clamp(52px,6vw,80px) 0}

.머리글{max-width:48em; margin-bottom:clamp(40px,5vw,62px)}
.머리글.가운데{margin-inline:auto; text-align:center}
.라벨{font-family:Playfair,Georgia,serif; font-size:12.5px; font-weight:500;
  letter-spacing:.26em; color:var(--청록); margin-bottom:17px; text-transform:uppercase}
.라벨::after{content:""; display:inline-block; width:28px; height:1px;
  background:var(--주황); margin-left:12px; vertical-align:middle}
.가운데 .라벨::after{display:none}
.짙 .라벨,.마디.짙 .라벨{color:var(--구리밝은)}
.머리글 h2{font-size:clamp(1.7rem,3.6vw,2.5rem); margin-bottom:18px}
.머리글 .설명{color:var(--재); font-size:clamp(1rem,1.4vw,1.09rem); line-height:1.85}
.짙 .머리글 .설명{color:rgba(255,255,255,.8)}

/* 제목 아래 왼쪽에서 오른쪽 끝까지 그어지는 선 */
.그음{position:relative; padding-bottom:20px}
.그음::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:linear-gradient(90deg, var(--주황) 0%, var(--주황) 22%,
    rgba(242,105,33,.45) 58%, rgba(242,105,33,0) 100%);
  transition:width 1.5s var(--뜸) .2s}
.보임 .그음::after{width:100%}
.가운데 .그음::after{left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(242,105,33,0) 0%, var(--주황) 42%,
    var(--주황) 58%, rgba(242,105,33,0) 100%)}

/* ══ 버튼 ═════════════════════════════════════════════ */
.버튼{display:inline-flex; align-items:center; gap:9px; font-weight:700;
  padding:16px 28px; border-radius:3px;
  transition:transform .4s var(--뜸), background .3s var(--탁), border-color .3s, color .3s}
.버튼:hover{transform:translateY(-2px)}
.버튼.주{background:var(--청록); color:#fff}
.버튼.주:hover{background:var(--청록진)}
.버튼.흰{background:#fff; color:var(--차콜)}
.버튼.흰:hover{background:var(--구리); color:#fff}
.버튼.테두리{border:1px solid rgba(255,255,255,.45); color:#fff}
.버튼.테두리:hover{border-color:var(--구리); background:rgba(194,138,101,.14)}
.버튼.선{border:1px solid var(--선); color:var(--먹); background:#fff}
.버튼.선:hover{border-color:var(--청록); color:var(--청록)}
.버튼들{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px}

/* ══ 숫자 띠 ══════════════════════════════════════════
   흰 바탕에 작게 두면 그냥 지나친다. 어둡게 깔고 크게 세운다. */
.숫자띠{position:relative; background:var(--차콜진); color:#fff; overflow:hidden}
.숫자띠 > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.15; z-index:0}
.숫자띠 .안{position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:8px; padding:clamp(56px,7vw,86px) 0}
.숫자띠 .칸{padding:8px 26px 8px 0; border-left:1px solid rgba(255,255,255,.16);
  padding-left:26px}
.숫자띠 .칸:first-child{border-left:none; padding-left:0}
.숫자띠 .칸 b{display:block; font-family:Playfair,Georgia,serif;
  font-size:clamp(2.5rem,5.2vw,3.8rem); font-weight:500; color:#fff;
  letter-spacing:-.022em; line-height:.98; font-variant-numeric:lining-nums}
.숫자띠 .칸 b i{font-family:Pretendard,sans-serif; font-style:normal; font-size:.3em;
  color:var(--구리밝은); margin-left:.2em; letter-spacing:-.02em; font-weight:700;
  vertical-align:.08em}
.숫자띠 .칸 > span{display:block; margin-top:14px; font-size:14.5px;
  color:rgba(255,255,255,.62); word-break:keep-all}
@media (max-width:640px){
  .숫자띠 .안{grid-template-columns:1fr 1fr; gap:26px 8px}
  .숫자띠 .칸:nth-child(odd){border-left:none; padding-left:0}
}

/* ══ 큰 실적 (사진이 주인공) ══════════════════════════ */
.큰실적{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:24px}
.큰현장{position:relative; overflow:hidden; min-height:clamp(400px,46vw,520px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:34px 32px 34px; color:#fff;
  transition:transform .6s var(--뜸)}
.큰현장:hover{transform:translateY(-6px)}
.큰현장 > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; transition:transform 1.1s var(--뜸)}
.큰현장:hover > img{transform:scale(1.06)}
.큰현장::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(rgba(20,26,31,.05) 0%, rgba(20,26,31,.42) 46%, rgba(20,26,31,.93) 100%)}
.큰현장 > :not(img){position:relative; z-index:2}
.큰현장 .꼭지{position:absolute; left:32px; top:30px; z-index:2;
  display:flex; align-items:center; gap:8px}
.큰현장 .꼭지 .해{background:rgba(255,255,255,.16); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; padding:6px 13px}
.큰현장 .꼭지 .딱지{background:var(--주황); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:6px 12px}
.큰현장 h3{font-size:clamp(1.3rem,2.4vw,1.62rem); margin-bottom:8px}
.큰현장 .유형{font-size:14px; color:var(--구리밝은); margin-bottom:18px; word-break:keep-all}
.큰현장 dl{display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:14.5px; margin:0}
.큰현장 dt{color:rgba(255,255,255,.52); white-space:nowrap}
.큰현장 dd{margin:0; color:rgba(255,255,255,.9)}
.큰현장 .매출{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.2);
  display:flex; align-items:baseline; justify-content:space-between}
.큰현장 .매출 span{font-size:13.5px; color:rgba(255,255,255,.56)}
.큰현장 .매출 b{font-size:1.5rem; font-weight:800; letter-spacing:-.03em; color:#fff}

/* ══ 한 문장 (브랜드 스테이트먼트) ════════════════════ */
.한문장{padding:clamp(84px,11vw,150px) 0; text-align:center}
.한문장 .큰글{font-size:clamp(1.5rem,3.9vw,2.75rem); font-weight:800; line-height:1.46;
  letter-spacing:-.05em; color:var(--먹); word-break:keep-all; max-width:20em; margin-inline:auto}
/* 강조한 말 아래로 선이 지나간다. 글자가 다 올라온 뒤에 그어지도록 늦춘다. */
.한문장 .큰글 em{position:relative; font-style:normal; color:var(--청록);
  display:inline-block}
.한문장 .큰글 em::after{content:""; position:absolute; left:0; right:0; bottom:.04em;
  height:.085em; background:var(--주황); border-radius:1px;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--뜸) .85s}
.보임 .한문장 .큰글 em::after,
.한문장 .보임 .큰글 em::after{transform:scaleX(1)}

/* 아래 설명은 제목보다 한 박자 늦게 */
.한문장 .잔글{transition-delay:.5s}

/* 한 문장 두 줄은 서로 반대편에서 들어온다.
   창(마스크) 안에서 가로로 미끄러지므로 밖으로 새지 않는다.
   ★ 아래 「보임」 규칙을 뒤에 둬야 한다 — 앞에 두면 위 두 줄에 덮인다. */
.한문장 .큰글 .줄:nth-of-type(1) > i{transform:translateX(-102%)}
.한문장 .큰글 .줄:nth-of-type(2) > i{transform:translateX(102%); transition-delay:.14s}
.한문장 .보임 .큰글 .줄 > i{transform:none}

@media (prefers-reduced-motion:reduce){
  .한문장 .큰글 .줄 > i{transform:none !important}
}

.한문장 .잔글{margin-top:26px; color:var(--재); font-size:clamp(1rem,1.4vw,1.08rem);
  max-width:34em; margin-inline:auto}

/* ══ 흐르는 띠 (현장명 · 시공사) ══════════════════════
   같은 내용을 두 벌 넣고 절반만큼 밀면 끊김 없이 이어진다. */
.흐름{overflow:hidden; position:relative; padding:clamp(22px,3vw,34px) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.흐름 .줄{display:flex; width:max-content; animation:흘러감 46s linear infinite}
.흐름.뒤로 .줄{animation-direction:reverse; animation-duration:58s}
.흐름:hover .줄{animation-play-state:paused}
.흐름 .알{display:inline-flex; align-items:center; gap:14px; padding:0 22px;
  font-size:clamp(1rem,1.9vw,1.4rem); font-weight:700; letter-spacing:-.03em;
  color:var(--먹); white-space:nowrap}
.흐름 .알::after{content:""; width:5px; height:5px; border-radius:50%;
  background:var(--주황); flex:0 0 auto; opacity:.65}

/* 로고가 흐르는 띠 — 회사마다 로고 비율이 달라 높이로 맞춘다 */
.흐름.로고띠 .알{padding:0 30px; gap:30px}
.흐름.로고띠 .알 img{height:clamp(26px,3.4vw,36px); width:auto;
  opacity:.82; transition:opacity .35s var(--탁)}
.흐름.로고띠 .알:hover img{opacity:1}
.흐름.로고띠 .알.글자{font-size:clamp(.95rem,1.7vw,1.22rem); font-weight:700;
  color:rgba(255,255,255,.82); letter-spacing:-.02em}
.흐름.로고띠 .알::after{opacity:.4; width:4px; height:4px}

/* 로고를 격자로 놓을 때 (사업실적 아래) */
.로고판{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12)}
.로고판 .칸{background:var(--차콜); display:grid; place-items:center;
  min-height:96px; padding:20px 18px; transition:background .4s var(--탁)}
.로고판 .칸:hover{background:var(--차콜연)}
.로고판 .칸 img{height:30px; width:auto; opacity:.84; transition:opacity .35s}
.로고판 .칸:hover img{opacity:1}
.로고판 .칸 span{font-size:15px; font-weight:700; color:rgba(255,255,255,.8); letter-spacing:-.02em}
.짙 .흐름 .알{color:rgba(255,255,255,.92)}
.짙 .흐름{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@keyframes 흘러감{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ══ 고객사 (신탁사 · 시공사) ═════════════════════════ */
.고객판{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px}
.고객칸{border:1px solid var(--선); background:#fff; padding:32px 30px 34px}
.고객칸 .꼬리표{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.12em;
  color:#fff; background:var(--차콜); padding:5px 12px; margin-bottom:20px}
.고객칸 ul{display:flex; flex-wrap:wrap; gap:9px}
.고객칸 li{border:1px solid var(--선연); background:var(--바탕연); padding:9px 16px;
  font-size:14.5px; font-weight:600; color:var(--글)}

/* ══ 일 여섯 가지 (설명 붙은 카드) ════════════════════ */
.일판{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:1px;
  background:var(--선); border:1px solid var(--선)}
.일칸{background:#fff; padding:36px 32px 40px; transition:background .4s var(--탁)}
.일칸:hover{background:var(--청록연)}
.일칸 .번호{font-size:12.5px; font-weight:800; letter-spacing:.1em; color:var(--주황진)}
.일칸 h3{font-size:1.16rem; margin:12px 0 12px; color:var(--먹)}
.일칸 p{font-size:15px; line-height:1.76; color:var(--재)}

/* ══ 회사 이야기 ══════════════════════════════════════ */
.이야기{max-width:52em; margin-inline:auto; text-align:center}
.이야기 p{font-size:clamp(1rem,1.45vw,1.13rem); line-height:1.95; color:var(--글);
  margin-bottom:22px}
.이야기 p:last-of-type{margin-bottom:0}
.이야기 strong{color:var(--먹); font-weight:700}

/* ══ 글 + 칸 맞물림 (메인 회사소개) ═══════════════════ */
.맞물림{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,5vw,72px); align-items:center}
.시설칸{border:1px solid var(--선); background:#fff; padding:24px 26px; margin-bottom:14px;
  transition:border-color .4s var(--탁), transform .5s var(--뜸)}
.시설칸:last-child{margin-bottom:0}
.시설칸:hover{border-color:var(--청록); transform:translateX(4px)}
.시설칸 b{display:block; color:var(--청록); font-size:16.5px; margin-bottom:5px}
.시설칸 span{font-size:14.5px; color:var(--재)}

/* ══ 진행 절차 ════════════════════════════════════════ */
.맡김{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,66px); align-items:center}
.맡김 .사진{overflow:hidden}
.맡김 .사진 img{width:100%; aspect-ratio:3/2; object-fit:cover}
.차례단계{position:relative}
.차례단계::before{content:""; position:absolute; left:19px; top:16px; bottom:16px; width:1px;
  background:var(--선); transform:scaleY(0); transform-origin:top;
  transition:transform 1.4s var(--뜸) .2s}
.차례단계.보임::before{transform:scaleY(1)}
.차례단계 li{position:relative; padding-left:60px; padding-bottom:28px}
.차례단계 li:last-child{padding-bottom:0}
.차례단계 .번{position:absolute; left:0; top:0; width:39px; height:39px; border-radius:50%;
  border:1px solid var(--선); background:#fff; color:var(--청록);
  display:grid; place-items:center; font-size:13.5px; font-weight:800; letter-spacing:.02em;
  transition:background .5s var(--뜸), color .5s var(--뜸), border-color .5s var(--뜸)}
.차례단계 li.켬 .번{border-color:var(--청록); background:var(--청록); color:#fff}
.차례단계 b{display:block; font-size:1.09rem; font-weight:700; margin-bottom:6px; letter-spacing:-.025em;
  color:var(--먹)}
.차례단계 .글{display:block; font-size:15px; color:var(--재); line-height:1.72}

/* ══ 사업영역 칸 ══════════════════════════════════════ */
.영역칸들{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:1px; background:var(--선); border:1px solid var(--선)}
.영역칸{display:block; background:#fff; padding:36px 30px 40px;
  transition:background .4s var(--탁)}
.영역칸:hover{background:var(--청록연)}
.영역칸 .번호{font-size:13px; font-weight:800; color:var(--주황진); letter-spacing:.08em}
.영역칸 h3{font-size:1.22rem; margin:13px 0 6px; color:var(--먹)}
.영역칸 .영문{font-size:12.5px; color:var(--연재); letter-spacing:.06em; margin-bottom:20px}
.영역칸 li{position:relative; padding-left:14px; font-size:15px; color:var(--재); margin-bottom:8px}
.영역칸 li::before{content:""; position:absolute; left:0; top:.64em; width:4px; height:4px;
  background:var(--청록); border-radius:50%}

.더보기{margin-top:clamp(38px,5vw,56px); text-align:center}

@media (max-width:900px){
  .맞물림,.맡김{grid-template-columns:1fr}
}

/* ══ 실적 카드 ════════════════════════════════════════ */
.실적목록{display:grid; grid-template-columns:repeat(auto-fill,minmax(296px,1fr)); gap:28px}
.현장{border:1px solid var(--선); background:#fff; overflow:hidden;
  transition:transform .55s var(--뜸), box-shadow .55s var(--뜸), border-color .4s}
.현장:hover{transform:translateY(-6px); border-color:transparent;
  box-shadow:0 22px 48px -24px rgba(28,35,41,.36)}
.현장 .사진{aspect-ratio:4/3; overflow:hidden; background:var(--바탕연); position:relative}
.현장 .사진 img{width:100%; height:100%; object-fit:cover; transition:transform .85s var(--뜸)}
.현장:hover .사진 img{transform:scale(1.06)}
.현장 .해{position:absolute; left:0; top:0; z-index:2; background:var(--차콜); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; padding:7px 14px}
.현장 .딱지{position:absolute; right:12px; top:12px; z-index:2;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:5px 11px; border-radius:2px;
  background:rgba(255,255,255,.94); color:var(--재)}
.현장 .딱지.분양중{background:var(--주황); color:#fff}
.현장 .글{padding:24px 24px 26px}
.현장 h3{font-size:1.15rem; margin-bottom:6px}
.현장 .유형{font-size:13.5px; color:var(--연재); margin-bottom:15px; word-break:keep-all}
.현장 dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; margin:0}
.현장 dt{color:var(--연재); white-space:nowrap}
.현장 dd{margin:0; color:var(--재)}
.현장 .매출{margin-top:16px; padding-top:14px; border-top:1px solid var(--선연);
  font-size:14px; color:var(--재); display:flex; align-items:baseline; justify-content:space-between}
.현장 .매출 b{color:var(--차콜); font-size:17px; font-weight:800; letter-spacing:-.02em}

/* ══ 대표 인사말 (회사소개) ═══════════════════════════ */
.인사{display:grid; grid-template-columns:300px 1fr; gap:clamp(36px,5vw,72px); align-items:start}
.대표 .사진칸{position:relative; background:var(--바탕연); aspect-ratio:3/4; overflow:hidden}
.대표 .사진칸 img{width:100%; height:100%; object-fit:cover; object-position:center top}
/* 사진이 아직 없을 때 — 빈 네모 대신 안내를 둔다 */
.대표 .사진칸.없음{display:grid; place-items:center; border:1px dashed var(--선)}
.대표 .사진칸.없음 img{display:none}
.대표 .사진칸.없음::after{content:"대표 사진"; font-size:14px; color:var(--연재); letter-spacing:.04em}
.대표 .이름{margin-top:20px; padding-top:18px; border-top:2px solid var(--차콜)}
.대표 .직함{font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--주황진)}
.대표 .성함{font-size:1.45rem; font-weight:800; letter-spacing:.04em; color:var(--먹); margin-top:6px}
.대표 .영문이름{font-size:12.5px; letter-spacing:.14em; color:var(--연재); margin-top:4px}

.말 h2{font-size:clamp(1.55rem,3.2vw,2.15rem); margin-bottom:30px}
.말 h2 em{font-style:normal; display:block; font-size:.58em; font-weight:500;
  color:var(--청록); letter-spacing:.01em; margin-top:10px}
.말 p{margin-bottom:20px; color:var(--글); font-size:clamp(1rem,1.35vw,1.06rem); line-height:1.88}
.말 .맺음{margin-top:34px; padding-top:22px; border-top:1px solid var(--선);
  color:var(--재); font-size:15.5px}
.말 .맺음 b{color:var(--먹); font-size:1.15rem; letter-spacing:.06em; margin-left:6px}

/* ══ 네 가지 태도 ═════════════════════════════════════ */
.가치어{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:20px;
  text-align:center}
.가치어 li{padding:6px 4px}
.가치어 b{display:block; font-size:clamp(.95rem,1.7vw,1.15rem); font-weight:800;
  letter-spacing:.12em; color:var(--구리밝은)}
.가치어 span{display:block; margin-top:8px; font-size:14px; color:rgba(255,255,255,.62)}

/* ══ 비전 · 미션 ══════════════════════════════════════ */
.비전판{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.비전칸{background:#fff; border:1px solid var(--선); padding:38px 34px 40px}
.비전칸 .꼬리표{font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--주황진);
  margin-bottom:18px}
.비전칸.큰 .글귀{font-size:clamp(1.1rem,2.1vw,1.4rem); font-weight:700; line-height:1.62;
  letter-spacing:-.03em; color:var(--먹); word-break:keep-all}
.미션 li{position:relative; padding-left:26px; margin-bottom:14px; color:var(--글);
  font-size:15.5px; line-height:1.74; word-break:keep-all}
.미션 li:last-child{margin-bottom:0}
.미션 li::before{content:counter(미션); counter-increment:미션;
  position:absolute; left:0; top:.28em; width:18px; height:18px; border-radius:50%;
  background:var(--청록); color:#fff; font-size:11px; font-weight:700;
  display:grid; place-items:center; line-height:1}
.미션{counter-reset:미션}

/* ══ 핵심가치 동그라미 ════════════════════════════════ */
.동그라미들{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px}
.동그라미{width:clamp(126px,17vw,164px); aspect-ratio:1; border-radius:50%;
  border:2px solid var(--구리); background:var(--주황연);
  display:grid; place-items:center; text-align:center;
  transition:transform .55s var(--뜸), background .4s}
.동그라미:hover{transform:translateY(-5px); background:#fff}
.동그라미 span{font-size:clamp(.95rem,1.5vw,1.08rem); font-weight:800; color:var(--차콜);
  letter-spacing:-.025em; word-break:keep-all; padding:0 10px}
.더하기{font-size:1.4rem; font-weight:300; color:var(--연재)}

/* ══ 경영전략 ═════════════════════════════════════════ */
.전략{background:var(--차콜); color:#fff; padding:clamp(34px,5vw,54px) clamp(24px,4vw,48px)}
.전략줄{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px}
.전략칸{min-width:150px; padding:22px 20px; text-align:center;
  border:1px solid rgba(255,255,255,.2); border-radius:3px}
.전략칸 .갈래{display:block; font-size:12px; letter-spacing:.06em; color:var(--구리밝은);
  margin-bottom:8px}
.전략칸 b{font-size:1.08rem; letter-spacing:-.02em}
.전략 .더하기{color:rgba(255,255,255,.4)}
.전략 .화살{display:grid; place-items:center; margin:22px 0 18px; color:var(--구리)}
.전략 .결과{text-align:center; font-size:clamp(1.05rem,2vw,1.3rem); font-weight:800;
  letter-spacing:-.02em; padding:16px; border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22)}

/* ══ 회사개요 표 ══════════════════════════════════════ */
.개요표{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:0 52px}
.개요표 dl{margin:0; display:grid; grid-template-columns:8.5em 1fr}
.개요표 dt,.개요표 dd{padding:16px 0; border-bottom:1px solid var(--선); margin:0; font-size:15.5px}
.개요표 dt{color:var(--재); font-weight:600}
.개요표 dd{color:var(--먹)}

@media (max-width:860px){
  .인사{grid-template-columns:1fr}
  .대표{max-width:290px}
  .비전판{grid-template-columns:1fr}
}
@media (max-width:560px){
  .동그라미들{gap:12px}
  .동그라미{width:clamp(104px,30vw,132px)}
  .전략줄{flex-direction:column}
  .전략칸{width:100%}
  .개요표 dl{grid-template-columns:7em 1fr}
}

/* ══ 실적 거르개 (사업실적) ═══════════════════════════ */
.거르개{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:clamp(30px,4vw,44px); padding-bottom:22px;
  border-bottom:1px solid var(--선)}
.거르개 .단추들{display:flex; flex-wrap:wrap; gap:8px}
.거르개 button{border:1px solid var(--선); background:#fff; color:var(--재);
  padding:9px 17px; font-size:14.5px; font-weight:600; cursor:pointer; border-radius:2px;
  transition:border-color .3s, background .3s, color .3s}
.거르개 button:hover{border-color:var(--청록); color:var(--청록)}
.거르개 button.켬{background:var(--차콜); border-color:var(--차콜); color:#fff}
.거르개 .셈{font-size:14.5px; color:var(--재); white-space:nowrap}
.거르개 .셈 b{color:var(--먹); font-size:1.15rem; font-weight:800; margin-right:2px}

.밝힘{margin-top:clamp(38px,5vw,56px); padding:26px 28px; background:var(--바탕연);
  border-left:3px solid var(--주황)}
.밝힘 p{font-size:14.5px; line-height:1.8; color:var(--재); margin-bottom:8px}
.밝힘 p:last-child{margin-bottom:0}
.밝힘 b{color:var(--먹); font-weight:700}

/* ══ 연혁 ═════════════════════════════════════════════ */
.연혁{position:relative; padding-left:0}
.해칸{display:grid; grid-template-columns:170px 1fr; gap:clamp(20px,3vw,44px);
  padding:30px 0; border-top:1px solid var(--선)}
.해칸:first-child{border-top:2px solid var(--차콜)}
.해숫자 b{display:block; font-family:Playfair,Georgia,serif;
  font-size:clamp(1.75rem,3.2vw,2.3rem); font-weight:500;
  letter-spacing:0; color:var(--먹); line-height:1}
.해숫자 span{display:block; margin-top:8px; font-size:13.5px; color:var(--주황진); font-weight:600}
.해목록 li{position:relative; padding-left:20px; margin-bottom:16px}
.해목록 li:last-child{margin-bottom:0}
.해목록 li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--청록)}
.해목록 b{display:block; font-size:1.06rem; font-weight:700; color:var(--먹); letter-spacing:-.025em}
.해목록 span{display:block; margin-top:3px; font-size:14px; color:var(--연재); word-break:keep-all}
@media (max-width:640px){
  .해칸{grid-template-columns:1fr; gap:14px}
}

/* ══ 사업영역 상세 ════════════════════════════════════ */
.영역상세{border-top:2px solid var(--차콜)}
.영역줄{display:grid; grid-template-columns:130px 1fr; gap:clamp(20px,3vw,44px);
  padding:clamp(32px,4vw,46px) 0; border-bottom:1px solid var(--선)}
.번호판 span{display:block; font-family:Playfair,Georgia,serif;
  font-size:clamp(2.4rem,4.8vw,3.5rem); font-weight:400;
  letter-spacing:0; line-height:1; color:var(--선); transition:color .5s var(--탁)}
.영역줄:hover .번호판 span{color:var(--주황)}
.영역줄 .속 h3{font-size:clamp(1.25rem,2.4vw,1.55rem); margin-bottom:6px}
.영역줄 .속 .영문{font-size:12.5px; letter-spacing:.1em; color:var(--연재); margin-bottom:20px}
.영역줄 .속 ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px 22px}
.영역줄 .속 li{position:relative; padding-left:15px; font-size:15.5px; color:var(--글)}
.영역줄 .속 li::before{content:""; position:absolute; left:0; top:.64em; width:5px; height:5px;
  background:var(--청록); border-radius:50%}
@media (max-width:640px){ .영역줄{grid-template-columns:1fr; gap:12px} }

/* ══ 다루는 시설 ══════════════════════════════════════ */
.시설판{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px}
.시설큰칸{background:#fff; border:1px solid var(--선); padding:34px 30px 38px;
  transition:transform .5s var(--뜸), border-color .4s}
.시설큰칸:hover{transform:translateY(-5px); border-color:var(--청록)}
.시설큰칸 .점{display:block; width:14px; height:14px; border-radius:50%; margin-bottom:20px}
.시설큰칸 .점.주거{background:#6aa84f}
.시설큰칸 .점.업무{background:var(--청록)}
.시설큰칸 .점.상업{background:#8e5aa8}
.시설큰칸 b{display:block; font-size:1.2rem; color:var(--먹); margin-bottom:8px; letter-spacing:-.03em}
.시설큰칸 p{font-size:15px; color:var(--재)}

/* ══ 조직도 ═══════════════════════════════════════════ */
.조직도{text-align:center}
.꼭대기{display:inline-flex; flex-direction:column; align-items:center}
.꼭지칸{min-width:150px; padding:16px 28px; background:var(--차콜); color:#fff;
  font-size:1.05rem; font-weight:700; letter-spacing:-.02em; border-radius:2px}
.꼭지칸:last-child{background:var(--청록)}
.세로선{width:1px; height:30px; background:var(--선)}
.가로선{width:1px; height:34px; background:var(--선); margin:0 auto}
.총괄들{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:16px;
  border-top:1px solid var(--선); padding-top:34px; position:relative}
.총괄칸{border:1px solid var(--선); background:#fff; padding:0 0 20px; overflow:hidden;
  transition:border-color .4s, transform .5s var(--뜸)}
.총괄칸:hover{border-color:var(--청록); transform:translateY(-4px)}
.총괄이름{background:var(--바탕연); border-bottom:1px solid var(--선);
  padding:15px 12px; font-size:15.5px; font-weight:800; color:var(--먹); letter-spacing:-.025em}
.본부들{padding:16px 14px 0}
.본부들 li{font-size:14px; color:var(--재); padding:6px 0; word-break:keep-all}
.조직말{max-width:44em; margin:clamp(38px,5vw,54px) auto 0; text-align:center;
  font-size:15.5px; line-height:1.85; color:var(--재);
  padding:24px 26px; background:var(--바탕연)}

/* ══ 대행문의 ═════════════════════════════════════════ */
.문의판{display:grid; grid-template-columns:1.25fr .75fr; gap:26px; align-items:start}
.문의칸{border:1px solid var(--선); background:#fff; padding:clamp(32px,4vw,46px)}
.문의칸.큰{border-top:3px solid var(--청록)}
.문의칸 h2{font-size:clamp(1.35rem,2.6vw,1.75rem); margin-bottom:14px}
.문의칸 .설명{color:var(--재); font-size:15.5px; margin-bottom:26px}
.챙길것{border-top:1px solid var(--선); margin-bottom:30px}
.챙길것 li{display:grid; grid-template-columns:8em 1fr; gap:14px; padding:15px 0;
  border-bottom:1px solid var(--선연); font-size:15px}
.챙길것 b{color:var(--먹); font-weight:700}
.챙길것 span{color:var(--재); word-break:keep-all}
@media (max-width:820px){
  .문의판{grid-template-columns:1fr}
  .챙길것 li{grid-template-columns:1fr; gap:3px}
}

/* ══ 시공사 ═══════════════════════════════════════════ */
.시공사{display:flex; flex-wrap:wrap; gap:10px}
.시공사 span{border:1px solid var(--선); background:#fff; padding:11px 20px;
  font-size:15px; font-weight:600; color:var(--차콜)}
.짙 .시공사 span{background:transparent; border-color:rgba(255,255,255,.22); color:#fff}

/* ══ 두 갈래 카드 ═════════════════════════════════════ */
.갈래{display:grid; grid-template-columns:repeat(auto-fit,minmax(306px,1fr)); gap:26px}
.갈래 .칸{position:relative; overflow:hidden; min-height:346px; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end; padding:38px 34px 36px}
.갈래 .칸 > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; transition:transform 1s var(--뜸)}
.갈래 .칸:hover > img{transform:scale(1.05)}
.갈래 .칸::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(rgba(28,35,41,.28) 0%, rgba(28,35,41,.9) 76%)}
.갈래 .칸 > :not(img){position:relative; z-index:2}
.갈래 .칸 .라벨{color:var(--구리밝은); margin-bottom:12px}
.갈래 .칸 .라벨::after{background:var(--구리)}
.갈래 .칸 h3{font-size:clamp(1.3rem,2.6vw,1.65rem); margin-bottom:12px}
.갈래 .칸 p{font-size:15.5px; color:rgba(255,255,255,.85); margin-bottom:24px}
.갈래 .누름{display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  background:#fff; color:var(--차콜); font-weight:700; padding:13px 24px; border-radius:3px;
  font-size:15.5px; transition:transform .4s var(--뜸), background .3s, color .3s}
.갈래 .누름:hover{transform:translateX(3px); background:var(--구리); color:#fff}

/* ══ 아래 문의 띠 ═════════════════════════════════════ */
.문의띠{position:relative; background:var(--차콜); color:#fff; text-align:center;
  padding:clamp(68px,8vw,100px) 0; overflow:hidden}
.문의띠 > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.2; z-index:0}
.문의띠 .안{position:relative; z-index:2}
.문의띠 .라벨{color:var(--구리밝은)}
.문의띠 .라벨::after{display:none}
.문의띠 h2{font-size:clamp(1.55rem,3.3vw,2.2rem); margin-bottom:14px}
.문의띠 .설명{color:rgba(255,255,255,.84); margin-bottom:34px}
.문의띠 .큰전화{display:inline-flex; align-items:center; gap:12px; background:#fff;
  color:var(--차콜); font-size:clamp(1.35rem,3vw,1.8rem); font-weight:800; letter-spacing:-.02em;
  padding:19px 38px; border-radius:3px;
  transition:transform .4s var(--뜸), background .3s, color .3s}
.문의띠 .큰전화:hover{transform:translateY(-2px); background:var(--구리); color:#fff}

/* ══ 꼬리 ═════════════════════════════════════════════ */
.꼬리{background:var(--차콜진); color:rgba(255,255,255,.66); font-size:14.5px; padding:56px 0 54px}
.꼬리 .윗줄{display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between;
  padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.12)}
.꼬리 img{width:66px; margin-bottom:16px; filter:brightness(0) invert(1); opacity:.9}
.꼬리 .왼 b{display:block; color:#fff; font-size:16.5px; margin-bottom:8px; font-weight:700}
.꼬리 .왼 p{font-size:14px; color:rgba(255,255,255,.55)}
.꼬리메뉴 ul{display:flex; flex-wrap:wrap; gap:8px 26px}
.꼬리메뉴 a{font-size:14.5px; font-weight:600; color:rgba(255,255,255,.78); transition:color .3s}
.꼬리메뉴 a:hover{color:#fff}
.꼬리 .정보{margin-top:26px; line-height:1.9}
.꼬리 .정보 a{color:rgba(255,255,255,.82)}
.꼬리 .밑{margin-top:22px; font-size:13.5px; color:rgba(255,255,255,.44)}

/* ══ 휴대폰 아래 고정 띠 ══════════════════════════════ */
.뜬띠{position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; align-items:center; gap:10px;
  background:var(--차콜진); border-top:1px solid rgba(255,255,255,.10);
  padding:11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  transform:translateY(112%); transition:transform .45s var(--뜸);
  box-shadow:0 -8px 28px rgba(0,0,0,.22)}
.뜬띠.보임{transform:none}
.뜬띠 > img{flex:0 0 auto; width:38px; filter:brightness(0) invert(1); opacity:.92}
.뜬띠 .글{flex:1 1 auto; min-width:0; line-height:1.35}
.뜬띠 .글 b{display:block; color:#fff; font-size:14.5px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.뜬띠 .걺{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  background:var(--청록); color:#fff; font-weight:800; font-size:16px; letter-spacing:-.02em;
  padding:13px 18px; border-radius:3px}
.뜬띠 .걺:active{background:var(--청록진)}
.뜬띠 .걺 svg{width:16px; height:16px; fill:currentColor; flex:0 0 auto}


/* ══ 줄 마스크 등장 (메인 제목) ══════════════════════
   줄을 창으로 가려 두고 글자를 아래에서 밀어 올린다.
   그냥 페이드보다 손이 많이 간 느낌이 난다.
   ★ overflow:hidden 이라 한글 받침이 잘리기 쉽다 —
     줄 높이를 넉넉히 주고 아래 여백을 둔다. */
.줄{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.줄 > i{display:block; font-style:inherit; font-weight:inherit; letter-spacing:inherit;
  transform:translateY(105%); transition:transform 1.05s var(--뜸)}
.보임 .줄 > i,
.차례 .줄 > i{transform:none}
.줄:nth-of-type(2) > i{transition-delay:.1s}
.줄:nth-of-type(3) > i{transition-delay:.2s}

/* 첫 화면은 들어오자마자 순서대로 올라온다 */
.첫판 .줄 > i{transform:translateY(105%); animation:줄올라옴 1.1s var(--뜸) forwards}
.첫판 .줄:nth-of-type(1) > i{animation-delay:.15s}
.첫판 .줄:nth-of-type(2) > i{animation-delay:.3s}
@keyframes 줄올라옴{to{transform:none}}

@media (prefers-reduced-motion:reduce){
  .줄 > i,.첫판 .줄 > i{transform:none !important; animation:none; transition:none}
}

/* ══ 등장 ═════════════════════════════════════════════
   숨기는 건 JS 가 「아직 화면 아래에 있는 것」에만 붙인다.
   CSS 로 처음부터 전부 숨기면 한 번 어긋났을 때 글이 통째로 사라진다. */
[data-등장]{transition:opacity .95s var(--뜸), transform .95s var(--뜸)}
[data-등장].숨김{opacity:0; transform:translateY(26px)}


/* ══ 사진 카드는 옆에서 하나씩 ═══════════════════════
   PC 에서만. 휴대폰은 좁아서 가로로 밀면 답답하니
   기존처럼 아래에서 올라오게 둔다. */
@media (min-width:1001px){
  .큰실적 > [data-등장].숨김,
  .갈래 > .칸[data-등장].숨김{transform:translateX(-64px)}
  .큰실적 > [data-등장]:nth-child(2),
  .갈래 > .칸[data-등장]:nth-child(2){transition-delay:.14s}
  .큰실적 > [data-등장]:nth-child(3){transition-delay:.28s}

  /* 실적 아래 작은 카드들도 같은 결로 */
  .실적목록 > [data-등장].숨김{transform:translateX(-48px)}
  .실적목록 > [data-등장]:nth-child(3n+2){transition-delay:.1s}
  .실적목록 > [data-등장]:nth-child(3n+3){transition-delay:.2s}
}

/* ══ 화면 크기 ════════════════════════════════════════ */
@media (max-width:1000px){
  .메뉴{display:none}
  .메뉴단추{display:block}
  .머리 .안{height:62px; gap:16px}
  .로고 img{width:54px}
  .로고 b{font-size:14px}
  /* 메뉴가 접히는 폭부터 아래 고정 띠를 띄운다.
     560px 이하로만 걸어 두면 태블릿·좁은 창에서 통째로 사라진다. */
  .뜬띠{display:flex}
  body{padding-bottom:78px}
}
@media (min-width:1001px){
  .펼침,.덮개{display:none}

  /* PC 에서는 하단을 가로지르는 띠 대신 오른쪽 옆에 세로로 붙인다.
     같은 요소를 모양만 바꿔 쓰므로 스크립트는 그대로 쓴다. */
  .뜬띠{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    left:auto; right:22px; bottom:auto; top:50%;
    width:112px; padding:18px 14px 16px; border-radius:4px;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 40px -16px rgba(0,0,0,.5);
    transform:translateY(-50%) translateX(22px); opacity:0; pointer-events:none;
    transition:transform .5s var(--뜸), opacity .45s var(--탁);
    text-align:center;
  }
  .뜬띠.보임{transform:translateY(-50%); opacity:1; pointer-events:auto}
  .뜬띠 > img{width:40px; margin:0 auto 12px}
  .뜬띠 .글{flex:0 0 auto; margin-bottom:12px;
    padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.14)}
  .뜬띠 .글 b{font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.68);
    font-weight:600; letter-spacing:.01em; white-space:normal}
  .뜬띠 .글 b::after{content:" 상담"}
  .뜬띠 .걺{justify-content:center; padding:11px 6px; font-size:14px;
    border-radius:3px; letter-spacing:-.03em}
  .뜬띠 .걺 svg{width:13px; height:13px}
}
@media (max-width:900px){
  .첫판.큰::after{background:linear-gradient(
    rgba(28,34,40,.26) 0%, rgba(28,34,40,.52) 42%, rgba(28,34,40,.76) 100%)}
  .꼬리 .윗줄{flex-direction:column; gap:26px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .안,.안.좁{width:calc(100% - 32px)}
  .머리 .안{gap:12px}
  .로고 img{width:46px}
  .로고 b{font-size:13.5px; white-space:nowrap}
  .전화{padding:10px 14px; font-size:15px}
  .전화 small{display:none}
  .첫판.큰{min-height:0}
  .첫판.큰 .안{padding:64px 0 76px}
  .첫판.큰 .버튼들{flex-direction:column; align-items:stretch; gap:10px}
  .첫판.큰 .버튼{justify-content:center; padding:15px 20px}

  .갈래 .칸{min-height:300px; padding:30px 24px}
  .갈래 .누름{align-self:stretch; justify-content:center}
  .문의띠 .큰전화{padding:17px 28px}
  .시공사 span{padding:9px 15px; font-size:14.5px}
  .꼬리{padding:42px 0 46px}
  .꼬리 img{width:48px}
}
@media (max-width:370px){
  .뜬띠{gap:8px; padding-left:12px; padding-right:12px}
  .뜬띠 > img{width:32px}
  .뜬띠 .걺{padding:12px 14px; font-size:15px}
  .뜬띠 .글 b{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-등장].숨김{opacity:1 !important; transform:none !important; transition:none}
  .차례 > *{opacity:1; transform:none; animation:none}
  .아래표시::after{animation:none}
  .그음::after{transition:none; width:100%}
  .현장,.현장 .사진 img,.버튼,.갈래 .칸 > img,.문의띠 .큰전화,.펼침,.덮개,.뜬띠{transition:none}
}

@media print{
  .머리,.펼침,.덮개,.뜬띠,.문의띠,.아래표시{display:none !important}
  body{padding-bottom:0}
  [data-등장].숨김{opacity:1 !important; transform:none !important}
}