/* ══════════════════════════════════════════
   소목 SOMOK — 인테리어 · 가구 스튜디오 데모 (2026-09-25)
   Norm Architects(normcph.com) 의 **레이아웃 장치**를 벤치마킹했다 — 사진·문구·로고·프로젝트명은 안 가져온다.
     · 첫 화면 = 프로젝트 사진 슬라이드 + 가운데 자간 넓은 스몰캡 제목 + 아래 가는 막대 인디케이터
     · 섹션 제목은 아주 작고 자간이 넓다 (L A T E S T  W O R K)
     · 양쪽 여백에 **한 글자씩 세로로 쌓인 단어** (R E C E N T)
     · 크기가 제각각인 **불규칙 프로젝트 격자** — 제목 · 두세 줄 · 「주거 | 아파트 | 2026」 메타
     · 전면 사진 띠 + 가운데 제목 · 둘씩 나란한 판 · 철학 한 줄 편집 사진 · 5칸 목록(사진은 일부만) · 어두운 영상 띠
     · 전부 **작고 조용하다** — 크림 바탕, 넓은 여백
   여백 인테리어(demos/interior — 흰·먹·카키 골드·카드형)와 다르게: 크림 · 오크 · 세리프 스몰캡.
   빌더 demos/build_somok.py — html 을 직접 고치지 말 것.
   ══════════════════════════════════════════ */
@font-face{font-family:'P';font-weight:400;font-display:swap;src:url('../../assets/fonts/Pretendard-Regular.woff2') format('woff2')}
@font-face{font-family:'P';font-weight:600;font-display:swap;src:url('../../assets/fonts/Pretendard-SemiBold.woff2') format('woff2')}

:root{
  --cream:#F3EEE5; --cream2:#ECE6DB; --ink:#2B2A27; --sub:#78746B; --line:#D9D2C5; --dark:#454441;
  --serif:'Gowun Batang','Noto Serif KR',serif;
  --sc:'Cormorant Garamond','Gowun Batang',serif;
  --px:clamp(18px,4.2vw,64px);
  --itge-acc:#3E4A2A; --itge-sig:#A8402A;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:'P',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;background:var(--cream);color:var(--ink);
  word-break:keep-all;line-height:1.75;font-size:14.5px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Cormorant 의 기본 숫자는 올드스타일이라 01 이 「°1」 로 보인다 — 전부 라이닝 숫자로 */
body{font-variant-numeric:lining-nums}
.wrap{padding:0 var(--px);max-width:1440px;margin:0 auto;position:relative}
/* 자간 넓은 스몰캡 — 이 사이트의 목소리 */
.sc{font-family:var(--sc);font-weight:500;text-transform:uppercase;letter-spacing:.34em;font-size:13px}
.meta{font-family:var(--sc);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--sub);margin-top:10px}
.lnk{border-bottom:1px solid currentColor;padding-bottom:1px}
.lnk:hover{opacity:.6}

/* ══ 잇지 데모 바 ══ */
.itgebar{background:var(--itge-acc);color:#fff;position:relative;z-index:50;font-family:'P'}
.itgebar .wrap{display:flex;align-items:center;gap:14px;height:40px;font-size:12.5px;max-width:none}
.itgebar .k{color:rgba(255,255,255,.62);font-size:10.5px;letter-spacing:.1em}
.itgebar .t{color:rgba(255,255,255,.9);font-weight:600}
.itgebar .sep{color:rgba(255,255,255,.3)}
.itgebar .back{margin-left:auto;background:var(--itge-sig);color:#fff;font-size:12px;font-weight:600;padding:6px 13px;border-radius:3px;white-space:nowrap}
@media(max-width:760px){.itgebar .t,.itgebar .sep{display:none}}

/* ══ 헤더 — 가는 한 줄 ══ */
header{position:relative;z-index:30}
header.over{position:absolute;left:0;right:0;color:#fff}
header .wrap{display:flex;align-items:center;height:78px;gap:40px;max-width:none}
.logo{font-family:var(--sc);font-weight:500;letter-spacing:.3em;font-size:14px;text-transform:uppercase;white-space:nowrap}
header nav{margin:0 auto;display:flex;gap:30px}
header nav a{font-family:var(--sc);font-weight:500;letter-spacing:.24em;font-size:12px;text-transform:uppercase;padding:6px 0;opacity:.85}
header nav a:hover,header nav a.on{opacity:1;border-bottom:1px solid currentColor}
header .ask{font-family:var(--sc);font-weight:500;letter-spacing:.2em;font-size:12px;text-transform:uppercase;border:1px solid currentColor;padding:9px 14px;white-space:nowrap}
.nvt{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.navbtn{display:none}
@media(max-width:900px){
  header .wrap{height:64px;justify-content:space-between}
  header nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--cream);color:var(--ink);flex-direction:column;gap:0;
    padding:8px var(--px) 20px;border-bottom:1px solid var(--line)}
  header nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nvt:checked~nav{display:flex}
  header .ask{display:none}
  .navbtn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer}
  .navbtn i{display:block;width:22px;height:1px;background:currentColor;margin-left:auto}
}

/* ══ 첫 화면 슬라이드 ══ */
.slides{position:relative;height:min(100vh,900px);background:#2B2A27;color:#fff;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.slide::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,15,.45) 0%,rgba(20,18,15,0) 45%),linear-gradient(180deg,rgba(20,18,15,.3),transparent 25%)}
.slide .cap{position:absolute;left:0;right:0;bottom:92px;text-align:center;z-index:2;padding:0 var(--px)}
.slide .cap .sc{font-size:clamp(14px,1.3vw,17px);letter-spacing:.4em}
.slide .cap p{max-width:560px;margin:14px auto 0;font-size:13.5px;opacity:.9}
.bars{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.bars button{width:44px;height:24px;background:none;border:0;cursor:pointer;position:relative}
.bars button::after{content:'';position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(255,255,255,.4)}
.bars button.on::after{background:#fff}
@media(prefers-reduced-motion:reduce){.slide{transition:none}}

/* ══ 섹션 — 아주 작은 제목 ══ */
.sec{padding:clamp(64px,8vw,130px) 0}
.sec.alt{background:var(--cream2)}
.ttl{text-align:center;margin-bottom:clamp(36px,4.5vw,68px)}
/* 양쪽 여백에 한 글자씩 세로로 쌓인 단어 */
.edge{position:absolute;top:0;writing-mode:vertical-rl;text-orientation:upright;font-family:var(--sc);font-weight:500;
  font-size:11px;letter-spacing:.3em;color:var(--sub);text-transform:uppercase}
.edge.l{left:calc(var(--px) * .35)}.edge.r{right:calc(var(--px) * .35)}
@media(max-width:900px){.edge{display:none}}

/* ══ 불규칙 프로젝트 격자 ══ */
.irr{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,1.6vw,24px);row-gap:clamp(48px,6vw,90px);align-items:start}
.irr>a{min-width:0;display:block}
.irr img{width:100%;object-fit:cover}
.irr h3,.pair h3,.five h3{font-family:var(--sc);font-weight:500;text-transform:uppercase;letter-spacing:.24em;font-size:13px;margin-top:16px}
.irr h3 b,.pair h3 b,.five h3 b{font-family:var(--serif);font-weight:400;letter-spacing:.02em;font-size:15px;text-transform:none;display:block;margin-top:2px}
.irr p,.pair p,.five p{margin-top:6px;color:var(--sub);font-size:13.5px;line-height:1.7;max-width:420px}
.irr a:hover img,.pair a:hover img{opacity:.9}
.i1{grid-column:1/7}.i1 img{aspect-ratio:4/3}
.i2{grid-column:7/10;margin-top:0}.i2 img{aspect-ratio:3/4}
.i3{grid-column:10/13;margin-top:clamp(120px,14vw,220px)}.i3 img{aspect-ratio:4/5}
.i4{grid-column:1/4}.i4 img{aspect-ratio:4/5}
.i5{grid-column:5/11;margin-top:clamp(60px,7vw,120px)}.i5 img{aspect-ratio:16/10}
@media(max-width:860px){.irr{grid-template-columns:1fr 1fr}.irr>a{grid-column:auto!important;margin-top:0!important}
  .i1,.i5{grid-column:1/-1!important}}
@media(max-width:520px){.irr{grid-template-columns:1fr}}

/* ══ 전면 사진 띠 ══ */
.band{position:relative;height:min(82vh,760px);color:#fff;display:flex;align-items:flex-end;justify-content:center;text-align:center;overflow:hidden}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,15,.5),transparent 55%)}
.band .cap{position:relative;z-index:2;padding:0 var(--px) clamp(40px,6vw,72px);max-width:680px}
.band .cap p{margin-top:12px;font-size:13.5px;opacity:.92}

/* ══ 둘씩 ══ */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);max-width:1080px;margin:0 auto}
.pair>a{min-width:0}
.pair img{aspect-ratio:4/3;width:100%;object-fit:cover}
@media(max-width:700px){.pair{grid-template-columns:1fr}}

/* ══ 편집 사진 + 철학 한 줄 ══ */
.read{position:relative;height:min(78vh,720px);overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.read>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.read::after{content:'';position:absolute;inset:0;background:rgba(25,22,18,.32)}
.read .cap{position:relative;z-index:2;max-width:560px;padding:0 var(--px)}
.read .cap p{margin-top:14px;font-family:var(--serif);font-size:clamp(17px,1.7vw,21px);line-height:1.8}

/* ══ 다섯 칸 목록 — 사진은 앞 둘만 ══ */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,26px);align-items:start}
.five>a{min-width:0}
.five img{aspect-ratio:3/4;width:100%;object-fit:cover}
@media(max-width:900px){.five{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.five{grid-template-columns:1fr}}

/* ══ 어두운 영상 띠 ══ */
.film{background:var(--dark);color:#EDE7DC;display:grid;place-items:center;text-align:center;min-height:min(70vh,620px);padding:60px var(--px)}
.film .play{width:64px;height:64px;border:1px solid rgba(237,231,220,.6);border-radius:50%;display:grid;place-items:center;margin:0 auto 22px;cursor:pointer}
.film .play::before{content:'';border-left:12px solid #EDE7DC;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.film p{max-width:460px;margin:12px auto 0;font-size:13.5px;opacity:.8}

/* ══ 가구 — 글자만 네 칸 + 오브제 하나 ══ */
.objs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:clamp(56px,7vw,110px)}
.objs>div{min-width:0}
.objs h3{font-family:var(--sc);font-weight:500;text-transform:uppercase;letter-spacing:.24em;font-size:13px}
.objs h3 b{display:block;font-family:var(--serif);font-weight:400;letter-spacing:.02em;text-transform:none;font-size:15px;margin-top:2px}
@media(max-width:860px){.objs{grid-template-columns:1fr 1fr}}
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;max-width:1180px}
.feature>*{min-width:0}
.feature img{aspect-ratio:4/3;width:100%;object-fit:cover}
.feature p{margin-top:8px;color:var(--sub);max-width:420px;font-size:13.5px}
@media(max-width:760px){.feature{grid-template-columns:1fr}}

/* ══ 하위 페이지 ══ */
.phead{padding:clamp(56px,7vw,120px) 0 clamp(32px,4vw,64px);text-align:center}
.phead h1{font-family:var(--sc);font-weight:500;text-transform:uppercase;letter-spacing:.4em;font-size:clamp(15px,1.4vw,18px)}
.phead p{max-width:560px;margin:18px auto 0;font-family:var(--serif);font-size:clamp(17px,1.6vw,20px);line-height:1.8}
.filters{display:flex;justify-content:center;gap:26px;margin-bottom:40px;flex-wrap:wrap}
/* 분야 필터 — JS 없이 라디오 :checked ~ 로 */
.frd{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.filters label{font-family:var(--sc);font-weight:500;letter-spacing:.22em;font-size:12px;text-transform:uppercase;color:var(--sub);cursor:pointer;
  min-height:40px;display:inline-flex;align-items:center;border-bottom:1px solid transparent}
#f0:checked~.filters label[for=f0],#f1:checked~.filters label[for=f1],#f2:checked~.filters label[for=f2],#f3:checked~.filters label[for=f3]{color:var(--ink);border-bottom-color:var(--ink)}
#f1:checked~.index>:not(.w-r),#f2:checked~.index>:not(.w-c),#f3:checked~.index>:not(.w-f){display:none}
#f1:checked~.index>a,#f2:checked~.index>a,#f3:checked~.index>a{margin-top:0!important}
.frd:focus-visible~.filters{outline:1px dotted var(--sub);outline-offset:6px}
.index{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,4vw,60px) clamp(14px,2vw,28px)}
.index>a{min-width:0}
.index img{aspect-ratio:4/5;width:100%;object-fit:cover}
.index>a:nth-child(3n+2){margin-top:clamp(40px,5vw,80px)}
@media(max-width:860px){.index{grid-template-columns:1fr 1fr}.index>a:nth-child(3n+2){margin-top:0}}
.pj-hero img{width:100%;height:min(88vh,820px);object-fit:cover}
.pj-intro{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,5vw,90px);max-width:1180px;margin:0 auto}
.pj-intro>*{min-width:0}
.pj-intro dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:13.5px}
.pj-intro dt{font-family:var(--sc);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--sub)}
.pj-intro .txt p{font-family:var(--serif);font-size:clamp(17px,1.6vw,20px);line-height:1.9}
.pj-intro .txt p+p{margin-top:14px}
@media(max-width:760px){.pj-intro{grid-template-columns:1fr}}
.pj-imgs{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px);row-gap:clamp(24px,3vw,48px)}
.pj-imgs>*{min-width:0}
.pj-imgs img{width:100%;object-fit:cover}
.pj-imgs .w{grid-column:1/-1}.pj-imgs .w img{aspect-ratio:16/8}
.pj-imgs .a{grid-column:2/7}.pj-imgs .a img{aspect-ratio:4/5}
.pj-imgs .b{grid-column:8/12;margin-top:clamp(80px,10vw,160px)}.pj-imgs .b img{aspect-ratio:3/4}
.pj-imgs figcaption{font-size:12.5px;color:var(--sub);margin-top:8px}
@media(max-width:760px){.pj-imgs .a,.pj-imgs .b{grid-column:1/-1;margin-top:0}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,36px);max-width:1180px;margin:0 auto}
.steps>div{min-width:0;border-top:1px solid var(--ink);padding-top:16px}
.steps h3{font-family:var(--serif);font-weight:400;font-size:19px;margin-top:6px}
.steps p{margin-top:6px;color:var(--sub);font-size:13.5px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);max-width:1080px;margin:0 auto}
.contact>*{min-width:0}
.contact dl dt{font-family:var(--sc);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--sub);margin-top:18px}
.contact dl dd{margin-top:4px;font-size:14.5px}
.form{display:grid;gap:10px}
.form input,.form select,.form textarea{width:100%;min-height:48px;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:10px 2px;font:inherit}
.form textarea{min-height:110px;resize:vertical}
.form button{justify-self:start;margin-top:10px;background:none;border:1px solid var(--ink);padding:12px 22px;font-family:var(--sc);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;font-size:12px;cursor:pointer;min-height:44px}
.form button:hover{background:var(--ink);color:var(--cream)}
@media(max-width:760px){.contact{grid-template-columns:1fr}}

/* ══ 푸터 ══ */
footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 28px}
footer .row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
footer .row>*{min-width:0}
footer h4{font-family:var(--sc);font-weight:500;letter-spacing:.24em;text-transform:uppercase;font-size:12px;margin-bottom:10px}
footer ul{list-style:none;font-size:13px;color:var(--sub);line-height:2.1}
footer ul a:hover{color:var(--ink)}
footer .biz{margin-top:44px;font-size:12px;color:var(--sub);line-height:1.8}
footer .biz b{color:var(--ink);font-weight:600}
@media(max-width:760px){footer .row{grid-template-columns:1fr 1fr}footer .row>:first-child{grid-column:1/-1}}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--cream);font-size:13.5px;
  padding:12px 20px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ══ 모바일 탭 타겟 ══ */
@media(max-width:760px){
  footer ul a{display:inline-block;padding:7px 0}
  .itgebar .back{padding:9px 14px}
  .lnk{display:inline-block;padding:9px 0 3px}
}

/* ══ 모바일 탭 타겟 40px (자동 삽입) ══ */
@media(max-width:820px){
  .itgebar .back{min-height:40px;display:inline-flex;align-items:center;padding:0 15px}
  .legal a,.disc a,.dfoot a,footer a{display:inline-block;padding:11px 0}
  .logo,header .logo{min-height:40px;display:inline-flex;align-items:center}
  .notice .hd a,.sechd a,.sec a.more{display:inline-block;padding:10px 0}
}