/* 모담디자인 공통 스타일 */
:root{
  /* 웜베이지 단일 톤 — 브라우저 다크 모드와 상관없이 항상 같은 색 */
  color-scheme:light;
  --ground:#F4EADD;      /* 웜베이지 바탕 */
  --surface:#FAF4EC;     /* 밝은 크림 */
  --tint:#ECDDCB;        /* 한 톤 진한 베이지 띠 */
  --line:#DECBB5;
  --ink:#3B2F26;         /* 따뜻한 다크 브라운 글자 */
  --muted:#7C6853;
  --brand:#86684C;       /* 카라멜 브라운 */
  --brand-ink:#FAF4EC;
  --dark:#4A3A2E;        /* 상담 띠 · 푸터 — 코코아 브라운 */
  --dark-ink:#F4EADD;
  --dark-muted:#CDBAA3;
  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
  --sans:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --latin:"Jost","Futura","Avenir Next",sans-serif;
  --wrap:1180px;
  --photo:brightness(.9) contrast(1.05) saturate(.9) sepia(.06);  /* 사진 톤다운 */
}

*{box-sizing:border-box}
[hidden]{display:none!important}  /* 숨김 속성이 display 지정에 덮이지 않게 */
body{margin:0;background:var(--ground);color:var(--ink);font:300 16px/1.75 var(--sans);word-break:keep-all;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font:500 12px/1 var(--latin);letter-spacing:.32em;text-transform:uppercase;color:var(--brand)}
h1,h2,h3{font-family:var(--serif);font-weight:300;text-wrap:balance;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.35}
section{padding-block:clamp(72px,10vw,128px)}
.alt{background:var(--surface)}
.tint{background:var(--tint)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:clamp(36px,5vw,56px)}
.sec-head > div{display:grid;gap:16px}
.sec-head p{margin:0;color:var(--muted);max-width:34em}
.more{font:500 13px/1 var(--latin);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px;color:var(--brand)}
.more:hover{color:var(--ink)}
.todo{color:var(--brand);font-style:normal}

/* 로고 */
.mark{width:auto;color:var(--brand)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .mark{height:34px}
.brand-text{display:grid;gap:5px}
.brand-ko{font:400 15px/1 var(--sans);letter-spacing:.42em;margin-right:-.42em}
.brand-en{font:400 9px/1 var(--latin);letter-spacing:.46em;color:var(--muted)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;font:400 14px/1 var(--sans);letter-spacing:.04em;text-decoration:none;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--brand)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}

/* 헤더 */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.nav-links{display:flex;align-items:center;gap:clamp(22px,3vw,44px);list-style:none;margin:0;padding:0}
.nav-links a{font:400 16px/1 var(--sans);text-decoration:none;color:var(--muted)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:8px;text-decoration-color:var(--brand)}
.nav nav{margin-left:auto;margin-right:clamp(12px,2vw,28px)}  /* 메뉴를 오른쪽(상담 버튼 옆)으로 */
.nav .btn{padding:12px 20px;font-size:14px}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);font:400 13px/1 var(--sans);padding:10px 14px;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav .btn{display:none}
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ground);border-bottom:1px solid var(--line);padding:8px clamp(16px,4vw,40px) 20px}
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:14px 0;font-size:16px;border-bottom:1px solid var(--line)}
}

/* 서브 페이지 머리 */
.page-head{padding-block:clamp(56px,8vw,104px) clamp(44px,5vw,72px);background:var(--tint)}
.page-head .wrap{display:grid;gap:18px}
.page-head h1{font-size:clamp(34px,4.6vw,54px);line-height:1.25}
.page-head p{margin:0;color:var(--muted);max-width:36em;font-size:17px}

/* 홈 히어로 — 사진이 천천히 바뀌는 슬라이드 */
.hero{padding-block:clamp(48px,7vw,96px) clamp(72px,9vw,128px)}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,88px);align-items:center}
.hero-copy{display:grid;gap:28px;justify-items:start}
.hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.22}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero-copy p{margin:0;max-width:30em;color:var(--muted);font-size:17px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
/* 로고의 문틀 모양을 사진 프레임으로 */
.door{position:relative;margin:0}
.frame{position:relative;margin:16px}
.frame::before{content:"";position:absolute;inset:-16px;border:1.5px solid var(--brand);pointer-events:none}
.slides{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line)}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.slides img.on{opacity:1}
.door figcaption{margin-inline:16px;display:flex;justify-content:space-between;gap:16px;margin-top:24px;font:400 12px/1.4 var(--latin);letter-spacing:.16em;color:var(--muted)}
.dots{display:flex;gap:6px}
.dots button{width:18px;height:2px;padding:0;border:0;background:var(--line);cursor:pointer}
.dots button[aria-current="true"]{background:var(--brand)}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
}

/* WHY — 가치 2×2 */
.why{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.why-head{display:grid;gap:18px;position:sticky;top:120px}
.why-head p{margin:0;color:var(--muted)}
.values{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,44px) clamp(24px,3vw,40px)}
.values article{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:1px solid var(--ink)}
.values .eyebrow{color:var(--muted)}
.values h3{font-size:21px;line-height:1.45}
.values p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:860px){.why{grid-template-columns:1fr}.why-head{position:static}}
@media (max-width:520px){.values{grid-template-columns:1fr}}

/* 3단 텍스트 */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.trio article{display:grid;gap:14px;align-content:start;padding-top:24px;border-top:1px solid var(--ink)}
.trio .eyebrow{color:var(--muted)}
.trio h3{font-size:22px;line-height:1.45}
.trio p{margin:0;color:var(--muted)}
@media (max-width:760px){.trio{grid-template-columns:1fr}}

/* 포트폴리오 카드 */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,3vw,44px) clamp(16px,2.4vw,28px)}
.work{display:grid;gap:10px;align-content:start;text-decoration:none}
.work .ph{position:relative;overflow:hidden;background:var(--line)}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s ease}
.work:hover img{transform:scale(1.04)}
.work .tag{position:absolute;left:12px;top:12px;padding:6px 10px;background:var(--ground);font:500 11px/1 var(--latin);letter-spacing:.14em;color:var(--ink)}
.work .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px}
.work h3{font:400 17px/1.45 var(--sans)}
.work .size{font:400 13px/1 var(--latin);letter-spacing:.08em;color:var(--brand);white-space:nowrap}
.work .kind{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:960px){.works{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.works{grid-template-columns:1fr}}

/* 필터 (알약형) */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vw,44px)}
.filters button{font:400 14px/1 var(--sans);padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}

/* 진행 과정 (홈 요약) */
.steps{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;gap:10px;align-content:start;padding:28px 22px 0 0;position:relative}
.steps li::before{content:counter(s,decimal-leading-zero);font:400 13px/1 var(--latin);letter-spacing:.14em;color:var(--brand)}
.steps li::after{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.steps h3{font:500 18px/1.4 var(--sans)}
.steps p{margin:0;font-size:15px;color:var(--muted)}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,1fr);row-gap:28px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* 진행 과정 (상세 — 단계 카드) */
.stage{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);list-style:none;margin:0;padding:0;counter-reset:st}
.stage li{counter-increment:st;display:grid;gap:10px;align-content:start;padding:26px 24px 28px;background:var(--surface);border:1px solid var(--line)}
.stage li::before{content:counter(st,decimal-leading-zero);font:400 28px/1 var(--latin);color:var(--brand)}
.stage .phase{font:500 11px/1 var(--latin);letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.stage h3{font:500 18px/1.4 var(--sans)}
.stage p{margin:0;font-size:15px;color:var(--muted)}
@media (max-width:960px){.stage{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stage{grid-template-columns:1fr}}

/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:22px 0;font:400 17px/1.5 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 22px/1 var(--latin);color:var(--brand)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 24px;color:var(--muted);max-width:44em}

/* 지역 칩 */
.area-grid{display:grid;grid-template-columns:auto 1fr;gap:24px 64px;align-items:center}
.area-grid h2{font-size:clamp(24px,2.6vw,30px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chips li{padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-size:15px;background:var(--ground)}
@media (max-width:760px){.area-grid{grid-template-columns:1fr}}

/* 이야기 (블로그) */
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,40px) clamp(20px,3vw,36px)}
.tip{display:grid;grid-template-rows:auto auto 1fr;gap:12px;align-content:start;text-decoration:none}
.tip img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--line)}
.tip .eyebrow{color:var(--muted);letter-spacing:.2em}
.tip h3{font:400 17px/1.55 var(--sans)}
.tip:hover h3{color:var(--brand)}
@media (max-width:860px){.tips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tips{grid-template-columns:1fr}}

/* 소개 */
.statement{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.statement h2{font-size:clamp(30px,3.8vw,46px);line-height:1.4}
.statement .body{display:grid;gap:18px;color:var(--muted);font-size:17px}
.statement .body p{margin:0}
@media (max-width:760px){.statement{grid-template-columns:1fr}}
.quote{text-align:center;display:grid;gap:22px;justify-items:center}
.quote h2{font-size:clamp(28px,3.6vw,44px);line-height:1.45}
.quote p{margin:0;color:var(--muted);max-width:30em}

/* 정보 표 (회사 정보 · 프로젝트 정보) */
.facts{display:grid;border-top:1px solid var(--ink);margin:0}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.facts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--line);margin:0}
.facts-row div{display:grid;gap:8px;padding:22px 20px;border-left:1px solid var(--line)}
.facts-row div:first-child{border-left:0;padding-left:0}
.facts-row dt{font:500 11px/1 var(--latin);letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.facts-row dd{margin:0;font-size:16px}
@media (max-width:760px){.facts-row{grid-template-columns:1fr 1fr}.facts-row div{border-left:0;padding-left:0;border-top:1px solid var(--line)}.facts-row div:nth-child(-n+2){border-top:0}}

/* 채널 */
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.channel{display:grid;gap:8px;padding:24px;border:1px solid var(--line);text-decoration:none;background:var(--ground)}
.channel strong{font:500 17px/1.4 var(--sans)}
.channel span{font-size:14px;color:var(--muted)}
.channel:hover{border-color:var(--brand)}
@media (max-width:760px){.channels{grid-template-columns:1fr}}

/* 프로젝트 상세 */
.proj-hero{position:relative;background:var(--dark);color:var(--dark-ink);padding:0}
.proj-hero img{width:100%;height:clamp(320px,52vw,560px);object-fit:cover;opacity:.55}
.proj-hero .wrap{position:absolute;left:0;right:0;bottom:clamp(28px,5vw,56px);display:grid;gap:14px}
.proj-hero .eyebrow{color:var(--dark-ink);opacity:.8}
.proj-hero h1{font-size:clamp(30px,4.4vw,52px);line-height:1.25}
.proj-hero p{margin:0;font-size:17px;opacity:.85}
.back{display:inline-block;margin-bottom:28px;font:500 12px/1 var(--latin);letter-spacing:.2em;text-decoration:none;color:var(--muted)}
.back:hover{color:var(--ink)}
.story{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,72px);margin-top:clamp(40px,5vw,64px)}
.story .body{display:grid;gap:16px;color:var(--muted)}
.story .body p{margin:0}
.spec{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.spec li{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.spec b{font-weight:500}
@media (max-width:760px){.story{grid-template-columns:1fr}}

/* 공간별 갤러리 */
.gallery .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.gallery .tabs button{font:400 14px/1 var(--sans);padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.gallery .tabs button small{margin-left:6px;font-family:var(--latin);color:var(--brand)}
.gallery .tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.stage-img{position:relative;background:var(--line)}
.stage-img img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--tint)}  /* 세로 사진도 잘리지 않게 */
.stage-img .nav-btn{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border:0;background:color-mix(in srgb,var(--ground) 85%,transparent);color:var(--ink);font:300 22px/1 var(--latin);cursor:pointer}
.stage-img .prev{left:0}.stage-img .next{right:0}
.counter{display:flex;justify-content:space-between;margin-top:12px;font:400 13px/1 var(--latin);letter-spacing:.12em;color:var(--muted)}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
.thumbs button{padding:0;border:2px solid transparent;background:none;cursor:pointer}
.thumbs button[aria-current="true"]{border-color:var(--brand)}
.thumbs img{width:100%;aspect-ratio:1;object-fit:cover}

/* 후기 */
.sample-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 clamp(32px,4vw,48px);padding:16px 20px;border:1px dashed var(--brand);color:var(--ink);font-size:15px}
.sample-note b{font-weight:500;color:var(--brand);white-space:nowrap}
.score{display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,44px);background:var(--surface);border:1px solid var(--line)}
.score .avg{display:grid;gap:6px;justify-items:start}
.score .avg strong{font:400 64px/1 var(--latin);color:var(--ink)}
.score .avg span{font-size:14px;color:var(--muted)}
.score .items{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.score .items div{display:flex;justify-content:space-between;gap:12px;font-size:15px;border-bottom:1px solid var(--line);padding-bottom:10px}
.score .items b{font:400 15px/1 var(--latin)}
.bars{display:grid;gap:8px;font:400 13px/1 var(--latin);color:var(--muted)}
.bars div{display:grid;grid-template-columns:28px 1fr 20px;gap:10px;align-items:center}
.bars i{display:block;height:6px;background:var(--line)}
.bars i b{display:block;height:100%;background:var(--brand)}
@media (max-width:860px){.score{grid-template-columns:1fr}}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.review{display:grid;gap:14px;align-content:start;padding:26px;background:var(--surface);border:1px solid var(--line)}
.review .stars{color:var(--brand);letter-spacing:.2em;font-size:14px}
.review blockquote{margin:0;font:300 16px/1.7 var(--serif)}
.review .who{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
@media (max-width:960px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reviews{grid-template-columns:1fr}}

/* 상담 */
.contact-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,6vw,80px);align-items:start}
@media (max-width:860px){.contact-layout{grid-template-columns:1fr}}
.contact-side{display:grid;gap:28px}
.contact-side h2{font-size:clamp(26px,3vw,34px)}
.primary-cta{display:grid;gap:10px;padding:26px;background:var(--brand);color:var(--brand-ink);text-decoration:none}
.primary-cta strong{font:500 18px/1.4 var(--sans)}
.primary-cta span{font-size:14px;opacity:.85}
.primary-cta:hover{background:var(--ink)}
.tel{font:400 30px/1 var(--latin);letter-spacing:.04em;user-select:all}
.form{display:grid;gap:22px;padding:clamp(24px,4vw,40px);background:var(--surface);border:1px solid var(--line)}
.form h2{font-size:24px}
.form .hint{margin:-10px 0 0;font-size:14px;color:var(--muted)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.field{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font:500 14px/1 var(--sans);padding:0}
.field legend{margin-bottom:8px}
.field label small{font-weight:300;color:var(--muted);margin-left:6px}
.field input,.field select,.field textarea{width:100%;font:300 16px/1.5 var(--sans);color:var(--ink);background:var(--ground);border:1px solid var(--line);padding:13px 14px;border-radius:0}
.field input[type="file"]{padding:10px;font-size:14px}
.field textarea{min-height:120px;resize:vertical}
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pick label{display:flex;align-items:center;justify-content:center;padding:12px 8px;border:1px solid var(--line);background:var(--ground);font:400 14px/1.2 var(--sans);text-align:center;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick input:checked + span{color:var(--brand-ink)}
.pick label:has(input:checked){background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.pick label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:560px){.pick{grid-template-columns:1fr 1fr}}
.agree{font-size:13px;color:var(--muted);line-height:1.7}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.check input{margin-top:5px;accent-color:var(--brand)}
.form-note{margin:0;padding:16px 18px;border:1px solid var(--brand);color:var(--ink);font-size:15px}

/* 다크 상담 띠 */
.cta{background:var(--dark);color:var(--dark-ink)}
.cta-grid{display:grid;grid-template-columns:1fr auto;gap:32px 48px;align-items:end}
.cta .eyebrow{color:var(--dark-muted)}
.cta h2{margin-top:18px}
.cta p{margin:16px 0 0;color:var(--dark-muted);max-width:34em}
.cta .actions{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn{background:var(--dark-ink);color:var(--dark);border-color:var(--dark-ink)}
.cta .btn:hover{background:transparent;color:var(--dark-ink)}
.cta .btn.ghost{background:transparent;color:var(--dark-ink);border-color:var(--dark-muted)}
.cta .btn.ghost:hover{border-color:var(--dark-ink)}
@media (max-width:760px){.cta-grid{grid-template-columns:1fr}}

/* 푸터 (다크) */
.site-footer{background:var(--dark);color:var(--dark-ink);padding-block:64px 56px;border-top:1px solid color-mix(in srgb,var(--dark-muted) 30%,transparent)}
.site-footer .mark{color:var(--dark-ink)}
.site-footer .brand-en{color:var(--dark-muted)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-intro{display:grid;gap:18px;align-content:start}
.foot-intro p{margin:0;font-size:14px;color:var(--dark-muted);max-width:26em}
.foot-col{display:grid;gap:10px;align-content:start;font-size:14px}
.foot-col h3{font:500 11px/1 var(--latin);letter-spacing:.24em;color:var(--dark-muted);margin-bottom:6px}
.foot-col a{text-decoration:none;color:var(--dark-ink)}
.foot-col a:hover{text-decoration:underline;text-underline-offset:4px}
.biz{margin:48px 0 0;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--dark-muted) 30%,transparent);font-size:13px;line-height:1.9;color:var(--dark-muted)}
.biz .todo{color:var(--dark-ink)}
.copy{margin-top:10px;font:400 12px/1 var(--latin);letter-spacing:.12em;color:var(--dark-muted)}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot-intro{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 사진 톤다운 — 밝은 현장 사진을 웜베이지 톤에 맞춰 살짝 낮춤 */
.slides img,.work img,.tip img,.stage-img img,.thumbs img{filter:var(--photo)}

/* 소개 — 대표 */
.ceo{display:grid;grid-template-columns:minmax(0,.8fr) 1fr;gap:clamp(40px,7vw,104px);align-items:center}
.ceo-photo{margin:0;max-width:440px}
.ceo-photo img{width:100%;aspect-ratio:2/3;object-fit:cover;filter:var(--photo) sepia(.18)}
.ceo-text{display:grid;gap:22px;align-content:start}
.ceo-text h2{font-size:clamp(30px,3.6vw,44px);line-height:1.4}
.ceo-text .body{display:grid;gap:16px;color:var(--muted);font-size:17px;max-width:32em}
.ceo-text .body p{margin:0}
.sign{margin:0;font:400 15px/1.5 var(--serif)}
@media (max-width:760px){.ceo{grid-template-columns:1fr}.ceo-photo{max-width:360px}}
.slides img[src*="sinhyeon"],.stage-img img[src*="sinhyeon"],.thumbs img[src*="sinhyeon"],.work img[src*="sinhyeon"]{filter:none}  /* 전문 촬영본은 원래 톤이 차분해서 필터 제외 */

/* 헤더 SNS 아이콘 (인스타 · 네이버 블로그 · 카카오톡) */
.sns{display:flex;align-items:center;gap:14px;margin-right:clamp(10px,1.6vw,22px)}
.sns a{display:flex;color:var(--muted);transition:color .2s}
.sns a:hover{color:var(--ink)}
.sns svg{width:21px;height:21px}
@media (max-width:860px){.sns{margin-left:auto;margin-right:4px;gap:12px}}

/* 실시간 견적문의 — 화면 오른쪽 아래 고정 */
.quick{position:fixed;right:clamp(16px,2.2vw,32px);bottom:calc(clamp(16px,2.2vw,32px) + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:9px;padding:11px 18px 11px 14px;border-radius:999px;background:var(--dark);color:var(--dark-ink);text-decoration:none;font:500 12.5px/1.25 var(--sans);box-shadow:0 8px 24px rgb(59 47 38 / .25);transition:transform .2s}
.quick:hover{transform:translateY(-2px)}
.quick svg{width:22px;height:22px;color:#FEE500}

/* 상담 페이지 보조 버튼 · 유입 경로 */
.alt-cta{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.alt-cta:hover{background:var(--tint);color:var(--ink)}
.sources{display:flex;flex-wrap:wrap;gap:12px 24px}
.sources input:not([type]){width:130px;margin-left:6px;padding:6px 10px;border:1px solid var(--line);background:var(--ground);font:300 14px/1.4 var(--sans);color:var(--ink)}
.field input[type="checkbox"],.field input[type="radio"]{width:auto;padding:0}
.sources .check{white-space:nowrap;align-items:center}
.sources .check input[type="checkbox"]{margin-top:0}

/* ── 홈 메인 — 화면 가득 사진 + 가운데 제목 (오매오매 스튜디오 참고) ── */
.hero-full{position:relative;height:100vh;height:100svh;min-height:560px;padding:0;overflow:hidden;background:var(--dark);color:#fff}
.hero-full .slides{position:absolute;inset:0;aspect-ratio:auto}
.hero-full .slides img{filter:none}
.hero-full .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgb(30 22 16 / .45) 0%,rgb(30 22 16 / .28) 40%,rgb(30 22 16 / .5) 100%)}
.hero-script{position:absolute;left:clamp(16px,4vw,56px);bottom:calc(64px + env(safe-area-inset-bottom,0px));margin:0;font:italic 300 clamp(40px,6.5vw,100px)/1 var(--serif);letter-spacing:-.02em;color:rgb(255 255 255 / .14);pointer-events:none;white-space:nowrap}
.hero-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:20px;text-align:center;padding-inline:16px}
.hero-center .eyebrow{color:rgb(255 255 255 / .85)}
.hero-center h1{font:400 clamp(34px,5.4vw,68px)/1.2 var(--serif);letter-spacing:-.01em;text-shadow:0 2px 24px rgb(0 0 0 / .25)}
.hero-center p{margin:0;font-size:clamp(15px,1.4vw,17px);color:rgb(255 255 255 / .88)}
.hero-center .hero-cta{margin-top:14px;justify-content:center}
.btn.line{background:transparent;border:1px solid rgb(255 255 255 / .75);color:#fff;min-width:132px}
.btn.line:hover{background:#fff;color:var(--ink)}
.hero-foot{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;gap:16px;padding-inline:clamp(16px,4vw,56px);padding-right:clamp(170px,14vw,220px);font:400 12px/1.4 var(--latin);letter-spacing:.16em;color:rgb(255 255 255 / .8)}
.hero-foot .dots button{background:rgb(255 255 255 / .35)}
.hero-foot .dots button[aria-current="true"]{background:#fff}
@media (max-width:600px){.hero-foot{padding-right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* 홈에서는 메뉴가 사진 위에 투명하게 얹히고, 내리면 베이지로 바뀐다 */
.home .site-header{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .3s,border-color .3s}
.home .site-header:not(.scrolled) .brand,.home .site-header:not(.scrolled) .brand-en,.home .site-header:not(.scrolled) .mark,
.home .site-header:not(.scrolled) .nav-links a,.home .site-header:not(.scrolled) .sns a,.home .site-header:not(.scrolled) .menu-btn{color:#fff}
.home .site-header:not(.scrolled) .sns svg path[fill^="var"],.home .site-header:not(.scrolled) .sns svg text{fill:var(--dark)}
.home .site-header:not(.scrolled) .nav .btn{background:transparent;border-color:rgb(255 255 255 / .75);color:#fff}
.home .site-header:not(.scrolled) .menu-btn{border-color:rgb(255 255 255 / .6)}
.home .site-header .nav-links.open a{color:var(--ink)}
.home .site-header.scrolled{background:color-mix(in srgb,var(--ground) 92%,transparent);border-bottom-color:var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* 메인 가운데 — 로고 + 반투명 버튼 */
.hero-logo{width:clamp(150px,17vw,230px);height:auto;filter:drop-shadow(0 2px 18px rgb(0 0 0 / .25))}
.hero-center{gap:34px}
.btn.glass{background:rgb(255 255 255 / .16);border:1px solid rgb(255 255 255 / .55);color:#fff;min-width:140px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn.glass:hover{background:rgb(255 255 255 / .9);color:var(--ink)}
.hero-foot{justify-content:center;padding-right:clamp(16px,4vw,56px)}

/* 헤더 — 로고(왼쪽) · 메뉴(가운데) · 아이콘(오른쪽) */
.nav{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
.nav .brand{justify-self:start}
.nav nav{margin:0}
.nav-right{justify-self:end;display:flex;align-items:center;gap:16px}
.sns{margin:0}
@media (max-width:860px){.nav{grid-template-columns:1fr auto}.nav nav{position:static}.sns{margin:0}}

/* 상담 — 부분 수리 */
.pick-3{grid-template-columns:repeat(3,1fr)}
.partial{padding:18px 20px;background:var(--ground);border:1px dashed var(--line)}
.partial-note{display:grid;gap:8px;padding:20px 22px;border:1px solid var(--line);background:var(--surface)}
.partial-note strong{font:500 16px/1.4 var(--sans);color:var(--brand)}
.partial-note p{margin:0;font-size:14px;color:var(--muted)}

/* 간단 견적 */
.est{display:grid;gap:clamp(24px,3vw,36px)}
.est .sample-note{margin:0}
.est-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;margin:0;padding:0}
.est-steps li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:2px solid var(--line);font-size:14px;color:var(--muted)}
.est-steps b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);font:500 12px/1 var(--latin)}
.est-steps li[aria-current]{border-color:var(--brand);color:var(--ink)}
.est-steps li[aria-current] b,.est-steps li.done b{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.est-steps li.done{border-color:var(--brand)}
.est-panel{display:grid;gap:10px}
.est-panel h2{font-size:clamp(24px,2.6vw,32px)}
.est-hint{margin:0 0 12px;color:var(--muted);font-size:15px}
.est-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.est-card{display:grid;gap:8px;align-content:start;text-align:left;padding:22px 22px 24px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.est-card strong{font:500 18px/1.4 var(--sans)}
.est-card span{font-size:14px;color:var(--muted)}
.est-card em{font-style:normal;font:500 14px/1.4 var(--latin);color:var(--brand)}
.est-card ul{margin:6px 0 0;padding-left:18px;font-size:14px;color:var(--muted)}
.est-card:hover{border-color:var(--brand)}
.est-card[aria-pressed="true"]{border-color:var(--brand);background:var(--tint);box-shadow:inset 0 0 0 1px var(--brand)}
.est-result{display:grid;gap:18px;justify-items:start;padding:clamp(24px,4vw,44px);background:var(--surface);border:1px solid var(--line)}
.est-result strong{font:400 clamp(28px,4vw,44px)/1.2 var(--serif);color:var(--ink)}
.est-result .facts{width:100%}
.est-actions{display:flex;flex-wrap:wrap;gap:12px}
.est-nav{display:flex;justify-content:space-between;gap:12px}
.est-nav .btn[disabled]{opacity:.4;cursor:not-allowed}
.process-link a,.stage p a{color:var(--brand)}
@media (max-width:860px){.est-cards{grid-template-columns:1fr}.est-steps{grid-template-columns:repeat(2,1fr)}}

/* 메인 사진 위 글씨 — 웜베이지 톤 */
:root{--hero-ink:#F0E2D0}
.hero-full{color:var(--hero-ink)}
.btn.glass{background:rgb(240 226 208 / .14);border-color:rgb(240 226 208 / .6);color:var(--hero-ink)}
.btn.glass:hover{background:var(--hero-ink);color:var(--ink)}
.hero-foot .dots button{background:rgb(240 226 208 / .35)}
.hero-foot .dots button[aria-current="true"]{background:var(--hero-ink)}
.home .site-header:not(.scrolled) .brand,.home .site-header:not(.scrolled) .brand-en,.home .site-header:not(.scrolled) .mark,
.home .site-header:not(.scrolled) .nav-links a,.home .site-header:not(.scrolled) .sns a,.home .site-header:not(.scrolled) .menu-btn{color:var(--hero-ink)}
.home .site-header:not(.scrolled) .menu-btn{border-color:rgb(240 226 208 / .6)}

/* 진행 과정 — 단계별 '고객님 / 모담디자인은' (위티디자인 구성 참고) */
.flow-head h1 em{font-style:normal;color:var(--brand)}
.flow-head .more{justify-self:start;margin-top:6px}
.flow{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.flow > li{display:grid;grid-template-columns:minmax(180px,.8fr) 2fr;gap:20px clamp(28px,5vw,72px);padding-block:clamp(28px,4vw,44px);border-bottom:1px solid var(--line)}
.flow-title{display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:12px;row-gap:6px}
.flow-no{font:500 13px/1.9 var(--latin);letter-spacing:.12em;color:var(--brand)}
.flow-title h3{font:400 clamp(22px,2.2vw,26px)/1.3 var(--serif)}
.flow-en{grid-column:2;font:500 11px/1 var(--latin);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.flow-body{display:grid;gap:18px}
.flow-body > div{display:grid;gap:6px}
.flow-who{font:500 12px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.flow-body > div:nth-child(2) .flow-who{color:var(--brand)}
.flow-body p{margin:0;max-width:40em}
.flow-get{justify-self:start;display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center;padding:9px 14px;border:1px solid var(--brand);font-size:14px;color:var(--ink)}
.flow-get b{font:500 12px/1 var(--sans);color:var(--brand)}
@media (max-width:760px){.flow > li{grid-template-columns:1fr}}

/* 상담 신청 — 우리 집 라이프스타일 (선택) */
.life{display:grid;gap:0;border:1px solid var(--line);background:var(--ground)}
.life-head{display:grid;gap:4px;padding:18px 20px;border-bottom:1px solid var(--line)}
.life-head strong{font:500 16px/1.4 var(--sans);color:var(--brand)}
.life-head span{font-size:13px;color:var(--muted)}
.life details{border-bottom:1px solid var(--line)}
.life details:last-child{border-bottom:0}
.life summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;font:500 15px/1.4 var(--sans)}
.life summary small{font-weight:300;font-size:12px;color:var(--muted);margin-right:auto;margin-left:8px}
.life summary::-webkit-details-marker{display:none}
.life summary::after{content:"+";font:300 20px/1 var(--latin);color:var(--brand)}
.life details[open] summary::after{content:"−"}
.life-body{display:grid;gap:18px;padding:4px 20px 22px}
.life-body .field input,.life-body .field select,.life-body .field textarea{background:var(--surface)}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.row-3 input{width:100%;font:300 15px/1.5 var(--sans);padding:11px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pick label:has(input[type="radio"]:not(:checked)){background:var(--surface)}
.form .row-3{grid-template-columns:repeat(3,1fr)}

/* 간단 견적 — 공정 체크형 (2026-09-25) */
.est-steps-7{grid-template-columns:repeat(7,1fr)}
.est-steps-7 li{padding:10px 8px;gap:6px;font-size:13px;white-space:nowrap}
@media (max-width:860px){.est-steps-7{grid-template-columns:repeat(4,1fr)}}
@media (max-width:480px){.est-steps-7{grid-template-columns:repeat(3,1fr)}.est-steps-7 li{font-size:12px}}
.est-q{display:grid;gap:12px;padding:20px 0;border-top:1px solid var(--line)}
.est-q:first-of-type{border-top:0;padding-top:4px}
.est-qt{margin:0;font:500 16px/1.5 var(--sans);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.est-qt small{font:300 13px/1 var(--sans);color:var(--muted)}
.est-chips{display:flex;flex-wrap:wrap;gap:8px}
.est-chip{font:400 15px/1.2 var(--sans);padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.est-chip:hover{border-color:var(--brand)}
.est-chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.est-help{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border-radius:50%;border:0;background:var(--muted);color:var(--surface);font:500 12px/1 var(--latin);cursor:pointer}
.est-area{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.est-area input{width:120px;font:300 18px/1.4 var(--sans);padding:11px 14px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.est-area > span{font-size:15px;color:var(--muted);margin-right:8px}
.est-note{margin:0;font-size:13px;color:var(--muted)}
.est-counts{display:flex;flex-wrap:wrap;gap:12px 28px}
.est-counts label{display:flex;align-items:center;gap:10px;font:500 16px/1.4 var(--sans)}
.est-counts select,.est-select{font:300 16px/1.4 var(--sans);padding:10px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.est-select{max-width:260px}
.est-sum{display:grid;gap:18px;width:100%}
.est-sum-g{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.est-sum-g h3{font:500 15px/1.4 var(--sans);color:var(--brand)}
.est-sum-g ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.est-sum-g li{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:15px}
.est-sum-g li b{font-weight:500;min-width:7em}
.est-result #est-total{font-size:clamp(26px,3.4vw,38px)}
.est-sheet{position:fixed;inset:0;z-index:30;display:grid;place-items:end center;background:rgb(59 47 38 / .45);padding:16px}
.est-sheet[hidden]{display:none}
.est-sheet-box{display:grid;gap:12px;justify-items:start;width:min(520px,100%);padding:24px;background:var(--surface);border:1px solid var(--line)}
.est-sheet-box strong{font:500 18px/1.4 var(--sans)}
.est-sheet-box p{margin:0;color:var(--muted);font-size:15px}
@media (min-width:700px){.est-sheet{place-items:center}}
.row-2s{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* 간단 견적 — 금액 · 등급 (2026-09-25) */
.est-grades{display:grid;gap:10px;width:100%;padding-top:16px;border-top:1px solid var(--line)}
.est-grades h3{font:500 15px/1.4 var(--sans);color:var(--brand)}
.est-grade-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 16px}
.est-grade-list label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.est-grade-list select{font:400 15px/1.4 var(--sans);padding:9px 10px;border:1px solid var(--line);background:var(--ground);color:var(--ink)}
.est-cost{border-bottom:1px solid var(--line)}
.est-cost summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;padding:12px 0;font-size:15px}
.est-cost summary::-webkit-details-marker{display:none}
.est-cost summary span::before{content:"+";display:inline-block;width:1.2em;color:var(--brand)}
.est-cost[open] summary span::before{content:"−"}
.est-cost summary b{font-weight:500}
.est-cost ul{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:8px}
.est-cost li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding-left:1.2em}
.est-cost li span{display:grid;gap:2px}
.est-cost li small{color:var(--muted);font-size:12px}
.est-cost li em{font-style:normal;color:var(--brand);font-size:12px}
.est-cost li b{font-weight:400;white-space:nowrap}

/* 마이페이지 — 단가 관리 */
.my-link{margin-left:12px;color:inherit;opacity:.7}
.my{display:grid;gap:18px}
.my-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.my-tabs{display:flex;flex-wrap:wrap;gap:8px}
.my-tabs button{font:400 14px/1 var(--sans);padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.my-tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
#my-search{min-width:min(280px,100%);font:300 15px/1.4 var(--sans);padding:10px 14px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.my-mode{margin:0;padding:12px 16px;border:1px dashed var(--brand);font-size:14px}
.my-count{margin:0;font-size:13px;color:var(--muted)}
.my-group{display:grid;gap:10px;margin-bottom:18px}
.my-group header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid var(--ink);padding-bottom:8px}
.my-group h2{font:500 18px/1.4 var(--sans)}
.my-group header span{font-size:13px;color:var(--muted)}
.my-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.my-table table{width:100%;border-collapse:collapse;min-width:860px;font-size:14px}
.my-table th{text-align:left;font:500 12px/1.3 var(--sans);color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.my-table td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle}
.my-table .num{text-align:right}
.my-table .ctr{text-align:center}
.my-table input:not([type="checkbox"]){width:100%;min-width:0;font:300 14px/1.4 var(--sans);padding:7px 8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.my-table input[type="number"]{text-align:right}
.my-table input[type="checkbox"]{accent-color:var(--brand);width:18px;height:18px}
.my-table input.w-s{width:64px}.my-table input.w-m{width:84px}.my-table input.w-l{width:120px}
.my-table td:first-child{min-width:260px}
.my-table .cond{font-size:12px;color:var(--muted);min-width:180px}
.my-table tr.zero td{background:color-mix(in srgb,var(--tint) 45%,transparent)}
.my-table em{font-style:normal;color:var(--brand);font-size:12px}
.my-basic{display:grid;gap:18px;max-width:640px}
.my-basic label{display:grid;gap:6px;font:500 14px/1.4 var(--sans)}
.my-basic input,.my-basic textarea{font:300 15px/1.5 var(--sans);padding:10px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.my-basic input{max-width:140px}
.my-basic small{font-weight:300;color:var(--muted);font-size:13px}
.my-meta{margin:0;font-size:13px;color:var(--muted)}
.my-empty{color:var(--muted)}
.my-actions{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;padding:14px 0;background:var(--ground);border-top:1px solid var(--line)}
.my-actions #my-state{margin-right:auto;font-size:13px;color:var(--muted)}
.my-actions .btn[disabled]{opacity:.45;cursor:not-allowed}
.my-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:40;margin:0;padding:12px 18px;background:var(--dark);color:var(--dark-ink);font-size:14px;max-width:calc(100% - 32px)}

/* A/S 신청 (2026-09-25) */
.as-steps{display:grid;gap:14px}
.as-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:as;border-top:1px solid var(--line)}
.as-steps li{counter-increment:as;display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.as-steps li::before{content:counter(as,decimal-leading-zero);grid-row:span 2;font:400 18px/1.3 var(--latin);color:var(--brand)}
.as-steps li b{font:500 16px/1.4 var(--sans)}
.as-steps li span{font-size:14px;color:var(--muted)}
.as-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.as-thumbs img{width:76px;height:76px;object-fit:cover;border:1px solid var(--line)}
.as-thumbs:empty{display:none}
.as-note{display:grid;gap:12px;padding:16px 18px;border:1px dashed var(--brand);background:var(--ground)}
.as-note p{margin:0;font-size:14px}

/* 홈 — 상담은 하루부터 (2026-09-25) */
.first-day{display:grid;gap:clamp(32px,4vw,52px)}
.fd-head{display:grid;gap:16px;max-width:40em}
.fd-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.35}
.fd-head p{margin:0;color:var(--muted)}
.fd-questions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:fd;border-top:1px solid var(--ink)}
.fd-questions li{counter-increment:fd;display:grid;gap:10px;align-content:start;padding:22px 20px 24px 0}
.fd-questions li::before{content:"Q" counter(fd);font:500 12px/1 var(--latin);letter-spacing:.2em;color:var(--brand)}
.fd-questions b{font:400 20px/1.45 var(--serif)}
.fd-questions span{font-size:15px;color:var(--muted)}
.fd-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fd-card{display:grid;gap:10px;align-content:start;padding:28px 28px 26px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .2s,background .2s}
.fd-card:hover{border-color:var(--brand);background:var(--tint)}
.fd-card strong{font:500 20px/1.45 var(--sans)}
.fd-card span:not(.eyebrow){font-size:15px;color:var(--muted)}
.fd-card em{font-style:normal;font:500 13px/1 var(--latin);letter-spacing:.14em;color:var(--brand);margin-top:6px}
@media (max-width:980px){.fd-questions{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.fd-questions,.fd-actions{grid-template-columns:1fr}.fd-questions li{padding-right:0;border-bottom:1px solid var(--line)}}
.as-warranty{display:grid;gap:10px;padding:24px 26px;background:var(--dark);color:var(--dark-ink)}
.as-warranty .eyebrow{color:var(--dark-muted)}
.as-warranty strong{font:400 24px/1.4 var(--serif)}
.as-warranty p{margin:0;font-size:15px;color:var(--dark-ink)}
.as-warranty p.small{font-size:13px;color:var(--dark-muted)}
.as-wr{font-size:13px;color:var(--brand)}
.as-wr.over{color:var(--muted)}

/* ── 글씨 크기 · 굵기 (2026-09-27) — 위티디자인 · 이고디자인 실측 기준으로 맞춤 ──
   두 사이트: 본문 14~16px · 굵기 400, 큰 제목 48px, 섹션 제목 36px, 소제목 18px.
   모담: 가는 300 → 400으로 또렷하게, 제목은 한 단계씩 줄여 차분하게. 되돌리기: css/style.css.bak-typo */
body{font-weight:400;font-size:15px;line-height:1.72}
h1,h2,h3{font-weight:400}
h2{font-size:clamp(26px,3vw,36px)}
.page-head h1{font-size:clamp(32px,4vw,48px)}
.page-head p{font-size:16px}
.proj-hero h1{font-size:clamp(30px,3.6vw,46px)}
.statement h2,.quote h2{font-size:clamp(26px,3.2vw,38px)}
.ceo-text h2{font-size:clamp(28px,3.2vw,38px)}
.fd-head h2{font-size:clamp(26px,3vw,36px)}
.contact-side h2{font-size:clamp(24px,2.6vw,30px)}
.values h3{font-size:19px}
.flow-title h3{font-size:clamp(20px,2vw,22px)}
.trio h3{font-size:19px}
.work h3{font-weight:500}
.nav-links a{font-size:15px}
.biz{font-size:12px}
.review blockquote{font-weight:400}
.field input,.field select,.field textarea,.row-3 input,.sources input:not([type]),.est-area input,.est-counts select,.est-select,#my-search,.my-table input:not([type="checkbox"]),.my-basic input,.my-basic textarea{font-weight:400}
.field label small,.life summary small,.est-qt small,.my-basic small{font-weight:400}
.ceo-text .body{font-size:16px}

/* 오시는 길 — 주소 · 지도 */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,5vw,72px);align-items:center}
.visit-info{display:grid;gap:18px;align-content:start}
.visit-note{margin:0;color:var(--muted);white-space:pre-line}
.visit-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.visit-links .btn{padding:12px 18px}
.visit-map{aspect-ratio:4/3;max-width:100%;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.visit-map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.25) sepia(.1)}
@media (max-width:860px){.visit{grid-template-columns:1fr}.visit-map{aspect-ratio:1/1}}
/* 지도 가운데(검색한 주소)에 모담 표시 — 구글 기본 핀이 안 보여도 위치가 보이게 */
.visit-map{position:relative}
.visit-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);pointer-events:none;display:grid;justify-items:center}
.visit-pin b{font:500 13px/1 var(--sans);letter-spacing:.04em;color:var(--dark-ink);background:var(--dark);padding:9px 12px;white-space:nowrap;box-shadow:0 6px 16px rgb(59 47 38 / .3)}
.visit-pin::after{content:"";width:0;height:0;border:7px solid transparent;border-top-color:var(--dark);margin-top:-1px}
/* 후기 카드: 아래 줄(집 종류 · 이름) 높이 맞춤, 사진 · 포트폴리오 연결 */
.review{display:flex;flex-direction:column}
.review blockquote{flex:1}
.rv-ph{display:block;margin:-26px -26px 4px;aspect-ratio:4/3;overflow:hidden;background:var(--tint)}
.rv-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.rv-ph:hover img{transform:scale(1.03)}
.rv-link{align-self:flex-start;margin-top:2px}

/* 메인 '모담디자인이 완성한 집' — 모든 현장을 좌우로 넘겨 보기 */
.rail-head{display:flex;align-items:center;gap:18px}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:44px;height:44px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:300 22px/1 var(--latin);cursor:pointer;transition:background .2s,opacity .2s}
.rail-nav button:hover:not(:disabled){background:var(--ink);color:var(--ground)}
.rail-nav button:disabled{opacity:.35;cursor:default}
.works-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * clamp(16px,2.4vw,28px)) / 3.25);grid-template-columns:none;gap:clamp(16px,2.4vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:6px;cursor:grab}
.works-rail::-webkit-scrollbar{display:none}
.works-rail > .work{scroll-snap-align:start}
.works-rail.dragging{cursor:grabbing;scroll-snap-type:none}
.works-rail.dragging .work{pointer-events:none}
@media (max-width:860px){.works-rail{grid-auto-columns:calc((100% - clamp(16px,2.4vw,28px)) / 1.6)}}
@media (max-width:560px){.works-rail{grid-auto-columns:82%}.rail-nav{display:none}}

/* 진행 과정 — 고객 전용 페이지 소개 */
.portal-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.pi-text{display:grid;gap:18px;align-content:start}
.pi-text p{margin:0;color:var(--muted)}
.pi-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--ink)}
.pi-list li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.pi-list b{font-weight:500}
.pi-list span{color:var(--muted);font-size:14.5px}
.pi-note{font-size:13px}
.pi-fig{margin:0;display:grid;justify-items:center;gap:10px}
.pi-fig img{width:min(100%,520px);height:auto;filter:drop-shadow(0 24px 40px rgb(59 47 38 / .18))}
.pi-fig figcaption{font:400 12px/1 var(--latin);letter-spacing:.2em;color:var(--muted)}
@media (max-width:860px){.portal-intro{grid-template-columns:1fr}.pi-list li{grid-template-columns:1fr;gap:4px}}

/* 첫 화면 인트로 — 모담 이름 풀이 */
.intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:var(--ground);color:var(--ink);transition:opacity .9s ease,visibility .9s}
.intro.out{opacity:0;visibility:hidden}
.intro-in{display:grid;justify-items:center;gap:clamp(22px,4vh,40px);text-align:center}
.intro .mark{height:clamp(46px,7vh,68px);width:auto;color:var(--brand);opacity:0;animation:iw-in 1s ease .1s forwards}
.intro-words{display:flex;gap:clamp(28px,7vw,96px)}
.iw{display:grid;justify-items:center;gap:10px;opacity:0;transform:translateY(14px);animation:iw-in 1s ease forwards}
.iw:nth-child(1){animation-delay:.5s}.iw:nth-child(2){animation-delay:1.1s}.iw:nth-child(3){animation-delay:1.7s}
.iw strong{font:400 clamp(64px,11vw,128px)/1 var(--serif);letter-spacing:0}
.iw span{font:500 13px/1 var(--sans);letter-spacing:.24em;color:var(--brand)}
.iw p{margin:0;max-width:13em;font-size:15px;color:var(--muted);text-wrap:balance}
.intro-tag{margin:0;display:grid;gap:8px;opacity:0;animation:iw-in 1s ease 2s forwards;font:400 clamp(17px,2vw,21px)/1.4 var(--serif)}
.intro-tag b{font:500 11px/1 var(--latin);letter-spacing:.42em;color:var(--brand)}
.intro-skip{position:absolute;right:clamp(16px,3vw,32px);bottom:calc(clamp(16px,3vw,32px) + env(safe-area-inset-bottom,0px));padding:10px 16px;border:1px solid var(--line);background:transparent;color:var(--muted);font:400 13px/1 var(--sans);cursor:pointer}
@keyframes iw-in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.iw,.intro-tag,.intro .mark{animation-duration:.01s;animation-delay:0s}}
@media (max-width:560px){.intro-words{gap:28px}.iw p{font-size:13.5px}}
.intro-words{align-items:flex-start}.iw{align-content:start}
/* 인트로 안전장치: 스크립트가 안 돌아도 4.4초 뒤 저절로 사라짐 */
.intro{animation:intro-auto-out .9s ease 4.4s forwards}
@keyframes intro-auto-out{to{opacity:0;visibility:hidden}}

/* 간단 견적 준비 중 · 후기 준비 중 안내 */
.closed-note,.reviews-empty{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.reviews-empty{flex-direction:column;align-items:flex-start;gap:24px}
.reviews-empty p{margin:0;font:300 clamp(17px,1.6vw,20px)/1.8 var(--serif);color:var(--ink)}