:root{
  --y:#FFCC00; --y3:#FFF7D6; --blk:#1B1E22;
  --ink:#1B1E22; --ink2:#454B53; --mute:#646B75;
  --bg:#FFFFFF; --bg2:#F3F4F6; --sf:#FFFFFF; --ln:#DCDFE4; --ln2:#C2C7CE;
  --lease:#1D5FD1; --sale:#C92E2E; --mapbg:#EAF0F5;
  /* Black Han Sans 는 큰 제목용이다. 22px 아래로 쓰면 한글 획이 서로 붙어 뭉쳐 보인다.
     작은 글씨와 긴 문장에는 --sans(IBM Plex Sans KR) 를 700 으로 쓴다.
     또 굵기가 하나뿐이다. 700을 달라고 하면 일부 휴대폰이
     스스로 굵게 흉내 내다 글씨가 번진다. 그래서 400으로 둔다 */
  --disp:"Black Han Sans","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --maxw:1200px; --barh:66px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--ink:#F1F2F0;--ink2:#C9CDD3;--mute:#A0A7B1;--bg:#121417;--bg2:#1A1D21;--sf:#1D2025;--ln:#2E333A;--ln2:#434A53;--y3:#2B2716;--mapbg:#161A1F}
}
:root[data-theme="dark"]{--ink:#F1F2F0;--ink2:#C9CDD3;--mute:#A0A7B1;--bg:#121417;--bg2:#1A1D21;--sf:#1D2025;--ln:#2E333A;--ln2:#434A53;--y3:#2B2716;--mapbg:#161A1F}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
@media (max-width:640px){body{font-size:17px}}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0;line-height:1.25;font-weight:700}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
@media (max-width:640px){.wrap{padding:0 16px}}
:focus-visible{outline:3px solid var(--lease);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.d{font-family:var(--disp);font-weight:400;font-synthesis:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bgi{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--bg2)}
.fine{font-size:15px;color:var(--mute);margin-top:10px}

/* 시안 안내, 윗줄 */
.proto{background:var(--y3);color:var(--ink);font-size:14px;padding:7px 22px;display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--ln)}
.proto button{background:none;border:0;text-decoration:underline;font-size:14px;padding:0}
.topline{background:var(--bg2);border-bottom:1px solid var(--ln);font-size:15px;color:var(--ink2)}
.topline .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:38px}
.topline nav{display:flex;gap:18px}
.topline a:hover{text-decoration:underline}
.topline b{color:var(--ink)}
@media (max-width:1100px){.topline{display:none}}

/* 머리 */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);border-bottom:1px solid var(--ln)}
.top .wrap{display:flex;align-items:center;gap:18px;height:76px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo svg{width:46px;height:46px;display:block}
.logo .gp{font-weight:700;font-size:15px;background:var(--y);color:var(--blk);padding:1px 8px;border-radius:6px;line-height:1.5}
.logo b{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:31px;line-height:1;position:relative;top:.1em;margin-left:4px}
/* 주소를 외우게 하려고 로고에 .com 을 붙인다. 이름을 누르지 않을 만큼만 작게 */
.logo b i{font-family:var(--sans);font-style:normal;font-weight:600;font-size:.6em;
  letter-spacing:-.01em;color:#B4BAC3;margin-left:3px}
nav.main{display:flex;gap:2px;margin-left:auto}
nav.main a{font-size:17px;font-weight:600;padding:8px 11px;border-radius:8px;color:var(--ink2);white-space:nowrap}
nav.main a:hover{background:var(--bg2);color:var(--ink)}
nav.main a.on{background:var(--y3);color:var(--ink)}
.call{display:inline-flex;align-items:center;gap:8px;background:var(--y);color:var(--blk);font-weight:700;font-size:19px;padding:10px 16px;border-radius:10px;white-space:nowrap}
.call svg{width:20px;height:20px}
.savedl{display:none;align-items:center;gap:4px;font-weight:700;font-size:16px;padding:8px 10px;border:2px solid var(--ln2);border-radius:10px}
.savedl svg{width:20px;height:20px;fill:var(--sale);stroke:var(--sale)}
.menu{display:none;border:2px solid var(--ln2);background:var(--sf);border-radius:10px;padding:8px 12px;font-weight:600;font-size:16px;line-height:1}
.menu svg{width:24px;height:24px;display:block}
@media (max-width:1100px){nav.main{display:none}.menu{display:inline-block}.call{margin-left:auto}.savedl{display:inline-flex}}
@media (max-width:640px){.top .wrap{height:64px;gap:8px}.logo{gap:6px}.logo svg{width:34px;height:34px}.logo b{font-size:22px;margin-left:2px}.logo b i{font-size:.62em;margin-left:2px}.logo .gp{font-size:13px;padding:1px 6px}.call span{display:none}.call{padding:10px 12px}.savedl{padding:8px}.menu{padding:8px 10px}}
@media (max-width:400px){.savedl{display:none!important}}
.drawer{display:none;border-top:1px solid var(--ln);background:var(--bg)}
.drawer.open{display:block}
.drawer a{display:block;padding:14px 22px;border-bottom:1px solid var(--ln);font-size:19px;font-weight:600}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 22px;border-radius:12px;font-weight:700;font-size:19px;border:2px solid transparent;line-height:1.25;text-align:center}
.btn svg{width:22px;height:22px;flex-shrink:0}
.btn.y{background:var(--y);color:var(--blk)}
.btn.k{background:var(--ink);color:var(--bg)}
.btn.kk{background:#1B1E22;color:#fff}
.btn.o{background:var(--sf);color:var(--ink);border-color:var(--ln2)}
.btn.o:hover{border-color:var(--ink)}
.btn.o.on{border-color:var(--sale);color:var(--sale)}
.btn.wide{width:100%}
.btn.sm{min-height:46px;font-size:17px;padding:8px 16px}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.office-map-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn.map-kakao{background:#fee500;color:#191919;--map-pin-hole:#fee500}
.btn.map-kakao svg{color:#0085ff}
.btn.map-naver{background:#03c75a;color:#fff}
.btn.map-kakao,.btn.map-naver{border-radius:6px;gap:8px}
.btn.map-kakao:hover,.btn.map-naver:hover{filter:brightness(.95)}

/* 첫 화면: 캐릭터 배너 */
.hero{position:relative;background:#fff;color:#1B1E22;overflow:hidden}
.hero-img{display:block;width:100%;height:min(37.5vw,700px);background-color:#fff;background-position:left bottom}
.hero-copy{position:absolute;top:0;left:43%;right:3%;padding-top:clamp(14px,2.2vw,40px);z-index:1}
/* 글자 뒤 흰 번짐은 뺐다. 휴대폰·브라우저 강제 어두운 모드가 흰색을 검게 뒤집어 검은 타원으로 보였다 */
.kick{display:inline-block;background:#1B1E22;color:var(--y);font-weight:700;font-size:17px;padding:5px 12px;border-radius:8px}
.hero h1{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:clamp(36px,4.4vw,66px);line-height:1.08;margin-top:12px;color:#1B1E22}
@media (max-width:900px){.hero-img{height:300px;background-position:12% bottom}.hero-copy{position:static;padding:16px 16px 6px}.hero-copy::before{display:none}.hero h1{font-size:40px}}

/* 노랑 검색 띠 */
.sband{background:var(--y);color:#1B1E22;padding:22px 0 24px}
.slab{display:block;font-weight:700;font-size:18px;margin-bottom:8px;color:#1B1E22}
.sbox{display:flex;gap:8px}
.sbox input{flex:1;min-width:0;height:62px;border:3px solid #1B1E22;border-radius:12px;padding:0 16px;font-size:19px;background:#fff;color:#1B1E22}
.sbox input::placeholder{color:#6B727C}
.sbox .btn{min-width:110px;height:62px}
.ssel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px;margin-top:10px}
.ssel select{height:52px;border:2px solid #1B1E22;border-radius:10px;padding:0 10px;font-size:17px;background:#fff;color:#1B1E22;min-width:0}
.ssel .btn{min-height:52px;background:#fff;color:#1B1E22;border-color:#1B1E22}
@media (max-width:760px){.ssel{grid-template-columns:1fr 1fr}.ssel .btn{grid-column:1/-1}}
.srow{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;margin-top:18px;flex-wrap:wrap}
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:36px;line-height:1.05;color:#1B1E22}
.stats b small{font-family:var(--sans);font-weight:700;font-size:18px;margin-left:3px}
.stats span{font-size:16px;color:#2B2F35;font-weight:600}
.srow .btn{min-width:300px}
@media (max-width:640px){.stats{gap:16px;width:100%;justify-content:space-between}.stats b{font-size:30px}.stats span{font-size:14px}.srow .btn{min-width:0;width:100%}}

/* 구획 */
.sec{padding:56px 0}
.sec.alt{background:var(--bg2)}
@media (max-width:640px){.sec{padding:38px 0}}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:18px;flex-wrap:wrap}
.sh h2,.sh h1{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:clamp(28px,3.4vw,38px);line-height:1.2}
.shs{font-size:17px;color:var(--ink2);margin-top:4px}
.sh > a{font-weight:700;font-size:17px;border:2px solid var(--ln2);border-radius:10px;padding:6px 14px;white-space:nowrap;background:var(--sf)}
.sh > a:hover{border-color:var(--ink)}
.lead{font-size:19px;color:var(--ink2);max-width:38em}

/* 탭 */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tab{border:2px solid var(--ln2);background:var(--sf);border-radius:10px;padding:8px 14px;font-size:16px;font-weight:600;color:var(--ink)}
.tab:hover{border-color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.home-kind-tabs{margin:0;min-width:0}
.home-mobile-filters{display:none}
.home-sortbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--ln)}
.home-count{font-size:16px;color:var(--ink2);white-space:nowrap;margin-bottom:14px}
.home-count strong{font-size:20px;color:var(--ink);margin-right:3px}
.home-sortselect{position:relative}
.home-sortselect::after{content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.home-sortselect select{appearance:none;min-height:44px;padding:8px 38px 8px 12px;border:1px solid var(--ln2);border-radius:9px;background:var(--sf);font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.home-more{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:44px;font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.home-more span{font-size:22px;line-height:1}
.home-more:hover{color:var(--lease)}
@media(max-width:760px){
  .home-sortbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;padding-bottom:16px;margin-bottom:18px}
  .home-kind-tabs{display:none}
  .home-mobile-filters{display:grid;grid-column:1/-1;gap:10px}
  .home-filter-row{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px}
  .home-filter-label{font-size:14px;font-weight:600;color:var(--mute)}
  .home-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;background:var(--bg2);border-radius:12px}
  .home-segment{min-width:0;min-height:44px;border:0;border-radius:9px;background:transparent;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink2);padding:8px 4px}
  .home-segment.on{background:var(--ink);color:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .home-count{font-size:14px;margin-bottom:12px}
  .home-count strong{font-size:20px}
  .home-sortselect{justify-self:stretch;min-width:0}
  .home-sortselect select{width:100%;font-size:14px;padding-left:12px;padding-right:32px}
  .home-more{justify-content:center;min-height:44px;font-size:14px;gap:6px;background:var(--bg2);border-radius:9px;text-decoration:none}
}
@media(max-width:640px){
  #sec-new{padding-top:28px}
  .top .wrap{gap:6px}
  .top .savedl{display:none}
  .top .call,.top .menu{flex-shrink:0;min-width:44px;min-height:44px;padding:10px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:360px){.logo b i{display:none}.logo{gap:4px}.logo .gp{padding:1px 4px}}

/* 사진 타일 */
.ptiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ptiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.ptiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}.ptiles.two .ptile{aspect-ratio:3/1}
@media (max-width:600px){.ptiles.two .ptile{aspect-ratio:4/3}}
@media (max-width:900px){.ptiles,.ptiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}.ptiles.five > a:last-child{grid-column:1/-1;aspect-ratio:2/1}}
.ptile{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background-color:#333}
.ptile .bgi{position:absolute;inset:0;transition:transform .35s}
.ptile:hover .bgi{transform:scale(1.04)}
.ptile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.05) 60%)}
.ptile .lab{position:absolute;left:14px;right:14px;bottom:11px;z-index:1;color:#fff;font-weight:700;font-size:21px;line-height:1.25}
.ptile .lab em{font-style:normal;display:inline-block;font-size:15px;margin-left:6px;background:rgba(255,255,255,.2);border-radius:6px;padding:0 6px;vertical-align:2px}
.ptile .cnt{position:absolute;right:10px;top:10px;z-index:1;background:var(--y);color:#1B1E22;font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:19px;min-width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:0 10px;border:2px solid #1B1E22}

/* 새 매물 알림 띠 */
.band{background:#1B1E22;color:#fff}
.band .wrap{display:flex;align-items:center;gap:16px;padding-top:16px;padding-bottom:16px}
.horn{width:54px;height:54px;flex-shrink:0}
.horn .w{fill:none;stroke:var(--y);stroke-width:3.6;stroke-linecap:round;animation:wave 1.1s ease-out 0s 3 both}
.horn .w2{animation-delay:.22s}
@keyframes wave{0%{opacity:0}40%{opacity:1}100%{opacity:1}}
/* 노란 글씨를 검은 바탕에 얹으면 윈도우가 화소 옆면까지 색을 칠해(서브픽셀)
   글씨가 번져 보인다. 제 층으로 떼어 내면 회색 계조로만 그려 또렷해진다 */
.band .lab{font-family:var(--sans);font-weight:700;font-size:23px;letter-spacing:-.2px;color:var(--y);white-space:nowrap}
.band .news{display:flex;gap:10px;overflow-x:auto;flex:1;min-width:0;padding-bottom:2px}
.band .news a{flex-shrink:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:9px 13px;font-size:17px;line-height:1.35;color:#fff}
.band .news a b{color:var(--y);font-weight:700;margin-right:6px}
.band .news a:hover{background:rgba(255,255,255,.18)}
@media (max-width:760px){.band .wrap{flex-wrap:wrap;gap:10px}.band .news{flex-basis:100%}.horn{width:44px;height:44px}.band .lab{font-size:22px}}

/* 매물 카드 */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:minmax(0,1fr)}.cards.hc>.card:nth-child(n+5){display:none}}
.card{container-type:inline-size;container-name:listing-card;position:relative;background:var(--sf);border:1px solid var(--ln);border-radius:16px;overflow:hidden}
.card:hover{border-color:var(--ink)}
.cl{display:flex;flex-direction:column;height:100%}
.ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.ph .bgi{position:absolute;inset:0}
.bds{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;right:60px}
.bd{font-size:14px;font-weight:700;padding:3px 9px;border-radius:7px;line-height:1.4}
.bd.rec{background:#1B1E22;color:var(--y)}
.bd.urg{background:var(--sale);color:#fff}
.bd.new{background:var(--lease);color:#fff}
.bd.sold{background:#1B1E22;color:#fff;border:2px solid #fff}
.card.sold .ph>.bgi{filter:grayscale(1);opacity:.65}
.sold-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.28);pointer-events:none;z-index:1}
.sold-stamp{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:88%;padding:10px 16px;border:3px solid #BB2030;border-radius:12px;background:rgba(255,255,255,.96);color:#BB2030;transform:rotate(-7deg);box-shadow:0 3px 12px rgba(0,0,0,.2);text-align:center}
.sold-stamp svg{width:42px;height:42px;flex-shrink:0}
.sold-stamp strong{font-size:28px;font-weight:800;line-height:1.25;white-space:nowrap}
.sold-stamp small{font-size:12px;font-weight:600;white-space:nowrap}
@media(max-width:620px){.cards:not(.hc) .sold-stamp{padding:6px 8px;gap:2px;border-width:2px}.cards:not(.hc) .sold-stamp svg{width:30px;height:30px}.cards:not(.hc) .sold-stamp strong{font-size:20px}.cards:not(.hc) .sold-stamp small{display:none}}
.sold-notice{padding:16px;border:2px solid var(--ink);border-radius:12px;background:var(--sf);line-height:1.7}
.sold-notice strong{display:block;font-size:22px}
.bd.nok{background:#fff;color:#1B1E22;border:2px solid #1B1E22;padding:1px 8px}
.solo{position:absolute;left:10px;bottom:10px;background:var(--y);color:#1B1E22;font-weight:700;font-size:14px;padding:2px 10px;border-radius:8px;border:2px solid #1B1E22}
.tmp{position:absolute;right:8px;bottom:8px;font-size:12px;background:rgba(255,255,255,.92);color:#3A3F46;padding:2px 8px;border-radius:6px;font-weight:600}
.heart{position:absolute;right:10px;top:10px;width:46px;height:46px;border-radius:23px;border:0;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.25);z-index:2}
.heart svg{width:24px;height:24px;fill:none;stroke:#1B1E22;stroke-width:2}
.heart.on svg{fill:var(--sale);stroke:var(--sale)}
.cb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pr{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pr b{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:26px;line-height:1.15;margin-right:6px}
.pt{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:6px;color:#fff;font-weight:700;font-size:15px;flex-shrink:0}
.pt.l{background:var(--lease)}
.pt.s{background:var(--sale)}
.card h3{font-size:19px;line-height:1.4}
.mt{font-size:16px;color:var(--ink2)}
.no{display:inline-block;font-weight:700;background:var(--y3);border:1px solid var(--ln2);border-radius:6px;padding:0 7px;margin-right:6px;font-size:15px;color:var(--ink)}
.sp{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sp span{font-size:15px;background:var(--bg2);border-radius:6px;padding:2px 8px;color:var(--ink)}
.zn{font-size:15px;color:var(--mute)}
.empty{border:2px dashed var(--ln2);border-radius:16px;padding:24px;font-size:18px;color:var(--ink2)}

/* 최근 본 매물 */
.hlist{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.mini{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:8px;min-width:300px}
.mini:hover,.mini.on{border-color:var(--ink)}
.mini .mth{width:96px;height:72px;border-radius:10px}
.mini .mp{font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.25}
.mini .mtt{font-size:16px;font-weight:600;line-height:1.35}
.mini .mm{font-size:14px;color:var(--mute)}

/* 상담 */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
@media (max-width:900px){.cgrid{grid-template-columns:minmax(0,1fr)}}
.cform{background:var(--sf);border:2px solid var(--ink);border-radius:18px;padding:24px}
.cform h2{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:30px}
.cform p.s{color:var(--ink2);margin:4px 0 14px}
.clinks{display:grid;gap:12px}
.clink{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;background:var(--sf);border:2px solid var(--ln2);border-radius:18px;padding:18px}
.clink:hover{border-color:var(--ink)}
.clink .ic{width:64px;height:64px;border-radius:16px;background:var(--y);display:flex;align-items:center;justify-content:center}
.clink .ic svg{width:34px;height:34px;stroke:#1B1E22;fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.clink b{display:block;font-size:22px}
.clink span{font-size:16px;color:var(--ink2)}

/* 입력 양식 */
.form{background:var(--sf);border:1px solid var(--ln);border-radius:18px;padding:26px;max-width:820px}
.callback-page{padding-top:40px}
.callback-content{max-width:520px;margin:0 auto}
.callback-content h1{font-family:var(--disp);font-weight:400;font-size:32px;line-height:1.35}
.callback-intro{margin:12px 0 24px;line-height:1.8;color:var(--ink2);font-size:17px}
.callback-form{max-width:none}
.callback-form .btn{min-height:52px}
.callback-form .fine{margin-top:12px;text-align:center}
.callback-ref{margin-bottom:18px}
@media (max-width:640px){.form{padding:18px}}
.fg{margin-bottom:18px}
.fg > label,.fg > .lb{display:block;font-weight:700;font-size:18px;margin-bottom:8px}
.fg small.h{font-weight:400;color:var(--mute);font-size:15px;margin-left:6px}
.form input[type=text],.form input[type=tel],.form input[type=search],.form select,.form textarea,.cform input,.cform textarea{width:100%;min-height:56px;padding:12px 14px;border:2px solid var(--ln2);border-radius:12px;background:var(--bg);font-size:18px}
.form textarea,.cform textarea{min-height:100px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus,.cform input:focus,.cform textarea:focus{border-color:var(--ink);outline:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.two{grid-template-columns:1fr}}
/* .fg > label 규칙이 이 줄까지 덮어써(굵게, 블록) 네모와 글자가 어긋났다.
   같은 무게로 되받아 준다 */
.agree,.fg>label.agree{display:flex;gap:10px;align-items:flex-start;font-size:16px;font-weight:400;color:var(--ink2);margin-bottom:0}
/* min-height 는 위쪽 입력칸 규칙(.cform input)에서 흘러든다.
   풀어 주지 않으면 네모가 세로로 늘어나 글자와 어긋난다 */
.agree input{width:22px;height:22px;min-height:0;margin-top:3px;flex-shrink:0;accent-color:var(--y)}
.note2{background:var(--y3);border-left:6px solid var(--y);padding:14px 16px;border-radius:0 12px 12px 0;font-size:17px;color:var(--ink)}
.done{background:var(--sf);border:3px solid var(--y);border-radius:18px;padding:26px;max-width:820px}
.done h2{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:32px}
.done p{font-size:19px;margin-top:8px}
.done dl{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;margin:18px 0 0}
.done dt{color:var(--mute)}
.done dd{margin:0;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;border:2px solid var(--ln2);background:var(--sf);border-radius:999px;padding:9px 16px;font-size:17px;font-weight:600;line-height:1.2;color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--y);border-color:var(--y);color:#1B1E22}

/* 매물 찾기 */
.lsearch{display:flex;gap:8px;margin-bottom:14px;max-width:760px}
.lsearch input{flex:1;min-width:0;height:56px;border:2px solid var(--ln2);border-radius:12px;padding:0 14px;font-size:18px;background:var(--sf)}
.lay{display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:1000px){.lay{grid-template-columns:minmax(0,1fr);gap:14px}}
.filt{position:static;background:var(--sf);border:1px solid var(--ln);border-radius:16px;padding:16px;max-height:none;overflow:visible}
@media (max-width:1000px){.filt{position:static;display:none;max-height:none}.filt.open{display:block}}
.filt h3{font-size:16px;margin:14px 0 7px;line-height:1.35}
.filt h3:first-child{margin-top:0}
.filter-help{font-size:12px;line-height:1.5;color:var(--mute);margin-bottom:10px}
.filt .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.filt .chip{width:100%;min-width:0;min-height:32px;font-size:14px;padding:6px 4px;border-width:1px;border-radius:9px;line-height:1.25;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;text-align:center}
.filt .region-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
.filt .region-chips .chip{padding-left:4px;padding-right:4px}
.price-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.price-groups .chips{grid-template-columns:minmax(0,1fr)}
.price-groups.single{grid-template-columns:minmax(0,1fr)}
.price-groups.single .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
.price-filter-label{font-size:13px;font-weight:600;color:var(--ink2);margin:10px 0 6px}
.filt .clear{display:inline-block;margin-top:14px;background:none;border:0;text-decoration:underline;color:var(--mute);font-size:14px;padding:0}
@media(max-width:1000px){.filt .chip{min-height:40px}.filter-help{font-size:13px}}
.ftog{display:none}
@media (max-width:1000px){.ftog{display:inline-flex}}
.lay .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1300px){.lay .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.lay .cards{grid-template-columns:minmax(0,1fr)}}
.rh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.rh b{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:30px}
.rh select{font-size:17px;padding:10px 12px;border:2px solid var(--ln2);border-radius:10px;background:var(--sf);min-height:48px}
.rh .home-sortselect select{padding-right:38px}
.listing-count-label{display:none}
@media (max-width:1000px){
  .lay #results{display:contents}
  .lay .rh{order:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;margin-bottom:0}
  .lay .filt{order:1}
  .lay .cards,.lay .empty{order:2}
  .listing-count{grid-column:1/-1;font-size:14px;line-height:1.5;color:var(--ink2)}
  .listing-count-label{display:inline}
  .rh .listing-count b{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);margin-right:2px}
  .rh .ftog,.rh select{height:44px;min-height:44px;border:1px solid var(--ln2);border-radius:10px;background:var(--sf);font-size:15px;font-weight:600;color:var(--ink)}
  .rh .ftog{justify-self:start;align-items:center;gap:7px;padding:0 13px}
  .rh .ftog svg{width:20px;height:20px;flex-shrink:0}
  .rh label{min-width:0}
  .rh select{max-width:100%;padding:0 10px}
}

/* 지도 */
.home-listings .lay .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1300px){
  .home-listings>.wrap{max-width:1600px}
  .home-listings .lay{grid-template-columns:260px minmax(0,1fr);gap:24px}
  .home-listings .lay .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .home-listings .filt{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px);align-self:start}
}
@media(max-width:1000px){.home-listings .lay .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.home-listings .allgo{order:3}}
@media(max-width:620px){.home-listings .lay .cards{grid-template-columns:minmax(0,1fr)}}

.gmap{width:100%;height:auto;display:block;background:var(--mapbg);border-radius:16px}
.gmap .riv{stroke:#9CC7EC;fill:none;stroke-linecap:round}
.gmap .ar path{fill:var(--sf);stroke:var(--ln2);stroke-width:2;transition:fill .15s}
.gmap .ar.click{cursor:pointer;outline:none}
.gmap .ar.click:hover path,.gmap .ar.click:focus path{fill:var(--y3)}
.gmap .ar.focus path{fill:var(--y);stroke:#1B1E22}
.gmap .ar text{font-family:var(--sans);font-weight:700;font-size:19px;fill:var(--ink);pointer-events:none;text-anchor:middle}
.gmap .town text,.gmap .rdl{text-anchor:middle}
.gmap .ar.focus text{fill:#1B1E22}
.gmap .ar text.c{font-family:var(--sans);font-size:14px;font-weight:700;fill:var(--ink2)}
.gmap .town path{fill:var(--bg2);stroke:var(--ln2);stroke-dasharray:5 5}
.gmap .town text,.gmap .lbl,.gmap .rdl{font-family:var(--sans);font-size:14px;fill:var(--mute);font-weight:600}
.gmap .rd{stroke:#C4C9D0;stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gmap .mk{cursor:pointer;outline:none}
.gmap .mk circle{stroke:#fff;stroke-width:3}
.gmap .mk.l circle{fill:var(--lease)}
.gmap .mk.s circle{fill:var(--sale)}
.gmap .mk.sel circle{stroke:var(--y);stroke-width:5}
.gmap .mk text{fill:#fff;font-size:12px;font-weight:700;text-anchor:middle;font-family:var(--sans);pointer-events:none}
.gmap .mk:focus circle{stroke:var(--y)}
.map2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:26px;align-items:center}
@media (max-width:900px){.map2{grid-template-columns:minmax(0,1fr)}}
.abtn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.abtn a{background:var(--sf);border:2px solid var(--ln2);border-radius:14px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.abtn a b{font-size:20px}
.abtn a span{font-family:var(--sans);font-weight:700;font-size:21px}
.abtn a:hover{border-color:var(--ink)}
.mapl{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:22px;align-items:start}
@media (max-width:1000px){.mapl{grid-template-columns:minmax(0,1fr)}}
.mapl .mlist{display:grid;gap:10px;max-height:760px;overflow:auto;padding-right:4px}
.mapl .mini{min-width:0}
.mhint{border:2px dashed var(--ln2);border-radius:14px;padding:16px;color:var(--ink2)}
.mlh{font-size:18px;margin-top:6px}
.legend{display:flex;gap:16px;font-size:16px;color:var(--ink2);margin:8px 0 0;flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:14px;border-radius:7px;margin-right:6px;vertical-align:-1px}

/* 매물 상세 */
.crumb{font-size:16px;color:var(--mute);margin-bottom:12px}
.crumb a{text-decoration:underline}
.det{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:30px;align-items:start}
@media (max-width:1000px){.det{grid-template-columns:minmax(0,1fr)}}
.det>*,.lay>*,.cgrid>*,.map2>*,.mapl>*,.why>*,.aboutg>*{min-width:0}
.gal .gmain{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden}
.gal .gmain .bgi{position:absolute;inset:0}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.thumbs button{aspect-ratio:4/3;border-radius:10px;border:3px solid transparent;padding:0;overflow:hidden;position:relative;background:var(--bg2)}
.thumbs button.on{border-color:var(--y)}
.thumbs button .bgi{position:absolute;inset:0}
.thumbs .ph0{border:2px dashed var(--ln2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--mute);text-align:center;padding:4px;aspect-ratio:4/3}
.dmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;font-size:17px;color:var(--ink2)}
.det h1{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:clamp(30px,3.4vw,42px);line-height:1.2;margin-top:8px}
.det .memo{font-size:19px;margin-top:10px;color:var(--ink2)}
.f6{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
@media (max-width:700px){.f6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f6 div{background:var(--bg2);border-radius:14px;padding:12px 14px}
.f6 small{display:block;font-size:15px;color:var(--mute)}
.f6 b{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:30px;line-height:1.15}
.f6 b i{font-style:normal;font-size:17px;margin-left:2px}
.f6 b.area-value{display:inline-flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;font-size:26px}
.f6 b.area-value i{font-size:15px}
.f6 b .area-metric{display:inline;font-family:var(--sans);font-size:12px;line-height:1.4;margin-left:4px;white-space:nowrap;color:var(--mute)}
.h2s{font-size:23px;margin:34px 0 10px}
table.t{width:100%;border-collapse:collapse;font-size:18px}
table.t th{text-align:left;font-weight:600;color:var(--mute);width:34%;padding:12px 10px 12px 0;border-bottom:1px solid var(--ln);vertical-align:top;font-size:17px}
table.t td{padding:12px 0;border-bottom:1px solid var(--ln)}
table.t td,table.t th{overflow-wrap:anywhere}
.t .hint{display:block;font-size:15px;color:var(--mute)}
@media (max-width:640px){table.t{font-size:17px}table.t th{width:38%;font-size:15px}}
.locg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:700px){.locg{grid-template-columns:minmax(0,1fr)}}
.acc{list-style:none;padding:0;margin:0}
.acc li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--ln);font-size:18px}
.acc li b{font-weight:600;color:var(--ink2)}
.acc li span{font-weight:700;text-align:right}
.cost{background:var(--bg2);border-radius:16px;padding:18px 20px;margin-top:10px}
.cost dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;margin:0;font-size:18px}
.cost dt{color:var(--ink2)}
.cost dd{margin:0;font-weight:700;text-align:right}
.cost dd small{display:block;font-weight:400;font-size:14px;color:var(--mute)}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px)}
@media (max-width:1000px){.side{position:static}}
.side .box{background:var(--sf);border:1px solid var(--ln2);border-radius:18px;padding:20px}
.side .pbig{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:44px;line-height:1.1;margin-top:8px}
.side .psub{font-size:18px;color:var(--ink2);font-weight:600}
.side .acts{display:grid;gap:10px;margin-top:16px}
.side .acts2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.side .who{margin-top:16px;padding-top:14px;border-top:1px solid var(--ln);font-size:16px;color:var(--ink2)}
.side .who b{color:var(--ink)}
.legal{margin-top:12px;font-size:14px;color:var(--mute);line-height:1.6}

/* 비교 */
.cmpt{overflow-x:auto}
.cmpt table{border-collapse:collapse;min-width:640px;width:100%;font-size:17px}
.cmpt th,.cmpt td{border-bottom:1px solid var(--ln);padding:10px;vertical-align:top;text-align:left}
.cmpt th{color:var(--mute);font-weight:600;width:130px}
.cmpt .ci{aspect-ratio:4/3;border-radius:10px}
.cmpt td b{font-family:var(--sans);font-weight:700;font-size:21px}

/* 업종 확인 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:22px}
.steps div{border-top:6px solid var(--ln);padding-top:8px;font-size:15px;color:var(--mute);font-weight:600}
.steps div.did{border-color:var(--ink);color:var(--ink2)}
.steps div.on{border-color:var(--y);color:var(--ink)}
.q{font-size:21px;font-weight:700;margin-bottom:14px}
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt{background:var(--sf);border:2px solid var(--ln2);border-radius:14px;padding:16px;text-align:left;font-size:19px;font-weight:700;line-height:1.3;min-height:80px;color:var(--ink)}
.opt:hover{border-color:var(--ink)}
.opt small{display:block;font-weight:400;font-size:15px;color:var(--mute);margin-top:4px}
.opt.on{background:var(--y);border-color:var(--y);color:#1B1E22}
.opt.on small{color:#3A3F46}
.chk{list-style:none;padding:0;margin:14px 0 0}
.chk li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px 4px;border-bottom:1px solid var(--ln);font-size:18px;align-items:start;cursor:pointer;border-radius:8px}
.chk li:hover{background:var(--bg2)}
.chk .bx{width:28px;height:28px;border:3px solid var(--ink);border-radius:7px;margin-top:1px;position:relative}
.chk li.ok .bx{background:var(--y);border-color:var(--y)}
.chk li.ok .bx::after{content:"";position:absolute;left:7px;top:2px;width:8px;height:14px;border:solid #1B1E22;border-width:0 3px 3px 0;transform:rotate(45deg)}
.chk li.ok div{color:var(--mute);text-decoration:line-through}

/* 권역·소개·노트 */
.ah{background:var(--y);color:#1B1E22;padding:34px 0}
.ah .crumb{color:#3A3F46}
.ah h1{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:clamp(32px,4vw,48px)}
.ah p{font-size:19px;margin-top:8px;max-width:36em}
.prose{max-width:760px;font-size:19px;line-height:1.8}
.prose h2{font-size:24px;margin:28px 0 10px}
.prose p{margin-bottom:14px}
.stub{border:2px dashed var(--ln2);border-radius:14px;padding:18px;color:var(--ink2);font-size:17px}
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center}
@media (max-width:860px){.why{grid-template-columns:minmax(0,1fr)}}
.whyimg{background:#fff;border-radius:20px;overflow:hidden;aspect-ratio:3/2}
.whyimg .bgi{width:100%;height:100%;background-color:#fff;background-size:contain}
.why h2{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:clamp(28px,3.4vw,38px)}
.why p{font-size:19px;color:var(--ink2);margin-top:10px}
.aboutg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;align-items:start}
@media (max-width:900px){.aboutg{grid-template-columns:minmax(0,1fr)}}
.notes a,.notes .nt{display:block;padding:16px 0;border-bottom:1px solid var(--ln)}
.notes a:first-child,.notes .nt:first-child{border-top:1px solid var(--ln)}
.notes a b,.notes .nt b{font-size:20px;display:block}
.notes a span,.notes .nt span{font-size:16px;color:var(--ink2)}
.notes .nt em{display:inline-block;margin-top:6px;font-style:normal;font-size:14px;color:var(--ink2);border:1px solid var(--ln);border-radius:4px;padding:1px 8px}
.notes .nt:target{background:var(--bg2,#f4f4f0)}

/* 바닥글 */
footer{background:var(--bg2);border-top:1px solid var(--ln);padding:36px 0 44px;font-size:16px;color:var(--ink2)}
footer .wrap{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:26px}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr}}
footer .fl{display:flex;align-items:center;gap:8px;margin-bottom:10px}
footer .fl b{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:26px;color:var(--ink)}
/* 바닥글 "김포" 에 일터(/in/)로 가는 길을 숨겨 둔다. 아는 사람만 쓴다.
   눌리는 자리를 넓히려고 좌우 여백을 조금 준다 */
footer .fl b .fkey{color:inherit;text-decoration:none;padding:0 1px;border-radius:3px}
footer .fl b .fkey:focus-visible{outline:3px solid var(--y);outline-offset:2px}
footer dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
footer dt{color:var(--mute)}
footer dd{margin:0}
footer .todo{color:var(--sale)}

/* 떠 있는 버튼, 비교함, 아래 바 */
.fab{position:fixed;right:18px;bottom:24px;z-index:45;display:none;flex-direction:column;gap:10px}
@media (min-width:1400px){.fab{display:flex}}
.fab a,.fab button{width:70px;height:70px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:0;box-shadow:0 3px 12px rgba(0,0,0,.22);gap:2px;line-height:1.2;text-align:center}
.fab svg{width:26px;height:26px}
.fab .kk{background:var(--y);color:#1B1E22}
.fab .nv{background:#03C75A;color:#08240F}
.fab .tp{background:var(--sf);color:var(--ink);border:1px solid var(--ln)}
.tray{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:48;background:#1B1E22;color:#fff;border-radius:14px;padding:10px 12px;display:none;align-items:center;gap:10px;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:94vw;font-size:16px}
.tray.on{display:flex}
.tray .ti{width:52px;height:40px;border-radius:6px;flex-shrink:0}
.tray a,.tray button{white-space:nowrap}
.tray .go{background:var(--y);color:#1B1E22;font-weight:700;border-radius:10px;padding:8px 14px}
.tray .x{background:none;border:0;color:#fff;text-decoration:underline;font-size:15px}
@media (max-width:1100px){.tray{bottom:calc(var(--barh) + 12px + env(safe-area-inset-bottom,0px))}}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#1B1E22;color:#fff;display:none;grid-template-columns:1.7fr 1fr 1fr 1.4fr;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 16px rgba(0,0,0,.18)}
.bar a{height:var(--barh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:14px;font-weight:600;border-right:1px solid rgba(255,255,255,.14);text-align:center;line-height:1.2;color:#fff}
.bar a svg{width:24px;height:24px}
.bar a.callb{background:var(--y);color:#1B1E22;font-size:18px;font-weight:700;flex-direction:row;gap:8px}
.bar a:last-child{border-right:0}
@media (max-width:1100px){.bar{display:grid}main{padding-bottom:calc(var(--barh) + 8px)}footer{padding-bottom:calc(var(--barh) + 40px)}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--barh) + 76px + env(safe-area-inset-bottom,0px));background:#1B1E22;color:#fff;padding:12px 18px;border-radius:10px;font-size:16px;z-index:60;display:none;max-width:90vw}

/* ================================================================
   실서비스 추가분 (시안 base64 사진 CSS를 대체)
   ================================================================ */

/* 캐릭터 그림 (의뢰인 원본) */
/* 2026-09-26: 얼굴은 본래 그림 그대로 두고, 비어 있던 흰 하늘만 갈아 끼웠다.
   사람을 다시 그린 것이 아니라 하늘 화소만 바꾼 것이다 (tools/hero-sky.js).
   본래 그림은 hero.webp 로 남아 있다 */
.i-hero{background-image:url("/assets/img/hero-sky.webp?v=05f49b76")}
.i-char{background-image:url("/assets/img/char.webp?v=462de85a")}

/* 매물 사진 자리 표시. 실사진을 받으면 이 클래스를 사진으로 바꾼다 */
/* 사진이 아직 없는 자리. "깨진 사진"처럼 보이면 매물이 부실해 보인다.
   도면 위에 그린 것처럼 만들어, 사진이 없어도 일부러 그렇게 둔 화면으로 읽히게 한다.
   모눈은 도면, 굵은 노란 윤곽은 브랜드 색이다 */
.phz{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:
    linear-gradient(140deg,#20242A 0%,#171A1F 48%,#22262C 100%)}
/* 모눈과 빛을 한 겹에 겹쳐 그린다. 남는 ::after 는 아래 글씨에 쓴다 */
.phz::before{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(120% 90% at 22% 8%,rgba(255,204,0,.13),transparent 62%),
    linear-gradient(rgba(255,204,0,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,204,0,.07) 1px,transparent 1px);
  background-size:100% 100%,26px 26px,26px 26px}
.phz .pz{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;color:#C7CCD3;text-align:center;padding:8px;line-height:1.3}
.phz .pz svg{width:64px;height:64px;fill:none;stroke:var(--y);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;opacity:.9;
  filter:drop-shadow(0 2px 10px rgba(255,204,0,.25))}
.phz .pz span{font-size:14px;font-weight:600;color:#8B929B}
/* 평수와 권역. 도면의 치수 글씨처럼 얹는다 */
.pzl{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}
.pzl b{font-family:var(--sans);font-weight:800;font-size:22px;color:#F1F2F0;letter-spacing:-.3px}
.pzl span{font-size:13px;font-weight:600;color:#9AA1AA;letter-spacing:.5px}
/* 오른쪽 아래 구석에 작게. 사진이 없다는 사실은 숨기지 않되 가운데를 가리지 않는다 */
/* 매물 자리: 손으로 그린 스케치 위에 평수·권역을 도면 표제처럼 왼쪽 위에 얹는다 */
.phz.sk-f{background:#EEEAE0 url(/assets/img/sketch-factory.svg) center bottom/cover no-repeat}
.phz.sk-l{background:#EEEAE0 url(/assets/img/sketch-land.svg) center bottom/cover no-repeat}
.phz.sk-f::before,.phz.sk-l::before{display:none}
.phz.sk-f .pz,.phz.sk-l .pz{position:absolute;left:12px;top:10px;align-items:flex-start;padding:0}
.phz.sk-f .pz svg,.phz.sk-l .pz svg{display:none}
.phz.sk-f .pzl,.phz.sk-l .pzl{align-items:flex-start;background:rgba(238,234,224,.88);border:1px solid #33383F;border-radius:6px;padding:4px 9px}
.phz.sk-f .pzl b,.phz.sk-l .pzl b{color:#1B1E22;font-size:18px}
.phz.sk-f .pzl span,.phz.sk-l .pzl span{color:#4A4F57;font-size:12px}
.phz.pzt .pz > span:not(.pzl){display:none}
.phz.sm .pz svg{width:34px;height:34px}
.phz.sm .pzl b{font-size:15px}
.phz.sm .pzl span{font-size:11px}
.phz.sm .pz span{font-size:11px}
.phz.sm.pzt::after{display:none}
.phz.xs .pz svg{width:20px;height:20px}
.phz.xs .pz span,.phz.xs .pzl{display:none}
.phz.xs.pzt::after{display:none}
/* 홈의 조건 바로가기. 사장님이 쓰는 말로 곧장 결과로 보낸다 */
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.quick .ql{font-weight:700;color:var(--mute);font-size:16px;margin-right:2px}
.quick a{display:inline-flex;align-items:center;gap:7px;background:var(--sf);border:1px solid var(--ln);border-radius:999px;padding:8px 14px;font-size:16px;font-weight:700;color:var(--ink);transition:border-color .15s,transform .15s}
.quick a:hover{border-color:var(--y);transform:translateY(-1px)}
.quick a b{background:var(--y);color:#1B1E22;border-radius:999px;font-size:13px;min-width:22px;text-align:center;padding:1px 6px}

/* 카드에 마우스를 올리면 살짝 떠오른다. 한 번만, 짧게. 계속 움직이는 것은 두지 않는다 */
.card{transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.28)}

/* 매물의 강점 세 개. 숫자를 읽기 전에 "내 기계가 들어가나"가 먼저 보이게 한다 */
.plus{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.plus span{border:1.5px solid var(--y);color:var(--ink);border-radius:999px;padding:2px 10px;font-size:14px;font-weight:700;line-height:1.5}
.det .plus{margin-top:14px}
.det .plus span{font-size:16px;padding:4px 14px}


/* 종류·면적·조건 타일 (사진 대신 아이콘. 실사진 확보 뒤 대표 사진으로 교체) */
.ptile .tlbg{position:absolute;inset:0;background:linear-gradient(140deg,#343B45 0%,#1B1E22 100%)}
.ptile.t-factory .tlbg{background:linear-gradient(140deg,#39424E 0%,#1B1E22 100%)}
.ptile.t-ware .tlbg{background:linear-gradient(140deg,#2B3B52 0%,#161B22 100%)}
.ptile.t-land .tlbg{background:linear-gradient(140deg,#2F4239 0%,#171C19 100%)}
.ptile .tlic{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:60px;height:60px;fill:none;stroke:var(--y);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.82}
@media (max-width:640px){.ptile .tlic{width:46px;height:46px}}

/* 예시 매물 안내 띠 */
.proto b{font-weight:700}

/* 인쇄·스크립트 없는 환경 대비 */
.nojs-hide{display:none}
.plist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.plist li{background:var(--bg2);border-radius:14px;padding:16px 18px;font-size:20px;line-height:1.5}
.plist li b{font-weight:700}
/* 아직 확인하지 못한 항목 */
.tbd{display:inline-block;font-size:15px;font-weight:600;color:var(--mute);background:var(--bg2);border:1px dashed var(--ln2);border-radius:7px;padding:1px 9px;line-height:1.5}
table.t .tbd{font-size:16px}
/* 현장 매물 조사 (내부용. 휴대폰에서 손가락으로 누른다) */
.svtop{background:var(--y);color:#1B1E22;padding:16px 0 18px}
.svback{display:inline-block;font-weight:700;font-size:17px;text-decoration:underline;margin-bottom:8px;color:#1B1E22}
.svwho{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:26px;line-height:1.25;color:#1B1E22}
.svwho .no{background:#1B1E22;color:var(--y);border:0;font-family:var(--sans);font-size:16px;vertical-align:3px}
.svsub{font-size:17px;margin-top:4px;color:#2B2F35}
.svq{padding:18px 0;border-bottom:1px solid var(--ln)}
.svt{display:block;font-size:21px;font-weight:700;margin-bottom:12px}
.svt em{font-style:normal;font-weight:400;color:var(--mute);font-size:17px}
.svneed{display:inline-block;background:var(--sale);color:#fff;font-size:13px;border-radius:6px;padding:1px 7px;margin-left:8px;vertical-align:3px}
.svq.filled .svneed{background:var(--ln2);color:var(--ink2)}
.svopts{display:flex;flex-wrap:wrap;gap:9px}
.svo{background:var(--sf);border:2px solid var(--ln2);border-radius:12px;padding:13px 17px;font-size:19px;font-weight:600;color:var(--ink);min-height:54px;line-height:1.2}
.svo:hover{border-color:var(--ink)}
.svo.on{background:var(--y);border-color:#1B1E22;color:#1B1E22;font-weight:700}
.svo.svskip{color:var(--mute);border-style:dashed}
.svo.svskip.on{background:var(--ln);border-color:var(--ln2);color:var(--ink2)}
.svtext{width:100%;min-height:58px;padding:12px 14px;border:2px solid var(--ln2);border-radius:12px;background:var(--bg);font-size:20px}
.svtext:focus{border-color:var(--ink);outline:none}
.svsearch input{width:100%;min-height:56px;padding:12px 14px;border:2px solid var(--ln2);border-radius:12px;background:var(--sf);font-size:19px;margin-bottom:12px}
.svlist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.svlist a{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--sf);border:2px solid var(--ln);border-radius:14px;padding:14px 16px}
.svlist a:hover{border-color:var(--ink)}
.svlist b{font-size:19px;font-weight:700}
.svlist .svp{font-size:16px;color:var(--ink2);grid-column:2;grid-row:2}
.svlist .no{grid-row:1/3}
.svmark{font-size:14px;font-weight:700;color:var(--mute);grid-row:1/3}
.svmark.on{background:var(--y);color:#1B1E22;border:2px solid #1B1E22;border-radius:8px;padding:2px 9px}
.svdone{background:var(--y3);border:2px solid var(--y);border-radius:16px;padding:18px;margin-bottom:18px}
.svdone b{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:24px;display:block}
.svdone p{font-size:17px;color:var(--ink2);margin-top:4px}
.svacts{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.svacts .btn{min-height:52px;font-size:18px}
/* 조사 화면 - 구획과 새 입력칸 */
.svsec{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:25px;margin:32px 0 2px;padding-top:18px;border-top:3px solid var(--ink)}
.svsec:first-child{margin-top:12px;border-top:0;padding-top:0}
.svhint{font-size:15px;color:var(--mute);margin:-6px 0 10px;line-height:1.45}
.svlaw{display:inline-block;background:var(--lease);color:#fff;font-size:13px;border-radius:6px;padding:1px 7px;margin-left:8px;vertical-align:3px}
.svarea{min-height:96px;resize:vertical;line-height:1.5}
.svphoto input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.svpbtn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:12px 24px;border-radius:12px;border:2px dashed var(--ln2);background:var(--sf);font-size:19px;font-weight:700;cursor:pointer;width:100%}
.svpbtn:hover{border-color:var(--ink)}
.svpv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.svpv img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.svpv .svhint{grid-column:1/-1;margin:0}
#svPriceRead{margin:8px 0 0}#svPriceRead.ok{color:var(--ink,#1B1E22);font-weight:700}#svPriceRead.bad{color:#C62828;font-weight:700}.svand{margin:10px 0 0}
/* 내부용 모음 */
.ingrid{display:grid;gap:12px}
.inbox{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--sf);border:2px solid var(--ln2);border-radius:18px;padding:20px}
.inbox[hidden]{display:none}
.inbox:hover{border-color:var(--ink)}
.inbox.main{border-color:var(--ink);border-width:3px;background:var(--y3)}
.inbox svg{width:40px;height:40px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.inbox b{display:block;font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:26px;line-height:1.2}
.inbox span{font-size:17px;color:var(--ink2)}
.ah .crumb a{color:#1B1E22;text-decoration:underline;font-weight:700}

/* 매물 적기 - 새로 적기 단추와 올린 목록 */
.svnew{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--y);color:#1B1E22;border:3px solid #1B1E22;border-radius:18px;padding:22px;margin-bottom:18px}
.svnew svg{width:38px;height:38px;fill:none;stroke:#1B1E22;stroke-width:3;stroke-linecap:round}
.svnew b{display:block;font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:28px;line-height:1.2}
.svnew span{font-size:17px;color:#3A3F46}
.svsent{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.svsent a{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:12px 14px}
.svsent a:hover{border-color:var(--ink)}
.svsent b{font-size:18px;font-weight:600}
.svsent .svd{font-size:15px;color:var(--mute)}

/* 올린 매물 - 아직 안 올라온 것 */
.svsent .svrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--bg2);border:1px dashed var(--ln2);border-radius:12px;padding:12px 14px;color:var(--mute)}
.svsent .svrow b{font-size:18px;font-weight:600;color:var(--ink2)}

/* 올린 매물 목록 - 상태별 */
.svitem{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;background:var(--sf);border:1px solid var(--ln);border-radius:12px;padding:11px 13px}
.svitem b{font-size:18px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svitem .svd{font-size:15px;color:var(--mute);white-space:nowrap}
.svitem .svbtns{display:flex;gap:6px}
.svitem .btn{min-height:40px;font-size:16px;padding:6px 13px}
.svitem.wait{background:var(--bg2);border-style:dashed}
.svitem.wait b{color:var(--ink2)}
.svitem.stuck{border-color:var(--sale);border-width:2px}
.svitem.stuck .svd{color:var(--sale);font-weight:700}
@media (max-width:560px){
  .svitem{grid-template-columns:auto 1fr;gap:6px 10px}
  .svitem .svd{grid-column:2}
  .svitem .svbtns{grid-column:1/-1;margin-top:4px}
}

/* 적다 만 매물 - 가로로 흐르게 두고 줄마다 지우기 */
.svdrafts{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.svdrafts li{position:relative;display:inline-flex}
.svdrafts a{display:block;background:var(--sf);border:2px solid var(--ln2);border-radius:12px;
  padding:12px 42px 12px 16px;font-size:18px;font-weight:700;color:var(--ink);line-height:1.3}
.svdrafts a:hover{border-color:var(--ink)}
.svdrafts a span{font-weight:400;color:var(--ink2);font-size:16px}
.svx{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:15px;border:0;background:var(--bg2);color:var(--mute);
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s}
.svdrafts li:hover .svx,.svx:focus-visible{opacity:1}
.svx:hover{background:var(--sale);color:#fff}
/* 손가락으로 쓰는 기기에는 마우스를 올릴 수 없다. 늘 보이게 한다 */
@media (hover:none){.svx{opacity:1}}

/* 올린 매물 목록의 지우기 (이 목록에서만) */
.svx2{position:static;transform:none;width:36px;height:36px;border-radius:10px;
  background:var(--bg2);border:2px solid var(--ln2);color:var(--mute);opacity:1;font-size:20px}
.svx2:hover{background:var(--sale);border-color:var(--sale);color:#fff}

/* ===== 카카오 지도 ===== */
#kmap{width:100%;height:520px;border-radius:14px;overflow:hidden}
.kctl{display:flex;gap:8px;margin-top:10px}
.kctl .btn{padding:8px 14px;font-size:15px}
/* 지도 위의 매물 표. 임대는 파랑, 매매는 빨강 */
.kpin{width:30px;height:30px;border-radius:50%;border:2.5px solid #fff;background:#1D5FD1;color:#fff;
  font-weight:800;font-size:14px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center}
.kpin.on{transform:scale(1.25);background:var(--y);color:#1B1E22;border-color:#1B1E22}
@media (max-width:760px){#kmap{height:380px}}
/* 지도 위의 묶음 표. 그 자리에 몇 건이 있는지 보여 준다 */
.kpin{width:auto;height:auto;min-width:56px;padding:6px 10px;border-radius:12px;border:2px solid #1B1E22;background:#fff;color:#1B1E22;
  cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;line-height:1.1}
.kpin b{font-size:18px;font-weight:800}
.kpin span{font-size:12px;font-weight:700;color:#454B53}
.kpin i{font-style:normal;font-size:11px;color:#646B75;margin-top:1px}
.kpin.on{background:var(--y);transform:scale(1.06)}
/* 매물 쪽의 주변 지도. 누르면 펼쳐진다 */
#dkmap{width:100%;height:420px;border-radius:14px;overflow:hidden;margin-top:12px}
@media (max-width:760px){#dkmap{height:320px}}

/* 사진 가리기(모자이크). 매물 적기 */
.svpimg{position:relative}.svpe{padding:0;border:0;background:none;display:block;width:100%;cursor:pointer}.svpx{position:absolute;top:6px;right:6px;width:36px;height:36px;border-radius:18px;border:2px solid #fff;background:#1B1E22;color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.svpimg span{position:absolute;right:6px;bottom:6px;background:#1B1E22;color:#FFCC00;font-weight:700;font-size:14px;border-radius:7px;padding:3px 8px}
.mosx{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;padding:12px;gap:10px}
.mosh{color:#fff;font-size:17px;line-height:1.4;margin:0}
.mosc{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.mosc canvas{max-width:100%;max-height:100%;touch-action:none;display:block}
.mosr{position:absolute;display:none;border:3px solid #FFCC00;pointer-events:none}
.mosb{display:flex;gap:10px}.mosb .btn{flex:1;min-height:54px;font-size:18px}

/* 현장 직접 촬영 */
.bd.fld{background:#0F6B3A;color:#fff}
.fldnote{margin:8px 0 0;font-size:15px;font-weight:700;color:var(--ink2)}

/* 첫 화면 숫자 줄 (사진 아래쪽). 어두운 바탕에 노란 숫자. 노랑 바탕에 흰 글씨는 쓰지 않는다 */
.hstats{position:absolute;left:43%;right:3%;bottom:clamp(14px,2vw,32px);z-index:1;display:flex;justify-content:space-between;gap:18px;background:rgba(27,30,34,.86);border-radius:14px;padding:14px 24px}
.hstats div{display:flex;flex-direction:column;min-width:0}
.hstats b{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:clamp(26px,2.4vw,38px);line-height:1.05;color:#FFCC00}
.hstats b small{font-family:var(--sans);font-weight:700;font-size:.5em;margin-left:3px;color:#FFCC00}
.hstats span{font-size:15px;color:#E6E8EB;font-weight:600;margin-top:4px}
@media (max-width:900px){.hstats{position:static;border-radius:0;background:#1B1E22;padding:14px 16px;gap:10px}.hstats b{font-size:28px}.hstats span{font-size:13px}}

/* 문의 양식: 사람에게 안 보이는 덫 칸(스팸 로봇만 채운다) */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.dq{margin:8px 0 4px;padding:18px 0 4px;border:0;border-top:1px solid var(--ln);display:grid;gap:10px}
.dqt{font-weight:700;font-size:15px;margin:0}
.dq .fg{margin:0}.dq .agree{font-size:13px}
.bar.three{grid-template-columns:1.7fr 1fr 1.4fr}

/* 매물 상세: 휴대폰에서 제목 아래 가격 */
.mprice{display:none;align-items:center;gap:8px;margin:6px 0 10px}
.mprice b{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:28px;line-height:1.15}
@media (max-width:1000px){.mprice{display:flex}}

/* 홈 지도 크게 보기. 노랑 바탕에 검정 글씨 */
.sh > a.mapgo{display:inline-flex;align-items:center;gap:6px;background:var(--y);color:#1B1E22;border-color:#1B1E22}
.sh > a.mapgo svg{width:20px;height:20px}
.mapgo2{margin:12px 0 4px;font-size:18px;color:#1B1E22}
/* 랜딩에서도 같은 실제 지도를 사용한다. */
.home-live-map{display:block;width:100%;height:500px;border:1px solid var(--ln2);border-radius:20px;background:var(--mapbg);box-shadow:0 8px 30px #17384712}
.home-map-live .sh{align-items:center;gap:16px}.home-map-full{white-space:nowrap}
@media(max-width:620px){.home-live-map{height:460px;border-radius:14px}.home-map-live .sh{align-items:start;flex-direction:column}.home-map-full{display:none!important}}
/* 매물 상세 문의 칸: 좁은 가격 상자 안에서 넘치지 않게. 입력칸은 다른 양식과 같은 모양 */
.side .box{min-width:0}
.dq .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.dq input[type=text],.dq input[type=tel]{width:100%;min-width:0;min-height:46px;padding:8px 10px;border:2px solid var(--ln2);border-radius:10px;background:var(--bg);color:var(--ink);font-size:16px}
.dq input:focus{border-color:var(--ink);outline:none}
.dq .agree{display:flex;gap:8px;align-items:flex-start;line-height:1.4}

/* 휴대폰: 가로 넘김 대신 사진과 핵심 정보를 한 장씩 세로로 읽는다. */
@media (max-width:620px){
  .cards,.lay .cards,.cards.hc{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
  .cards.hc>.card,.cards.hc>.card:nth-child(n+5){display:block;min-width:0}
  .card{border-radius:16px}
  .card .cl{flex-direction:column}
  .card .ph{aspect-ratio:16/10}
  .card .cb{padding:14px 16px 16px;gap:7px;min-width:0}
  .card h3{font-size:18px;line-height:1.4}
  .card .mt{font-size:15px}
  .card .sp{gap:6px}
  .card .sp span{font-size:14px;padding:3px 8px}
  .card .zn{font-size:14px}
  .card .heart{width:44px;height:44px;right:10px;left:auto;top:10px}
  .card .heart svg{width:23px;height:23px}
}

.acc small{font-size:14px;font-weight:400;color:var(--mute);margin-left:6px}

.locm #dkmap{margin-top:0;height:340px}
@media (max-width:700px){.locm #dkmap{height:300px}}
#dqBox{scroll-margin-top:90px}
#okmap{width:100%;height:280px;border-radius:14px;overflow:hidden;margin-top:14px}
/* 휴대폰 첫 화면에 그림만 꽉 차 찾기 칸이 안 보이던 것. 그림 높이를 줄여 찾기 칸을 첫 화면에 올린다 */
@media (max-width:640px){.hero-img{height:230px;background-position:10% bottom}.hero h1{font-size:34px}}

/* ===== 홈 개선 (2026-10-09) ===== */
/* 새 매물 알림 띠: 같은 매물 되풀이 대신 알림 신청 */
.band .bt{flex:1;min-width:0;margin:0;font-size:17px;color:rgba(255,255,255,.82)}
.band .btn.y{flex-shrink:0;border-color:var(--y)}
@media (max-width:760px){.band .bt{flex-basis:100%;order:3}.band .btn.y{order:4}}
.callback-band .wrap{gap:20px;padding-top:24px;padding-bottom:24px}
.callback-band-copy{flex:1;min-width:0}
.callback-band .lab{display:block;white-space:normal}
.callback-band-copy p{margin-top:6px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.85)}
#callbackBox{flex:0 1 390px;min-width:0}
.callback-row{display:flex;align-items:stretch;gap:8px}
.callback-row input{flex:1;min-width:0;width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--ln2);border-radius:10px;background:#fff;color:#1B1E22;font-size:22px;font-weight:600}
.callback-row .btn{min-height:48px;white-space:nowrap}
.callback-privacy{font-size:12px;line-height:1.6;margin-top:8px;color:rgba(255,255,255,.72)}
.dq .callback-privacy{color:var(--mute);font-size:12px;margin-top:0}
.dq input[type=tel]{font-size:20px;font-weight:600;min-height:52px}
.callback-success{border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:14px 18px}
.callback-success strong{display:block;color:var(--y);font-size:18px}
.callback-success p{font-size:15px;margin-top:4px}
@media(max-width:760px){.callback-band .horn{display:none}.callback-band .wrap{gap:16px}.callback-band-copy,#callbackBox{flex-basis:100%}.callback-band .lab{font-size:22px}}
@media(max-width:380px){.callback-row{flex-direction:column}}

/* 최신 매물 아래 전체 보기 */
.allgo{margin-top:18px}
@media (min-width:1100px){#sec-new .cards.hc{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}#sec-new .card .pr{gap:4px}#sec-new .card .pr b{font-size:22px;margin-right:2px}#sec-new .card .pt{width:24px;height:24px;font-size:13px}}

/* 동네별·조건별 매물 줄 */
.rails .rail+.rail{margin-top:30px}
.rh2{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rh2 h3{font-size:22px;font-weight:700;line-height:1.3;margin-right:auto}
.rh2 h3 b{color:var(--sale)}
.rh2 > a{font-weight:700;font-size:16px;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.rnav{display:flex;gap:6px}
.rnav button{width:40px;height:40px;border-radius:50%;border:2px solid var(--ln2);background:var(--sf);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.rnav button:hover{border-color:var(--ink)}
.rnav button[disabled]{opacity:.3;cursor:default}
@media (hover:none),(max-width:760px){.rnav{display:none}}
.rtrack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 2px 10px;scrollbar-width:thin}
.rc{flex:0 0 calc((100% - 42px) / 4);scroll-snap-align:start;background:var(--sf);border:1px solid var(--ln);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}
.rc:hover{border-color:var(--ink)}
.rph{position:relative;aspect-ratio:4/3;background:var(--bg2);overflow:hidden}
.rph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rph .phz{position:absolute;inset:0}
.rb{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.rb .pr{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rb .pr b{font-family:var(--sans);font-weight:700;font-size:19px;margin-right:4px}
.rb .pt{width:23px;height:23px;font-size:13px}
.rb h3{font-size:16px;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb .rm{font-size:14px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb .no{font-size:13px;padding:0 5px;margin-right:5px}
.rc.rall{align-items:center;justify-content:center;text-align:center;gap:6px;background:var(--y3);border:2px dashed var(--ln2);min-height:200px}
.rc.rall b{font-family:var(--disp);font-weight:400;font-size:34px;line-height:1}
.rc.rall span{font-weight:700;font-size:16px;line-height:1.4}
@media (max-width:1000px){.rc{flex-basis:calc((100% - 28px) / 3)}}
@media (max-width:760px){.rtrack{margin:0 -16px;padding:2px 16px 10px;scroll-padding-left:16px;scrollbar-width:none}.rtrack::-webkit-scrollbar{display:none}.rc{flex-basis:62%}.rh2 h3{font-size:20px}}

/* 맨 끝 마무리. 노랑 바탕에는 검정 글씨만 (절대 규칙 5) */
.closer .chead{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;background:var(--y);color:#1B1E22;border-radius:20px;padding:24px 28px;margin-bottom:20px}
.closer .cchar{width:150px;height:150px;border-radius:50%;background-color:#fff;background-position:28% 20%;background-size:240%;border:3px solid #1B1E22}
.closer .chead h2{font-family:var(--disp);font-weight:400;font-synthesis:none;font-size:clamp(28px,3.4vw,38px);line-height:1.2;color:#1B1E22}
.closer .ctext p{font-size:18px;margin:6px 0 14px;color:#1B1E22}
.closer .ccall{display:flex;gap:10px;flex-wrap:wrap}
.closer .ccall .btn.k{background:#1B1E22;color:#fff;border-color:#1B1E22}
.closer .ccall .btn.k.o2{background:transparent;color:#1B1E22}
@media (max-width:700px){.closer .chead{grid-template-columns:minmax(0,1fr);padding:20px;text-align:left}.closer .cchar{width:96px;height:96px}.closer .ccall .btn{width:100%}}
/* 고정 연락 바의 여유 공간은 footer에 이미 있어 홈 끝에는 중복해서 넣지 않는다. */
@media (max-width:700px){main:has(>.closer:last-child){padding-bottom:0}.closer{padding-bottom:20px}.closer .chead{margin-bottom:0}}
/* 2026-10-09 UI 검토 반영 */
.hmap .map2{align-items:start}
.rh2 h3 b{color:var(--ink)}
.rb .rm{font-size:15px}
.closer .clinks{align-content:start}
@media (max-width:760px){.why .whyimg{display:none}.hmap .sh > a.mapgo{display:none}}

/* 카드 핵심 정보: 용도·거래, 가격, 면적을 먼저 읽을 수 있게 분리 */
.card-kind{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.card-kind>strong{font-size:21px;line-height:1.3}
.deal-label{padding:2px 9px;border-radius:6px;font-size:14px;font-weight:700}
.deal-label.lease{background:#E8F0FF;color:#174B9C}
.deal-label.sale{background:#FDEBEC;color:#A7192B}
.price-line{display:flex;align-items:baseline;gap:8px;width:100%;min-width:0}
.price-label{font:600 14px/1.5 var(--sans);min-width:42px;flex-shrink:0;color:var(--ink2)}
.card .pr,#sec-new .card .pr{gap:10px;min-height:0;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between}
.card .pr .price-line{flex:1;flex-direction:column;align-items:flex-start;gap:0;width:auto}
.card .pr .price-label{min-width:0}
.card .pr .deposit{flex:0 1 auto;align-items:flex-end;max-width:45%;text-align:right;padding-bottom:3px}
.card .pr .price-line b,#sec-new .card .pr .price-line b{font-size:26px;line-height:1.3;margin:0;overflow-wrap:anywhere;min-width:0}
.card .pr .deposit b,#sec-new .card .pr .deposit b{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink2)}
.card-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:10px 12px;margin:3px 0 5px;background:var(--bg2);border-radius:10px}
.card-areas>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.card-areas small{font-size:13px;color:var(--ink2);font-weight:500}
.card-areas strong{font-family:var(--sans);font-size:22px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.card-areas strong small{font-size:15px;margin-left:3px;color:var(--ink)}
.card-areas strong{display:flex;align-items:baseline;column-gap:3px}
.card-areas .area-primary{white-space:nowrap}
@container listing-card (max-width:360px){.card-areas strong{flex-wrap:wrap}.card-areas strong .area-metric{flex-basis:100%}}
.card-areas strong .area-metric{font-size:12px;font-weight:400;color:var(--ink2);margin-left:0;white-space:nowrap}
.card-areas .area-unknown{font-size:16px;line-height:1.8;color:var(--mute)}
@media(max-width:620px){.cards:not(.hc) .card-kind>strong{font-size:19px}.cards:not(.hc) .card .pr .price-line b{font-size:23px}.cards:not(.hc) .card .pr .deposit b{font-size:16px}.cards:not(.hc) .card-areas{padding:8px;gap:8px}.cards:not(.hc) .card-areas strong{font-size:20px}}

/* 오시는 길 */
.directions{padding-top:28px}
.directions-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:start}
.directions-info,.directions-map{min-width:0}
.directions-info h2{font-size:24px;line-height:1.4;margin-bottom:20px}
.directions-info dl{margin:0;display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px 12px}
.directions-info dt{color:var(--ink2)}
.directions-info dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.directions-info dd a{text-decoration:underline;text-underline-offset:4px}
.directions-actions{display:grid;gap:10px;margin-top:24px}
.directions-map{background:var(--bg2);border:1px solid var(--ln);border-radius:16px;overflow:hidden}
.office-map-caption{padding:16px 18px;background:var(--sf);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.office-map-caption>b{font-size:17px}.office-map-caption>span{font-size:13px;color:var(--ink2)}
.office-map-tools{display:flex;gap:5px;width:100%;margin-top:4px}.office-map-tools button{border:1px solid var(--ln2);border-radius:7px;padding:8px 12px;font:600 13px var(--sans);background:var(--sf);color:var(--ink);cursor:pointer}.office-map-tools button[aria-pressed=true]{background:#1b1e22;color:white;border-color:#1b1e22}
.office-leaflet{height:360px;width:100%;z-index:0;font-family:var(--sans)}
.office-pin-label{padding:10px 12px;background:#1b1e22;color:white;border-radius:11px;box-shadow:0 4px 18px #162f4550;text-align:center;white-space:nowrap}
.office-pin-label b{display:block;color:#fc0;font:400 22px var(--disp)}.office-pin-label span{font-size:13px}.office-location-marker>i{display:block;margin:0 auto;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:12px solid #1b1e22}
.directions-map-frame[hidden]{display:none!important}
@media(max-width:760px){.office-leaflet{height:360px}.office-map-caption{padding:14px}.office-map-caption>span{width:100%;font-size:13px}}
.directions-map #okmap,.directions-map-frame{display:block;width:100%;height:420px;margin:0;border:0;border-radius:0}
@media(max-width:760px){.directions-grid{grid-template-columns:minmax(0,1fr);gap:24px}.directions-info dl{grid-template-columns:80px minmax(0,1fr)}.directions-map #okmap,.directions-map-frame{height:320px}}

/* 모바일 가독성: 작은 설명도 편하게 읽고, 커진 글씨는 줄바꿈한다. */
@media (max-width:640px){
  body{font-size:19px}
  .card .cb{gap:9px;padding:16px}
  .card h3{font-size:21px;line-height:1.5}
  .card-kind,.cards:not(.hc) .card-kind{flex-wrap:wrap}
  .card-kind>strong,.cards:not(.hc) .card-kind>strong{font-size:23px}
  .deal-label,.card .price-label{font-size:17px}
  .card .pr .price-line b,#sec-new .card .pr .price-line b,.cards:not(.hc) .card .pr .price-line b{font-size:28px}
  .card .pr .deposit b,#sec-new .card .pr .deposit b,.cards:not(.hc) .card .pr .deposit b{font-size:20px}
  .card-areas,.cards:not(.hc) .card-areas{padding:12px;gap:10px}
  .card-areas small,.card-areas strong small{font-size:17px}
  .card-areas strong,.cards:not(.hc) .card-areas strong{font-size:24px}
  .card .mt,.card .zn{font-size:18px;line-height:1.6;color:var(--ink2)}
  .card .sp span,.card .plus span,.card .no{font-size:17px}
  .card .sp span{padding:4px 9px}
  .listing-count,.home-count{font-size:17px}
  .rh .listing-count b{font-size:19px}
  .rh .ftog,.rh select{font-size:18px;min-height:48px;height:48px}
  .home-sortselect select,.home-segment,.home-more,.home-filter-label{font-size:17px}
  .home-filter-row{grid-template-columns:38px minmax(0,1fr);gap:8px}
  .home-segment{min-height:48px}
  .filt h3{font-size:19px}
  .filt .chip{font-size:17px;min-height:46px;white-space:normal}
  .filt .region-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .filter-help,.price-filter-label,.filt .clear{font-size:16px}
  .btn.sm,.tab,.sh>a,.quick a{font-size:18px}
  .drawer a{font-size:21px}
  .bar a{font-size:17px}
  .bar a.callb{font-size:20px}
  .fine,.legal,.t .hint,.cost dd small,.fg small.h,.agree,.fg>label.agree,.dq .agree,.callback-privacy{font-size:16px}
  .shs,.callback-intro,.clink span,.callback-band-copy p,.callback-success p{font-size:18px}
  table.t{font-size:19px}
  table.t th,.f6 small,.side .who,.dmeta{font-size:18px}
  .f6 b i,.det .plus span{font-size:18px}
  .mini .mtt,.mini .mm,.rb .rm{font-size:17px}
  .rb h3{font-size:18px}
  .stats span,.hstats span,footer{font-size:16px}
}