@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Sans+KR:wght@300;400;500&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root{--paper:#f3f0e9;--ink:#171714;--brown:#40372f;--clay:#9b745b;--line:rgba(23,23,20,.18);--sans:'DM Sans','Noto Sans KR',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;letter-spacing:-.025em}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}h1,h2,h3,p{margin:0}h2{font-size:clamp(32px,3.8vw,54px);line-height:1.22;font-weight:400;letter-spacing:-.055em}
.header{height:82px;padding:0 4.5vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:absolute;z-index:5;width:100%;color:#fff;border-bottom:1px solid rgba(255,255,255,.32)}.wordmark{font-weight:600;letter-spacing:.12em;font-size:15px}.header nav{display:flex;gap:40px;font-size:11px;letter-spacing:.14em}.header-cta{justify-self:end;border-bottom:1px solid currentColor;padding:8px 0;font-size:13px}.header-cta span,.text-link span{margin-left:12px}
.hero{height:100svh;min-height:720px;position:relative;color:#fff;overflow:hidden}.hero>img{position:absolute;inset:0}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,12,10,.58),rgba(13,12,10,.04) 68%),linear-gradient(0deg,rgba(13,12,10,.34),transparent 45%)}.hero-copy{position:absolute;left:6.5vw;right:6.5vw;top:50%;transform:translateY(-37%)}.kicker{font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--clay);margin-bottom:28px}.kicker.light{color:rgba(255,255,255,.62)}.hero h1{font-size:clamp(42px,5.4vw,78px);line-height:1.13;font-weight:300;letter-spacing:-.065em}.hero h1::first-line{font-family:'Playfair Display',serif;font-style:italic}.hero-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:44px}.hero-bottom p{font-size:15px;line-height:1.8}.circle-link{width:54px;height:54px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid;place-items:center;font-size:22px}.hero-index{position:absolute;right:4.5vw;bottom:30px;font-size:10px;letter-spacing:.15em}
.section-pad{padding:150px 6.5vw}.intro{padding-top:175px;padding-bottom:180px}.intro-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:10vw}.intro-grid>div{padding-top:16px}.intro-grid p{font-size:17px;line-height:1.9;color:#5d5953}.text-link{display:inline-block;margin-top:44px;padding-bottom:8px;border-bottom:1px solid var(--ink);font-size:13px;font-weight:500}
.projects{background:#e6e0d6}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:90px}.section-head h2{font-size:clamp(32px,3.6vw,52px)}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7vw 3vw}.project-wide{grid-row:auto}.project-image{height:29vw;max-height:520px;position:relative;overflow:hidden}.project-tall .project-image{height:29vw;min-height:330px}.project img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}.project:hover img{transform:scale(1.025)}.project-no{position:absolute;top:18px;left:18px;color:#fff;font-size:11px;letter-spacing:.12em}.project-meta{display:flex;justify-content:space-between;align-items:start;margin-top:20px}.project-meta h3{font-size:20px;font-weight:400}.project-meta small{font-size:12px;font-weight:400;color:#77726b;margin-left:8px}.project-meta p{font-size:13px;color:#77726b;margin-top:6px}.project-meta>span{font-size:9px;letter-spacing:.14em;padding-top:6px}
.architect{display:grid;grid-template-columns:48% 52%;min-height:820px;background:var(--brown);color:#fff}.architect-image{min-height:760px}.architect-copy{padding:9vw 7vw;display:flex;flex-direction:column;justify-content:center}.architect-copy h2{font-size:clamp(32px,3.5vw,50px)}.architect-lead{font-size:16px;line-height:1.8;color:rgba(255,255,255,.63);margin:38px 0 64px}.career{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.24);border-bottom:1px solid rgba(255,255,255,.24);padding:26px 0}.career div{display:flex;flex-direction:column;gap:6px;border-right:1px solid rgba(255,255,255,.18);padding-left:22px}.career div:first-child{padding-left:0}.career div:last-child{border:0}.career strong{font-size:14px;font-weight:400}.career span{font-size:10px;color:rgba(255,255,255,.5)}.career-note{font-size:12px;line-height:1.8;color:rgba(255,255,255,.54);margin-top:26px}.light-link{border-color:rgba(255,255,255,.6)}
.head-note{max-width:410px;font-size:15px;line-height:1.8;color:#6b665f}.principles{border-top:1px solid var(--line)}.principle{display:grid;grid-template-columns:80px 160px 1fr 30px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}.principle span,.principle em{font-size:10px;letter-spacing:.14em;font-style:normal;color:#77726b}.principle h3{font-size:22px;font-weight:400}.principle b{font-weight:400}
.onsite{height:82vh;min-height:650px;position:relative;color:#fff}.onsite:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,14,12,.68),rgba(16,14,12,.06))}.onsite-copy{position:absolute;z-index:2;left:6.5vw;top:50%;transform:translateY(-50%)}.onsite-copy h2{font-size:clamp(34px,4vw,56px)}.onsite-copy>p:not(.kicker){margin-top:32px;line-height:1.8;color:rgba(255,255,255,.7)}.outline-btn{display:inline-block;margin-top:46px;border:1px solid rgba(255,255,255,.55);padding:16px 26px;font-size:12px;letter-spacing:.06em}
.contact{text-align:center;padding:170px 20px}.contact h2{font-size:clamp(36px,4.2vw,60px)}.contact>p:not(.kicker){color:#77726b;margin-top:28px}.contact>a{display:inline-flex;align-items:center;justify-content:space-between;width:280px;margin-top:46px;padding:17px 0;border-bottom:1px solid var(--ink);font-size:14px}.contact>a span{font-size:18px}footer{background:#191916;color:#fff;padding:70px 6.5vw;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;font-size:12px;line-height:1.8}footer b{display:block;font-size:15px;letter-spacing:.12em;margin-bottom:26px}footer p{color:rgba(255,255,255,.56)}.footer-right{text-align:right;display:flex;flex-direction:column;justify-content:space-between}.footer-right small{color:rgba(255,255,255,.32)}
@media(max-width:800px){.header{height:68px;padding:0 22px;grid-template-columns:1fr 1fr}.header nav{display:none}.header-cta{font-size:12px}.hero{min-height:680px;height:92svh}.hero-copy{left:24px;right:24px;top:52%}.hero h1{font-size:36px;line-height:1.2}.hero-bottom{margin-top:40px}.hero-bottom p{font-size:13px}.circle-link{width:48px;height:48px}.section-pad{padding:100px 24px}.intro{padding-top:110px}.intro-grid{grid-template-columns:1fr;gap:40px}.intro-grid h2{font-size:31px}.section-head{display:block;margin-bottom:55px}.section-head>.text-link{margin-top:32px}.project-grid{grid-template-columns:1fr;gap:70px}.project-wide{grid-row:auto}.project-image,.project-tall .project-image{height:72vw;min-height:0}.architect{grid-template-columns:1fr}.architect-image{min-height:520px}.architect-copy{padding:90px 24px}.career{grid-template-columns:1fr;gap:18px}.career div{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding:0 0 18px}.career div:first-child{padding-bottom:18px}.principle{grid-template-columns:42px 1fr 24px;gap:10px}.principle em{display:none}.principle h3{font-size:17px}.head-note{margin-top:30px}.onsite-copy{left:24px;right:24px}.onsite-copy h2{font-size:32px}.contact{padding:110px 24px}.contact h2{font-size:32px}footer{grid-template-columns:1fr;gap:26px;padding:60px 24px}.footer-right{text-align:left;gap:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project img{transition:none}}

/* 검색 정보도 디자인의 일부로 보이게 정리한 콘텐츠 섹션 */
.remodel{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;background:#f7f4ee}.remodel-title h2{font-size:clamp(32px,3.6vw,50px)}.remodel-lead{font-size:17px;line-height:1.9;color:#5d5953;max-width:680px}.check-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:55px;border-top:1px solid var(--line)}.check-grid>div{padding:28px 24px 30px 0;border-bottom:1px solid var(--line)}.check-grid>div:nth-child(odd){border-right:1px solid var(--line)}.check-grid>div:nth-child(even){padding-left:28px}.check-grid span{font-size:10px;letter-spacing:.14em;color:var(--clay)}.check-grid h3{font-size:17px;font-weight:400;margin:12px 0 8px}.check-grid p{font-size:13px;line-height:1.75;color:#77726b}
.service-area{background:#40372f;color:#fff;display:grid;grid-template-columns:.55fr 1.45fr;gap:6vw}.service-area h2{font-size:clamp(34px,4vw,54px)}.service-area>div>p{max-width:700px;margin-top:34px;color:rgba(255,255,255,.62);font-size:15px;line-height:1.9}
.faq-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:8vw}.faq-heading h2{font-size:clamp(32px,3.6vw,50px)}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:50px 1fr 30px;align-items:center;padding:27px 0;font-size:16px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:10px;color:#8b857d;letter-spacing:.12em}.faq-list summary b{font-size:18px;font-weight:300;text-align:right;transition:transform .2s}.faq-list details[open] summary b{transform:rotate(45deg)}.faq-list details>p{padding:0 30px 28px 50px;font-size:14px;line-height:1.85;color:#6d6861}
@media(max-width:800px){.remodel,.service-area,.faq-wrap{grid-template-columns:1fr;gap:50px}.check-grid{grid-template-columns:1fr;margin-top:38px}.check-grid>div:nth-child(odd){border-right:0}.check-grid>div:nth-child(even){padding-left:0}.service-area{gap:16px}.faq-list summary{grid-template-columns:34px 1fr 24px;font-size:14px;line-height:1.5}.faq-list details>p{padding-left:34px;padding-right:0}}

/* 전체 사이트 공통 페이지 */
.sub-header{height:78px;padding:0 4.5vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:5}.sub-header nav{display:flex;gap:34px;font-size:12px}.sub-header .header-cta{color:var(--ink)}.page-hero{padding:170px 6.5vw 120px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(42px,5.3vw,76px);font-weight:400;line-height:1.13;letter-spacing:-.06em;max-width:1000px}.page-hero>p:last-child{font-size:16px;line-height:1.9;color:#6b665f;max-width:680px;margin-top:45px}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:95px 3vw}.work-card>div{height:31vw;max-height:500px;position:relative;overflow:hidden}.work-card>div span{position:absolute;top:18px;left:18px;color:#fff;font-size:10px}.work-card img{transition:transform .6s}.work-card:hover img{transform:scale(1.025)}.work-card h2{font-size:23px;margin-top:22px}.work-card>p{font-size:12px;color:#77726b;margin-top:7px}.work-card em{font-style:normal;font-size:13px;color:#5d5953;display:block;line-height:1.7;margin-top:15px;max-width:520px}
.work-hero{display:grid;grid-template-columns:46% 54%;min-height:720px;background:#ded8ce}.work-hero>div{padding:12vw 6.5vw;display:flex;flex-direction:column;justify-content:center}.work-hero h1{font-size:clamp(42px,5vw,72px);line-height:1.12;font-weight:400;letter-spacing:-.06em}.work-hero>div>p:last-child{font-size:15px;line-height:1.8;color:#69635c;margin-top:38px}.work-hero>img{min-height:720px}.work-facts{display:grid;grid-template-columns:repeat(4,1fr);padding:42px 6.5vw;border-bottom:1px solid var(--line)}.work-facts div{display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line);padding-left:28px}.work-facts div:first-child{padding-left:0}.work-facts div:last-child{border:0}.work-facts span{font-size:9px;letter-spacing:.15em;color:#8b857d}.work-facts b{font-size:14px;font-weight:400}.project-story{display:grid;grid-template-columns:.45fr .85fr .7fr;gap:5vw;align-items:start}.project-story h2{font-size:clamp(30px,3vw,45px)}.project-story>p:last-child{font-size:15px;line-height:1.9;color:#67625c}.gallery{padding:0 3vw 120px;display:grid;grid-template-columns:repeat(2,1fr);gap:3vw}.gallery img{height:38vw;max-height:650px}.gallery img:nth-child(3n){grid-column:1/-1;height:57vw;max-height:850px}.next-project{text-align:center;padding:140px 24px;background:#e6e0d6}.next-project>p{font-size:13px;color:#77726b}.next-project h2{margin-top:25px}.next-project a{display:inline-block;margin-top:40px;border-bottom:1px solid;padding:10px 0;font-size:13px}
.info-split{display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw}.info-split h2{font-size:clamp(32px,3.7vw,52px)}.number-list{border-top:1px solid var(--line)}.number-list>div{display:grid;grid-template-columns:55px 180px 1fr;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}.number-list span{font-size:10px;color:#8b857d}.number-list h3{font-size:17px;font-weight:400}.number-list p{font-size:14px;line-height:1.75;color:#6d6861}.dark-statement{padding:150px 6.5vw;background:var(--brown);color:#fff}.dark-statement h2{max-width:850px}.dark-statement>div{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin-top:70px;border-top:1px solid rgba(255,255,255,.2);padding-top:30px}.dark-statement>div p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.62)}
.timeline article{display:grid;grid-template-columns:80px .8fr 1.2fr;align-items:center;border-top:1px solid var(--line);padding:34px 0}.timeline article:last-child{border-bottom:1px solid var(--line)}.timeline span{font-size:10px;color:#8b857d}.timeline h2{font-size:28px}.timeline p{font-size:14px;color:#6d6861;line-height:1.7}.onsite.mini{height:70vh}.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;align-items:center}.founder>img{height:650px}.founder h2{font-size:clamp(34px,3.8vw,54px);margin-bottom:38px}.founder>div>p:not(.kicker){font-size:15px;line-height:1.9;color:#66615a;margin-top:18px}.career-band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--brown);color:#fff;padding:70px 6.5vw}.career-band div{display:flex;flex-direction:column;gap:8px;border-right:1px solid rgba(255,255,255,.2);padding-left:30px}.career-band div:first-child{padding-left:0}.career-band div:last-child{border:0}.career-band b{font-size:17px;font-weight:400}.career-band span{font-size:10px;color:rgba(255,255,255,.5)}
.inquiry{min-height:780px;padding:160px 8vw;display:grid;grid-template-columns:1.1fr .9fr;gap:10vw;align-items:center}.inquiry h1{font-size:clamp(42px,5vw,72px);line-height:1.14;font-weight:400;letter-spacing:-.06em}.inquiry>div:first-child>p:last-child{font-size:15px;line-height:1.9;color:#6d6861;margin-top:38px}.contact-card{background:#e4ded4;padding:60px;display:flex;flex-direction:column}.contact-card span{font-size:9px;letter-spacing:.18em;color:#8b745f;margin:28px 0 8px}.contact-card span:first-child{margin-top:0}.contact-card a{font-size:22px}.contact-card p{font-size:15px;line-height:1.7}.contact-card small{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:#77726b}
@media(max-width:800px){.sub-header{height:68px;padding:0 22px;grid-template-columns:1fr 1fr}.sub-header nav{display:none}.page-hero{padding:120px 24px 80px}.page-hero h1{font-size:38px}.work-grid{grid-template-columns:1fr;gap:65px}.work-card>div{height:70vw}.work-hero{grid-template-columns:1fr}.work-hero>div{padding:100px 24px 60px}.work-hero h1{font-size:39px}.work-hero>img{min-height:0;height:75vw}.work-facts{grid-template-columns:repeat(2,1fr);gap:25px;padding:34px 24px}.work-facts div{padding-left:0;border:0}.project-story{grid-template-columns:1fr;gap:28px}.gallery{grid-template-columns:1fr;padding:0 12px 80px;gap:12px}.gallery img,.gallery img:nth-child(3n){grid-column:auto;height:72vw}.info-split,.founder,.inquiry{grid-template-columns:1fr}.number-list>div{grid-template-columns:38px 1fr}.number-list p{grid-column:2;margin-top:10px}.dark-statement{padding:100px 24px}.dark-statement>div{grid-template-columns:1fr}.timeline article{grid-template-columns:38px 1fr}.timeline p{grid-column:2;margin-top:12px}.founder>img{height:115vw}.career-band{grid-template-columns:1fr;gap:25px}.career-band div{padding:0 0 22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}.inquiry{padding:110px 24px}.contact-card{padding:35px 28px}.contact-card a{font-size:18px}}

/* ==========================================================
   정적 사이트로 옮기며 보탠 부분
   - 새 디자인 소스에는 모바일 메뉴가 없어(≤800px 에서 nav 가 숨겨짐)
     휴대폰에서 다른 페이지로 갈 수가 없었다. 햄버거를 넣는다.
   - 상세페이지 스토리가 두 단락 이상이라 반복 가능한 형태로 바꾼다.
   - 관련 시공사례를 2~3개 보여주는 격자.
   ========================================================== */

/* 모바일 메뉴 */
.nav-toggle{display:none;width:34px;height:34px;border:0;background:none;padding:0;
  cursor:pointer;justify-self:end;-webkit-tap-highlight-color:transparent}
.nav-toggle i{display:block;height:1.5px;background:currentColor;margin:6px 0;
  border-radius:2px;transition:transform .26s ease,opacity .18s ease}
#siteHeader .mobile-nav{display:none}
@media(max-width:800px){
  .header,.sub-header{grid-template-columns:1fr auto auto;gap:14px}
  .nav-toggle{display:block}
  .header-cta{font-size:11px;letter-spacing:.04em}
  .mobile-nav{position:absolute;top:100%;left:0;right:0;z-index:9;
    background:var(--paper);border-bottom:1px solid var(--line)}
  .header .mobile-nav{background:rgba(19,18,16,.97);border-bottom-color:rgba(255,255,255,.2)}
  .mobile-nav a{display:block;padding:17px 24px;font-size:15px;
    border-top:1px solid var(--line)}
  .header .mobile-nav a{border-top-color:rgba(255,255,255,.14);color:#fff}
  #siteHeader.is-open .mobile-nav{display:block}
  .is-open .nav-toggle i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .is-open .nav-toggle i:nth-child(2){opacity:0}
  .is-open .nav-toggle i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* 상세페이지 스토리 — 단락이 여러 개인 원문을 그대로 담는다 */
.story-block{display:grid;grid-template-columns:.42fr 1.58fr;gap:5vw;
  align-items:start;padding:72px 0;border-bottom:1px solid var(--line)}
.story-block:first-of-type{padding-top:0}
.story-block:last-of-type{border-bottom:0}
.story-block h2{font-size:clamp(26px,2.6vw,38px)}
.story-block .kicker{margin-bottom:14px}
.story-body p{font-size:16px;line-height:1.95;color:#5d5953;margin-bottom:20px;max-width:760px}
.story-body p:last-child{margin-bottom:0}
@media(max-width:800px){
  .story-block{grid-template-columns:1fr;gap:22px;padding:52px 0}
  .story-block h2{font-size:24px}
  .story-body p{font-size:15px;line-height:1.9}
}

/* 관련 시공사례 */
.related{background:#e6e0d6;padding:120px 6.5vw}
.related>.kicker{margin-bottom:34px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw}
.related-card>div{height:19vw;max-height:300px;overflow:hidden}
.related-card img{transition:transform .6s}
.related-card:hover img{transform:scale(1.03)}
.related-card h3{font-size:17px;font-weight:400;margin-top:18px}
.related-card p{font-size:12px;color:#77726b;margin-top:6px}
@media(max-width:800px){
  .related{padding:80px 24px}
  .related-grid{grid-template-columns:1fr;gap:40px}
  .related-card>div{height:64vw;max-height:none}
}

/* 상담 폼을 새 디자인 톤에 맞춘다 (기능은 그대로) */
.form-wrap{padding:60px 8vw 130px}
.form-wrap .card{background:#fff;border:1px solid var(--line);padding:44px}
@media(max-width:800px){.form-wrap{padding:40px 24px 90px}.form-wrap .card{padding:26px 20px}}

/* 본문 가독성 보조 */
.prose p{font-size:16px;line-height:1.95;color:#5d5953;margin-bottom:20px;max-width:760px}
.prose p:last-child{margin-bottom:0}
.prose h3{font-size:19px;font-weight:400;margin:44px 0 14px}

/* 푸터 공식 채널 — sameAs 와 같은 주소를 화면에도 노출한다 */
.footer-sns{display:flex;gap:18px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.footer-sns a{color:rgba(255,255,255,.56);border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px}
.footer-sns a:hover{color:#fff;border-bottom-color:#fff}
@media(max-width:800px){.footer-sns{justify-content:flex-start;margin-top:0}}

/* 같은 단지·같은 평형이 둘일 때 H1 뒤에 붙는 구분 문구 */
.work-hero h1 span{display:block;margin-top:16px;font-size:max(15px,.34em);line-height:1.5;color:#77726b}
/* 한글은 기본값이 아무 데서나 줄바꿈된다 — 단지명이 쪼개지지 않게 한다 */
.work-hero h1,.related-card h3,.project-info h3{word-break:keep-all;overflow-wrap:break-word}

/* ── 상단바 가독성 ── 원본 소스의 메뉴 11px·상담신청 밑줄 텍스트는 너무 약하다 */
.wordmark{font-size:17px}
.header nav,.sub-header nav{font-size:14px;letter-spacing:.05em;gap:32px}
.header nav a,.sub-header nav a{padding:5px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.header nav a:hover,.sub-header nav a:hover{border-bottom-color:currentColor}

/* 상담 신청은 밑줄 텍스트로는 묻힌다 — 채운 버튼으로 세운다 */
.header-cta{border:0;border-radius:2px;padding:11px 20px;font-size:14px;font-weight:500;
  letter-spacing:.02em;background:#fff;color:var(--ink);transition:background .2s,color .2s}
.header-cta span{margin-left:10px}
.header-cta:hover{background:var(--clay);color:#fff}
.sub-header .header-cta{background:var(--ink);color:#fff}
.sub-header .header-cta:hover{background:var(--clay);color:#fff}

@media(max-width:1080px){.header nav,.sub-header nav{gap:24px;font-size:13px}}
@media(max-width:800px){.header-cta{font-size:13px;letter-spacing:.02em;padding:9px 15px}}
@media(max-width:800px){.header-cta{padding:12px 16px}}

/* 원본 그라데이션은 왼쪽·아래만 덮어서 오른쪽 상단의 메뉴가 사진에 묻힌다 — 상단 스크림을 얹는다 */
.hero-shade{background:
  linear-gradient(180deg,rgba(13,12,10,.45),rgba(13,12,10,0) 150px),
  linear-gradient(90deg,rgba(13,12,10,.58),rgba(13,12,10,.04) 68%),
  linear-gradient(0deg,rgba(13,12,10,.34),transparent 45%)}

/* ══ 프로젝트 케이스 스터디 (2026-09-25) ══════════════════════════
   기존 .story-block / .story-body / .faq-list / .related 를 그대로 재사용하고
   새로 필요한 것만 최소한으로 추가한다. 디자인 톤은 바꾸지 않는다. */

/* 히어로 서브카피 — 설계 포인트 한 줄 */
.work-hero .sub{font-size:17px;line-height:1.7;color:var(--brown);margin-top:22px;max-width:520px;word-break:keep-all}
.work-hero .lede{font-size:15px;line-height:1.9;color:#6b665f;margin-top:26px;max-width:540px;word-break:keep-all}

/* PROJECT SUMMARY — 요청 / 조건 / 해결 */
.proj-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding:76px 6.5vw;border-bottom:1px solid var(--line)}
.proj-summary h2{grid-column:1/-1;font-size:11px;letter-spacing:.16em;color:var(--clay);font-weight:400;margin-bottom:-18px}
.proj-summary h3{font-size:15px;font-weight:500;margin-bottom:14px;letter-spacing:-.01em}
.proj-summary p{font-size:14px;line-height:1.9;color:#5d5953;word-break:keep-all}
.proj-summary>div{border-left:1px solid var(--line);padding-left:26px}

/* PROJECT INFO — 항목이 6~7개라 자동 줄바꿈 */
.work-facts{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));row-gap:26px}
.work-facts div{border-right:0;border-left:1px solid var(--line);padding-left:22px}
.work-facts div:first-child{padding-left:22px}

/* DESIGN SOLUTION — 이 사이트의 시그니처 구간 */
.solution-band{background:#ece7de;border-bottom:1px solid var(--line)}
.solution-band .story-block{border-top:0}

/* 사진 + 캡션 */
.figure{margin:0}
.figure img{width:100%;height:auto;display:block}
.figure figcaption{font-size:13px;line-height:1.8;color:#6d6861;margin-top:14px;max-width:760px;word-break:keep-all}
.photo-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.photo-single,.photo-duo{padding:0 6.5vw 0}
.photo-wide{padding:0}
.photo-wide img{width:100%;height:auto;display:block}

/* PROJECT INSIGHT — 현장에서 나온 설계 생각 한 문장 */
.insight{padding:120px 6.5vw;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.insight blockquote{margin:0 auto;max-width:820px;font-size:clamp(22px,2.6vw,34px);line-height:1.55;font-weight:400;letter-spacing:-.03em;word-break:keep-all}

/* 프로젝트 CTA */
.proj-cta{padding:130px 6.5vw;display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;align-items:start}
.proj-cta h2{font-size:clamp(28px,3.2vw,42px);line-height:1.3;letter-spacing:-.04em;word-break:keep-all}
.proj-cta p{font-size:15px;line-height:1.95;color:#5d5953;margin-bottom:34px;word-break:keep-all}
.proj-cta .cta-btn{display:inline-flex;align-items:center;gap:16px;background:var(--ink);color:#fff;
  padding:18px 30px;border-radius:2px;font-size:15px;transition:background .2s}
.proj-cta .cta-btn:hover{background:var(--clay)}

/* 관련 사례 — 왜 관련 있는지 한 줄 */
.related-card .why{font-size:13px;line-height:1.75;color:#6d6861;margin-top:8px;word-break:keep-all}

@media(max-width:800px){
  .work-hero .sub{font-size:16px;margin-top:18px}
  .proj-summary{grid-template-columns:1fr;gap:30px;padding:56px 24px}
  .proj-summary h2{margin-bottom:-10px}
  .proj-summary>div{padding-left:18px}
  .photo-single,.photo-duo{padding:0 24px}
  .photo-duo{grid-template-columns:1fr;gap:12px}
  .insight{padding:80px 24px}
  .proj-cta{grid-template-columns:1fr;gap:34px;padding:90px 24px}
}
/* 한글 단어가 쪼개지지 않게 — 케이스 스터디 구간 전체 */
.story-block h2,.story-body p,.work-facts b,.faq-list summary,.faq-list details>p,
.faq-heading h2,.proj-summary h3,.proj-summary p{word-break:keep-all;overflow-wrap:break-word}
.work-facts b{line-height:1.5}
@media(max-width:800px){.work-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.work-facts div{padding-left:16px}.work-facts div:first-child{padding-left:16px}}

/* 세로 사진 — 전폭으로 깔면 화면을 넘기므로 높이를 제한한다 */
.photo-single .figure.portrait img{max-height:92vh;width:auto;margin:0 auto}
.photo-wide .figure.portrait img{max-height:92vh;width:auto;margin:0 auto}
@media(max-width:800px){.photo-single .figure.portrait img{max-height:none;width:100%}}