/* 상생집수리 - 타일교체 | TILE SURFACE / PIECE & GRID */
:root{
  --white:#ffffff;
  --porcelain:#faf9f6;
  --stone:#efece6;
  --line:#ddd8ce;
  --line-strong:#c9c3b6;
  --ink:#292722;
  --ink-soft:#6b675e;
  --accent:#4f8b7e;
  --accent-dark:#3b6a60;
  --accent-soft:#e9f2ef;
  --radius:2px;
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* 문장 끝 한두 글자가 홀로 다음 줄에 떨어지는 "고아 줄" 방지 (지원 브라우저에서 자동 적용, 미지원시 무해하게 무시됨) — PC/모바일 동일 적용 */
p, .faq-a, li{ text-wrap:pretty; }
h1, h2, .brand-about-lead{ text-wrap:balance; }
button{font-family:inherit;}

/* grout-line divider */
.grout{
  height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 40px, transparent 40px 42px);
}

/* ===== HEADER ===== */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{
  font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.brand .tile-mark{
  width:14px;height:14px;
  background:var(--accent);
  position:relative;
  flex:none;
}
.brand .tile-mark::after{
  content:"";position:absolute;inset:3px;background:var(--white);
}
.header-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;
  background:var(--ink);
  color:var(--white);
  font-size:14px;font-weight:600;
  border-radius:999px;
  white-space:nowrap;
}
.header-cta:hover{background:var(--accent-dark);}

/* ===== NSEO PHOTO CARDS (first screen) ===== */
.nseo-section{padding:36px 0 8px;}
.nseo-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(2,minmax(440px,1fr));
  grid-auto-rows:minmax(440px,1fr);
  grid-auto-flow:row;
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
}
.nseo-card{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  opacity:0;
  transform:translateY(18px) scale(.98);
  animation:tileRise .65s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
@keyframes tileRise{
  to{opacity:1;transform:translateY(0) scale(1);}
}
/* 타일이 한 장씩 놓이듯 대각선 순서로 등장 */
.nseo-card:nth-child(1){grid-column:1 / span 5;grid-row:1;animation-delay:.02s;}
.nseo-card:nth-child(2){grid-column:6 / span 4;grid-row:1;animation-delay:.10s;}
.nseo-card:nth-child(3){grid-column:10 / span 3;grid-row:1;animation-delay:.18s;}
.nseo-card:nth-child(4){grid-column:1 / span 6;grid-row:2;animation-delay:.26s;}
.nseo-card:nth-child(5){grid-column:7 / span 6;grid-row:2;animation-delay:.34s;}
.nseo-card:nth-child(n+6){grid-column:1 / -1;animation-delay:.42s;}

.nseo-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(41,39,34,.22);
  z-index:2;
}

.nseo-card a{display:block;height:100%;width:100%;}
.nseo-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  min-height:440px;
}
.nseo-card:hover img{transform:scale(1.06);filter:brightness(1.03);}
.nseo-card .label{
  position:absolute;left:0;right:0;bottom:0;
  padding:20px 18px 16px;
  background:linear-gradient(0deg,rgba(20,20,18,.82) 0%, rgba(20,20,18,0) 100%);
  color:#fff;font-weight:700;font-size:19px;letter-spacing:-.01em;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nseo-card:hover .label{transform:translateY(-3px);}
.nseo-card:nth-child(1) .label{font-size:22px;padding:26px 22px 20px;}
.nseo-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--accent);
  transition:box-shadow .35s ease;
}
.nseo-card:hover::after{box-shadow:inset 0 0 0 2px var(--accent);}

@media (prefers-reduced-motion:reduce){
  .nseo-card{opacity:1;transform:none;animation:none;}
  .nseo-card,.nseo-card img,.nseo-card .label,.nseo-card::after{transition:none;}
}

@media (max-width:820px){
  .nseo-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;}
  .nseo-card{grid-column:span 1 !important;grid-row:span 1 !important;height:260px !important;}
  .nseo-card img{min-height:260px !important;}
  .nseo-card:nth-child(1){grid-column:span 2 !important;height:340px !important;}
  .nseo-card:nth-child(1) img{min-height:340px !important;}
  /* 좁은 카드 폭에서 서비스명이 한 글자만 다음 줄로 떨어지지 않도록 라벨 크기를 줄여 한 줄에 확실히 들어가게 함 */
  .nseo-card .label{font-size:14px !important;padding:12px 10px 10px !important;white-space:nowrap;}
  .nseo-card:nth-child(1) .label{font-size:18px !important;padding:16px 14px 12px !important;white-space:nowrap;}
}

/* ===== HERO ===== */
.hero{
  padding:64px 0 56px;
  position:relative;
  border-bottom:1px solid var(--line);
}
.hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.hero h1{
  font-size:clamp(34px,4.6vw,54px);
  line-height:1.15;
  margin:0 0 20px;
  letter-spacing:-.02em;
  font-weight:800;
}
.hero .lead{
  font-size:17px;color:var(--ink-soft);margin:0 0 28px;max-width:46ch;
}
.hero .note{
  font-size:13.5px;color:var(--ink-soft);margin:0 0 28px;
  border-left:2px solid var(--line-strong);padding-left:12px;
  max-width:48ch;
}
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:19px 40px;
  background:var(--accent);color:#fff;
  font-weight:800;font-size:18px;
  border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(59,106,96,.55);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 10px 24px -6px rgba(59,106,96,.65);}
.hero-photo{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo::before{
  content:"";position:absolute;top:14px;left:14px;right:-14px;bottom:-14px;
  border:1px solid var(--line-strong);
  z-index:-1;
}

@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr;gap:28px;}
  .hero{padding:40px 0 40px;}
  .hero-photo{order:-1;}
}

/* ===== BEFORE / AFTER ===== */
.ba-section{padding:64px 0;background:var(--porcelain);border-bottom:1px solid var(--line);}
.ba-eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:12.5px;letter-spacing:.24em;color:var(--ink-soft);
  margin:0 0 24px;font-weight:600;
}
.ba-sets{display:flex;flex-direction:column;gap:40px;}
.ba-set{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px;
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.ba-set.is-visible{opacity:1;transform:translateY(0);}
.ba-set:nth-child(2){transition-delay:.12s;}
.ba-item{position:relative;overflow:hidden;flex:0 1 auto;max-width:100%;max-height:460px;}
.ba-item img{display:block;width:auto;height:auto;max-width:100%;max-height:460px;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s ease;}
.ba-set:hover .ba-item img{filter:brightness(.92);}
.ba-set:hover .ba-item:hover img{transform:scale(1.06);filter:brightness(1.02);}
.ba-item .tag{
  position:absolute;top:10px;left:10px;
  padding:4px 10px;
  font-size:11px;letter-spacing:.14em;font-weight:700;
  background:rgba(255,255,255,.92);color:var(--ink);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.ba-item.after .tag{background:var(--accent);color:#fff;}
.ba-item:hover .tag{transform:translateY(-2px);}

@media (max-width:640px){
  .ba-item{max-height:320px;}
  .ba-item img{max-height:320px;}
}

@media (prefers-reduced-motion:reduce){
  .ba-set{opacity:1;transform:none;transition:none;}
  .ba-item img,.ba-item .tag{transition:none;}
}

/* ===== FAQ ===== */
.faq-section{padding:64px 0;background:var(--porcelain);border-top:1px solid var(--line);}
.section-title{
  font-size:26px;font-weight:800;margin:0 0 28px;letter-spacing:-.01em;
}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 4px;cursor:pointer;
  font-weight:600;font-size:15.5px;
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q .qnum{color:var(--accent);font-weight:700;margin-right:10px;}
.faq-q .chev{flex:none;color:var(--ink-soft);transition:transform .2s ease;font-size:14px;}
details[open] .chev{transform:rotate(45deg);}
.faq-a{padding:0 4px 20px 4px;color:var(--ink-soft);font-size:14.5px;max-width:64ch;}

/* ===== BRAND ABOUT (시공사례 바로 아래 대형 소개) ===== */
.brand-about{
  position:relative;
  overflow:hidden;
  padding:110px 0;
  background:var(--white);
  text-align:center;
  border-bottom:1px solid var(--line);
}
.brand-about-grout{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 120px);
  opacity:.5;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 85%);
}
.brand-about-inner{
  position:relative;
  opacity:0;
  transform:translateY(24px) scale(.98);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.brand-about-inner.is-visible{opacity:1;transform:translateY(0) scale(1);}
.brand-about-eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:12.5px;letter-spacing:.32em;color:var(--ink-soft);
  margin:0 0 18px;font-weight:600;
}
.brand-about-name{
  font-size:clamp(52px,9vw,128px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  margin:0 0 28px;
  background:linear-gradient(120deg, var(--ink) 30%, var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.brand-about-lead{
  font-size:clamp(20px,2.6vw,30px);
  font-weight:700;
  color:var(--ink);
  line-height:1.4;
  margin:0 0 22px;
  letter-spacing:-.01em;
}
.brand-about-desc{
  font-size:15.5px;color:var(--ink-soft);
  max-width:56ch;margin:0 auto;line-height:1.8;
}

@media (max-width:640px){
  .brand-about{padding:72px 0;}
  .brand-about-grout{
    background:
      repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 70px),
      repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 70px);
  }
}

@media (prefers-reduced-motion:reduce){
  .brand-about-inner{opacity:1;transform:none;transition:none;}
}

/* ===== ABOUT & CTA ===== */
.about-cta{
  padding:64px 0;
  background:var(--ink);
  color:#fff;
}
.about-cta .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;}
.about-cta h2{font-size:24px;margin:0 0 14px;font-weight:800;letter-spacing:-.01em;}
.about-cta p{color:#d6d3ca;font-size:15px;max-width:52ch;margin:0 0 10px;}
.about-cta .cta-box{
  border:1px solid rgba(255,255,255,.2);
  padding:28px;
  text-align:center;
}
.about-cta .cta-box p{color:#fff;font-size:15px;margin:0 0 18px;}
.about-cta .btn-cta{background:#fff;color:var(--ink);box-shadow:0 8px 20px -6px rgba(0,0,0,.35);}
.about-cta .btn-cta:hover{background:var(--accent-soft);}

@media (max-width:820px){
  .about-cta .wrap{grid-template-columns:1fr;}
}

/* ===== FOOTER ===== */
footer.site-footer{
  padding:36px 0 28px;
  background:var(--porcelain);
  font-size:13.5px;color:var(--ink-soft);
}
footer.site-footer .biz-name{font-weight:700;color:var(--ink);font-size:15px;margin-bottom:6px;}
footer.site-footer .biz-line{margin:2px 0;}
footer.site-footer a{color:var(--ink-soft);}
footer.site-footer a.tel-link{color:var(--accent-dark);font-weight:600;}
footer.site-footer .copy{margin-top:16px;font-size:12px;color:#9b968a;}
.visually-hidden{display:none;}

/* ===== NSEO SUBPAGE ===== */
.page-hero{
  padding:56px 0 44px;
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--white) 100%);
  border-bottom:1px solid var(--line);
}
.breadcrumb{font-size:12.5px;color:var(--ink-soft);margin:0 0 14px;}
.breadcrumb a{color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--accent-dark);}
.page-hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 14px;font-weight:800;letter-spacing:-.02em;color:var(--accent-dark);}
.page-hero .lead{font-size:16px;color:var(--ink-soft);max-width:60ch;margin:0 0 24px;}
.page-photo{max-height:460px;overflow:hidden;margin-bottom:8px;border-radius:8px;text-align:center;background:var(--porcelain);}
.page-photo img{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:460px;object-fit:contain;}
@media (max-width:640px){
  .page-photo{max-height:320px;}
  .page-photo img{max-height:320px;}
}
/* 세로(3:4) 원본사진을 서사형 본문 안에 여백 없이 가로로 꽉 채워 넣을 때 사용(page-photo와 별개, 기존 페이지 영향 없음) */
.narrative-photo{aspect-ratio:3/2;overflow:hidden;margin-bottom:8px;border-radius:8px;background:var(--porcelain);}
.narrative-photo img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:640px){
  .narrative-photo{aspect-ratio:4/3;}
}
.content-section{padding:48px 0;}
.content-section h2{font-size:20px;font-weight:800;margin:0 0 22px;}
.content-section p{color:var(--ink-soft);font-size:15px;max-width:70ch;margin:0 0 16px;}
.mid-photo{margin:28px 0;aspect-ratio:16/9;overflow:hidden;}
.mid-photo img{width:100%;height:100%;object-fit:cover;}

/* 감정이입형 목록(문제 공감/해결 단계) 및 확인사항 표 — 페이지 전역 재사용 유틸리티 */
.pain-list,
.solution-list{list-style:none;margin:32px 0;padding:0;}
.pain-list li,
.solution-list li{
  position:relative;padding:20px 4px 20px 32px;
  border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.7;color:var(--ink-soft);
}
.pain-list li:last-child,
.solution-list li:last-child{border-bottom:none;}
.pain-list li::before{
  content:"";position:absolute;left:4px;top:28px;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.solution-list li::before{
  content:"✓";position:absolute;left:2px;top:19px;
  color:var(--accent-dark);font-weight:700;font-size:14px;
}
.solution-list li strong{color:var(--ink);font-weight:700;}
.check-table{width:100%;border-collapse:collapse;margin:28px 0;border:1px solid var(--line);}
.check-table th{
  text-align:left;padding:14px 18px;background:var(--accent-soft);
  color:var(--ink);font-size:13px;font-weight:700;
  border-bottom:1px solid var(--line);
}
.check-table td{
  padding:14px 18px;border-bottom:1px solid var(--line);
  font-size:14.5px;line-height:1.6;color:var(--ink-soft);
}
.check-table tr:last-child td{border-bottom:none;}
.check-table tbody tr:nth-child(even) td{background:var(--porcelain);}
.tip-box{
  border-left:2px solid var(--accent);
  background:var(--accent-soft);
  padding:16px 18px;
  font-size:14px;color:var(--ink);
  margin:32px 0;
}
.sub-faq .faq-item{border-bottom:1px solid var(--line);}

.related-section{padding:48px 0;background:var(--porcelain);border-top:1px solid var(--line);}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
.related-card{position:relative;aspect-ratio:3/4;background:#000;overflow:hidden;}
.related-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.related-card a:hover img{transform:scale(1.05);}
.related-card .label{
  position:absolute;left:0;right:0;bottom:0;padding:12px 12px 10px;
  background:linear-gradient(0deg,rgba(20,20,18,.8),rgba(20,20,18,0));
  color:#fff;font-weight:700;font-size:14px;
}
@media (max-width:820px){
  .related-grid{grid-template-columns:repeat(2,1fr);}
}

.related-rotator{position:relative;aspect-ratio:16/9;max-width:640px;margin:0 auto;overflow:hidden;background:#000;}
.rotator-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none;}
.rotator-slide.is-active{opacity:1;pointer-events:auto;}
.rotator-slide img{width:100%;height:100%;object-fit:cover;}
.rotator-slide .label{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;
  background:linear-gradient(0deg,rgba(20,20,18,.8),rgba(20,20,18,0));
  color:#fff;font-weight:700;font-size:15px;
}
.rotator-dots{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.rotator-dots .dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);cursor:pointer;transition:background .2s ease;}
.rotator-dots .dot.is-active{background:var(--accent);}
@media (prefers-reduced-motion:reduce){
  .rotator-slide{transition:none;}
}

.related-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:900px;margin:0 auto;}
.mosaic-cell{position:relative;aspect-ratio:3/4;overflow:hidden;background:#000;}
.mosaic-cell img{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease;}
.mosaic-cell.is-fading img{opacity:0;}
.mosaic-cell .label{
  position:absolute;left:0;right:0;bottom:0;padding:10px 10px 8px;
  background:linear-gradient(0deg,rgba(20,20,18,.8),rgba(20,20,18,0));
  color:#fff;font-weight:700;font-size:13px;
}
@media (max-width:640px){
  .related-mosaic{
    display:flex;grid-template-columns:none;gap:8px;max-width:100%;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .related-mosaic .mosaic-cell{flex:0 0 42%;scroll-snap-align:start;}
}
@media (prefers-reduced-motion:reduce){
  .mosaic-cell img{transition:none;}
}

.page-cta{padding:56px 0;text-align:center;background:var(--accent-soft);}
.page-cta p{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 22px;}

/* 사진별 주요 피사체가 잘리지 않도록 crop 기준점 보정 */
img[src$="hosegun.webp"]{ object-position:50% 42%; }
/* 화장실호스건설치 페이지 상단 대표사진(16:10, 더 가로로 넓음)은 헤드가 잘리기 쉬워 더 위쪽 기준으로 보정 */
.page-photo img[src$="hosegun.webp"]{ object-position:50% 8%; }
img[src$="paperholder-after.webp"]{ object-position:48% 58%; }
img[src$="paperholder-before.webp"]{ object-position:48% 58%; }

@media (max-width:820px){
  /* 모바일 카드는 세로가 아니라 가로가 잘리는 구도라 왼쪽(피사체 쪽) 기준으로 재조정 */
  .nseo-card img[src$="hosegun.webp"]{ object-position:2% 50%; }
}