@font-face{font-family:JH Sans;src:url('/assets/noto-kr.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:JH Sans;src:url('/assets/noto-kr-bold.woff') format('woff');font-weight:700 900;font-display:swap}
:root{--cream:#f6f2e9;--paper:#fffdf8;--ink:#21362e;--soft:#52635a;--line:#dcded3;--rust:#994f38;--deep:#20382f;--display:'JH Sans','Noto Sans KR',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.7 var(--display);word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;width:100%;height:100%;object-fit:cover}
figure,h1,h2,h3,p,ul,ol{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #b86147;outline-offset:4px}
.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}
.header{background:var(--cream);border-bottom:1px solid var(--line)}
.header-inner,.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
.header-inner{min-height:78px}
.brand{display:inline-flex;align-items:center;gap:11px;line-height:1.28;flex-shrink:0}
.brand strong{display:block;font-size:14px;letter-spacing:-.05em}
.brand small{display:block;font:700 9px/1.3 Arial,sans-serif;letter-spacing:.15em;margin-top:5px}
.monogram{width:40px;height:40px;display:grid;place-items:center;background:var(--deep);color:#fff8ec;font:700 18px/1 Arial,sans-serif;letter-spacing:-.08em}
nav{display:flex;gap:31px;align-items:center;font-size:14px;font-weight:700}
nav a:hover,.back:hover{color:var(--rust)}
.nav-cta{border:1px solid #8c9a8c;padding:9px 14px}
.nav-cta span{margin-left:4px}
.hero{background:radial-gradient(ellipse at 0 0,#eee6d5,transparent 58%),var(--cream);border-bottom:1px solid var(--line);padding:58px 0 65px}
.hero-grid{display:grid;grid-template-columns:minmax(0, .84fr) minmax(0,1.16fr);gap:58px;align-items:center}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--rust);line-height:1.5}
.hero-copy .eyebrow{display:flex;align-items:center;gap:10px}
.hero-copy .eyebrow span{width:24px;height:1px;background:var(--rust)}
h1,h2,h3{font-weight:800;line-height:1.25;letter-spacing:-.06em}
.hero h1{font-size:clamp(48px,6.1vw,93px);line-height:1.1;margin:20px 0 24px}
.hero h1 em{font-style:normal;color:var(--rust)}
.hero-description,.section-copy{color:var(--soft);font-size:15px}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:29px}
.button{display:inline-flex;justify-content:space-between;align-items:center;gap:13px;padding:12px 16px;min-height:46px;font-size:13px;font-weight:700;border:1px solid transparent;transition:background .15s,color .15s}
.button.primary{background:var(--deep);color:#fffdf7}
.button.primary:hover{background:#36574a}
.button.secondary{border-color:#a8b1a5;background:transparent}
.button.secondary:hover{background:#e9e6db}
.hero-image{position:relative;min-height:490px;aspect-ratio:1.26;overflow:hidden;background:#cbd2cc}
.hero-image img{position:absolute;inset:0;object-position:50% 54%}
.hero-image::after{position:absolute;content:'';inset:45% 0 0;background:linear-gradient(transparent,#152820c7);pointer-events:none}
.hero-image figcaption{position:absolute;bottom:23px;left:25px;z-index:1;color:#fffdf8}
.hero-image figcaption span{display:block;font-size:11px;margin-bottom:2px;letter-spacing:.1em}
.hero-image figcaption strong{font-size:16px}
.section{padding-block:83px}
.service-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px;align-items:start}
.index{margin-bottom:12px}
h2{font-size:clamp(32px,4vw,53px);margin-bottom:12px}
.service-list{list-style:none;padding:0;border-top:1px solid #a9b6a9}
.service-list a{display:grid;grid-template-columns:37px 1fr 1.12fr 17px;align-items:center;gap:9px;padding:15px 7px;border-bottom:1px solid var(--line);transition:background .15s}
.service-list a:hover{background:#ede9dd}
.number{font:700 11px Arial,sans-serif;color:var(--rust)}
.service-name{font-size:18px;font-weight:700}
.service-scope{color:var(--soft);font-size:13px}
.project-section{background:var(--paper);border-block:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}
.section-heading h2{margin-bottom:0}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin:25px 0}
.filters button{font-size:13px;padding:6px 13px;border:1px solid #cdd5c9;color:var(--ink);background:transparent}
.filters button:hover{border-color:#829488}
.filters button[aria-pressed=true]{background:var(--deep);color:white;border-color:var(--deep)}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.project-card{min-width:0;border:1px solid var(--line);background:var(--paper)}
.project-card a{display:block;height:100%}
.card-photo{aspect-ratio:1.55;overflow:hidden;position:relative;background:#d7ddd4}
.card-photo img{transition:transform .25s}
.project-card a:hover img{transform:scale(1.035)}
.tag{position:absolute;top:12px;left:12px;background:var(--paper);color:var(--ink);font-size:11px;font-weight:700;padding:4px 8px}
.card-body{padding:14px 40px 18px 15px;position:relative}
.card-body h3{font-size:18px;margin-top:6px}
.card-arrow{position:absolute;right:15px;bottom:17px;color:var(--rust)}
.contact{background:var(--deep);color:var(--cream)}
.contact-grid{display:grid;grid-template-columns:1fr .88fr;gap:72px;align-items:start}
.contact .index{color:#ffc6a9}
.contact p{color:#d6ddd1}
.contact-list{padding-left:21px;margin-top:24px;font-size:14px;color:#ebeee6}
.contact-list li{padding:4px 0 4px 3px}
.contact-panel{background:var(--paper);color:var(--ink);padding:25px}
.contact-panel h3{font-size:23px}
.contact-panel p{color:var(--soft);font-size:13px;margin:7px 0 12px}
.contact-panel form{display:grid;gap:11px}
.contact-panel label{display:grid;gap:4px;font-size:13px;font-weight:700}
.contact-panel input,.contact-panel select,.contact-panel textarea{color:var(--ink);width:100%;border:1px solid #b5c0b5;background:white;padding:8px;font-size:14px;border-radius:0}
.contact-panel textarea{resize:vertical}
.contact-panel .button{justify-self:start}
#estimate-status{margin:0}
#estimate-status:empty{display:none}
footer{padding:23px 0;background:var(--cream);font-size:12px;color:var(--soft)}
.footer-inner>a:last-child{font-weight:700}
.case-page .back{display:inline-block;margin-bottom:27px;font-size:13px;font-weight:700}
.case-page .index{margin-bottom:9px}
.case-page h1{font-size:clamp(34px,5vw,63px)}
.case-copy{max-width:800px;margin-top:16px;color:var(--soft)}
.comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.comparison.single{grid-template-columns:minmax(0,850px)}
.comparison figure{background:var(--paper);border:1px solid var(--line)}
.comparison img{height:auto;aspect-ratio:1.42}
.comparison figcaption{font-size:13px;font-weight:700;padding:10px 13px}
.case-next{border-top:1px solid #abb8ab;margin-top:35px;padding-top:21px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-weight:700}
.case-next small{color:var(--soft);font-weight:400}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;clip-path:inset(50%);white-space:nowrap;overflow:hidden}
.skip:focus{position:fixed;z-index:8;top:8px;left:8px;background:white;color:var(--ink);padding:8px}
@media(max-width:1050px){.hero-grid{gap:35px}.hero-image{min-height:390px}.service-grid{gap:38px}.contact-grid{gap:45px}}
@media(max-width:760px){.wrap{width:calc(100% - 38px)}.header-inner{min-height:65px;gap:12px}nav{gap:12px;font-size:11px}.nav-cta{padding:6px}.brand strong{font-size:12px}.brand small{font-size:8px}.monogram{width:31px;height:31px;font-size:14px}.brand{gap:6px}.hero{padding:35px 0 35px}.hero-grid,.service-grid,.contact-grid{grid-template-columns:1fr;gap:25px}.hero h1{margin:15px 0 17px;font-size:clamp(47px,11vw,71px)}.hero-description br.desktop{display:none}.actions{margin-top:19px}.hero-image{min-height:0;aspect-ratio:1.38}.hero-image figcaption{bottom:13px;left:15px}.section{padding-block:54px}.case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card-body h3{font-size:16px}.section-heading{align-items:start;flex-direction:column;gap:7px}.section-heading br{display:none}.service-list a{padding-inline:2px;grid-template-columns:25px 1fr 1fr 15px}.service-name{font-size:16px}.contact-panel{padding:17px}.footer-inner{flex-wrap:wrap;gap:12px}.footer-inner>span{order:3;width:100%}}
@media(max-width:425px){nav a:first-child{display:none}.case-grid,.comparison{grid-template-columns:1fr}.case-next{align-items:flex-start;flex-direction:column}.hero h1{font-size:clamp(44px,11vw,55px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

.hero-facade img{object-position:50% 43%}
.hero-facade figcaption a{display:inline-flex;align-items:center;gap:10px}
.hero-facade figcaption a:hover{text-decoration:underline}
.field-gallery{margin-top:47px}
.field-gallery h2{font-size:clamp(26px,3vw,39px);margin-bottom:8px}
.field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:19px}
.field-grid figure{min-width:0;background:var(--paper);border:1px solid var(--line)}
.gallery-open{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:#d7ddd4}
.gallery-open img{transition:transform .25s}
.gallery-open:hover img{transform:scale(1.035)}
.photo-zoom{position:absolute;bottom:9px;right:9px;background:var(--paper);color:var(--ink);width:30px;height:30px;display:grid;place-items:center;font-size:14px}
.field-grid figcaption{padding:10px 12px;color:var(--ink);font-size:13px;font-weight:700}
.photo-viewer{background:var(--paper);color:var(--ink);border:0;padding:12px;width:min(94vw,1000px);max-height:95dvh}
.photo-viewer::backdrop{background:#15231ee6}
.viewer-top,.viewer-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:700}
.viewer-top{padding-bottom:8px}
.viewer-footer{padding-top:8px}
.viewer-footer p{text-align:center}
.photo-viewer img{height:auto;max-height:72dvh;object-fit:contain;background:#e9eee7}
.photo-viewer button{flex:none;border:1px solid #b5c0b5;background:var(--cream);color:var(--ink);width:42px;height:42px;font-size:19px}
.photo-viewer button:hover{background:#e9e6db}
@media(max-width:760px){.field-gallery{margin-top:31px}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.field-grid figcaption{padding:8px;font-size:12px}}
.contact-direct{display:grid;max-width:460px;margin-top:27px;border-top:1px solid #84988b}
.contact-direct a{display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:8px;padding:11px 3px;border-bottom:1px solid #607b6b}
.contact-direct a>span:first-child{color:#dfebde;font-size:13px}
.contact-direct strong{font-size:16px;letter-spacing:.015em;color:#fffdf8}
.contact-direct a:hover strong,.footer-phone:hover{text-decoration:underline}
.footer-phone{display:inline-block;margin-top:3px;font-weight:700}
.parking-jump{display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:var(--rust);text-decoration:underline;text-underline-offset:4px}
.parking-gallery{border-top:1px solid var(--line);padding-top:32px}
.parking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.parking-grid figcaption{padding:13px 16px 16px}
.parking-grid h3{font-size:17px;margin-top:4px}
.parking-grid figcaption p{color:var(--soft);font-weight:400;margin-top:5px}
@media(max-width:540px){.parking-grid{grid-template-columns:1fr}.parking-gallery{padding-top:25px}}
.related-project{border-top:1px solid var(--line);padding-top:30px}
.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related-project{padding-top:22px}}
.album-parts{margin-top:20px;border-top:1px solid #a9b6a9}
.album-part{border-bottom:1px solid var(--line);padding:0 0 1px}
.album-part summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:13px 5px}
.album-part summary::-webkit-details-marker{display:none}
.album-part summary::after{content:'+';font-size:20px;color:var(--rust)}
.album-part[open] summary::after{content:'−'}
.album-part summary span{margin-left:auto;color:var(--soft);font-size:13px}
.album-part .field-grid{margin:3px 0 18px}
@media(max-width:760px){.album-part .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.parking-jump+.parking-jump{margin-inline-start:17px}
.special-paint-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:425px){.parking-jump+.parking-jump{margin-inline-start:0;display:block}.special-paint-grid{grid-template-columns:1fr}}

/* Warm backgrounds and quiet frames let the original site photos carry the color. */
:root{--cream:#f5efe3;--paper:#fffdf8;--ink:#23372f;--soft:#4f5e56;--line:#d7dbd0;--rust:#85442f;--deep:#20382f;--tint:#ebece2}
.hero{background:radial-gradient(ellipse at 0 0,#eae0cd,transparent 60%),var(--cream)}
.hero-description{max-width:38ch;font-size:16px}
.hero-image,.card-photo,.project-card,.comparison figure,.field-grid figure{border-radius:6px}
.project-card,.comparison figure,.field-grid figure{overflow:hidden}
.case-jumps{margin-top:23px;max-width:850px}
.case-jumps p{font-size:12px;font-weight:700;color:var(--soft);margin-bottom:6px}
.case-jumps ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0}
.case-jumps a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:6px 12px;border:1px solid #a9b4a8;border-radius:5px;background:var(--paper);font-size:14px;font-weight:700}
.case-jumps a:hover{background:var(--tint);border-color:var(--deep)}
.case-jumps span{color:var(--rust)}
.staged-project>.section-copy{max-width:70ch;font-size:16px}
.case-stages{margin-top:22px;display:grid;gap:14px}
.case-stage{background:var(--tint);border:1px solid var(--line);border-radius:8px;padding:clamp(12px,2vw,22px)}
.case-stage h3{font-size:clamp(17px,2vw,21px);display:flex;align-items:center;gap:10px;letter-spacing:-.035em}
.case-stage h3 span{flex:none;display:grid;place-items:center;width:32px;height:28px;background:var(--deep);color:var(--paper);border-radius:4px;font:700 12px/1 Arial,sans-serif;letter-spacing:.035em}
.stage-grid{margin-top:13px}
.stage-grid[data-size="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:810px}
.stage-grid[data-size="1"]{grid-template-columns:minmax(0,480px)}
.stage-grid .gallery-open{background:#dce1d9}
.stage-grid .gallery-open img{object-fit:contain}
.stage-grid figcaption{font-weight:400;line-height:1.5}
@media(max-width:760px){.case-stages{gap:11px}.case-jumps{margin-top:17px}.case-jumps a{font-size:13px;padding-inline:9px}.staged-project>.section-copy{font-size:15px}.stage-grid .gallery-open{aspect-ratio:5/4}.stage-grid[data-size="1"] .gallery-open{aspect-ratio:4/3}}
@media(max-width:350px){.stage-grid,.stage-grid[data-size="2"]{grid-template-columns:minmax(0,1fr)}}

.phone-button{justify-content:center;gap:9px}
.phone-button svg,.contact-call svg{flex:none}
.case-next{border:1px solid var(--line);border-radius:8px;background:var(--paper);margin-top:46px;padding:clamp(18px,3.2vw,32px)}
.case-next h2{font-size:clamp(22px,2.6vw,29px);margin:0 0 6px}
.case-next p{font-size:14px;font-weight:400;color:var(--soft)}
.case-actions{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.case-actions .button{border-radius:5px}
.contact-direct{margin-top:22px}
.contact-direct .contact-call{border-bottom:0;margin:0 -2px 2px;padding:12px 9px;background:#2e4a3e;border-radius:5px}
.contact-call:hover{background:#3b594b}
@media(max-width:650px){.case-next{align-items:flex-start;flex-direction:column;gap:16px}}

.gallery-process{max-width:720px;margin-top:16px;padding:14px 18px;border-left:3px solid var(--deep);background:var(--tint)}
.gallery-process h3{font-size:17px;margin-bottom:4px}
.gallery-process ol{padding-left:1.35em;color:var(--soft);font-size:14px}
.gallery-process li{padding:2px 0}
.gallery-process li::marker{font-weight:700;color:var(--deep)}