:root{ --navy-900:#14274A; --navy:#214077; --navy-600:#32539B; --blue:#2248D9; --blue-700:#1A38AE; --blue-050:#EAEEFC; --ink:#16202F; --ink-2:#3C4759; --muted:#6B7688; --ground:#F4F6FA; --surface:#FFF; --surface-2:#EBEFF6; --line:#DCE2EC; --yellow:#FFDD00; --kakao:#FEE500; --kakao-ink:#3B1E1E; --yt:#FF0000; --onnavy-2:#B9C6DE; --navy-line:rgba(255,255,255,.16); --shadow-s:0 1px 2px rgba(20,32,53,.06); --shadow-m:0 2px 6px rgba(20,32,53,.07), 0 18px 40px -22px rgba(20,32,53,.42); --shadow-l:0 30px 70px -32px rgba(10,20,40,.55); --display:'IBM Plex Sans KR','Noto Sans KR',system-ui,sans-serif; --body:'Noto Sans KR',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ink:#E8EDF5; --ink-2:#BCC6D6; --muted:#8D99AC; --ground:#0C1017; --surface:#151B25; --surface-2:#1D2531; --line:#293243; --blue:#6E90FF; --blue-700:#8BA7FF; --blue-050:#182242; --navy:#8FA8CE; --navy-600:#7E9BCB; --shadow-s:0 1px 2px rgba(0,0,0,.5); --shadow-m:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9); --shadow-l:0 30px 70px -32px rgba(0,0,0,.95); }} :root[data-theme="dark"]{ --ink:#E8EDF5; --ink-2:#BCC6D6; --muted:#8D99AC; --ground:#0C1017; --surface:#151B25; --surface-2:#1D2531; --line:#293243; --blue:#6E90FF; --blue-700:#8BA7FF; --blue-050:#182242; --navy:#8FA8CE; --navy-600:#7E9BCB; --shadow-s:0 1px 2px rgba(0,0,0,.5); --shadow-m:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9); --shadow-l:0 30px 70px -32px rgba(0,0,0,.95); } *{box-sizing:border-box} body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.72; -webkit-font-smoothing:antialiased; /* 한글은 낱말 단위로만 줄을 바꾼다. '등기부등본' 이 '등 / 기부등본' 으로 쪼개지던 것을 막는다 (2026.09.28 대표님 지시). 낱말 하나가 칸보다 길면 그때만 쪼갠다. */ word-break:keep-all; overflow-wrap:break-word} h1,h2,h3,h4{font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; line-height:1.26} p{margin:0} a{color:inherit; text-decoration:none} /* height:auto 가 반드시 있어야 한다 (2026.10.07). 화면 밀림(CLS)을 막으려고 모든 에 width·height 를 적어 두었는데, 그 height 값이 아래 aspect-ratio 규칙을 덮어써서 사진이 세로로 늘어났다. 이 한 줄이 그걸 되돌린다. 아래에서 height 를 직접 정한 규칙 (.card .ph img, .ncard .nth img, .foot-top img 등)은 더 세서 그대로 유지된다. */ img{display:block; max-width:100%; height:auto} :focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:3px} @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}} .wrap{width:100%; max-width:1180px; margin:0 auto; padding-inline:22px} .eyebrow{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--navy-600)} .sec{padding-block:clamp(50px,6vw,82px)} .sec + .sec{border-top:1px solid var(--line)} .sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap} .sec-head h2{font-size:clamp(24px,3.1vw,34px); letter-spacing:-.035em; margin-top:9px} .sec-head .more{font-size:14px; font-weight:700; color:var(--blue); cursor:pointer} /* ───── 유틸바 · 헤더 */ .utility{background:var(--navy-900); color:#9FB2D2; font-size:12px} .utility .wrap{display:flex; align-items:center; gap:16px; height:38px; justify-content:flex-end} .utility .draft{margin-right:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:#7D90B2} .utility .u-tel{display:flex; align-items:center; gap:8px; color:#fff; font-weight:700} .utility .u-tel span{font-family:var(--mono); font-size:15px; letter-spacing:-.01em} .utility .u-tel em{font-family:var(--mono); font-style:normal; font-size:9.5px; letter-spacing:.2em; color:#7D90B2} .utility .u-sep{width:1px; height:14px; background:rgba(255,255,255,.18)} .utility a.u-lnk{color:#9FB2D2} .utility a.u-lnk:hover{color:#fff} /* 좁은 화면에서는 위 띠의 바로가기를 접는다. 블로그까지 들어가면서 다섯 덩이가 되어 줄이 깨졌다 (2026.09.26 확인). 같은 바로가기가 첫 화면 단추 줄·매물 접수 칸·맨 아래에 다 있으므로 잃는 것이 없다. */ @media(max-width:820px){ .utility .u-lnk, .utility .u-sep{display:none} .utility .wrap{gap:10px; height:34px} .utility .draft{font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} } @media(max-width:640px){ .utility .draft{display:none} .utility .wrap{justify-content:space-between} } .topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--surface); border-bottom:1px solid var(--line)} .topbar .wrap{display:flex; align-items:center; gap:22px; height:76px} .logo{height:44px; width:auto; margin-right:auto} :root[data-theme="dark"] .logo, :root:not([data-theme="light"]) .logo{filter:brightness(0) invert(1) opacity(.92)} @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .logo{filter:none} } nav{display:flex; gap:28px; font-size:15px; font-weight:500; color:var(--ink-2)} nav a{cursor:pointer; padding-block:6px; border-bottom:2px solid transparent; white-space:nowrap} nav a:hover{color:var(--blue)} nav a.on{color:var(--navy); border-bottom-color:var(--blue); font-weight:700} .mini{display:none; font-size:13px; font-weight:700; padding:9px 12px; border-radius:8px; background:var(--blue); color:#fff; white-space:nowrap} @media(max-width:1000px){ nav{gap:16px; font-size:13.5px; overflow-x:auto; -webkit-overflow-scrolling:touch} .topbar .wrap{gap:14px; height:68px} .logo{height:36px} } @media(max-width:620px){ nav{display:none} .mini{display:inline-flex; align-items:center} } /* ───── 버튼 */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 20px; border-radius:9px; font-weight:700; font-size:15px; border:1px solid transparent; cursor:pointer; font-family:var(--body); line-height:1.3; transition:background .16s,border-color .16s,color .16s,transform .16s} .btn:active{transform:translateY(1px)} .btn-1{background:var(--blue); color:#fff; box-shadow:0 8px 20px -10px rgba(34,72,217,.9)} .btn-1:hover{background:var(--blue-700)} .btn-2{background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-s)} .btn-2:hover{border-color:var(--blue); color:var(--blue)} .btn-w{background:#fff; color:var(--navy-900)} .btn-w:hover{background:#EDF1FA} .btn-o{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.32)} .btn-o:hover{background:rgba(255,255,255,.17)} .btn-kakao{background:var(--kakao); color:var(--kakao-ink); border-color:var(--kakao); box-shadow:0 8px 20px -12px rgba(254,229,0,.95)} .btn-kakao:hover{background:#FFEB3A} /* 재개발 단톡방 — 같은 카카오색이지만 테두리를 진하게 해 일반 단톡방과 구분한다 */ .btn-kakao2{background:var(--kakao); color:var(--kakao-ink); border-color:#3C1E1E; box-shadow:0 8px 20px -12px rgba(254,229,0,.95); font-weight:800} .btn-kakao2:hover{background:#FFEB3A} /* 네이버 블로그 — 어디로 가는 단추인지 한눈에 알아보게 네이버 초록을 쓴다. 로고 심벌 자체는 그리지 않는다. 상표를 베껴 그리는 건 다른 문제이고, '네이버 블로그' 라는 글자와 색만으로 손님은 충분히 알아본다. */ .btn-blog{background:#03C75A; color:#fff; border-color:#03C75A; box-shadow:0 8px 20px -12px rgba(3,199,90,.9)} .btn-blog:hover{background:#02B150} .btn-yt{background:var(--yt); color:#fff; border-color:var(--yt); box-shadow:0 8px 20px -12px rgba(255,0,0,.85)} .btn-yt:hover{background:#E60000} .btn-ig{color:#fff; border-color:transparent; box-shadow:0 8px 20px -12px rgba(193,53,132,.9); background:radial-gradient(120% 120% at 8% 108%, #FDC468 0%, #F8703C 22%, #E7376F 46%, #C7288E 68%, #7A37C9 100%)} .btn-ig:hover{filter:brightness(1.08)} .btn-sms{background:#fff; color:var(--navy-900); border-color:#fff} .btn-sms:hover{background:#EDF1F8} .btn svg{flex:none} /* ═════ 히어로 슬라이더 ═════ */ .hero{position:relative; background: radial-gradient(1200px 520px at 12% -10%, rgba(50,83,155,.55), transparent 62%), linear-gradient(168deg, var(--navy) 0%, var(--navy-900) 72%); /* 아래 패딩이 150~200px 이던 것은 팀 사진이 히어로 위로 겹쳐 올라오던 옛 구조 때문이다. 2026.09.26 팀 사진을 히어로 안으로 들이고 바로 아래에 갈림길을 놓으면서 줄였다. 그래야 PC 첫 화면에 갈림길이 걸쳐 보이고, 손님이 스크롤할 이유가 생긴다. */ color:#fff; padding-block:clamp(40px,5vw,62px) clamp(40px,5vw,60px); overflow:hidden} .hero-grid{display:grid; grid-template-columns:minmax(0,1.26fr) minmax(310px,.84fr); gap:clamp(28px,4vw,56px); align-items:start} @media(max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:30px} } .slides{position:relative; min-height:clamp(276px,29vw,330px)} .slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .55s ease, transform .55s ease; transform:translateY(10px)} .slide.on{opacity:1; visibility:visible; transform:none; position:relative} .tag-line{display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; padding:7px 15px 7px 11px; border-radius:100px; background:rgba(255,255,255,.1); border:1px solid var(--navy-line); font-size:13px; font-weight:700} .tag-line .dot{width:6px;height:6px;border-radius:50%;background:#6E90FF;box-shadow:0 0 0 4px rgba(110,144,255,.22)} .hero h1, .hero .ht{font-size:clamp(30px,4.6vw,49px); letter-spacing:-.042em; color:#fff} .hero h1 .em, .hero .ht .em, .lhead h1 .em, .page-head h1 .em, .intake h2 .em, .askbar h1 .em, .askbar h2 .em{color:var(--yellow)} .hero h1 .thin{font-weight:400; color:var(--onnavy-2)} .hero .lede{margin-top:20px; font-size:clamp(14.8px,1.6vw,16.5px); color:var(--onnavy-2); max-width:36em; line-height:1.85} .hero .lede b{color:#fff; font-weight:700} .dots{display:flex; gap:9px; margin-top:26px} .dots button{width:38px; height:4px; border-radius:2px; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.26); transition:background .2s} .dots button.on{background:#8FB0FF} .cta{display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; max-width:820px} @media(max-width:820px){ .cta{max-width:none} } .cta .btn{padding:12px 13px; font-size:13.5px; gap:6px; white-space:nowrap; flex:0 0 auto} /* 추천매물 */ .picks{background:#fff; border-radius:14px; box-shadow:var(--shadow-l); overflow:hidden; color:var(--ink)} .picks-h{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 18px; background:var(--navy-900); color:#fff} .picks-h .t{font-family:var(--display); font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px} .picks-h .t .nd{width:7px;height:7px;border-radius:50%;background:#59E0A0;animation:blink 2.2s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} .picks-h .u{font-family:var(--mono); font-size:10.5px; color:#9FB2D2; white-space:nowrap} .pick{display:flex; gap:13px; padding:14px 18px; border-bottom:1px solid var(--line); align-items:flex-start} .pick:hover{background:var(--blue-050)} .zn{font-family:var(--mono); font-size:10.5px; font-weight:600; color:#fff; background:var(--navy-600); border-radius:5px; padding:4px 8px; flex:none; margin-top:2px; white-space:nowrap} .pick > span:last-child{display:flex; flex-direction:column; min-width:0} .pick .t{display:block; font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); line-height:1.45; letter-spacing:-.022em} .pick .d{display:block; font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.6} .pick .p{display:block; font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--navy); margin-top:6px} .picks-f{padding:13px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--surface-2); font-size:13px} .picks-f a{color:var(--blue); font-weight:700; cursor:pointer} .picks-f span{color:var(--muted); font-size:12px} /* 단체사진 · 수치 */ /* 팀 사진이 빠지고 숫자 띠만 남았으므로 히어로 위로 끌어올리지 않는다 */ .teamshot{margin-top:clamp(26px,3vw,38px); position:relative; z-index:2} .teamshot figure{margin:0; border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-l); border:1px solid var(--line)} /* 원본은 1600×1056(약 3:2), 네 사람이 무릎 위까지 나오는 사진이다. 21/9 나 16/7 로 눕히면 몸이 대부분 잘려 얼굴만 뜬 것처럼 어색해진다. 16/9 는 원본 높이의 85%를 살려 모은 손까지 나오면서 화면도 과하게 안 먹는다. */ .teamshot img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:50% 18%} @media(max-width:640px){ .teamshot img{aspect-ratio:3/2; object-position:50% 12%} } .teamshot figcaption{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:15px 22px; border-top:1px solid var(--line); background:var(--surface); font-size:13px; color:var(--muted)} .teamshot figcaption b{color:var(--ink-2); font-weight:700} .strip{display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden} @media(max-width:700px){ .strip{grid-template-columns:1fr} } .strip .c{padding:20px 22px; border-right:1px solid var(--line)} .strip .c:last-child{border-right:0} @media(max-width:700px){ .strip .c{border-right:0; border-bottom:1px solid var(--line)} .strip .c:last-child{border-bottom:0} } .strip .v{font-family:var(--mono); font-weight:600; font-size:clamp(25px,3vw,33px); letter-spacing:-.03em; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.1} .strip .v span{font-size:13px; font-weight:500; color:var(--muted); margin-left:3px} .strip .k{font-size:12.5px; color:var(--muted); margin-top:6px} /* 포인트 3 (사진 + 글) */ .points{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px); margin-top:34px} @media(max-width:860px){ .points{grid-template-columns:1fr; gap:26px} } .point{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-s); display:flex; flex-direction:column} .point img{width:100%; aspect-ratio:16/10; object-fit:cover} .point .bd{padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1} .point .num{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--blue); letter-spacing:.14em} .point h3{font-size:19.5px; letter-spacing:-.028em; color:var(--navy)} .point p{font-size:14.5px; color:var(--muted); line-height:1.8} .point-navy{background:linear-gradient(158deg,#22437F 0%,#16294F 100%); border-color:transparent; box-shadow:var(--shadow-m)} .point-navy .bd, .point-txt .bd{padding:30px 24px 26px; justify-content:center; gap:12px} .point-navy .num{color:var(--yellow)} .point-navy h3{color:#fff; font-size:21px} .point-navy p{color:#C7D4EB} .point-navy .fact{color:#fff; background:rgba(255,255,255,.14)} .point-navy .fact, .point-txt .fact{margin-top:6px} .point .fact{margin-top:auto; font-family:var(--mono); font-size:11.5px; color:var(--navy); background:var(--blue-050); border-radius:6px; padding:8px 11px; align-self:flex-start} /* 매물 카테고리 */ .cats{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:30px} @media(max-width:860px){ .cats{grid-template-columns:repeat(2,1fr)} } .cat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px 20px 20px; display:flex; flex-direction:column; gap:7px; min-height:146px; box-shadow:var(--shadow-s); cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s} .cat:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--shadow-m)} .cat .n{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.12em} .cat .t{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.025em; color:var(--navy)} .cat .d{font-size:13px; color:var(--muted); line-height:1.65} .cat .c{margin-top:auto; font-family:var(--mono); font-size:11.5px; color:var(--blue); font-weight:500} .map-band{margin-top:13px; background:var(--navy-900); color:#fff; border-radius:12px; display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center; padding:26px 28px} @media(max-width:720px){ .map-band{grid-template-columns:1fr} } .map-band h3{font-size:20px; letter-spacing:-.025em; color:#fff} .map-band p{font-size:13.5px; color:#9FB2D2; margin-top:6px} .legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-family:var(--mono); font-size:11px; color:#C6D2E6} .legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:-1px} /* 구역 칩 */ .zones{display:flex; flex-wrap:wrap; gap:9px; margin-top:28px} .chip{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 15px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-s)} .chip:hover{border-color:var(--blue); color:var(--blue)} .chip em{font-family:var(--mono); font-style:normal; font-size:10.5px; color:var(--muted)} .chip.mine{border-color:var(--blue); background:var(--blue-050)} .chip.mine em{color:var(--blue); font-weight:600} /* 소식 */ .news{display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:30px} @media(max-width:860px){ .news{grid-template-columns:1fr} } .post{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-s)} .post .meta{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--blue)} .post h3{font-size:17px; letter-spacing:-.025em; line-height:1.45; color:var(--navy)} .post p{font-size:13.5px; color:var(--muted); line-height:1.72} .post .src{margin-top:auto; padding-top:12px; font-size:12px; color:var(--muted); border-top:1px solid var(--line)} /* 팀 */ /* 원본은 560×560 정사각 증명사진. 정사각 그대로 쓰면 좌우가 남아 어깨가 답답하고 얼굴이 필요 이상으로 커 보인다. 4:5 세로로 세우면 증명사진 비례가 나온다. */ .team{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; max-width:640px} @media(max-width:700px){ .team{grid-template-columns:repeat(3,1fr); gap:12px; max-width:none} } .member{border-radius:12px; overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-s)} .member img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 16%} .member .nm{font-family:var(--display); font-weight:700; font-size:17.5px; text-align:center; padding:16px 10px 18px; color:var(--navy); letter-spacing:-.02em} /* 문의 */ .contact{margin-top:30px; background: radial-gradient(900px 380px at 88% 0%, rgba(50,83,155,.5), transparent 60%), linear-gradient(150deg, var(--navy) 0%, var(--navy-900) 75%); color:#fff; border-radius:16px; padding:clamp(30px,4vw,50px); display:grid; grid-template-columns:minmax(0,1fr); gap:26px} @media(max-width:860px){ .contact{gap:22px} } .contact h2{font-size:clamp(23px,3vw,32px); letter-spacing:-.035em; color:#fff} .contact .clines{margin-top:20px; display:flex; flex-direction:column; gap:7px} .contact .clines p{font-size:15.5px; color:var(--onnavy-2); line-height:1.7; max-width:46em} .contact .clines p.hi{margin-top:12px; font-family:var(--display); font-size:clamp(17px,2.1vw,21px); color:#fff; letter-spacing:-.02em; line-height:1.6} .contact .clines p.hi b{color:var(--yellow); font-weight:700} @media(max-width:560px){ .contact .clines p{font-size:14.5px} } .contact .btns{display:flex; gap:11px; flex-wrap:wrap; padding-top:4px} /* 푸터 */ footer{background:var(--surface); border-top:1px solid var(--line); padding-block:36px 44px; margin-top:clamp(50px,6vw,78px)} .foot-top{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line)} .foot-top img{height:40px; width:auto} .legal{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:20px 34px; font-size:12.5px; color:var(--muted); line-height:1.9; padding-top:24px} .legal b{color:var(--ink-2); font-weight:700} .foot-note{margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap} /* ═════ 속지 공통 ═════ */ .page-head{background: radial-gradient(900px 400px at 15% -20%, rgba(50,83,155,.45), transparent 62%), linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 78%); color:#fff; padding-block:clamp(36px,4.4vw,56px)} .page-head h1{font-size:clamp(27px,3.8vw,40px); letter-spacing:-.04em; color:#fff; margin-top:10px} .page-head p{margin-top:14px; font-size:15px; color:var(--onnavy-2); max-width:40em} .page-head .eyebrow{color:#8FB0FF} .filters{display:flex; gap:8px; flex-wrap:wrap; margin-top:26px} .filters button{font-family:var(--body); font-size:14px; font-weight:700; padding:10px 17px; border-radius:100px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer} .filters button.on{background:var(--navy); border-color:var(--navy); color:#fff} .count{font-size:13px; color:var(--muted); margin-top:18px} .count b{color:var(--navy); font-family:var(--mono)} .grid-list{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px} @media(max-width:900px){ .grid-list{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .grid-list{grid-template-columns:1fr} } .card{background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden; box-shadow:var(--shadow-s); display:flex; flex-direction:column; transition:transform .16s, box-shadow .16s, border-color .16s} .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--blue)} .card .ph{aspect-ratio:4/3; background:linear-gradient(150deg,var(--surface-2),var(--blue-050)); display:grid; place-items:center; color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.1em; border-bottom:1px solid var(--line); position:relative} .card .badges{position:absolute; top:12px; left:12px; display:flex; gap:6px} .card .bg1{font-family:var(--mono); font-size:10.5px; font-weight:600; padding:4px 8px; border-radius:5px; background:var(--navy-600); color:#fff} .card .bg2{font-family:var(--mono); font-size:10.5px; font-weight:600; padding:4px 8px; border-radius:5px; background:rgba(255,255,255,.92); color:var(--navy)} .card .bd{padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1} .card .addr{font-family:var(--display); font-weight:700; font-size:16.5px; color:var(--navy); letter-spacing:-.025em} .card .spec{font-size:13px; color:var(--muted); line-height:1.6} .card .price{font-family:var(--mono); font-size:17px; font-weight:600; color:var(--ink); margin-top:4px} .card .foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--muted); font-family:var(--mono)} .mapbox{margin-top:26px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-s)} .mapbox .canvas{aspect-ratio:16/8; background: linear-gradient(0deg, rgba(34,72,217,.05), rgba(34,72,217,.05)), repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, var(--line) 39px 40px), var(--surface-2); display:grid; place-items:center; position:relative} @media(max-width:700px){ .mapbox .canvas{aspect-ratio:1/1} } .mapbox .msg{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 20px; text-align:center; box-shadow:var(--shadow-m); max-width:330px} .mapbox .msg b{font-family:var(--display); font-size:15px; color:var(--navy); display:block} .mapbox .msg span{font-size:12.5px; color:var(--muted); display:block; margin-top:6px; line-height:1.6} .pin{position:absolute; width:16px; height:16px; border-radius:50%; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.28)} .zonearea{position:absolute; border-radius:12px; border:2px dashed rgba(139,107,232,.75); background:rgba(139,107,232,.14)} .mapbox .bar{display:flex; gap:16px; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--line); background:var(--surface-2); font-family:var(--mono); font-size:11.5px; color:var(--ink-2)} .newslist{margin-top:24px; border-top:1px solid var(--line)} .newsrow{display:grid; grid-template-columns:118px minmax(0,1fr) auto; gap:22px; align-items:center; padding:20px 4px; border-bottom:1px solid var(--line)} @media(max-width:760px){ .newsrow{grid-template-columns:1fr; gap:6px} .newsrow .rt{display:none} } .newsrow .dt{font-family:var(--mono); font-size:12px; color:var(--blue); font-weight:600} .newsrow .ti{font-family:var(--display); font-weight:700; font-size:17px; color:var(--navy); letter-spacing:-.025em} .newsrow .ds{font-size:13.5px; color:var(--muted); margin-top:4px; line-height:1.7} .newsrow .rt{font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap} /* ── 소식 카드 목록 (인스타 카드뉴스와 같은 그림을 쓴다) ── */ .ncards{margin-top:26px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px} @media(max-width:980px){ .ncards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px} } @media(max-width:620px){ .ncards{grid-template-columns:1fr; gap:18px} } .ncard{display:block; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); text-decoration:none; transition:box-shadow .18s, transform .18s} .ncard:hover{box-shadow:0 10px 30px rgba(27,43,75,.12); transform:translateY(-2px)} /* 목록 썸네일 — 신문 기사 목록처럼 가로로 눕힌다. 예전엔 세로 카드(1080×1350)를 그대로 썼으나, 2026.09.24 부터 글자 없는 가로 사진을 쓰므로 4:5 로 세우면 목록 한 줄이 화면을 다 먹는다. */ .ncard .nth{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--surface-2)} .ncard .nth img{width:100%; height:100%; object-fit:cover; display:block} .ncard .ntx{display:block; padding:16px 17px 19px} .ncard .nmeta{display:block; font-family:var(--mono); font-size:11.5px; color:var(--blue); font-weight:600; letter-spacing:.02em} .ncard .ntt{display:block; margin-top:8px; font-family:var(--display); font-weight:700; font-size:16.5px; line-height:1.45; color:var(--navy); letter-spacing:-.025em} .ncard .nds{display:block; margin-top:8px; font-size:13px; line-height:1.72; color:var(--muted)} .nzb{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:100px; background:#EEF2FF; color:#2B5BE8; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:0; vertical-align:1px} /* ── 소식 한 건 페이지 ── */ /* 제목 칸은 남색 배경이라 날짜·구역을 밝은 색으로 쓴다 (파란 글씨는 묻힌다) */ .note .nmeta2{margin-top:12px; font-family:var(--mono); font-size:12.5px; color:rgba(255,255,255,.72); font-weight:600} .note .nmeta2 .nzb{background:rgba(255,255,255,.14); color:#fff} .nbody{max-width:720px} /* 기사 맨 위 사진 — 신문처럼 가로로 눕힌다. 원본은 세로 4:5 라 폭에 맞추면 화면 한 장을 통째로 먹어 정작 글이 안 보인다. 위쪽을 조금 더 살려 자른다 (하늘보다 건물이 보이는 편이 알아보기 쉽다). */ .ncover{margin:0 0 14px} .ncover img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover; object-position:50% 38%; border-radius:10px; background:var(--surface-2)} /* 글자가 박힌 카드뉴스 표지가 들어온 경우 — 자르면 헤드라인이 잘려 나간다. 통째로 가운데에 세운다 (2026.09.26 실제로 깨진 화면을 보고 넣었다). */ .ncover-card img{aspect-ratio:auto; max-width:420px; margin:0 auto; border-radius:8px} /* 사진 아래 한 줄 — AI로 만든 배경컷이라 실제 현장으로 오해하지 않게 밝혀 둔다 */ .ncover figcaption{padding:9px 2px 0; font-size:12.5px; line-height:1.6; color:var(--muted); letter-spacing:-.01em} /* ── 기사 본문 ── */ /* 2026.09.24 대표님 지시로 항목표·포인트 나열을 없애고 신문 기사 모양으로 바꿨다. 항목 나열은 보도자료처럼 보여 눈이 미끄러진다. 중요한 값은 문단 안에서 굵게 세운다. 2026.09.26 글자가 작고 흐려 잘 안 읽힌다는 지적을 받아 크기와 진하기를 올렸다. */ .nart{margin-top:30px} /* 언제 소식인지 본문 안에서도 보이게 (제목 칸 날짜는 스크롤하면 사라진다) */ .nstamp{margin:0 0 12px; font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--blue)} .nart p{margin:0 0 22px; font-size:17px; line-height:1.9; color:#33404F; letter-spacing:-.014em; word-break:keep-all} .nart p:last-child{margin-bottom:0} .nart strong{font-weight:800; color:var(--navy)} /* 첫머리 두 문장 — 기사 리드. 본문보다 한 단계 크고 진하게 */ .nart .nlead{margin-bottom:26px; padding-bottom:24px; border-bottom:2px solid var(--navy); font-size:19px; line-height:1.72; color:var(--navy); font-weight:800; letter-spacing:-.028em} @media(max-width:560px){ .nart{margin-top:24px} .nart p{font-size:16px; line-height:1.86; margin-bottom:19px} .nart .nlead{font-size:17.5px; margin-bottom:22px; padding-bottom:19px} .ncover img{aspect-ratio:3/2} .ncover-card img{max-width:100%} } .ninsta{display:inline-block; margin-top:22px; padding:11px 18px; border-radius:9px; border:1px solid var(--line); background:var(--surface); font-size:13.5px; font-weight:700; color:var(--navy); text-decoration:none} .ninsta:hover{border-color:var(--blue); color:var(--blue)} .nsrc{margin-top:28px; font-family:var(--mono); font-size:12.5px; color:var(--muted)} .nsrc a{color:var(--blue); text-decoration:underline; text-underline-offset:3px} .ndis{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.75; color:var(--muted)} .nrel{background:var(--surface-2)} /* 대표 소개 */ .intro-grid{display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(26px,4vw,52px); align-items:center} @media(max-width:820px){ .intro-grid{grid-template-columns:1fr; gap:24px} } .portrait{border-radius:14px; overflow:hidden; box-shadow:var(--shadow-l); border:1px solid var(--navy-line)} .portrait img{width:100%; aspect-ratio:4/4.4; object-fit:cover} .intro-grid h1{margin-top:12px} /* 이름 아래 업무분야 한 줄 — 법무법인 변호사 프로필의 표기 방식을 따른다. 작은 배지는 눈에 안 들어온다는 지적을 받아, 라벨과 값을 나누고 값을 키웠다 (2026.09.30 대표님 지시). */ .field{margin-top:14px; display:flex; align-items:center; gap:15px; flex-wrap:wrap} .field .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#7E96BC; white-space:nowrap} .field .ln{flex:0 0 26px; height:1px; background:rgba(255,221,0,.5)} .field .v{font-family:var(--sans); font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--yellow); white-space:nowrap} @media(max-width:400px){ .field{gap:11px} .field .ln{flex-basis:18px} } .sig{margin-top:24px; padding-top:18px; border-top:1px solid var(--navy-line); display:flex; align-items:baseline; gap:14px; flex-wrap:wrap} .sig b{font-family:var(--display); font-size:19px; color:#fff} .sig span{font-family:var(--mono); font-size:11.5px; color:#9FB2D2} @media(max-width:880px){ .iblocks{grid-template-columns:1fr} } .deep{background: radial-gradient(900px 420px at 10% 0%, rgba(50,83,155,.45), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 76%); color:#C6D2E6; border-radius:18px; padding:clamp(28px,3.8vw,50px); margin-top:34px} .deep .lead-line{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#8FB0FF; display:block; margin-bottom:13px} .deep h3{color:#fff; font-size:clamp(21px,3vw,30px); letter-spacing:-.035em} .deep .sub{margin-top:15px; font-size:14.8px; color:#A9B8D2; max-width:46em; line-height:1.85} .flow{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:30px} @media(max-width:940px){ .flow{grid-template-columns:repeat(2,1fr)} } @media(max-width:540px){ .flow{grid-template-columns:1fr} } .step{background:rgba(255,255,255,.06); border:1px solid var(--navy-line); border-radius:11px; padding:17px 16px 19px; display:flex; flex-direction:column; gap:8px} .step .no{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.16em; color:#8FB0FF} .step .ti{font-family:var(--display); font-weight:700; font-size:15.5px; color:#fff; letter-spacing:-.02em} .step ul{margin:0; padding-left:16px; font-size:12.5px; color:#9FAEC8; line-height:1.9} .deep-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(22px,3vw,40px); align-items:center} @media(max-width:820px){ .deep-grid{grid-template-columns:1fr} } .deep .sub b{color:#fff; font-weight:700} .deep-note{margin-top:28px; padding-top:22px; border-top:1px solid var(--navy-line); display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center} @media(max-width:820px){ .deep-note{grid-template-columns:1fr} } /* 분야 세 칸 — 재개발 / 상가·주택 / 건물·토지 를 나란히 놓는다. .deep-note 는 '1fr auto' 라 세 개를 넣으면 둘째 칸이 세로로 눌린다 (2026.09.26 확인). */ .deep3{margin-top:28px; padding-top:24px; border-top:1px solid var(--navy-line); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px} .deep3 p{font-size:14.2px; color:#A9B8D2; line-height:1.85; margin:0} .deep3 b{display:block; margin-bottom:7px; color:#fff; font-family:var(--display); font-size:15px; font-weight:800; letter-spacing:-.02em} @media(max-width:820px){ .deep3{grid-template-columns:1fr; gap:18px} } .deep-note p{font-size:14.5px; color:#A9B8D2; line-height:1.85} .deep-note b{color:#fff; font-weight:700} .sample{background:rgba(255,255,255,.07); border:1px solid var(--navy-line); border-radius:11px; padding:18px 20px; min-width:264px} .sample .tag{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:#8FB0FF; margin-bottom:12px} .sample .row{display:flex; justify-content:space-between; gap:18px; font-size:13px; padding:6px 0; color:#A9B8D2} .sample .row b{font-family:var(--mono); color:#fff; font-weight:600; font-variant-numeric:tabular-nums} .sample .row.hi b{color:#8FB0FF} .tl{margin-top:30px} .tl .r{display:grid; grid-template-columns:100px minmax(0,1fr); gap:20px; padding:16px 0; border-top:1px solid var(--line)} .tl .r:last-child{border-bottom:1px solid var(--line)} @media(max-width:620px){ .tl .r{grid-template-columns:1fr; gap:4px} } .tl .y{font-family:var(--mono); font-size:12px; color:var(--blue); font-weight:600; padding-top:3px} .tl .t{font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.022em; color:var(--navy)} .tl .d{font-size:13.8px; color:var(--muted); margin-top:4px; line-height:1.75} .help{display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:26px} @media(max-width:860px){ .help{grid-template-columns:1fr} } .help .h{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; box-shadow:var(--shadow-s)} .help .h b{font-family:var(--display); font-size:16.5px; display:block; letter-spacing:-.022em; color:var(--navy)} .help .h p{font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.75} .help .h .tagm{font-family:var(--mono); font-size:11px; color:var(--blue); margin-top:11px; display:block} .story{margin-top:28px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:14px; padding:clamp(26px,3.4vw,40px); box-shadow:var(--shadow-s)} .story h3{color:var(--navy); font-size:clamp(20px,2.8vw,28px); letter-spacing:-.035em} .story p{margin-top:15px; font-size:15px; color:var(--ink-2); line-height:1.86; max-width:44em} .story .kicker{font-family:var(--display); font-weight:700; font-size:clamp(17px,2.2vw,22px); color:var(--blue); margin-top:22px; letter-spacing:-.025em} /* 팝업 */ .modal-bg{position:fixed; inset:0; background:rgba(12,20,36,.6); backdrop-filter:blur(4px); z-index:90; display:grid; place-items:center; padding:20px} .modal-bg[hidden]{display:none !important} .modal{background:var(--surface); border-radius:16px; width:100%; max-width:560px; max-height:86vh; overflow:auto; box-shadow:var(--shadow-l)} .x{background:none; border:0; font-size:24px; line-height:1; color:#9FB2D2; cursor:pointer; padding:0 4px} .x:hover{color:#fff} .modal-f{padding:20px 22px 24px; display:flex; gap:11px; flex-wrap:wrap} /* ═════ 매물 상세 ═════ */ .crumb{font-size:12.5px;color:var(--muted);margin-bottom:14px} .crumb a{color:var(--navy-600)} .crumb span{margin:0 6px;color:#B8C2D4} .det{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:clamp(22px,3vw,40px);align-items:start} @media(max-width:900px){ .det{grid-template-columns:1fr} } .gal{border-radius:14px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)} .gal .big img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .gal .thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:4px;background:var(--surface)} .gal .thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:5px;cursor:pointer;opacity:.62} .gal .thumbs img.on,.gal .thumbs img:hover{opacity:1} .gal .none{aspect-ratio:4/3;display:grid;place-items:center;color:#9FB0C8;font-size:14px} .det h1{font-size:clamp(23px,3.1vw,32px);letter-spacing:-.035em;color:var(--navy);line-height:1.34} .det .pr{margin-top:12px;font-family:var(--display);font-weight:700; font-size:clamp(24px,3.2vw,32px);color:var(--blue);letter-spacing:-.02em} .spectbl{margin-top:20px;width:100%;border-collapse:collapse;font-size:14.2px} .spectbl th,.spectbl td{border-top:1px solid var(--line);padding:11px 4px;text-align:left;line-height:1.6} .spectbl th{width:112px;color:var(--navy-600);font-weight:700;font-family:var(--display)} .spectbl td{color:var(--ink-2)} /* 명시사항 칸인데 값이 없을 때 (2026.10.06 대표님 지시). 칸을 통째로 빼면 손님이 '안 적었다'로 읽는다. 작게 '유선문의'로 적어 둔다. */ .spectbl .ask{font-size:12px; color:var(--muted); font-weight:500; letter-spacing:-.01em} .side{position:sticky;top:18px;display:flex;flex-direction:column;gap:14px} .sbox{background:var(--surface);border:1px solid var(--line);border-radius:13px; padding:18px 18px 20px;box-shadow:var(--shadow-s)} .sbox .t{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--navy);margin-bottom:12px} .sbox .row{display:flex;justify-content:space-between;gap:14px;font-size:13.6px;padding:6px 0;color:var(--muted)} .sbox .row b{color:var(--ink);font-weight:700} .sbox .btn{width:100%;justify-content:center;margin-top:8px} .lead{margin-top:22px;font-size:15px;color:var(--ink-2);line-height:1.92;white-space:pre-line} .warn{margin-top:24px;background:var(--surface-2);border-radius:10px;padding:15px 17px; font-size:12.8px;color:var(--muted);line-height:1.8} .rel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px} @media(max-width:900px){ .rel{grid-template-columns:repeat(2,1fr)} } /* ═════ 목록 ═════ */ .pager{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:34px} .pager a,.pager span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 11px; border-radius:8px;border:1px solid var(--line);background:var(--surface); font-family:var(--mono);font-size:13px;color:var(--ink-2)} .pager .on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600} .empty{margin-top:30px;background:var(--surface);border:1px dashed var(--line);border-radius:13px; padding:48px 20px;text-align:center;color:var(--muted);font-size:14.5px;line-height:1.85} /* ═════ 구역 페이지 ═════ */ .zhead{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px} .zhead .t{background:rgba(255,255,255,.14);border:1px solid var(--navy-line);border-radius:7px; padding:7px 12px;font-size:12.8px;color:#fff;font-family:var(--mono)} .zbody{font-size:15px;color:var(--ink-2);line-height:1.95;max-width:52em;white-space:pre-line} .card.ln{text-decoration:none} .card .ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .sbox .btn.sb{width:100%;justify-content:center;margin-top:8px} .sbox .btn.btn-2{width:100%;justify-content:center;margin-top:8px} .filters a.chip.on{background:var(--navy);border-color:var(--navy);color:#fff} .filters a.chip{border-radius:100px;padding:10px 17px;font-size:14px;font-weight:700} .chip.off{color:var(--muted); background:var(--ground); cursor:default} .adhead{margin-top:26px;font-family:var(--display);font-weight:700;font-size:15px; color:var(--navy);padding-bottom:9px;border-bottom:1px solid var(--line)} .lead{margin-top:14px;font-size:14.8px;color:var(--ink-2);line-height:1.95;white-space:pre-line; word-break:break-word} .mynote{margin-top:22px;background:var(--blue-050);border-left:4px solid var(--blue); border-radius:0 10px 10px 0;padding:15px 18px;font-size:14.6px;color:var(--navy);line-height:1.85} .spectbl td{white-space:pre-line} .nmap{width:100%;aspect-ratio:16/8;background:var(--surface-2)} @media(max-width:700px){ .nmap{aspect-ratio:1/1} } /* ── 매물지도: 상단 메뉴 바로 아래부터 화면 끝까지 꽉 채우는 지도 ── */ /* 매물지도 — 얇은 제목 띠 + 그 아래 화면을 꽉 채우는 지도 위쪽에서 차지하는 높이: 연락처 바 38 + 메뉴 바 77 + 제목 띠 62 = 177px */ .mapbar{background:var(--navy-900); color:#fff} .mapbar .wrap{display:flex; align-items:center; gap:18px; height:62px} .mapbar h1{font-family:var(--display); font-size:21px; letter-spacing:-.035em; color:#fff; margin:0; white-space:nowrap} .mapbar p{margin:0; font-size:13px; color:var(--onnavy-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .mapbar .mb-r{margin-left:auto; display:flex; align-items:center; gap:18px; white-space:nowrap} .mapbar .legend{margin:0; color:#C6D2E6} .mapbar .mstat{border:0; background:none; padding:0; gap:12px; color:#8FA3C4; font-size:10.5px} .mapfull{position:relative; width:100%; height:calc(100vh - 177px); min-height:480px; background:var(--surface-2); border-bottom:1px solid var(--line)} .mapfull{height:calc(100dvh - 177px)} .mapfull{display:flex} .mapfull .nmap{flex:1 1 auto; height:100%; aspect-ratio:auto; min-width:0} /* ══ 지도 옆 매물 목록 (2026.10.01 대표님 지시) ══════════════════ 네이버부동산처럼 왼쪽에 목록을 세우고 오른쪽에 지도를 둔다. 지도를 움직이면 그 화면 안의 매물만 목록에 남는다. */ .mside{flex:0 0 340px; height:100%; display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--line); z-index:3} .ms-top{padding:12px 13px 11px; border-bottom:1px solid var(--line); background:var(--surface)} .ms-f{display:flex; gap:5px; flex-wrap:wrap} .ms-f2{margin-top:7px} .mf{appearance:none; cursor:pointer; padding:6px 11px; border-radius:100px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:-.03em; white-space:nowrap; transition:.12s} .mf:hover{border-color:var(--blue); color:var(--navy)} .mf.on{background:var(--navy); border-color:var(--navy); color:#fff} .mf.c{font-size:12px; padding:5px 9px} .mf.c.on{background:var(--blue); border-color:var(--blue)} .ms-n{margin-top:9px; font-size:11.5px; color:var(--ink-3); letter-spacing:-.01em} .ms-n b{font-family:var(--mono); font-size:14px; color:var(--navy); font-weight:700} .ms-list{flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch} .mcard{display:block; width:100%; text-align:left; appearance:none; cursor:pointer; padding:10px 14px; border:none; border-bottom:1px solid var(--line); background:var(--surface); font-family:inherit; transition:.1s} .mcard:hover{background:var(--surface-2)} .mc-top{display:flex; align-items:center; gap:7px} .mc-top i{width:8px; height:8px; border-radius:50%; flex:none} .mc-top em{font-style:normal; font-size:12px; font-weight:700; color:var(--ink-2)} .mc-tr{margin-left:auto; font-size:11.5px; font-weight:700; color:var(--blue); background:var(--blue-050); padding:2px 7px; border-radius:4px} .mc-p{display:block; margin-top:4px; font-family:var(--display); font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--navy)} .mc-t{display:block; margin-top:2px; font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .mc-s{display:block; margin-top:2px; font-size:11.5px; color:var(--ink-3)} .mc-co{display:inline-block; margin-top:6px; font-size:11px; color:var(--ink-3); border:1px solid var(--line); border-radius:4px; padding:1px 6px} .ms-empty{padding:34px 18px; text-align:center; font-size:13px; color:var(--ink-3); line-height:1.9} .ms-more{padding:16px 15px; font-size:12px; color:var(--ink-3); line-height:1.7; background:var(--surface-2)} .mswap{display:none} .ms-tab{display:none} /* ══ 매물목록 거래유형 단추 (2026.10.02 대표님 지시) ══════════════ */ .trbar{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px} .trf{display:inline-flex; align-items:center; gap:5px; text-decoration:none; padding:7px 14px; border-radius:100px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; transition:.12s} .trf:hover{border-color:var(--blue); color:var(--navy)} .trf.on{background:var(--blue); border-color:var(--blue); color:#fff} .trf i{font-style:normal; font-family:var(--mono); font-size:11px; font-weight:600; opacity:.72} /* ══ 재개발 추천매물 표 (2026.10.02 대표님 지시) ══════════════════════ 대표님이 관리자페이지에서 고른 재개발 매물만 올라간다. 좁은 화면에서는 표를 줄이지 않고 가로로 밀어서 본다 — 숫자를 줄바꿈하면 가격과 면적이 섞여 읽힌다. */ .ptbl-w{margin-top:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; background:var(--surface)} .ptbl{width:100%; border-collapse:collapse; min-width:720px} .ptbl th{text-align:left; white-space:nowrap; padding:13px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); border-bottom:1px solid var(--line)} .ptbl td{padding:15px 16px; font-size:14.5px; color:var(--ink); border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55} .ptbl tbody tr:last-child td{border-bottom:none} .ptbl tbody tr:hover{background:var(--surface-2)} .ptbl td.z{font-weight:800; color:var(--navy); white-space:nowrap; letter-spacing:-.02em} .ptbl td.a, .ptbl td.p{white-space:nowrap; font-variant-numeric:tabular-nums} .ptbl td.p b{font-family:var(--mono); font-size:14.5px; font-weight:700; color:var(--navy); letter-spacing:-.01em} .ptbl td.nt{min-width:200px; color:var(--ink-2); font-size:13.5px} .ptbl td.g{white-space:nowrap; text-align:right} .ptbl td.g a{font-size:13px; font-weight:700; color:var(--blue)} .ptbl td.g a:hover{text-decoration:underline} .ptbl .pm{font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--muted); letter-spacing:-.01em} .pnote{margin-top:14px; font-size:12.5px; line-height:1.75; color:var(--muted); max-width:46em} .pcta{margin-top:26px; display:flex; gap:10px; flex-wrap:wrap} /* ── 추천매물 카드 (2026.10.07 전면 교체) ────────────────────────────── 예전에는 가로 열 개짜리 표 한 장이었다. 숫자가 아홉 개 늘어서서 어디를 봐야 할지 모르겠다는 지적을 받았다. 매물마다 카드 한 장으로 바꾼다. 눈이 가는 순서를 세 단으로 못 박았다. 1단 구역명 — 제일 크게. 손님은 구역부터 고른다. 2단 큰 숫자 셋 — 매매가격 · 초기 필요자금 · 총매수가격 총매수가격이 결론이라 그 칸만 남색으로 덮는다. 3단 계산 근거 — 감정가액·프리미엄·분양가·분담금·레버리지. 작게. 업계에서 쓰는 표기 순서(감평 → 프리미엄 → 이주비 → 실투금 → 총매수가)와 같은 숫자를 쓰되, 결론부터 보이도록 자리만 앞뒤로 바꿨다. */ .rpklist{margin-top:22px; display:flex; flex-direction:column; gap:14px} .rpk{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:17px 19px 15px; box-shadow:var(--shadow-s); transition:border-color .15s ease, box-shadow .15s ease} .rpk:hover{border-color:var(--blue); box-shadow:var(--shadow-m)} .rpk-h{display:flex; align-items:baseline; gap:8px 13px; flex-wrap:wrap; padding-bottom:13px; border-bottom:1px solid var(--line)} .rpk-z{font-size:clamp(19px,2.4vw,24px); font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:1.22} .rpk-s{font-size:13px; font-weight:500; color:var(--muted); letter-spacing:-.01em} /* 대지 몇 평 — 손님이 제일 먼저 보는 값이라 크게·강조색으로 띄운다 (2026.10.08) */ .rpk-s .rpk-ar{font-size:15.5px; font-weight:800; color:var(--blue); letter-spacing:-.03em} .rpk-s .rpk-ar + em{font-style:normal; font-size:11.8px; color:var(--muted); margin-left:3px} /* 감정가액이 조합 결과인지 예상치인지 — 카드마다 한눈에 보이게 꼬리표를 단다 (2026.10.07 대표님 지시: 예상이면 '참고용'이라고 반드시 적어 둘 것). */ .rpk-b{font-size:11.4px; font-weight:700; padding:3px 9px; border-radius:100px; background:#FFF3DC; color:#8A5A12; border:1px solid #F0D9A8; white-space:nowrap; letter-spacing:-.02em} .rpk-b.ok{background:#E8F0FA; color:#1B4E8C; border-color:#C2D8F0} :root[data-theme="dark"] .rpk-b, :root:not([data-theme="light"]) .rpk-b{ background:#2B2315; color:#E8C98A; border-color:#6B5424} :root[data-theme="dark"] .rpk-b.ok, :root:not([data-theme="light"]) .rpk-b.ok{ background:#16243A; color:#9FC4EE; border-color:#2E4663} @media(prefers-color-scheme:light){ :root:not([data-theme="dark"]) .rpk-b{ background:#FFF3DC; color:#8A5A12; border-color:#F0D9A8} :root:not([data-theme="dark"]) .rpk-b.ok{ background:#E8F0FA; color:#1B4E8C; border-color:#C2D8F0} } .rpk-go{margin-left:auto; font-size:13px; font-weight:700; color:var(--blue); white-space:nowrap} .rpk-go:hover{text-decoration:underline} .rpk-m{margin-top:14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px} .rpk-t{background:var(--surface-2); border-radius:9px; padding:11px 13px 10px; min-width:0} .rpk-t i{display:block; font-style:normal; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px} /* display:inline 을 반드시 적어야 한다 (2026.10.07). 이 파일 위쪽에 b 를 블록으로 두는 규칙이 있어서, 그대로 두면 '35.0' 과 '억'이 두 줄로 갈라진다. 숫자와 단위는 한 줄에 붙어 있어야 금액으로 읽힌다. */ .rpk-t b{display:inline; font-family:var(--mono); font-size:clamp(25px,2.4vw,31px); font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:1.12} .rpk-t u{text-decoration:none; font-size:13px; font-weight:700; color:var(--muted); margin-left:3px} .rpk-t .rpk-na{display:inline; font-size:22px; color:var(--muted); font-weight:500} /* 총매수가격 — 이 표에서 유일한 결론이라 색을 덮어 둔다 */ .rpk-t.hi{background:var(--navy-900)} .rpk-t.hi i{color:var(--onnavy-2)} .rpk-t.hi b{color:#fff} .rpk-t.hi u{color:var(--onnavy-2)} /* 계산 근거 다섯 줄. 칸을 너무 잘게 쪼개면 이름과 숫자가 멀어져 안 읽힌다. 한 칸을 190px 이상으로 잡아 PC 에서 3열, 좁은 화면에서 1~2열이 되게 둔다. */ .rpk-d{margin:13px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:2px 20px} /* 이름과 숫자를 위아래로 쌓는다 (2026.10.07). 한 줄에 양 끝으로 벌려 놓으면 '감정가액 … 11.5' 처럼 사이가 멀어져 어느 숫자가 어느 항목인지 눈이 따라가지 못한다. */ .rpk-r{padding:6px 0 7px; border-bottom:1px dashed var(--line); min-width:0} .rpk-r dt{font-size:12.2px; font-weight:600; color:var(--muted); letter-spacing:-.02em; white-space:nowrap; margin-bottom:2px} .rpk-r dd{margin:0; font-size:16px; font-weight:700; color:var(--ink-2); letter-spacing:-.02em; min-width:0; line-height:1.4} /* 값 글씨를 키운다 — 16px 로는 강조가 안 된다는 지적 (2026.10.08) */ .rpk-r dd b{display:inline; font-family:var(--mono); font-size:19.5px; font-weight:800; color:var(--ink); letter-spacing:-.04em} .rpk-r dd b.neg{color:#2E7D52} .rpk-r dd em{font-style:normal; font-size:11.5px; color:var(--muted)} /* 카드 맨 아래 한 줄 — 임차보증금 현황 · 실투자금 (2026.10.08 대표님 지시). 실투자금이 이 카드의 결론이라 오른쪽 칸만 색을 덮고 숫자를 키운다. */ .rpk-x{margin-top:14px; display:grid; grid-template-columns:1fr minmax(150px,.52fr); gap:9px; align-items:stretch} .rpk-xi{background:var(--surface-2); border-radius:9px; padding:10px 14px 11px; min-width:0; display:flex; flex-direction:column; justify-content:center} .rpk-xi i{font-style:normal; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:-.02em; margin-bottom:3px} .rpk-xi span{font-size:14.5px; font-weight:600; color:var(--ink-2); line-height:1.45; word-break:keep-all} .rpk-xi b{display:inline; font-family:var(--mono); font-size:clamp(23px,2.2vw,28px); font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:1.1} .rpk-xi u{text-decoration:none; font-size:12.5px; font-weight:700; color:var(--muted); margin-left:3px} .rpk-xi.hi{background:var(--navy-900)} .rpk-xi.hi i{color:var(--onnavy-2)} .rpk-xi.hi b{color:#fff} .rpk-xi.hi u{color:var(--onnavy-2)} .rpk-xi.hi .rpk-na{color:var(--onnavy-2); font-size:22px; font-weight:500} @media(max-width:560px){ .rpk-x{grid-template-columns:1fr} } /* 비고 — 대표님이 제일 중요한 말을 적으시는 자리다 (2026.10.07). 회색 작은 글씨로 두면 묻혀서 안 읽힌다. 왼쪽에 파란 띠를 두르고 키운다. */ .rpk-n{margin:13px 0 0; font-size:15px; line-height:1.62; font-weight:600; color:var(--ink); background:var(--surface-2); border-radius:8px; border-left:5px solid var(--blue); padding:12px 15px} .rpk-n i{display:inline-block; font-style:normal; font-weight:700; color:var(--blue); margin-right:9px; font-size:11.6px; letter-spacing:.02em; vertical-align:1px} /* 좁은 화면 — 결론(총매수가격)을 아래 한 줄 전체로 내린다 */ @media(max-width:560px){ .rpk{padding:15px 15px 13px} .rpk-m{grid-template-columns:repeat(2,minmax(0,1fr))} .rpk-t.hi{grid-column:1 / -1} .rpk-go{margin-left:0; width:100%} /* 1열로 두면 카드 하나가 화면 두 장을 먹는다. 좁은 화면에서도 2열로 둔다 */ .rpk-d{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 14px} } /* ── 추천매물 투자 분석표 (2026.10.02 대표님 엑셀 폼) ──────────────── 숫자가 많은 표다. 엑셀처럼 색을 덮지 않고, 읽는 순서대로만 강조한다. · 매매가격 → 프리미엄 → 초기 필요자금 → 총매수가격 총매수가격이 결론이므로 그 칸만 남색으로 잡아 둔다. */ .pwarn{margin-top:18px; padding:15px 18px; border-radius:11px; background:#FFF6E5; border:1px solid #F0CE8E; color:#6B4A12; font-size:13.5px; line-height:1.78; max-width:62em} .pwarn b{color:#8A4B00; font-weight:800} .pwarn u{text-decoration-thickness:2px; text-underline-offset:2px} :root[data-theme="dark"] .pwarn, :root:not([data-theme="light"]) .pwarn{ background:#2B2315; border-color:#6B5424; color:#F0D9A8} @media(prefers-color-scheme:light){ :root:not([data-theme="dark"]) .pwarn{ background:#FFF6E5; border-color:#F0CE8E; color:#6B4A12} } :root[data-theme="dark"] .pwarn b, :root:not([data-theme="light"]) .pwarn b{color:#FFC861} @media(prefers-color-scheme:light){ :root:not([data-theme="dark"]) .pwarn b{color:#8A4B00} } .ptbl-fin{min-width:1080px} .ptbl-fin th{vertical-align:bottom; line-height:1.4} .ptbl-fin th em{display:block; margin-top:4px; font-style:normal; font-weight:500; font-size:9.5px; letter-spacing:.04em; text-transform:none; color:#9AA7B4} .ptbl-fin th.n{text-align:right} .ptbl-fin th.hl{color:var(--navy)} .ptbl-fin th.hl2{color:var(--navy); background:#E7EEF9} :root[data-theme="dark"] .ptbl-fin th.hl2, :root:not([data-theme="light"]) .ptbl-fin th.hl2{ background:#1E2A3C} @media(prefers-color-scheme:light){ :root:not([data-theme="dark"]) .ptbl-fin th.hl2{ background:#E7EEF9} } .ptbl-fin td{padding:14px 14px; font-size:14px} .ptbl-fin td.n{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:14.5px} .ptbl-fin td.n b{font-weight:700; color:var(--navy); font-size:15.5px} .ptbl-fin td.aa b{font-size:17px; color:var(--ink)} .ptbl-fin td.hl{background:var(--surface-2)} .ptbl-fin td.hl2{background:#E7EEF9} .ptbl-fin td.hl2 b{font-size:19px; color:var(--navy); letter-spacing:-.02em} :root[data-theme="dark"] .ptbl-fin td.hl2, :root:not([data-theme="light"]) .ptbl-fin td.hl2{ background:#1E2A3C} @media(prefers-color-scheme:light){ :root:not([data-theme="dark"]) .ptbl-fin td.hl2{ background:#E7EEF9} } .ptbl-fin td.z em, .ptbl-fin td.ty em{display:block; margin-top:4px; font-style:normal; font-size:11.5px; font-weight:500; color:var(--muted); letter-spacing:0} .ptbl-fin td.ty{font-weight:800; color:var(--navy); white-space:nowrap} .ptbl-fin td.lev{min-width:132px} .ptbl-fin td.lev .lv{display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums} .ptbl-fin td.lev .lv i{font-style:normal; font-family:var(--body); font-size:11.5px; color:var(--muted)} .ptbl-fin td.lev em{display:block; margin-top:5px; padding-top:5px; border-top:1px solid var(--line); font-style:normal; font-size:11px; font-family:var(--mono); color:var(--muted); text-align:right} .ptbl-fin .neg{color:#1F8A5B} .ptbl-fin .fl{font-style:normal; font-family:var(--body); font-size:10.5px; color:#1F8A5B; margin-left:4px} /* 비고 — 그 매물 줄 바로 아래에 가로 전체로 붙인다. 표 안의 한 칸으로 두면 옆으로 잘려 읽히지 않았다 (2026.10.02 확인). */ .ptbl-fin tr.rh td{border-bottom:none; padding-bottom:10px} .ptbl-fin tr.rn td{padding:0 14px 13px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2); line-height:1.65} .ptbl-fin tr.rn .nr{display:flex; align-items:baseline; gap:16px} .ptbl-fin tr.rn .nx{flex:1; min-width:0} .ptbl-fin tr.rn a{flex:none; font-size:12.5px; font-weight:700; color:var(--blue); white-space:nowrap} .ptbl-fin tr.rn a:hover{text-decoration:underline} .ptbl-fin tr.rn td i{font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:9px; vertical-align:1px} .ptbl-fin tbody tr.rh:hover td, .ptbl-fin tbody tr.rh:hover + tr.rn td{ background:var(--surface-2)} .ptbl-fin tbody tr.rh:hover td.hl2{background:#DDE8F7} :root[data-theme="dark"] .ptbl-fin tbody tr.rh:hover td.hl2, :root:not([data-theme="light"]) .ptbl-fin tbody tr.rh:hover td.hl2{background:#26354B} @media(prefers-color-scheme:light){ :root:not([data-theme="dark"]) .ptbl-fin tbody tr.rh:hover td.hl2{background:#DDE8F7} } .ptbl-fin tbody tr.rn:last-child td{border-bottom:none} /* 휴대폰에서는 표를 카드로 바꾼다. 옆으로 밀어 보게 두면 맨 오른쪽 '특이사항'이 가려지는데, 그 칸이 이 표의 핵심이다. */ @media(max-width:760px){ .ptbl-w{border:none; border-radius:0; background:transparent; overflow:visible} .ptbl, .ptbl tbody, .ptbl tr, .ptbl td{display:block; width:auto; min-width:0} .ptbl thead{display:none} .ptbl tbody tr{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px 16px 12px; margin-bottom:12px} .ptbl tbody tr:hover{background:var(--surface)} .ptbl td{border-bottom:1px solid var(--line); padding:11px 0; display:flex; align-items:baseline; gap:12px} .ptbl td::before{content:attr(data-l); flex:0 0 72px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} .ptbl td.g::before{content:none} .ptbl td.z{font-size:17px; padding-top:14px} .ptbl td.nt{white-space:normal} .ptbl td.g{border-bottom:none; padding-bottom:4px; text-align:left} } /* 추천 분석표는 숫자 칸이 아홉 개라 태블릿 폭에서도 옆으로 밀린다. 밀린 표는 오른쪽 끝 '총매수가격'이 가려지는데 그게 결론이다. 그래서 이 표만 1140px 부터 카드로 바꾼다 — 표가 다 펴지면 1134px 이다 (2026.10.02 폭 12종을 재서 맞춤). */ @media(max-width:1140px){ .ptbl-w:has(.ptbl-fin){border:none; border-radius:0; background:transparent; overflow:visible} .ptbl-fin, .ptbl-fin tbody, .ptbl-fin tr, .ptbl-fin td{display:block; width:auto; min-width:0} .ptbl-fin thead{display:none} .ptbl-fin tbody tr{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px 16px 12px; margin-bottom:12px} .ptbl-fin td{border-bottom:1px solid var(--line); padding:11px 0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap} .ptbl-fin td::before{content:attr(data-l); flex:0 0 94px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.5} .ptbl-fin td.n{text-align:left} .ptbl-fin td.hl, .ptbl-fin td.hl2{background:transparent} .ptbl-fin td.hl2 b{color:var(--navy)} .ptbl-fin td.z{font-size:17px; padding-top:14px} .ptbl-fin td.z em, .ptbl-fin td.ty em{display:inline; margin-left:8px} .ptbl-fin td.lev{flex-wrap:wrap} .ptbl-fin td.lev .lv{justify-content:flex-start; gap:12px; margin-right:16px} .ptbl-fin td.lev em{width:100%; text-align:left; border-top:none; margin-top:2px; padding-top:0} /* 비고 줄은 그 매물 카드의 아랫단으로 붙인다 */ .ptbl-fin tbody tr.rh:has(+ tr.rn){border-radius:12px 12px 0 0; margin-bottom:0; border-bottom:none; padding-bottom:6px} .ptbl-fin tr.rn{border:1px solid var(--line); border-top:none; border-radius:0 0 12px 12px; margin-bottom:12px; padding:0 16px 8px; background:var(--surface)} .ptbl-fin tr.rn td{border-bottom:none; padding:10px 0; display:block} .ptbl-fin tr.rn .nr{flex-direction:column; align-items:flex-start; gap:8px} .ptbl-fin tr.rn td i{display:block; margin-bottom:4px} .ptbl-fin tbody tr.rh:hover td, .ptbl-fin tbody tr.rh:hover + tr.rn td{ background:transparent} } /* 아주 좁은 화면 — 칸이름 94px 를 빼면 설명을 옆에 붙일 자리가 없다 */ @media(max-width:430px){ .ptbl-fin td::before{flex:0 0 84px} .ptbl-fin td.z em, .ptbl-fin td.ty em{display:block; margin-left:0; width:100%; padding-left:96px; margin-top:2px} .ptbl-fin tbody tr{padding-inline:13px} } /* ══ 지도 오른쪽 정비구역 목록 (2026.10.01 대표님 지시) ══════════════ 넓은 화면에서만 세운다. 좁은 화면에서는 왼쪽 패널의 탭으로 들어간다. */ .zside{position:absolute; top:0; right:0; bottom:0; width:286px; z-index:4; display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--line); box-shadow:-10px 0 28px -22px rgba(10,24,48,.5)} .zside[hidden]{display:none} .zs-top{display:flex; align-items:center; gap:8px; padding:12px 13px; border-bottom:1px solid var(--line)} .zs-top b{font-family:var(--display); font-size:14px; color:var(--navy); letter-spacing:-.03em} .zs-top span{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--blue); background:var(--blue-050); border-radius:4px; padding:1px 7px} .zs-x{margin-left:auto; appearance:none; border:none; background:none; cursor:pointer; font-size:19px; line-height:1; color:var(--ink-3); padding:0 2px} .zs-x:hover{color:var(--navy)} .zs-list{flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain} .zcard{display:block; width:100%; text-align:left; appearance:none; cursor:pointer; padding:11px 14px; border:none; border-bottom:1px solid var(--line); background:var(--surface); font-family:inherit; transition:.1s} .zcard:hover{background:var(--surface-2)} .zc-h{display:flex; align-items:center; gap:7px} .zc-h i{width:8px; height:8px; border-radius:2px; flex:none} .zc-h b{font-family:var(--display); font-size:14.5px; font-weight:800; letter-spacing:-.03em; color:var(--navy)} .zc-st{display:block; margin-top:5px; font-size:11.5px; line-height:1.6; color:var(--ink-2); word-break:keep-all} .zc-m{display:flex; flex-wrap:wrap; gap:4px; margin-top:7px} .zc-m em{font-style:normal; font-size:10.5px; font-weight:600; color:var(--ink-3); border:1px solid var(--line); border-radius:4px; padding:2px 6px; line-height:1.5; max-width:100%; word-break:keep-all} .zc-m em.on{color:var(--blue); border-color:var(--blue-050); background:var(--blue-050); font-weight:700} /* 지도가 좁아지지 않게 — 1360px 미만에서는 오른쪽 판을 안 쓴다 */ @media(max-width:1360px){ .zside{display:none !important} } @media(max-width:1360px){ .ms-tab{display:flex; border-bottom:1px solid var(--line); background:var(--surface-2)} .mt{flex:1; appearance:none; cursor:pointer; border:none; background:none; padding:11px 8px 10px; font-family:inherit; font-size:13.5px; font-weight:700; letter-spacing:-.03em; color:var(--ink-3); border-bottom:2px solid transparent} .mt.on{color:var(--navy); border-bottom-color:var(--navy); background:var(--surface)} .mt i{font-style:normal; font-family:var(--mono); font-size:11px; font-weight:700; color:#fff; background:var(--blue); border-radius:100px; padding:1px 6px; margin-left:3px} } @media(max-width:900px){ /* 좁은 화면에서는 지도와 목록을 단추로 오간다 */ .mside{position:absolute; inset:0; flex:none; width:100%; border-right:none; transform:translateX(-100%); transition:transform .18s; z-index:5} body.mlist-on .mside{transform:none} .mswap{display:block; position:absolute; left:50%; bottom:18px; z-index:6; transform:translateX(-50%); appearance:none; cursor:pointer; padding:11px 22px; border-radius:100px; border:none; background:var(--navy); color:#fff; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:-.02em; box-shadow:0 10px 24px -10px rgba(10,24,48,.6)} } .mapfull .canvas{aspect-ratio:auto} @media(max-width:1100px){ .mapbar p{display:none} } @media(max-width:1000px){ /* 메뉴 바가 69px 로 줄어든다: 38 + 69 + 62 = 169px */ .mapfull{height:calc(100vh - 169px)} .mapfull{height:calc(100dvh - 169px)} } @media(max-width:820px){ .mapbar .mstat{display:none} } @media(max-width:700px){ /* 38 + 69 + 54 = 161px */ .mapbar .wrap{height:54px; gap:12px} .mapbar h1{font-size:18px} .mapbar .legend{font-size:10px; gap:9px} .mapfull{height:calc(100vh - 161px); min-height:420px} .mapfull{height:calc(100dvh - 161px)} } @media(max-width:480px){ .mapbar .legend{display:none} } /* 지도 아래 안내 문구 */ .mapfoot{padding:16px 0 0; font-size:12.6px; color:var(--muted); line-height:1.8} /* ── 구역 정보판 — 지도에서 구역을 누르면 오른쪽에서 열린다 ── */ .zpanel{position:absolute; top:0; right:0; bottom:0; width:462px; z-index:8; background:var(--surface); border-left:1px solid var(--line); box-shadow:-14px 0 40px -22px rgba(10,20,40,.45); transform:translateX(100%); transition:transform .22s ease; will-change:transform} .zpanel.on{transform:translateX(0)} .zpanel[hidden]{display:none} .zp-x{position:absolute; top:10px; right:12px; z-index:2; width:32px; height:32px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:20px; line-height:1; color:var(--muted); cursor:pointer} .zp-x:hover{background:var(--surface-2); color:var(--ink)} .zp-in{height:100%; overflow-y:auto; padding:24px 24px 32px} .zp-hd h2{font-family:var(--display); font-size:26px; letter-spacing:-.035em; color:var(--navy); margin:0 38px 0 0} .zp-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px} .zp-tags span{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:3px 9px} .zp-tbl{width:100%; border-collapse:collapse; margin-top:17px; font-size:14.2px} .zp-tbl th{width:36%; text-align:left; font-weight:600; color:var(--muted); font-size:13px; padding:10px 0; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap} .zp-tbl td{padding:10px 0 10px 12px; border-bottom:1px solid var(--line); color:var(--ink); line-height:1.65} .zp-tx{margin-top:14px; font-size:14.4px; line-height:1.95; color:var(--ink-2)} .zp-sub{margin-top:26px; padding-bottom:9px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--muted)} .zp-ls{display:flex; flex-direction:column} .zp-ls a{display:flex; gap:11px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line)} .zp-ls img, .zp-ls .noimg{width:74px; height:56px; flex:none; border-radius:7px; object-fit:cover; background:var(--surface-2); display:block; border:1px solid var(--line)} .zp-ls .tx{min-width:0; display:flex; flex-direction:column; gap:2px} .zp-ls b{font-size:14.4px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .zp-ls em{font-style:normal; font-family:var(--mono); font-size:13.6px; color:var(--blue); font-weight:600} .zp-ls u{text-decoration:none; font-size:12.4px; color:var(--muted)} .zp-ls a:hover b{color:var(--blue)} .zp-more{padding:11px 0; font-size:12.4px; color:var(--muted)} .zp-none{padding:16px 0; font-size:13px; color:var(--muted); line-height:1.8} .zp-go{display:block; margin-top:20px; text-align:center; padding:14px; background:var(--navy); color:#fff; border-radius:9px; font-size:14.6px; font-weight:700} .zp-go:hover{background:var(--navy-600); color:#fff} /* 실거래 표 */ .dealwrap{margin-top:16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-s)} .dealtbl{width:100%; border-collapse:collapse; font-size:14px} .dealtbl th{background:var(--surface-2); text-align:left; font-weight:600; font-size:12.5px; color:var(--muted); padding:11px 14px; white-space:nowrap; border-bottom:1px solid var(--line)} .dealtbl td{padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); white-space:nowrap} .dealtbl tr:last-child td{border-bottom:0} .dealtbl tbody tr:hover{background:var(--surface-2)} .dealtbl .n{text-align:right; font-family:var(--mono); font-size:13px} .dealtbl .b{color:var(--ink); font-weight:600} .dealnote{margin-top:11px; font-size:12.4px; color:var(--muted); line-height:1.8; max-width:56em} @media(max-width:760px){ .dealwrap{overflow-x:auto; -webkit-overflow-scrolling:touch} .dealtbl{min-width:560px} } .zsteps{max-width:none} /* 지도 위 '묶은 핀' — 가까이 몰린 회색 매물 여러 개를 숫자 하나로 */ .cclus{display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(100,116,139,.92); color:#fff; font-family:var(--mono); font-size:12.5px; font-weight:700; cursor:pointer; border:2.5px solid #fff; box-shadow:0 3px 10px rgba(10,20,40,.4)} .cclus:hover{background:rgba(71,85,105,.96)} /* 지도 위 구역 이름표 */ .zlabel{display:inline-block; transform:translate(-50%,-50%); white-space:nowrap; cursor:pointer; padding:4px 10px; border-radius:99px; font-family:var(--display); font-size:12.5px; font-weight:700; color:#fff; background:var(--zc,#8B6BE8); border:1.5px solid rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(10,20,40,.35); letter-spacing:-.02em} .zlabel:hover{filter:brightness(1.12)} @media(max-width:700px){ .zlabel{font-size:11px; padding:3px 8px} } /* 진행현황 — 어느 단계까지 왔는지 세로로 보여 준다 */ .zp-step{list-style:none; margin:14px 0 0; padding:0} .zp-step li{position:relative; display:flex; align-items:baseline; gap:10px; padding:0 0 15px 25px; font-size:13.8px} .zp-step li i{position:absolute; left:0; top:5px; width:13px; height:13px; border-radius:50%; background:var(--surface-2); border:2px solid var(--line)} /* 위아래 단계를 잇는 선 */ .zp-step li::before{content:""; position:absolute; left:6px; top:17px; bottom:0; width:2px; background:var(--line)} .zp-step li:last-child::before{display:none} .zp-step li b{font-weight:600; color:var(--muted)} .zp-step li em{font-style:normal; margin-left:auto; font-family:var(--mono); font-size:12.4px; color:var(--muted)} .zp-step li.done i{background:var(--blue); border-color:var(--blue)} .zp-step li.done::before{background:var(--blue)} .zp-step li.done b{color:var(--ink)} .zp-step li.done em{color:var(--ink-2)} .zp-step li.now i{background:var(--surface); border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-050)} .zp-step li.now b{color:var(--blue); font-weight:700} .zp-step li.now em{color:var(--blue); font-weight:600} /* 최근 소식 */ .zp-news{display:flex; flex-direction:column} .zp-news a, .zp-news span{display:flex; gap:10px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.6px} .zp-news b{font-weight:500; color:var(--ink-2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .zp-news em{font-style:normal; margin-left:auto; flex:none; font-family:var(--mono); font-size:11.6px; color:var(--muted)} .zp-news a:hover b{color:var(--blue)} /* 전화 유도 상자 — 매물이 없을 때도 빈손으로 돌려보내지 않는다 */ .zp-ask{margin-top:16px; padding:16px 17px; border-radius:11px; background:var(--blue-050); border:1px solid transparent} .zp-ask b{display:block; font-family:var(--display); font-size:15.4px; color:var(--navy)} .zp-ask p{margin-top:7px; font-size:13.4px; line-height:1.8; color:var(--ink-2)} .zp-askb{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap} .zp-askb a{flex:1 1 auto; text-align:center; padding:11px 12px; border-radius:8px; font-size:13.6px; font-weight:700; white-space:nowrap} .zp-askb a.t{background:var(--blue); color:#fff} .zp-askb a.t:hover{background:var(--blue-700); color:#fff} .zp-askb a.s{background:var(--surface); color:var(--ink); border:1px solid var(--line)} .zp-askb a.s:hover{border-color:var(--blue); color:var(--blue)} /* 좁은 화면에서는 아래에서 올라오는 형태 */ @media(max-width:860px){ .zpanel{width:auto; left:0; top:auto; height:76%; border-left:0; border-top:1px solid var(--line); border-radius:16px 16px 0 0; transform:translateY(100%); box-shadow:0 -14px 40px -22px rgba(10,20,40,.5)} .zpanel.on{transform:translateY(0)} .zp-in{padding:18px 16px 24px} } /* ── 구역 페이지: 왼쪽 개요표 + 오른쪽 구역 지도 ── */ .zone-head{padding-bottom:30px} .zgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:34px; align-items:start} @media(max-width:900px){ .zgrid{grid-template-columns:1fr; gap:26px} } .zgrid .sec-head{margin-bottom:14px} .ztbl{width:100%; border-collapse:collapse; font-size:14.2px} .ztbl th{width:33%; text-align:left; font-weight:600; color:var(--muted); font-size:13px; padding:11px 0; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap} .ztbl td{padding:11px 0 11px 14px; border-bottom:1px solid var(--line); color:var(--ink); line-height:1.65} .ztbl tr:last-child th, .ztbl tr:last-child td{border-bottom:0} .zbody{font-size:15.4px; line-height:2.05; color:var(--ink-2); white-space:pre-line; max-width:56em} .zmapbox{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow-s)} .zmap{width:100%; height:390px} @media(max-width:900px){ .zmap{height:320px} } .zmnote{margin-top:10px; font-size:12.2px; color:var(--muted); line-height:1.7} .mstat{display:flex;gap:18px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--line); font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--surface)} .mpop{background:#fff;border-radius:11px;box-shadow:0 10px 30px -10px rgba(10,20,40,.5); padding:12px 15px 13px;min-width:194px;max-width:250px;font-family:var(--body)} .mpop b{display:block;margin-top:5px;font-family:var(--display);font-size:14.5px;color:var(--navy)} /* 정보 줄 — 왼쪽에 항목, 오른쪽에 값 */ .mpop span{display:flex;justify-content:space-between;gap:12px; margin-top:5px;font-size:12.5px;color:var(--navy);font-variant-numeric:tabular-nums} .mpop span em{font-style:normal;color:var(--muted);font-size:12px;flex:none} .mpop a{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:700;color:var(--blue)} /* 위쪽 꼬리표 */ .mpop .tag-pick,.mpop .tag-ask{display:inline-block;font-size:10.5px;font-weight:700; letter-spacing:.02em;padding:3px 9px;border-radius:99px;margin:0} .mpop .tag-pick{background:var(--blue-050,#EEF3FF);color:var(--blue,#2248D9)} .mpop .tag-ask{background:#E9EDF3;color:#5A6879} .mnote code{font-family:var(--mono);font-size:12px;background:var(--blue-050); color:var(--blue-700);padding:2px 6px;border-radius:4px} .page-head .mnote2{margin-top:10px;font-size:12.6px;color:#8FA3C4;line-height:1.75;max-width:52em} /* 묶은 핀을 눌렀을 때 뜨는 '이 자리 N건' 목록 */ .mpop.mlist{min-width:236px;max-width:286px} .mpop .ml{margin-top:8px;max-height:232px;overflow:auto; border-top:1px solid var(--line,#E4EAF2)} .mpop .ml button{display:flex;align-items:center;gap:9px;width:100%; padding:8px 2px;background:none;border:0;border-bottom:1px solid var(--line,#E4EAF2); text-align:left;cursor:pointer;font-family:var(--body)} .mpop .ml button:last-child{border-bottom:0} .mpop .ml button:hover{background:var(--blue-050,#EEF3FF)} .mpop .ml i{width:9px;height:9px;border-radius:50%;flex:none} .mpop .ml span{display:block;min-width:0} .mpop .ml b{display:block;margin:0;font-family:var(--display);font-size:13px;color:var(--navy)} .mpop .ml em{display:block;font-style:normal;font-size:11.5px;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mpop .more{margin:8px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5} /* ══ 광고 착지 페이지 (파워링크 3종) ══════════════════════════════ 키워드마다 손님이 찾는 것이 달라 첫 화면을 따로 만든다. 광고비를 내고 데려온 손님이므로 한 화면 안에서 '누가 · 왜 믿을 만한지 · 전화' 까지 끝나야 한다. 페이지를 헤매게 두면 그대로 나간다. */ .lhead{padding-bottom:44px} .lhead h1{margin-top:14px; max-width:16em} .llede{margin-top:20px; max-width:44em; font-size:17px; line-height:1.85; color:#C3D2EA} .llede b{color:#fff; font-weight:700} .lhead .btns{margin-top:30px; display:flex; flex-wrap:wrap; gap:10px} .lsig{margin-top:26px; padding-top:18px; border-top:1px solid var(--navy-line); font-family:var(--mono); font-size:11.5px; line-height:1.9; color:#8FA6C8} .lqa{margin-top:44px} .qa{padding:20px 0; border-top:1px solid var(--line)} .qa:last-child{border-bottom:1px solid var(--line)} .qa b{display:block; font-family:var(--display); font-size:17px; font-weight:800; color:var(--navy); letter-spacing:-.025em} .qa p{margin-top:9px; font-size:14.8px; line-height:1.85; color:var(--muted); max-width:52em; word-break:keep-all} .lend{margin-top:44px; background:var(--navy); border-radius:16px; padding:clamp(28px,4vw,46px); color:#fff} .lend h2{color:#fff; font-size:clamp(20px,2.6vw,27px); letter-spacing:-.03em} .lend p{margin-top:10px; font-size:15px; color:#B6C7E2; line-height:1.8} .lend .btns{margin-top:24px; display:flex; flex-wrap:wrap; gap:10px} .lnavs{margin-top:28px; padding-top:20px; border-top:1px solid var(--navy-line); display:flex; flex-wrap:wrap; gap:8px} .lnav{display:inline-block; padding:8px 14px; border-radius:100px; border:1px solid var(--navy-line); color:#C3D2EA; font-size:13px; font-weight:600; text-decoration:none} .lnav:hover{border-color:#8FB0FF; color:#fff} @media(max-width:560px){ .llede{font-size:15.5px} .qa b{font-size:16px} } /* ══ 대표 소개 — 세 가지 강점을 순차로 ══════════════════════════ 2026.09.26 대표님 지적: 큰 글씨가 정작 강점을 말하지 않고 있었다. "필지 하나하나 떼어 봤다"는 설명이지 강점이 아니다. 큰 글씨는 손님이 기억해야 할 한 문장만 담고, 근거는 아래 작은 글씨로 내린다. */ .tlnote{margin-top:26px; padding:22px 24px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:12px; font-size:15px; line-height:1.9; color:var(--ink-2); word-break:keep-all} .tlnote b{color:var(--navy); font-weight:700} .pitches{margin-top:34px; display:grid; gap:14px} .pitch{display:grid; grid-template-columns:104px minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(26px,3.2vw,40px); box-shadow:var(--shadow-s)} .pitch .pn{font-family:var(--mono); font-size:34px; font-weight:700; color:#C3CEDA; letter-spacing:.02em; line-height:1} .pitch .pk{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--blue)} .pitch h3{margin-top:12px; font-size:clamp(22px,3.1vw,33px); line-height:1.32; letter-spacing:-.04em; color:var(--navy)} .pitch p{margin-top:16px; font-size:15px; line-height:1.88; color:var(--muted); max-width:44em; word-break:keep-all} .pitch .pw{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:14.2px; color:var(--ink-2)} /* 셋 다 같은 무게로 세운다 (2026.09.26 대표님 지시). 하나만 남색이면 나머지 둘이 곁가지로 읽힌다. 순서는 중요도가 아니라 읽는 차례일 뿐이다. */ .pitch.hi{background:var(--navy); border-color:var(--navy)} .pitch.hi .pn{color:#6E8CBC} .pitch.hi .pk{color:#8FB0FF} .pitch.hi h3{color:#fff} .pitch.hi p{color:#B6C7E2} .pitch.hi .pw{border-top-color:var(--navy-line); color:#C9D8EE} @media(max-width:700px){ .pitch{grid-template-columns:1fr; gap:10px} .pitch .pn{font-size:26px} .tlnote{font-size:14.5px; padding:18px 20px} } /* ══ 첫 화면 — 얼굴과 갈림길 ══════════════════════════════════ 2026.09.26 대표님 지시. 찾아오신 이유가 사람마다 다르다. 재개발 매수자, 전세 구하는 사람, 건물 보러 온 사람, 매물을 내놓으려는 사람이 같은 첫 화면을 본다. 그래서 (1) 누가 하는지 얼굴을 먼저 보이고 (2) 자기 길을 직접 고르게 한다. */ .hcol{display:flex; flex-direction:column; gap:14px; min-width:0} .hteam{margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--navy-line); background:rgba(255,255,255,.05)} .hteam img{width:100%; display:block; aspect-ratio:21/9; object-fit:cover; object-position:50% 20%} .hteam figcaption{padding:10px 14px; font-size:12.2px; line-height:1.55; color:#A9BDD9; letter-spacing:-.01em} @media(max-width:900px){ .hteam img{aspect-ratio:16/9} } .picker{background:var(--surface-2); border-bottom:1px solid var(--line)} .picker .wrap{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-top:26px; padding-bottom:26px} .pk{display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 24px; text-decoration:none; box-shadow:var(--shadow-s); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease} .pk:hover{transform:translateY(-2px); border-color:var(--blue); box-shadow:0 12px 30px -16px rgba(27,43,75,.28)} .pk .n{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--blue)} .pk b{display:block; margin-top:9px; font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:-.03em; color:var(--navy)} .pk .d{display:block; margin-top:9px; font-size:13.8px; line-height:1.72; color:var(--muted)} .pk .go{display:block; margin-top:14px; font-size:13px; font-weight:700; color:var(--blue)} @media(max-width:820px){ .picker .wrap{grid-template-columns:1fr; gap:10px; padding-top:20px; padding-bottom:20px} .pk{padding:18px 20px} .pk b{font-size:18px} } /* 상담 신청서 단추 — 전화보다 문턱이 낮다. 밤에 보신 분도 남길 수 있다 */ .btn-form{background:var(--yellow); color:var(--navy-900); border-color:var(--yellow); font-weight:800; box-shadow:0 8px 20px -12px rgba(255,209,0,.95)} .btn-form:hover{filter:brightness(1.05)} /* 착지 페이지 머리 — 분야 소개를 여기로 옮겼다 (대표 소개에서 뺐다) */ .lwarn{margin-top:16px; padding-top:16px; border-top:1px solid var(--navy-line); max-width:44em; font-size:14.5px; line-height:1.85; color:#A9BDD9; word-break:keep-all} /* 이 문단은 본문이 흐린 회청색이라, 강조는 흰색으로 띄운다 (2026.09.30 대표님 지시) */ .lwarn b{color:#fff; font-weight:700} /* ══ 메인 — 매물 접수 배너 ══════════════════════════════════ 여기 있던 대표 소개(.ident)는 대표소개·분야별 상담 페이지로 옮겼다. 사진을 흑백으로 깔고 남색을 덮어 글씨를 올린다. 스크롤하며 색이 한 번 확 바뀌어 "다른 이야기가 시작됐다"가 눈으로 전달된다 (2026.09.26 대표님 지시). */ .intake{position:relative; overflow:hidden; background:var(--navy-900); color:#fff; border-top:1px solid rgba(255,255,255,.08)} .intake .ibg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:76% 26%; filter:grayscale(1) contrast(1.02) brightness(.46)} .intake::after{content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(1100px 520px at 84% -10%, rgba(50,83,155,.55), transparent 62%), linear-gradient(104deg, var(--navy-900) 0%, rgba(20,39,74,.97) 52%, rgba(20,39,74,.86) 80%, rgba(20,39,74,.76) 100%)} .intake .wrap{position:relative; z-index:2; padding-block:clamp(44px,5.6vw,76px)} .ieye{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.18em; color:#FFDD00} .ieye::before{content:""; width:22px; height:2px; background:var(--yellow)} .intake h2{margin-top:14px; color:#fff; font-family:var(--display); font-weight:800; font-size:clamp(26px,4.4vw,46px); letter-spacing:-.045em; line-height:1.22; word-break:keep-all} .ilead{margin-top:16px; max-width:40em; font-size:clamp(14.5px,1.7vw,16.5px); line-height:1.85; color:#C3D2EA; word-break:keep-all} .ilead b{color:#fff; font-weight:700} .isteps{margin-top:clamp(24px,3vw,34px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px} .ist{background:rgba(255,255,255,.07); border:1px solid var(--navy-line); border-radius:13px; padding:18px 18px 20px; backdrop-filter:blur(2px)} .ist .n{display:block; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em; color:#8FB0FF} .ist b{display:block; margin-top:9px; font-family:var(--display); font-size:17.5px; font-weight:800; letter-spacing:-.03em; color:#fff} .ist span:not(.n){display:block; margin-top:7px; font-size:13.5px; line-height:1.75; color:#A9BDD9; word-break:keep-all} .ibtns{margin-top:clamp(22px,2.6vw,30px); display:flex; gap:11px; flex-wrap:wrap} .inote{margin-top:18px; font-size:12.5px; line-height:1.8; color:#8FA6C8; max-width:44em; word-break:keep-all} @media(max-width:860px){ .isteps{grid-template-columns:1fr; gap:9px} .ist{padding:15px 16px 16px} .ist b{margin-top:6px; font-size:16.5px} .intake .ibg{object-position:70% 22%} .intake::after{background: linear-gradient(176deg, rgba(20,39,74,.90) 0%, rgba(20,39,74,.96) 55%, var(--navy-900) 100%)} } @media(max-width:560px){ .ilead{font-size:14.5px} .ist span:not(.n){font-size:13px} } /* ══ 상담 접수 페이지 ═══════════════════════════════════════ 네이버폼이 들어갈 자리. 주소를 안 넣으면 전화·문자 안내가 대신 나간다. 손님이 "무엇을 준비해야 하나" 부담을 느끼지 않게, 없어도 된다고 먼저 적는다. */ .prep-lede{margin-top:4px; margin-bottom:24px; font-size:15px; line-height:1.85; color:var(--ink-2); max-width:44em; word-break:keep-all} .prep-lede b{color:var(--navy); font-weight:700} .preps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px} .prep{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 22px 24px; box-shadow:var(--shadow-s)} .prep .ph{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:14px; border-bottom:2px solid var(--navy)} .prep .ph .n{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.14em; color:var(--blue)} .prep .ph b{font-family:var(--display); font-size:17.5px; font-weight:800; letter-spacing:-.03em; color:var(--navy)} .prep .ph a{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--blue); white-space:nowrap} .prep ul{list-style:none; margin:0; padding:0} .prep li{position:relative; padding:11px 0 11px 20px; border-bottom:1px solid var(--line); font-size:14px; line-height:1.72; color:var(--ink-2); word-break:keep-all} .prep li:last-child{border-bottom:none} .prep li::before{content:""; position:absolute; left:2px; top:19px; width:7px; height:7px; border-radius:50%; background:var(--blue-050); border:2px solid var(--blue)} @media(max-width:860px){ .preps{grid-template-columns:1fr} } /* 신청서 칸 */ .fbox{margin-top:22px; background:rgba(255,255,255,.07); border:1px solid var(--navy-line); border-radius:14px; padding:22px 22px 24px} .fbox.ready{background:rgba(255,221,0,.10); border-color:rgba(255,221,0,.42)} .fbox b{display:block; font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:-.03em; color:#fff} .fbox p{margin-top:8px; font-size:14.5px; line-height:1.8; color:#C3D2EA; word-break:keep-all} .fbox .btns{margin-top:16px; display:flex; gap:11px; flex-wrap:wrap} .fnote{margin-top:18px; padding-top:16px; border-top:1px solid var(--navy-line); font-size:12.8px; line-height:2; color:#8FA6C8; word-break:keep-all} .fnote b{color:#C3D2EA; font-weight:700; display:inline-block; min-width:72px} .lnav-hi{background:var(--yellow); border-color:var(--yellow); color:#14274A; font-weight:800} .lnav-hi:hover{filter:brightness(1.05); color:#14274A} /* 상담 페이지 안에 들어가는 준비물 칸 (한 분야만) */ .preps.one{grid-template-columns:minmax(0,1fr); margin-top:26px} .prep .pn{margin:14px 0 2px; font-size:14px; line-height:1.8; color:var(--muted); word-break:keep-all} .prep .ph .n{font-family:var(--display); font-weight:700} @media(max-width:560px){ .prep{padding:18px 18px 20px} } /* 착지 페이지 두 번째 안내줄 — '번거로우면 연락처만' 을 대문에서 알린다 */ .llede2{margin-top:12px; max-width:44em; font-size:15px; line-height:1.85; color:#A9BDD9; word-break:keep-all} .llede2 b{color:var(--yellow); font-weight:700} /* ══ 상담 접수 맨 아래 사진 배너 ═════════════════════════ 메인의 매물 접수 배너(.intake)와 같은 뼈대. 이 페이지에서 손님이 할 일은 신청서 단추 하나뿐이라 다른 것을 두지 않는다 (2026.09.28). */ .askbar{position:relative; overflow:hidden; background:var(--navy-900); color:#fff} .askbar .ibg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:76% 26%; filter:grayscale(1) contrast(1.02) brightness(.46)} .askbar::after{content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(1100px 520px at 84% -10%, rgba(50,83,155,.55), transparent 62%), linear-gradient(104deg, var(--navy-900) 0%, rgba(20,39,74,.97) 52%, rgba(20,39,74,.86) 80%, rgba(20,39,74,.76) 100%)} .askbar .wrap{position:relative; z-index:2; padding-block:clamp(44px,5.6vw,76px)} .askbar h1{margin-top:14px; color:#fff; font-family:var(--display); font-weight:800; font-size:clamp(25px,4vw,42px); letter-spacing:-.045em; line-height:1.22; word-break:keep-all} @media(max-width:860px){ .askbar .ibg{object-position:70% 22%} .askbar::after{background: linear-gradient(176deg, rgba(20,39,74,.90) 0%, rgba(20,39,74,.96) 55%, var(--navy-900) 100%)} } /* 상담 접수 배너 안의 노란 강조 줄 — '번거로우면 연락처만' 을 여기서 말한다 */ .askbar .ihi{margin-top:16px; max-width:30em; font-size:clamp(15px,1.9vw,18px); line-height:1.8; color:#C3D2EA; word-break:keep-all} .askbar .ihi b{color:var(--yellow); font-weight:700} .askbar .ilead{margin-top:12px; max-width:30em; font-size:14.5px; color:#A9BDD9} .askbar .inote{max-width:40em} /* 대표 소개 이야기 칸 — 낱말이 줄 끝에서 쪼개지지 않게 한다 */ .story p, .story h3, .story .kicker{word-break:keep-all} /* ══ 상담 페이지 강점 3칸 ═══════════════════════════════════ 밋밋해서 눈에 안 들어온다는 지적을 받아 고쳤다 (2026.09.28). 번호를 크게 띄우고, 위에 남색 띠를 얹고, 본문 핵심만 굵게 남긴다. */ .iblocks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:4px} .iblock{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:30px 26px 28px; box-shadow:var(--shadow-m); overflow:hidden} .iblock::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--navy) 0%, var(--blue) 100%)} .iblock .no{display:inline-block; font-family:var(--mono); font-size:26px; font-weight:600; line-height:1; color:var(--blue-050); letter-spacing:.02em; -webkit-text-stroke:1px var(--blue); paint-order:stroke fill} .iblock h3{margin-top:12px; font-family:var(--display); font-size:21px; font-weight:800; letter-spacing:-.035em; color:var(--navy); line-height:1.32} .iblock p{margin-top:13px; padding-top:13px; border-top:1px solid var(--line); font-size:14.8px; color:var(--ink-2); line-height:1.86} .iblock p strong{color:var(--navy); font-weight:700; background:linear-gradient(transparent 62%, var(--blue-050) 62%)} /* 세 칸이 좁아 문장이 자꾸 중간에서 잘린다는 지적 (2026.09.30 대표님 지시). 화면이 본문폭(1180px)보다 넓을 때만, 남는 여백만큼 좌우로 칸을 넓힌다. 여백이 없으면 0이 되므로 작은 화면에서는 가로로 밀리지 않는다. 8px 은 스크롤막대 몫으로 미리 빼 둔 것. */ @media(min-width:861px){ .iblocks{margin-inline:calc(-1 * min(72px, max(0px, (100vw - 1180px) / 2 - 8px))); gap:16px} .iblock{padding:30px 24px 28px} } @media(max-width:860px){ .iblocks{grid-template-columns:1fr; gap:12px} .iblock{padding:24px 22px 24px} .iblock h3{font-size:19.5px} } /* 대표 소개 — 분야별 전문 줄 */ .story .fields{margin-top:12px} .story .fields b{color:var(--navy); font-weight:700} /* 배너 제목을 뺀 자리를 이 줄이 대신한다 (2026.09.28) */ .askbar .ihi.big{margin-top:12px; max-width:26em; font-size:clamp(19px,2.8vw,28px); font-family:var(--display); font-weight:700; line-height:1.5; letter-spacing:-.03em; color:#DDE7F5} .askbar .ihi.big b{color:var(--yellow); font-weight:800} /* 매물 상세의 섹션 제목 (2026.10.06). 예전에는 h1 하나뿐이라 AI 가 어느 대목이 '정보'고 어느 대목이 '설명'인지 읽지 못했다. 보이는 모양은 그대로 두고 제목 요소만 h2 로 올렸다. */ .det h2.dh{margin-top:26px; font-family:var(--display); font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--navy); padding-bottom:9px; border-bottom:1px solid var(--line)} .det h2.dh:first-of-type{margin-top:20px} .zlead{margin-top:12px; font-size:14.2px; line-height:1.8; color:var(--ink-2)} .zlead b{color:var(--navy); font-weight:700} /* ══ 유튜브 영상 칸 (2026.10.06) ═══════════════════════════════════ 유튜브를 그냥 끼우면 한 장이 500KB 를 넘는다. 이 사이트는 9KB 다. 그래서 처음에는 썸네일 사진 한 장만 두고, 재생을 누른 순간 불러온다. */ .vbox{margin-top:18px} .vhead{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:9px} .vbox .vplay{display:block; position:relative; width:100%; padding:0; border:0; border-radius:12px; overflow:hidden; cursor:pointer; background:#000; aspect-ratio:16/9; line-height:0} .vbox .vplay img{width:100%; height:100%; object-fit:cover; opacity:.86; transition:opacity .18s, transform .3s} .vbox .vplay:hover img{opacity:1; transform:scale(1.02)} .vbox .vplay:focus-visible{outline:3px solid var(--blue); outline-offset:3px} .vbox .vbtn{position:absolute; inset:0; margin:auto; width:66px; height:46px; border-radius:12px; background:rgba(0,0,0,.72); transition:background .18s} .vbox .vplay:hover .vbtn{background:#FF0000} .vbox .vbtn::after{content:""; position:absolute; inset:0; margin:auto; width:0; height:0; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #fff} .vbox iframe{width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:12px; display:block} /* 소식 글에서 그 구역으로 보내는 칸 */ .nzone{margin-top:26px; padding:20px 22px; background:var(--surface-2); border-radius:12px; display:flex; flex-wrap:wrap; align-items:center; gap:7px 16px} .nzone b{font-family:var(--display); font-size:17px; color:var(--navy); letter-spacing:-.025em} .nzone span{flex:1 1 220px; min-width:0; font-size:13.5px; color:var(--ink-2); line-height:1.65} .nzone .btn{flex:none} /* 카테고리 목록 위 이동경로 (2026.10.06) */ .sec > .wrap > .crumb{margin-bottom:14px} /* ══════════════════════════════════════════════════════════════════ 매물 상세 새 구성 (2026.10.12 대표님 확정) 예전에는 네이버 광고 원문을 통째로 붙였다. 이제 사실만 골라 우리 형식으로 다시 짠다. 새로 쓰는 이름은 전부 d- 로 시작한다 (기존 이름과 겹치지 않게 theme.css 전체를 확인했다 — .pk 때 겪은 일을 되풀이하지 않는다). ══════════════════════════════════════════════════════════════════ */ /* 가격 — 손님이 제일 먼저 보는 값이라 남색 박스로 띄운다 */ .dprice{margin:16px 0 0; background:var(--navy-900); border-radius:13px; padding:18px 22px 16px; color:#fff} .dprice .dp-t{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--onnavy-2); border:1px solid var(--navy-line); border-radius:100px; padding:2px 10px} .dprice b{display:block; margin-top:7px; font-family:var(--mono); font-size:clamp(28px,3.4vw,38px); font-weight:800; letter-spacing:-.045em; line-height:1.1} .dprice .dp-s{display:block; margin-top:8px; font-size:14px; font-weight:600; color:var(--onnavy-2)} /* 조사 매물 안내 한 줄 — 작게, 회색으로 */ .dco{margin-top:11px; font-size:12.5px; line-height:1.6; color:var(--muted); font-weight:500} /* 한눈에 — 광고문에서 뽑아낸 매물특징 */ .dkey{margin-top:16px; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--blue); border-radius:4px 13px 13px 4px; padding:16px 20px 14px; box-shadow:var(--shadow-s)} .dkey .dkt{font-size:12.5px; font-weight:800; color:var(--blue); letter-spacing:.02em} .dkey ul{margin:9px 0 0; padding:0; list-style:none} .dkey li{position:relative; padding:5px 0 5px 15px; font-size:16px; line-height:1.62; font-weight:600; color:var(--ink)} .dkey li:before{content:""; position:absolute; left:0; top:14px; width:5px; height:5px; border-radius:50%; background:var(--blue)} /* 소제목 — 위쪽 .det h2.dh 보다 뒤에 있어야 이긴다 (특정성이 같아 순서로 이긴다) */ .det h2.dh{margin:30px 0 0; font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--ink)} .dnote{font-size:12px; font-weight:600; color:var(--muted); margin-left:6px; letter-spacing:-.01em} /* 매물 정보 · 건물 정보 — 두 칸짜리 카드 */ .dcard{margin-top:11px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:4px 20px; box-shadow:var(--shadow-s)} .dgrid{margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px} .di{display:flex; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)} .dgrid .di:nth-last-child(-n+2){border-bottom:none} .di dt{flex:none; width:82px; margin:0; font-size:13.5px; font-weight:700; color:var(--muted)} .di dd{margin:0; font-size:15.5px; font-weight:700; color:var(--ink); letter-spacing:-.02em} .di dd em{font-style:normal; font-size:13px; font-weight:600; color:var(--muted); margin-left:5px} /* 값이 없는 명시사항 칸 — 위쪽 .spectbl .ask 는 표에만 걸려서 여기에 따로 둔다 */ .dcard .ask{font-size:12.5px; color:var(--muted); font-weight:500} /* 조회번호 — 손님이 전화로 불러 주는 번호 */ .dref{margin:-4px 0 14px; padding:13px 15px; background:var(--blue-050); border:1px solid var(--line); border-radius:10px; text-align:center} .dref span{display:block; font-size:12px; font-weight:700; color:var(--muted)} .dref b{display:block; margin-top:2px; font-family:var(--mono); font-size:30px; font-weight:800; letter-spacing:.06em; color:var(--blue)} .dref u{display:block; margin-top:4px; text-decoration:none; font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.45} @media(max-width:620px){ .dgrid{grid-template-columns:1fr} .dgrid .di:nth-last-child(-n+2){border-bottom:1px solid var(--line)} .dgrid .di:last-child{border-bottom:none} .di dt{width:72px} }