@charset "utf-8";
/* ============================================================
   stay vio — 홈페이지 2차 · 2026-09-26
   모바일을 먼저 쓰고, 넓어지면 넓힌다 (min-width 만 쓴다)
   글꼴  나눔스퀘어 = 표제 / 프리텐다드 = 본문·표·폼
   ============================================================ */

/* ── 나눔스퀘어 (표제 전용, 두 굵기만 불러온다) ───────────── */
@font-face{
  font-family:"NanumSquare"; font-style:normal; font-weight:300; font-display:swap;
  src:url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/NanumSquareL.woff) format("woff");
}
@font-face{
  font-family:"NanumSquare"; font-style:normal; font-weight:700; font-display:swap;
  src:url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/NanumSquareB.woff) format("woff");
}

:root{
  /* 바탕 */
  --paper:#FFFFFF;
  --paper-2:#F1F3F0;        /* 밝은 미네랄 밴드 */
  --deep:#0E211C;           /* 딥 파인 — 사진이 빛나는 어두운 밴드 */
  --deep-2:#16312A;

  /* 브랜드 (02_BI/브랜드기본 확정값 그대로) */
  --via:#17453A;
  --via-lift:#1E5949;
  --sand:#B9AD9B;
  --sand-lift:#D8CCB8;

  /* 글자 */
  --ink:#16211E;
  --ink-70:#4B5652;
  --ink-45:#818B87;
  --line:#E3E6E2;
  --line-dark:rgba(255,255,255,.16);

  --display:"NanumSquare","Pretendard Variable",Pretendard,"Apple SD Gothic Neo",sans-serif;
  --text:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;

  --wrap:1240px;
  --gut:20px;
  --pad:clamp(56px,11vw,132px);     /* 섹션 상하 여백 */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:16.5px; line-height:1.8; letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:68px;                 /* 모바일 하단 고정 버튼 자리 */
}
@media (min-width:860px){ body{font-size:17px; padding-bottom:0} }

img{max-width:100%; display:block; height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:300; letter-spacing:-.03em;
            line-height:1.3; word-break:keep-all; text-wrap:pretty}
:focus-visible{outline:2px solid var(--sand); outline-offset:3px; border-radius:1px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
@media (min-width:860px){ .wrap{padding-inline:36px} }

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ── 버튼 ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--via); color:#fff; text-decoration:none; cursor:pointer;
  font-family:var(--text); font-weight:600; font-size:16px; letter-spacing:-.01em;
  padding:16px 26px; border:1px solid var(--via); border-radius:0;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{background:var(--via-lift); border-color:var(--via-lift)}
.btn--line{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--line:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.btn--onDark{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn--onDark:hover{background:#fff; border-color:#fff; color:var(--deep)}
.btn--light{background:#fff; border-color:#fff; color:var(--deep)}
.btn--light:hover{background:var(--sand-lift); border-color:var(--sand-lift); color:var(--ink)}
.btn--sand{background:var(--sand); border-color:var(--sand); color:var(--ink)}
.btn--sand:hover{background:var(--sand-lift); border-color:var(--sand-lift); color:var(--ink)}
.btn--sm{padding:11px 18px; font-size:14.5px}

/* ── 상단 바 ────────────────────────────────────────────── */
.bar{
  position:fixed; inset:0 0 auto; z-index:40; height:60px;
  display:flex; align-items:center;
  background:transparent; transition:background .3s ease, box-shadow .3s ease;
}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; width:100%; gap:16px}
.bar.solid{background:rgba(14,33,28,.93); -webkit-backdrop-filter:saturate(1.5) blur(14px);
           backdrop-filter:saturate(1.5) blur(14px)}
@media (min-width:860px){ .bar{height:74px} }

.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; transition:opacity .3s ease}
.logo img{display:block; height:15px; width:auto}
.logo span{font-size:11px; letter-spacing:.12em; opacity:.62; transform:translateY(.5px)}

@media (min-width:860px){ .logo img{height:17px} }

.nav{display:none}
@media (min-width:1040px){
  .nav{display:flex; gap:30px; font-size:14.5px; color:rgba(255,255,255,.82)}
  .nav a{text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; transition:border-color .2s, color .2s}
  .nav a:hover{border-bottom-color:currentColor}
}
.bar .btn{display:none}
@media (min-width:640px){ .bar .btn{display:inline-flex} }

/* 모바일 하단 고정 — 전화 / 진단신청 */
.dock{
  position:fixed; inset:auto 0 0; z-index:45; display:grid; grid-template-columns:1fr 1.45fr;
  background:#fff; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock a{
  display:flex; align-items:center; justify-content:center; height:60px;
  text-decoration:none; font-weight:600; font-size:15.5px; letter-spacing:-.01em;
}
.dock .tel{color:var(--ink); border-right:1px solid var(--line)}
.dock .go{background:var(--via); color:#fff}
@media (min-width:860px){ .dock{display:none} }

/* ── 히어로 ─────────────────────────────────────────────── */
.hero{position:relative; min-height:86svh; display:flex; align-items:flex-end;
      color:#fff; background:var(--deep); overflow:hidden}
.hero__bg{position:absolute; inset:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:58% 50%}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,33,28,.55) 0%, rgba(14,33,28,.16) 24%,
                            rgba(14,33,28,.48) 52%, rgba(14,33,28,.76) 78%,
                            rgba(14,33,28,.88) 100%);
}
.hero .wrap{position:relative; z-index:1; width:100%; padding-block:0 clamp(40px,9vw,88px)}
.hero h1{
  font-size:clamp(27px,7.1vw,60px); font-weight:300; line-height:1.3; letter-spacing:-.035em;
  max-width:16ch; text-wrap:balance; word-break:keep-all;
}
.hero h1 strong{font-weight:700}
.hero__sub{
  margin-top:20px; max-width:34ch; font-size:15.5px; line-height:1.75;
  color:rgba(255,255,255,.82);
}
.hero__en{
  font-family:var(--display); font-weight:300; font-size:12.5px; letter-spacing:.18em;
  color:var(--sand); margin-bottom:22px;
}
.hero__cta{margin-top:30px; display:flex; gap:10px; flex-wrap:wrap}
.hero__cred{
  position:absolute; right:var(--gut); bottom:clamp(40px,9vw,88px); z-index:1;
  font-size:11.5px; letter-spacing:.04em; color:rgba(255,255,255,.5);
  writing-mode:vertical-rl; display:none;
}
@media (min-width:860px){
  .hero{min-height:94svh}
  .hero__bg img{object-position:50% 52%}
  .hero__sub{font-size:17px; max-width:40ch}
  .hero__cred{display:block; right:36px}
}

/* ── 섹션 공통 ──────────────────────────────────────────── */
section[id]{scroll-margin-top:72px}
.sec{padding-block:var(--pad)}
.sec--dark{background:var(--deep); color:#fff}
.sec--band{background:var(--paper-2)}
.sec--tight{padding-block:clamp(40px,8vw,88px)}

.lede{max-width:22ch; font-size:clamp(23px,5.6vw,42px); font-weight:300; line-height:1.38; letter-spacing:-.035em}
.lede strong{font-weight:700}
@media (min-width:860px){ .lede{max-width:20ch} }

.body-copy{margin-top:22px; max-width:50ch; color:var(--ink-70); font-size:16px; line-height:1.85}
.sec--dark .body-copy{color:rgba(255,255,255,.76)}

.mark{
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.14em;
  color:var(--via); margin-bottom:18px; display:block;
}
.sec--dark .mark{color:var(--sand)}

/* 표제 + 설명이 나란히 (넓은 화면에서만 갈라진다) */
.split{display:grid; gap:26px}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr; gap:64px; align-items:end}
  .split .body-copy{margin-top:0}
}

/* ── 한 팀이 잇는 네 구간 ───────────────────────────────── */
.chain{margin-top:clamp(28px,5.5vw,64px); display:grid; gap:1px;
       grid-template-columns:repeat(2,1fr); background:var(--line-dark)}
@media (min-width:1100px){ .chain{grid-template-columns:repeat(4,1fr); gap:2px} }

.link{background:var(--deep); padding:0 0 18px; display:flex; flex-direction:column}
.link__img{aspect-ratio:4/3; overflow:hidden; margin-bottom:14px; background:var(--deep-2)}
.link__img img{width:100%; height:100%; object-fit:cover; opacity:.92}
.link__n{
  font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.1em;
  color:var(--sand); padding-inline:13px; margin-bottom:6px;
}
.link h3{font-size:16px; font-weight:700; letter-spacing:-.035em; padding-inline:13px; color:#fff}
.link p{padding-inline:13px; margin-top:7px; font-size:13px; line-height:1.6; color:rgba(255,255,255,.68)}
.link__out{
  margin:12px 13px 0; padding-top:10px; border-top:1px solid var(--line-dark);
  font-size:12px; color:var(--sand); line-height:1.55; margin-top:auto;
}
@media (min-width:560px){
  .link{padding-bottom:24px}
  .link__img{margin-bottom:20px}
  .link__n{padding-inline:20px; font-size:11.5px; margin-bottom:9px}
  .link h3{font-size:19px; padding-inline:20px}
  .link p{padding-inline:20px; font-size:14px; line-height:1.7; margin-top:10px}
  .link__out{margin:16px 20px 0; margin-top:auto; padding-top:13px; font-size:13px}
}
@media (min-width:1100px){ .link__img{aspect-ratio:3/4} }

.chain-note{
  margin-top:22px; font-size:13.5px; color:rgba(255,255,255,.6); max-width:58ch; line-height:1.7;
}
@media (min-width:560px){ .chain-note{margin-top:28px; font-size:14.5px; line-height:1.75} }

/* ── 이런 상태에서 연락 주십니다 ────────────────────────── */
.states{margin-top:clamp(24px,4.5vw,56px); display:grid; gap:0}
.state{padding:16px 0; border-top:1px solid var(--line)}
.state:last-child{border-bottom:1px solid var(--line)}
.state h3{font-size:16px; font-weight:700; letter-spacing:-.035em}
.state p{margin-top:5px; color:var(--ink-70); font-size:13.5px; line-height:1.62; max-width:52ch}
@media (min-width:560px){
  .state{padding:22px 0}
  .state h3{font-size:18px}
  .state p{margin-top:8px; font-size:15px; line-height:1.72}
}
@media (min-width:900px){
  .state{display:grid; grid-template-columns:minmax(220px,.8fr) 1.2fr; gap:40px; align-items:start; padding:28px 0}
  .state p{margin-top:0}
}

.figure-band{margin-top:clamp(36px,7vw,60px)}
.figure-band img{width:100%; aspect-ratio:16/10; object-fit:cover}
.figure-band figcaption{margin-top:12px; font-size:13px; color:var(--ink-45); letter-spacing:-.005em}
@media (min-width:900px){ .figure-band img{aspect-ratio:21/9} }

/* ── 사례 (스테이) ──────────────────────────────────────── */
.case{margin-top:clamp(40px,8vw,80px)}
.case__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
            padding-bottom:16px; border-bottom:1px solid var(--line)}
.sec--dark .case__head{border-bottom-color:var(--line-dark)}
.case__head h3{font-size:clamp(22px,5vw,30px); font-weight:300; letter-spacing:-.035em}
.case__meta{font-size:13.5px; color:var(--ink-45); letter-spacing:-.005em}
.sec--dark .case__meta{color:rgba(255,255,255,.55)}
.case__role{
  margin-left:auto; font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.1em; color:var(--via); border:1px solid currentColor; padding:5px 10px;
}
.sec--dark .case__role{color:var(--sand)}

/* 사진 배치 — 모바일은 한 줄씩, 넓어지면 크기가 갈린다 */
.plates{margin-top:18px; display:grid; gap:8px}
.plates img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.plates figure{margin:0}
.plates figcaption{margin-top:8px; font-size:12.5px; color:var(--ink-45)}
.sec--dark .plates figcaption{color:rgba(255,255,255,.5)}
@media (min-width:760px){
  .plates{grid-template-columns:repeat(6,1fr); gap:10px}
  .plates .p-hero{grid-column:span 4} .plates .p-hero img{aspect-ratio:16/11}
  .plates .p-tall{grid-column:span 2} .plates .p-tall img{aspect-ratio:3/4; height:100%}
  .plates .p-half{grid-column:span 3} .plates .p-half img{aspect-ratio:3/2}
  .plates .p-third{grid-column:span 2} .plates .p-third img{aspect-ratio:1/1}
}

/* ── 인테리어 시공 사례 (목록형, 계속 늘어난다) ─────────── */
.sites{margin-top:clamp(30px,6vw,52px)}
.sites__grid{display:grid; gap:0; border-top:1px solid var(--line)}
@media (min-width:700px){ .sites__grid{grid-template-columns:repeat(2,1fr); column-gap:44px} }
@media (min-width:1100px){ .sites__grid{grid-template-columns:repeat(3,1fr)} }

.site{display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:baseline;
      padding:15px 0; border-bottom:1px solid var(--line)}
.site b{font-weight:600; font-size:16px; letter-spacing:-.02em}
.site .kind{font-size:13px; color:var(--ink-45); grid-column:1; margin-top:-4px}
.site .yr{grid-column:2; grid-row:1/span 2; align-self:center; font-size:13px;
          color:var(--ink-45); font-variant-numeric:tabular-nums}

.sites__grid .site[data-rest]{display:none}
.sites.open .sites__grid .site[data-rest]{display:grid}
.sites__toggle{
  margin-top:22px; background:none; border:0; padding:13px 0; cursor:pointer; width:100%;
  font:inherit; font-size:15px; font-weight:600; color:var(--via); letter-spacing:-.01em;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left;
}
.sites__toggle:hover{color:var(--ink)}
.sites.open .sites__toggle{display:none}
@media (min-width:1100px){ .sites__toggle{width:auto; padding-inline:2px; border-bottom:0} }

.sites__more{
  margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  font-size:14.5px; color:var(--ink-70);
}
.sites__count{font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.02em; color:var(--via)}

/* ── 유형 표 ────────────────────────────────────────────── */
.tblwrap{margin-top:clamp(28px,5vw,44px); overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:600px; font-size:15px}
th,td{text-align:left; padding:15px 20px 15px 0; border-bottom:1px solid var(--line); vertical-align:top}
thead th{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.06em;
         color:var(--ink-45); padding-bottom:11px; border-bottom:1px solid var(--ink-45)}
td:first-child{font-weight:600; width:24%}
td:nth-child(2){color:var(--ink-70); width:24%}
td:last-child{color:var(--ink-70)}
.note{margin-top:22px; font-size:14px; line-height:1.75; color:var(--ink-45); max-width:66ch;
      padding-left:16px; border-left:2px solid var(--sand)}

/* ── 신청 ───────────────────────────────────────────────── */
.apply{background:var(--via); color:#fff}
.apply .mark{color:var(--sand-lift)}
.apply .lede{color:#fff}
.apply .body-copy{color:rgba(255,255,255,.8)}
.applygrid{display:grid; gap:clamp(34px,6vw,64px)}
@media (min-width:980px){ .applygrid{grid-template-columns:.85fr 1.15fr; align-items:start} }

.checks{list-style:none; margin:26px 0 0; padding:0; font-size:15px}
.checks li{padding:12px 0 12px 20px; border-bottom:1px solid rgba(255,255,255,.2);
           position:relative; color:rgba(255,255,255,.86)}
.checks li::before{content:""; position:absolute; left:0; top:23px; width:9px; height:1px; background:var(--sand)}

.direct{margin-top:28px; display:grid; gap:14px; font-size:15.5px}
.direct a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.34); padding-bottom:2px}
.direct small{display:block; font-size:12px; letter-spacing:.06em; opacity:.6; margin-bottom:4px;
              font-family:var(--display); font-weight:700}
@media (min-width:520px){ .direct{grid-template-columns:repeat(3,auto); justify-content:start; gap:32px} }

.form{display:grid; gap:16px}
@media (min-width:640px){ .form{grid-template-columns:1fr 1fr; gap:18px} .form .full{grid-column:1/-1} }
.form label{display:block; font-size:13px; letter-spacing:.01em; opacity:.74; margin-bottom:7px}
.form input,.form select,.form textarea{
  width:100%; padding:14px 15px; font:inherit; font-size:15.5px; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.3); border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.form select{background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.42)}
.form option{color:var(--ink)}
.form textarea{resize:vertical; min-height:92px; line-height:1.7}
.form .btn{width:100%}
@media (min-width:640px){ .form .btn{width:auto; justify-self:start; padding-inline:40px} }
.form__note{font-size:13px; color:rgba(255,255,255,.6); line-height:1.7}

/* ── 푸터 ───────────────────────────────────────────────── */
footer{background:var(--deep); color:rgba(255,255,255,.72); padding:clamp(48px,8vw,84px) 0 36px; font-size:14.5px}
.fgrid{display:grid; gap:34px; padding-bottom:36px; border-bottom:1px solid var(--line-dark)}
@media (min-width:820px){ .fgrid{grid-template-columns:1.5fr 1fr 1fr; gap:48px} }
.fgrid h4{font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.14em;
          color:var(--sand); margin:0 0 14px}
.fgrid a{text-decoration:none; border-bottom:1px solid transparent}
.fgrid a:hover{border-bottom-color:var(--sand)}
.fgrid p+p{margin-top:8px}
.fslogan{font-family:var(--display); font-weight:300; font-size:20px; color:#fff;
         letter-spacing:-.03em; line-height:1.45}
.fslogan em{display:block; font-style:normal; font-size:12.5px; letter-spacing:.14em;
            color:var(--sand); margin-top:12px; font-weight:700}
.legal{padding-top:26px; font-size:12.5px; color:rgba(255,255,255,.46); line-height:1.8}
.legal p+p{margin-top:5px}
.tbd{color:rgba(255,255,255,.34)}

/* ── 한 번만 일어나는 등장 (히어로 아래 첫 화면) ────────── */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
  .rise.in{opacity:1; transform:none}
}