/* =================================================================== KPEC Design System — Luxury Editorial 공유 스타일시트. home/buildings/detail 페이지가 함께 사용. 폰트는 각 HTML 에서 Pretendard + Cormorant Garamond 로드. =================================================================== */ :root{ /* color */ --ivory:#FBF8F2; --paper:#F1EBDF; --paper-2:#EAE2D3; --ink:#1B1A16; --muted:#6a6459; --faint:#928c80; --line:#E4DCCD; --line-2:#D8CEBC; --char:#15140F; --char-2:#211F18; --accent:#2C4A72; --accent-h:#385f92; --ink-blue:#274a73; --white:#fff; /* type */ --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif; --serif:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif; /* layout */ --maxw:1280px; --pad:40px; } :root{ --ink-blue:#274a73; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--sans);background:var(--ivory);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.7;font-weight:400;letter-spacing:-0.025em} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ul{list-style:none} /* ---- layout ---- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} section{padding:clamp(80px,11vh,140px) 0} .tight{padding-top:0} /* ---- type primitives ---- */ .eyebrow{font-family:var(--serif);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500} .serif{font-family:var(--serif)} .lead{font-family:var(--serif);font-size:clamp(30px,4vw,52px);font-weight:600;line-height:1.3;letter-spacing:-.035em} .kor-h{font-size:clamp(26px,3.3vw,42px);font-weight:600;line-height:1.32;letter-spacing:-.04em} .kor-h b{font-weight:600} .body{color:var(--muted);font-size:17px;line-height:1.95} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;gap:24px;flex-wrap:wrap} .sec-head .eyebrow+.kor-h{margin-top:18px} .sec-head .more{font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--serif);color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:5px;white-space:nowrap;transition:.3s} .sec-head .more:hover{color:var(--accent);border-color:var(--accent)} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:12px;padding:16px 32px;font-size:15px;letter-spacing:.04em;transition:.3s;cursor:pointer;border:1px solid transparent;font-family:var(--sans)} .btn .s{font-family:var(--serif);font-size:18px} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--accent)} .btn-accent{background:var(--accent);color:#fff} .btn-accent:hover{background:var(--accent-h)} .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} .btn-ghost:hover{background:#fff;color:var(--ink)} .btn-ghost-d{border-color:var(--line-2);color:var(--ink)} .btn-ghost-d:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .btn-block{width:100%;justify-content:center} /* ---- header ---- */ header{position:fixed;top:0;left:0;right:0;z-index:60;transition:.4s;padding:26px 0;border-bottom:1px solid transparent} header .wrap{display:flex;align-items:center;justify-content:space-between} .logo{font-family:var(--serif);font-size:25px;letter-spacing:.34em;font-weight:500;color:#fff;transition:color .4s;padding-left:.34em} /* 배너 로고(이미지) — 다크 히어로 위=흰색, 스크롤(solid)/내부페이지(light-head)=검정 전환 */ .logo img{display:block;height:48px;width:auto} .logo .logo-dark{display:none} header.solid .logo .logo-light,body.light-head .logo .logo-light{display:none} header.solid .logo .logo-dark,body.light-head .logo .logo-dark{display:block} header.solid .logo img{height:40px} @media(max-width:560px){.logo img{height:38px}header.solid .logo img{height:34px}} nav ul{display:flex;gap:36px} nav a{font-size:15.5px;font-weight:500;color:rgba(255,255,255,.92);letter-spacing:.02em;transition:color .4s} nav a:hover{color:#fff} .h-right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,.8);font-size:14px;letter-spacing:.04em;transition:color .4s} .h-right .bar{opacity:.4} header.solid{background:rgba(251,248,242,.96);border-color:var(--line);padding:16px 0;backdrop-filter:saturate(120%) blur(6px)} header.solid .logo{color:var(--ink)} header.solid nav a{color:var(--ink)} header.solid .h-right{color:var(--muted)} /* light pages: 항상 솔리드 헤더 */ body.light-head header{background:rgba(251,248,242,.96);border-color:var(--line);padding:18px 0;position:sticky} body.light-head .logo{color:var(--ink)} body.light-head nav a{color:var(--ink)} body.light-head .h-right{color:var(--muted)} /* ---- hero (home, full screen) ---- */ .hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;background-size:cover;background-position:center} .hero .wrap{width:100%;color:#fff} .hero p{margin-left:auto;margin-right:auto} .hero .eyebrow{color:rgba(255,255,255,.82)} .hero h1{font-size:clamp(40px,6vw,82px);font-weight:400;line-height:1.16;letter-spacing:-.035em;margin:22px 0 26px} .hero h1 b{font-weight:700} /* 히어로 순환 배너 — 영상 배경 고정, 텍스트만 크로스페이드(4슬라이드 grid-stack) */ .hero-rotator{display:grid} .hero-rotator .hero-slide{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .9s ease} .hero-rotator .hero-slide.on{opacity:1;pointer-events:auto} @media (prefers-reduced-motion:reduce){.hero-rotator .hero-slide{transition:none}} .hero p{font-size:clamp(16px,1.5vw,20px);font-weight:300;color:rgba(255,255,255,.86);max-width:560px} .hero .btn{margin-top:40px} .scroll-ind{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);color:rgba(255,255,255,.7);font-family:var(--serif);font-size:13px;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px} .scroll-ind::after{content:"";width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.7),transparent)} .dots{position:absolute;right:40px;bottom:40px;display:flex;gap:10px} .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:background .3s,transform .3s} .dots i.on{background:#fff;transform:scale(1.25)} /* ---- page-title (inner hero for subpages) ---- */ .page-title{position:relative;padding:160px 0 64px;background:var(--char) center/cover;color:#fff;overflow:hidden} .page-title::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,17,12,.55),rgba(18,17,12,.78));z-index:0} .page-title .wrap{position:relative;z-index:1} .crumb{display:flex;gap:10px;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.6);margin-bottom:18px} .crumb a:hover{color:#fff} .crumb span{opacity:.5} .page-title h1{font-size:clamp(30px,4vw,50px);font-weight:600;letter-spacing:-.04em} .page-title .sub{margin-top:14px;color:rgba(255,255,255,.78);font-weight:300;max-width:600px} /* ---- stats ---- */ .stats{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats .row{display:grid;grid-template-columns:repeat(4,1fr)} .stats .cell{padding:12px 24px;text-align:center;border-left:1px solid var(--line)} .stats .cell:first-child{border-left:none} .stats .num{font-family:var(--serif);font-size:clamp(44px,5vw,68px);font-weight:400;line-height:1;color:var(--ink)} .stats .num small{font-size:.42em;color:var(--accent);font-weight:500} .stats .lbl{margin-top:14px;font-size:14px;letter-spacing:.04em;color:var(--muted)} /* ---- property tile (editorial, image+overlay) ---- */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .tile{position:relative;display:block;overflow:hidden} .tile .ph{aspect-ratio:3/4;background-color:#c9bca2;background-size:cover;background-position:center;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)} .tile:hover .ph{transform:scale(1.05)} .tile .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,15,0) 42%,rgba(20,19,15,.8) 100%)} .tile .meta{position:absolute;left:0;right:0;bottom:0;padding:26px;color:#fff} .tag{display:inline-block;font-size:12px;letter-spacing:.1em;padding:5px 11px;border:1px solid rgba(255,255,255,.5)} .tag.dark{background:rgba(0,0,0,.28)} .tile .price{font-family:var(--serif);font-size:30px;font-weight:500;line-height:1;margin-top:14px} .tile .price em{font-style:normal;font-size:15px;color:rgba(255,255,255,.7);margin-left:8px;font-family:var(--sans)} .tile .name{margin-top:8px;font-size:17px;font-weight:500} .tile .addr{font-size:13.5px;color:rgba(255,255,255,.66);margin-top:3px} .tile .specs{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.22);display:flex;gap:18px;font-size:13px;color:rgba(255,255,255,.82)} /* ---- property card (listing grid, image top + text on paper) ---- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .pcard{display:block;background:var(--white);border:1px solid var(--line);transition:.4s} .pcard:hover{box-shadow:0 18px 40px rgba(27,26,22,.10);transform:translateY(-3px)} .pcard .img{position:relative;aspect-ratio:4/3;background-color:#c9bca2;background-size:cover;background-position:center;overflow:hidden} .pcard .img .badges{position:absolute;top:14px;left:14px;display:flex;gap:7px} .pcard .badge{font-size:11.5px;letter-spacing:.04em;padding:5px 10px;background:rgba(21,20,15,.78);color:#fff} .pcard .badge.sold{background:rgba(120,113,100,.92)} .pcard .b{padding:24px} .pcard .price{font-family:var(--serif);font-size:27px;font-weight:500;color:var(--ink-blue);line-height:1} .pcard .price em{font-style:normal;font-size:13.5px;color:var(--muted);margin-left:7px;font-family:var(--sans)} .pcard .name{margin-top:11px;font-size:17px;font-weight:500;color:var(--ink)} .pcard .addr{margin-top:4px;font-size:13.5px;color:var(--muted)} .pcard .specs{margin-top:16px;padding-top:15px;border-top:1px solid var(--line);display:flex;gap:16px;font-size:13px;color:var(--ink);font-weight:500} .pcard .specs span{display:flex;align-items:center;gap:6px} /* ---- listing layout (filter + grid) ---- */ .listing{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start} .filter{position:sticky;top:110px;background:var(--white);border:1px solid var(--line);padding:30px} .filter h4{font-family:var(--serif);font-size:18px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px;color:var(--ink)} .filter .fld{margin-bottom:18px} .filter label{display:block;font-size:13px;letter-spacing:.04em;color:var(--muted);margin-bottom:8px} .list-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--line)} .list-top .count{font-size:15px;color:var(--muted)} .list-top .count b{color:var(--ink);font-weight:600} /* ---- form elements ---- */ input,select,textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--line-2);padding:13px 15px;transition:.2s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)} input::placeholder,textarea::placeholder{color:var(--faint)} label.req::after{content:" *";color:#b4452f} /* ---- detail ---- */ .gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px;height:520px;margin-bottom:60px} .gallery .main{background-color:#c2b69e;background-size:cover;background-position:center} .gallery .side{display:grid;grid-template-rows:1fr 1fr;gap:12px} .gallery .side .t{background-color:#c9bca2;background-size:cover;background-position:center} .dt-grid{display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:start} .dt-head .wrap-tag{display:flex;gap:8px;margin-bottom:16px} .dt-head h1{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.01em} .dt-head .addr{margin-top:10px;color:var(--muted);display:flex;align-items:center;gap:6px} .dt-price{font-family:var(--serif);font-size:46px;font-weight:500;color:var(--ink-blue);margin:30px 0 40px;line-height:1} .dt-price em{font-style:normal;font-size:17px;color:var(--muted);font-family:var(--sans);margin-left:10px} .spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .spec-grid .it{background:var(--white);padding:22px 24px} .spec-grid .lbl{font-size:13px;color:var(--muted);letter-spacing:.03em} .spec-grid .val{margin-top:7px;font-size:19px;font-weight:600;color:var(--ink);font-family:var(--serif)} .spec-grid .val small{display:block;font-size:12px;font-weight:400;color:var(--muted);font-family:var(--sans);margin-top:3px;letter-spacing:0} .dt-block{margin-top:56px} .dt-block h3{font-family:var(--serif);font-size:23px;letter-spacing:.04em;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)} .dt-desc{font-size:15.5px;line-height:1.95;color:var(--ink)} .dt-feat{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px} .dt-feat li{position:relative;padding-left:22px;font-size:15px;color:var(--ink)} .dt-feat li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--accent);border-radius:50%} .dt-feat li b{font-weight:600;margin-right:4px} .floor-table{width:100%;border-collapse:collapse;font-size:14.5px} .floor-table th,.floor-table td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left} .floor-table th{background:var(--paper);font-weight:600;color:var(--muted);font-size:13px;letter-spacing:.02em} .floor-table td:first-child{font-weight:600;width:120px} .floor-table .area{font-family:var(--sans);color:var(--ink-blue);font-weight:600} .kdb-band{display:flex;align-items:center;gap:20px;background:var(--paper);border:1px solid var(--line);padding:22px 28px;margin-bottom:30px} .kdb-band .k{font-family:var(--serif);font-weight:700;color:var(--accent);font-size:21px;letter-spacing:.05em;flex:none} .kdb-band p{font-size:14.5px;color:var(--muted);line-height:1.6} .trade-wrap{border:1px solid var(--line);overflow-x:auto} .trade-table{width:100%;border-collapse:collapse;font-size:14px;min-width:900px} .trade-table thead th{background:var(--ink);color:#fff;font-weight:600;font-size:13px;letter-spacing:.02em;padding:15px 16px;text-align:left;white-space:nowrap} .trade-table tbody td{padding:15px 16px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink)} .trade-table tbody tr:last-child td{border-bottom:none} .trade-table tbody tr:hover{background:var(--paper)} .trade-table .nm{font-weight:600} .trade-table .num{text-align:right;font-family:var(--sans);color:var(--muted)} .trade-table .amt{text-align:right;font-weight:700;color:var(--ink-blue);font-family:var(--sans)} .trade-table .tag-s{font-size:12px;color:var(--muted);border:1px solid var(--line-2);padding:2px 9px} .faq{max-width:900px;margin:0 auto} .faq .qa{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em} .faq summary::-webkit-details-marker{display:none} .faq summary .q{font-family:var(--serif);color:var(--accent);margin-right:13px;font-weight:700} .faq summary::after{content:"+";position:absolute;right:6px;top:20px;font-size:25px;color:var(--muted);font-weight:300;transition:.2s} .faq details[open] summary::after{content:"\2212"} .faq .a{padding:0 0 26px 30px;color:var(--muted);font-size:15px;line-height:1.85} .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .review{border:1px solid var(--line);background:#fff;padding:30px 28px;display:flex;flex-direction:column} .review .stars{color:#c2a14e;font-size:15px;letter-spacing:3px;margin-bottom:16px} .review .tx{font-size:15px;line-height:1.75;color:var(--ink);margin-bottom:22px;flex:1} .review .who{display:flex;align-items:center;gap:12px} .review .av{width:42px;height:42px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;color:var(--accent);flex:none} .review .who .nm{font-size:14px;font-weight:600;color:var(--ink)} .review .who .ro{font-size:12.5px;color:var(--muted);margin-top:2px} @media(max-width:980px){.reviews{grid-template-columns:1fr 1fr}} @media(max-width:640px){.reviews{grid-template-columns:1fr}} .gallery{position:relative} .gallery .count{position:absolute;left:18px;bottom:18px;background:rgba(20,20,16,.72);color:#fff;font-size:13px;padding:6px 14px;border-radius:30px;letter-spacing:.02em;z-index:2} .dt-head{position:relative} .dt-share{position:absolute;right:0;top:2px;display:flex;gap:8px} .dt-share a{width:42px;height:42px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;transition:.2s} .dt-share a:hover{border-color:var(--accent);color:var(--accent)} .dt-map{width:100%;height:320px;background:#e4e7e2 center/cover;border:1px solid var(--line);position:relative;overflow:hidden} .dt-map::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 39px,rgba(20,45,32,.06) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(20,45,32,.06) 39px 40px)} .dt-map::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;background:var(--accent);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);box-shadow:0 6px 14px rgba(0,0,0,.28)} .dt-side{position:sticky;top:110px;border:1px solid var(--line);background:var(--white);padding:32px} .dt-side .lab{font-family:var(--serif);letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-bottom:20px} .dt-side .cname{font-size:22px;font-weight:600} .dt-side .ctitle{color:var(--muted);font-size:14px;margin-top:4px;margin-bottom:26px} /* ---- business rows ---- */ .biz .row{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--white)} .biz .row+.row{border-top:none} .biz .ph{min-height:380px;background-color:#cdbfa6;background-size:cover;background-position:center} .biz .txt{padding:clamp(40px,5vw,72px)} .biz .no{font-family:var(--serif);font-size:18px;letter-spacing:.1em;color:var(--accent)} .biz h3{font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;margin:14px 0 18px;line-height:1.3} .biz .link{display:inline-block;margin-top:26px;font-family:var(--serif);font-size:15px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px} .biz .row.rev .ph{order:2} /* ---- recruit cta ---- */ .recruit{position:relative;padding:clamp(110px,17vh,180px) 0;color:#fff;text-align:center;background:var(--char) center/cover} .recruit::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(18,17,12,.5),rgba(18,17,12,.72))} .recruit .wrap{position:relative;z-index:1} .recruit .eyebrow{color:rgba(255,255,255,.8)} .recruit h2{font-size:clamp(30px,4.2vw,52px);font-weight:600;letter-spacing:-.04em;margin:20px 0;line-height:1.25} .recruit h2 b{font-weight:700} .recruit p{color:rgba(255,255,255,.84);font-weight:300;max-width:540px;margin:0 auto;font-size:17px} .recruit .btn{margin-top:40px} /* ---- pagination ---- */ .pagi{display:flex;justify-content:center;gap:8px;margin-top:64px} .pagi a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:15px;font-family:var(--serif);color:var(--ink);transition:.2s} .pagi a:hover{border-color:var(--ink)} .pagi a.on{background:var(--ink);color:#fff;border-color:var(--ink)} /* ---- footer ---- */ footer{background:var(--char);color:rgba(255,255,255,.62);padding:84px 0 40px;font-size:14px} footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.12)} footer .logo{font-family:var(--serif);font-size:24px;letter-spacing:.34em;color:#fff;padding-left:.34em} footer .logo img{height:44px;width:auto;display:block} footer .desc{margin-top:22px;line-height:2;color:rgba(255,255,255,.55)} footer h4{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--serif);margin-bottom:18px;font-weight:500} footer li{margin-bottom:11px} footer a:hover{color:#fff} footer .bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;color:rgba(255,255,255,.4);font-size:13px;flex-wrap:wrap;gap:12px} /* ---- intro / philosophy ---- */ .intro .grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .intro .visual{aspect-ratio:4/3;background-color:#ddd2bd;background-size:cover;background-position:center} .intro .kdb{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)} .intro .kdb .t{font-family:var(--serif);font-size:20px;letter-spacing:.06em;color:var(--accent)} .intro .kdb p{color:var(--muted);margin-top:8px;font-size:15.5px} /* ---- reveal (모션 통일: 16px/400ms — public-site 와 동일 톤) ---- */ .reveal{opacity:1} html.js .reveal{opacity:0;transform:translateY(16px)} html.js .reveal.in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease} @media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}} /* ---- responsive ---- */ @media(max-width:980px){ :root{--pad:22px} nav,.h-right{display:none} header .burger{display:flex} .intro .grid{grid-template-columns:1fr;gap:40px} .tiles,.cards{grid-template-columns:1fr 1fr;gap:18px} .listing{grid-template-columns:1fr;gap:28px} .filter{position:static} .dt-grid{grid-template-columns:1fr;gap:40px} .gallery{grid-template-columns:1fr;height:auto} .gallery .main{height:300px}.gallery .side{grid-template-columns:1fr 1fr;grid-template-rows:none;height:140px} .spec-grid{grid-template-columns:1fr 1fr} .biz .row,.biz .row.rev .ph{grid-template-columns:1fr;display:block} .biz .ph{min-height:240px} footer .top{grid-template-columns:1fr 1fr;gap:30px} } @media(max-width:560px){ .tiles,.cards,.stats .row,.spec-grid{grid-template-columns:1fr} .stats .cell{border-left:none;border-top:1px solid var(--line)} .stats .cell:first-child{border-top:none} footer .top{grid-template-columns:1fr} } /* ===== mobile drawer / burger ===== */ .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;color:#fff;z-index:70} .burger span{width:24px;height:2px;background:currentColor;display:block} header.solid .burger,body.light-head .burger{color:var(--ink)} .drawer{position:fixed;inset:0;z-index:200;background:rgba(20,19,15,.5);opacity:0;visibility:hidden;transition:.3s} body.drawer-open{overflow:hidden} body.drawer-open .drawer{opacity:1;visibility:visible} .drawer-in{position:absolute;top:0;right:0;width:320px;max-width:86vw;height:100%;background:var(--ivory);padding:26px;transform:translateX(100%);transition:.35s cubic-bezier(.2,.6,.2,1);display:flex;flex-direction:column} body.drawer-open .drawer-in{transform:none} .drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px} .drawer-top .logo{font-family:var(--serif);font-size:22px;letter-spacing:.3em;color:var(--ink);padding-left:.3em} .drawer-top .logo img{height:34px;width:auto;display:block} .drawer-x{background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--muted)} .drawer ul{display:flex;flex-direction:column} .drawer li a{display:block;padding:15px 2px;font-size:18px;font-weight:500;border-bottom:1px solid var(--line);color:var(--ink)} .drawer-auth{margin-top:auto;display:flex;gap:16px;padding-top:22px;color:var(--muted);font-size:15px} .drawer-auth .bar{opacity:.4} /* ===== no-photo placeholder ===== */ .noimg{display:flex;align-items:center;justify-content:center;background-color:#bdb09a} .noimg span{font-family:var(--serif);font-size:32px;letter-spacing:.34em;color:rgba(255,255,255,.78);padding-left:.34em} /* ===== about: core values ===== */ .values3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .values3 .v{background:var(--ivory);padding:48px 34px;text-align:center} .values3 .v .l{font-family:var(--serif);font-size:40px;color:var(--accent);letter-spacing:.05em} .values3 .v h4{margin:16px 0 10px;font-size:20px;font-weight:600} .values3 .v p{color:var(--muted);font-size:15px} /* ===== recruit: values + jobs ===== */ .values2{display:grid;grid-template-columns:1fr 1fr;gap:46px 64px} .value{display:flex;gap:22px;align-items:flex-start} .value .no{font-family:var(--serif);font-size:34px;color:var(--accent);line-height:1.05;flex:none} .value h4{font-size:20px;font-weight:600;margin-bottom:8px} .value p{color:var(--muted);font-size:15.5px} .jobs{border-top:1px solid var(--line)} .job{display:flex;justify-content:space-between;align-items:center;padding:30px 4px;border-bottom:1px solid var(--line);transition:padding .3s} .job:hover{padding-left:14px} .job h4{font-size:21px;font-weight:500} .job .meta{margin-top:8px;color:var(--muted);font-size:14px;display:flex;gap:16px;flex-wrap:wrap} .job .jr{font-family:var(--serif);letter-spacing:.1em;text-transform:uppercase;font-size:14px;color:var(--accent);white-space:nowrap} /* ===== contact ===== */ .contact{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start} .contact-info{margin-top:30px} .contact-info .it{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)} .contact-info .it .ic{font-family:var(--serif);color:var(--accent);font-size:13px;letter-spacing:.1em;text-transform:uppercase;width:92px;flex:none;padding-top:4px} .contact-info .it .v{font-size:15.5px} .contact-info .it .v small{display:block;color:var(--muted);font-size:13.5px;margin-top:4px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form-grid .full{grid-column:1/-1} .form-grid label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px;letter-spacing:.03em} .form-grid .agree{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--paper);border:1px solid var(--line);padding:14px 16px} .form-grid .agree label{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--ink)} .form-grid .agree input{width:auto;height:auto;min-width:0;margin:0} .form-grid .agree b{color:var(--accent);font-weight:600} .form-grid .agree .ag-link{font-size:13px;color:var(--muted);text-decoration:underline;flex:none} @media(max-width:980px){ .values2,.contact{grid-template-columns:1fr;gap:30px} .values3{grid-template-columns:1fr;border:none} .values3 .v{border:1px solid var(--line)} } @media(max-width:560px){ .form-grid{grid-template-columns:1fr} } /* 가격·스펙 숫자: 한글 단위(억·평)와 숫자를 같은 세리프로 통일 */ .pcard .price,.tile .price,.dt-price,.spec-grid .val{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif} /* ===== hero 인트로 영상 + 시네마틱 모션 폴백 ===== */ .hero{background:#14130f} .hero-media{position:absolute;inset:0;overflow:hidden;z-index:0} .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:kenburns 26s ease-in-out infinite alternate} @keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14)}} .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s} .hero-vid.on{opacity:1} .hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,19,15,.32),rgba(20,19,15,.05) 38%,rgba(20,19,15,.66))} .hero>.wrap{position:relative;z-index:2} .hero .scroll-ind,.hero .dots{z-index:2} /* ===== 입사지원 버튼(헤더) ===== */ .h-right .ats{border:1px solid currentColor;padding:8px 16px;font-size:13px;letter-spacing:.02em;transition:.25s;margin-left:6px} body.light-head .h-right .ats,header.solid .h-right .ats{border-color:var(--accent);color:var(--accent)} .h-right .ats:hover{background:var(--accent);color:#fff;border-color:var(--accent)} /* ===== 플로팅 바(유튜브·카톡·TOP) ===== */ .floatbar{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:10px} .floatbar a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;box-shadow:0 6px 16px rgba(0,0,0,.18);transition:.2s;color:#fff;text-decoration:none} .floatbar a:hover{transform:scale(1.07)} .floatbar a.yt{background:#e0312a} .floatbar a.kk{background:#FAE100;color:#3a2a00} .floatbar a.top{background:#fff;color:var(--ink);border:1px solid var(--line)} @media(max-width:560px){.floatbar{right:12px;top:auto;bottom:16px;transform:none}.floatbar a{width:46px;height:46px;font-size:11px}} /* ===== 상단 필터바(ygrealty식) ===== */ .searchbar{display:flex;align-items:center;gap:12px;padding:18px 0;flex-wrap:wrap} .searchbar .sb-find{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);background:#fff;height:48px;padding:0 16px} .searchbar .sb-find input{border:none;height:auto;padding:0;flex:1;background:transparent} .searchbar select{width:auto;min-width:118px;height:48px;border-color:var(--line-2)} .searchbar .sb-ic{display:flex;gap:8px;margin-left:auto} .searchbar .sb-ic a{width:48px;height:48px;border:1px solid var(--line-2);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;transition:.2s} .searchbar .sb-ic a:hover,.searchbar .sb-ic a.on{border-color:var(--accent);color:var(--accent)} .list-bar{display:flex;justify-content:space-between;align-items:center;margin:8px 0 24px;color:var(--muted);font-size:15px} .list-bar b{color:var(--ink)} /* ===== ygrealty 4열 매물카드 ===== */ .ygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .ycard{display:block;background:#fff;border:1px solid var(--line);transition:.3s} .ycard:hover{box-shadow:0 14px 32px rgba(27,26,22,.10);transform:translateY(-3px)} .ycard .img{position:relative;aspect-ratio:4/3;background:#cabfa8 center/cover;overflow:hidden} .ycard .heart{position:absolute;top:11px;right:11px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px} .ycard .case-done{position:absolute;top:0;left:0;background:var(--ink-blue);color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;padding:6px 13px;z-index:2} .ycard .b{padding:16px 18px 18px} .ycard .topline{display:flex;align-items:center;gap:7px;margin-bottom:11px;flex-wrap:wrap} .ycard .no{font-size:12px;color:var(--faint)} .ycard .rec{font-size:11px;color:var(--accent);border:1px solid var(--accent);padding:2px 7px} .ycard .pl{display:flex;align-items:center;gap:8px} .ycard .deal{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink-blue);color:var(--ink-blue);font-size:12px;display:flex;align-items:center;justify-content:center;flex:none} .ycard .price{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;font-size:23px;font-weight:500;color:var(--ink-blue);line-height:1} .ycard .ttl{margin-top:11px;font-size:15px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ycard .loc{margin-top:7px;font-size:13px;color:var(--muted)} .ycard .loc .pin{color:var(--accent);margin-right:4px;font-size:10px;vertical-align:1px} .ycard .spec{display:flex;gap:13px;margin-top:11px;font-size:12px;color:var(--muted);flex-wrap:wrap} .ycard .spec b{color:var(--ink);font-weight:600} .ycard .yield{font-size:12px;color:var(--accent);margin-left:auto;align-self:flex-end;padding-bottom:3px;font-weight:600} .ycard.cta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;text-align:center;background:var(--paper);border:1px dashed var(--line-2);padding:28px 24px} .ycard.cta:hover{box-shadow:none;transform:none;border-color:var(--accent)} .ycard.cta .ic{font-size:24px;color:var(--accent);line-height:1} .ycard.cta h4{font-size:17px;font-weight:600;color:var(--ink)} .ycard.cta p{font-size:13.5px;color:var(--muted)} .ycard.cta .btn{font-size:13px;padding:11px 22px;margin-left:6px} .ycard .type{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)} /* ===== 지도검색 ===== */ .mapsearch{display:grid;grid-template-columns:392px 1fr;height:calc(100vh - 74px)} .map-list{overflow-y:auto;background:#fff;border-right:1px solid var(--line)} .map-item{display:flex;gap:14px;padding:16px;border-bottom:1px solid var(--line);cursor:pointer;transition:.2s} .map-item:hover{background:var(--paper)} .map-item .th{width:104px;height:78px;background:#cabfa8 center/cover;flex:none} .map-item .no{font-size:11px;color:var(--faint)} .map-item .pr{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;font-size:19px;color:var(--ink-blue);font-weight:500;margin-top:2px;line-height:1} .map-item .tt{font-size:13.5px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;font-weight:500} .map-item .lc{font-size:12.5px;color:var(--muted);margin-top:4px} .map-pane{position:relative;background:#e6e9e4;overflow:hidden} .map-pane .faux{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 49px,rgba(20,45,32,.05) 49px 50px),repeating-linear-gradient(90deg,transparent 0 49px,rgba(20,45,32,.05) 49px 50px)} .cluster{position:absolute;transform:translate(-50%,-50%);min-width:44px;height:44px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.28);border:2px solid #fff;cursor:pointer} .cluster .nm{position:absolute;top:48px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;color:var(--ink);background:rgba(255,255,255,.9);padding:1px 7px;border-radius:3px} .map-toggle{position:absolute;top:16px;right:16px;display:flex;background:#fff;border:1px solid var(--line);z-index:5} .map-toggle a{padding:9px 16px;font-size:13px;color:var(--muted)} .map-toggle a.on{background:var(--ink);color:#fff} /* ===== 홈 유튜브 그리드 ===== */ .ytgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .ytcard{display:block} .ytcard .thumb{position:relative;aspect-ratio:16/10;background:#222 center/cover;overflow:hidden} .ytcard .thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(20,19,15,.6);display:flex;align-items:center;justify-content:center} .ytcard .thumb .play::after{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px} .ytcard .cap{margin-top:13px;font-size:14.5px;font-weight:500;line-height:1.5;color:var(--ink)} /* ===== 오시는 길 ===== */ .location{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center} .location .lmap{width:100%;height:340px;background:#e4e7e2;border:1px solid var(--line);position:relative;overflow:hidden} .location .lmap::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 39px,rgba(20,45,32,.06) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(20,45,32,.06) 39px 40px)} .location .lmap::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;background:var(--accent);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);box-shadow:0 6px 14px rgba(0,0,0,.28)} .location .it{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)} .location .it .k{font-family:var(--serif);color:var(--accent);font-size:13px;letter-spacing:.1em;text-transform:uppercase;width:92px;flex:none;padding-top:3px} @media(max-width:980px){ .ygrid{grid-template-columns:1fr 1fr} .ytgrid{grid-template-columns:1fr 1fr} .mapsearch{grid-template-columns:1fr;height:auto} .map-list{max-height:50vh}.map-pane{height:50vh} .location{grid-template-columns:1fr;gap:28px} .searchbar select{flex:1;min-width:46%} } @media(max-width:560px){ .ygrid,.ytgrid{grid-template-columns:1fr} } /* ===== 기업연혁 타임라인 ===== */ .timeline{position:relative;max-width:740px;margin:0 auto;padding-left:32px} .timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--line-2)} .tl{position:relative;padding:0 0 40px} .tl:last-child{padding-bottom:0} .tl::before{content:"";position:absolute;left:-32px;top:7px;width:13px;height:13px;border-radius:50%;background:var(--accent);border:3px solid var(--ivory)} .tl .yr{font-family:var(--serif);font-size:25px;color:var(--accent);line-height:1} .tl h4{margin-top:7px;font-size:17px;font-weight:600} .tl p{color:var(--muted);font-size:14.5px;margin-top:4px;line-height:1.6} /* ===== 컨설턴트 소개 ===== */ .team{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .member .ph{aspect-ratio:3/4;background:#cabfa8 url('images/consultant-placeholder.svg') center/cover;margin-bottom:18px} .member .nm{font-size:18px;font-weight:600} .member .ro{color:var(--accent);font-size:13px;margin-top:5px;font-family:var(--serif);letter-spacing:.05em;text-transform:uppercase} .member .ds{color:var(--muted);font-size:13.5px;margin-top:9px;line-height:1.65} /* ===== 복지·인센티브 ===== */ .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .benefit{background:var(--ivory);padding:34px 28px} .benefit .no{font-family:var(--serif);font-size:18px;color:var(--accent);letter-spacing:.05em} .benefit h4{margin:12px 0 8px;font-size:18px;font-weight:600} .benefit p{color:var(--muted);font-size:14.5px;line-height:1.65} /* ===== 채용 프로세스 ===== */ .process{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .step{text-align:center;padding:30px 14px;border:1px solid var(--line);background:#fff} .step .n{font-family:var(--serif);font-size:34px;color:var(--accent);line-height:1} .step h4{margin-top:12px;font-size:16px;font-weight:600} .step p{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.5} @media(max-width:980px){ .team{grid-template-columns:1fr 1fr} .benefits{grid-template-columns:1fr} .process{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .process{grid-template-columns:1fr} } /* ===== 신뢰 띠(언론·인증·실적) ===== */ .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .trust .ti{background:var(--ivory);padding:30px 22px;text-align:center} .trust .ti .k{font-size:12.5px;color:var(--muted);letter-spacing:.02em} .trust .ti .v{margin-top:8px;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.03em} /* ===== 인사이트/칼럼 ===== */ .insights{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .icard{display:block;border:1px solid var(--line);background:#fff;transition:.3s} .icard:hover{box-shadow:0 12px 28px rgba(27,26,22,.08);transform:translateY(-3px)} .icard .ph{aspect-ratio:16/9;background:#cabfa8 center/cover} .icard .b{padding:22px} .icard .cat{font-size:12px;color:var(--accent);letter-spacing:.04em} .icard h4{margin:10px 0 8px;font-size:17px;font-weight:600;letter-spacing:-.03em;line-height:1.45} .icard p{color:var(--muted);font-size:14px;line-height:1.65} .icard .date{margin-top:14px;font-size:12.5px;color:var(--faint)} .feat-art{display:grid;grid-template-columns:1.25fr 1fr;border:1px solid var(--line);background:#fff;margin-bottom:46px} .feat-art .ph{min-height:360px;background:#cabfa8 center/cover} .feat-art .b{padding:48px 46px;display:flex;flex-direction:column;justify-content:center} .feat-art .cat{font-size:13px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px} .feat-art h3{font-size:clamp(22px,2.4vw,31px);font-weight:600;letter-spacing:-.03em;line-height:1.35;margin-bottom:16px;color:var(--ink)} .feat-art p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:20px} .feat-art .meta{font-size:13px;color:var(--faint);margin-bottom:24px} .cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px} .cat-tabs a{padding:9px 18px;border:1px solid var(--line-2);font-size:14px;color:var(--muted);transition:.2s} .cat-tabs a.on,.cat-tabs a:hover{background:var(--ink);color:#fff;border-color:var(--ink)} @media(max-width:860px){.feat-art{grid-template-columns:1fr}.feat-art .ph{min-height:220px}} @media(max-width:980px){.trust{grid-template-columns:1fr 1fr}.insights{grid-template-columns:1fr}}