/* ==========================================================================
   엠앤와이픽스 — Premium Kitchen Repair Studio
   Concept: Architectural / Craftsmanship / Quiet Luxury / Warm Minimalism
   고급스러움을 색이나 장식이 아니라 공간·사진·타이포그래피·여백으로 만든다.
   ========================================================================== */
:root{
  --bg:         #F2F0EB;
  --bg-warm:    #F8F7F3;
  --ink:        #1B1B19;
  --ink-soft:   #74716B;
  --line:       rgba(27,27,25,.14);
  --accent:     #4A58BF;
  --accent-dark:#3A4599;
  --mist:       #AFD6D7;

  --font-display: 'Pretendard', 'Noto Sans KR', sans-serif;
  --font-body:    'Pretendard', 'Noto Sans KR', sans-serif;
  --font-caption: 'Pretendard', 'Noto Sans KR', sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --section-pad: clamp(80px, 14vw, 200px);
  --container: 1480px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .8s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; font-weight:500; }
button{ font:inherit; border:none; background:none; cursor:pointer; color:inherit; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

.caption{
  font-family:var(--font-caption); font-size:12px; letter-spacing:.14em;
  color:var(--ink-soft); text-transform:uppercase; font-weight:500;
}
.caption em{ font-style:normal; color:var(--ink); }

.section{ padding:var(--section-pad) 0; }
.section-lg{ padding:calc(var(--section-pad) * 1.1) 0; }

.rule{ height:1px; background:var(--line); border:none; margin:0; }

.arrow{ display:inline-block; transition:transform var(--dur) var(--ease); }
a:hover .arrow, button:hover .arrow{ transform:translateX(6px); }

/* ==========================================================================
   Buttons / links — no pill shapes, text-led with underline draw
   ========================================================================== */
.link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:16px; font-weight:500; color:var(--ink);
  padding-bottom:2px; position:relative;
}
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(1); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.link:hover::after{ transform:scaleX(0); transform-origin:right; }

.btn-solid{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; background:var(--accent); color:#fff;
  font-size:15.5px; font-weight:500; letter-spacing:.01em;
  border-radius:2px; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-solid:hover{ background:var(--accent-dark); }
.btn-solid:active{ transform:scale(.98); }

.btn-outline{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink);
  font-size:15.5px; font-weight:500; border-radius:2px;
  transition:box-shadow var(--dur) var(--ease);
}
.btn-outline:hover{ box-shadow:inset 0 0 0 1px var(--ink); }

/* ==========================================================================
   Reveal system — slow, quiet motion only
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
/* clip-path lives on the descendant img, not the observed element itself —
   clip-path on the IO target makes Chromium report intersectionRatio 0 forever. */
[data-reveal="clip"]{ opacity:1; transform:none; }
[data-reveal="clip"] img{ clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease); }
[data-reveal="clip"].is-visible img{ clip-path:inset(0 0 0% 0); }
[data-reveal="line"]{ opacity:1; transform:none; }
[data-reveal="line"] .line-fill{ transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease); }
[data-reveal="line"].is-visible .line-fill{ transform:scaleX(1); }
[data-reveal-group] [data-reveal].is-visible{ transition-delay:calc(var(--i,0) * 110ms); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:inset(0) !important; }
}

/* ==========================================================================
   Header — quiet, minimal
   ========================================================================== */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:84px; display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-nav.is-scrolled{ background:rgba(242,240,235,.94); backdrop-filter:blur(10px); border-bottom-color:var(--line); }
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }

.brand{ display:flex; flex-direction:column; gap:1px; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:.02em; }
.brand-caption{ font-family:var(--font-caption); font-size:11.5px; letter-spacing:.04em; color:var(--ink-soft); }

.nav-links{ display:flex; align-items:center; gap:var(--space-8); }
.nav-links a{
  font-family:var(--font-caption); font-size:12px; font-weight:500; letter-spacing:.12em;
  color:var(--ink-soft); text-transform:uppercase; transition:color .3s var(--ease);
}
.nav-links a:hover{ color:var(--accent); }

.nav-cta{ display:flex; align-items:center; gap:var(--space-5); }
.nav-cta > a.link{ font-family:var(--font-caption); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; }
.nav-toggle{ display:none; }
.nav-drawer{ display:none; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta > a.link{ display:none; }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center; width:36px; height:36px; position:relative;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; display:block; width:20px; height:1px; background:var(--ink); position:relative; transition:transform .25s;
  }
  .nav-toggle span::before{ position:absolute; top:-6px; }
  .nav-toggle span::after{ position:absolute; top:6px; }
  .nav-drawer{
    position:fixed; inset:0; z-index:99; background:var(--bg);
    display:flex; flex-direction:column; justify-content:center; gap:var(--space-5);
    padding:0 var(--gutter);
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  }
  .nav-drawer.is-open{ opacity:1; pointer-events:auto; }
  .nav-drawer a{ font-family:var(--font-display); font-size:30px; font-weight:500; padding:var(--space-3) 0; border-bottom:1px solid var(--line); }
}

/* mobile sticky contact bar */
.mobile-sticky-cta{ display:none; }
@media (max-width:900px){
  .mobile-sticky-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--accent); align-items:center; justify-content:center;
    padding:15px var(--gutter) calc(15px + env(safe-area-inset-bottom));
  }
  .mobile-sticky-cta a{ display:flex; align-items:center; gap:8px; color:var(--bg-warm); font-weight:500; font-size:15px; }
  body{ padding-bottom:60px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ min-height:92vh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:150px; }
.hero-top{ padding-bottom:var(--space-8); }
.hero-label{ display:block; margin-bottom:var(--space-6); }
.hero-h1{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(46px, 7vw, 108px); line-height:.98; color:var(--ink);
}
.hero-statement{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(22px, 2.6vw, 34px); line-height:1.35; color:var(--ink);
  max-width:16ch; margin-top:var(--space-6);
}
.hero-desc{ font-size:17px; color:var(--ink-soft); max-width:44ch; margin-top:var(--space-5); }
.hero-actions{ display:flex; align-items:center; gap:var(--space-7); margin-top:var(--space-7); flex-wrap:wrap; }

.hero-media{ width:100%; aspect-ratio:21/9; max-height:62vh; overflow:hidden; margin-top:var(--space-8); }
.hero-slideshow{ position:relative; width:100%; height:100%; }
.hero-slideshow img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.hero-slideshow img.is-active{ opacity:1; }

@media (max-width:900px){
  .hero{ min-height:auto; padding-top:120px; }
  .hero-h1{ font-size:clamp(40px,12vw,64px); }
  .hero-media{ aspect-ratio:4/3; margin-top:var(--space-7); }
}

/* ==========================================================================
   Section header — varies per section, not a repeated template
   ========================================================================== */
.head-split{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-7); flex-wrap:wrap; }
.head-split .statement{
  font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3vw,40px);
  line-height:1.3; max-width:20ch; letter-spacing:-.01em;
}
.head-split .side{ max-width:34ch; color:var(--ink-soft); font-size:16px; text-align:left; }
@media (max-width:768px){ .head-split{ flex-direction:column; align-items:flex-start; } }

/* ==========================================================================
   Service index — numbered editorial list, no cards
   ========================================================================== */
.svc-index-row{
  display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:var(--space-6);
  padding:var(--space-7) 0; border-bottom:1px solid var(--line); position:relative;
}
.svc-index-row:first-child{ border-top:1px solid var(--line); }
.svc-index-num{ font-family:var(--font-caption); font-size:14px; color:var(--ink-soft); }
.svc-index-main{ display:flex; flex-direction:column; gap:6px; }
.svc-index-title{ font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.6vw,32px); transition:transform .5s var(--ease); }
.svc-index-desc{ color:var(--ink-soft); font-size:15.5px; max-width:48ch; }
.svc-index-row:hover .svc-index-title{ transform:translateX(10px); }
.svc-index-thumb{
  width:140px; height:100px; overflow:hidden; flex:none;
}
.svc-index-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.svc-index-row:hover .svc-index-thumb img{ transform:scale(1.05); }
@media (max-width:768px){
  .svc-index-row{ grid-template-columns:40px 1fr; }
  .svc-index-thumb{ grid-column:1 / -1; width:100%; height:200px; margin-top:var(--space-4); }
}

/* ==========================================================================
   Service blocks — every service in the same large image+text layout
   ========================================================================== */
.svc-block{
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gutter); align-items:stretch;
  padding:var(--space-8) 0; border-top:1px solid var(--line);
}
.svc-block:last-child{ border-bottom:1px solid var(--line); }
.svc-block-media{ aspect-ratio:4/3; max-height:440px; overflow:hidden; }
.svc-block-media img{ width:100%; height:100%; object-fit:cover; }
.svc-block-body{ display:flex; flex-direction:column; justify-content:center; padding:var(--space-4) 0; }
.svc-block-body .caption{ margin-bottom:var(--space-5); }
.svc-block-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.2vw,44px); letter-spacing:-.01em; line-height:1.1; }
.svc-block-desc{ margin-top:var(--space-4); color:var(--ink-soft); font-size:16.5px; max-width:42ch; }
.svc-block-body .link{ margin-top:var(--space-6); font-size:16px; }
@media (max-width:900px){ .svc-block{ grid-template-columns:1fr; } .svc-block-media{ aspect-ratio:4/3; } }

/* ==========================================================================
   Work / Portfolio — asymmetric editorial gallery, each case different
   ========================================================================== */
.case{ padding:var(--space-8) 0; border-top:1px solid var(--line); }
.case:last-child{ border-bottom:1px solid var(--line); }
.case-label{ margin-bottom:var(--space-6); display:block; }
.case-wide img{ width:100%; aspect-ratio:21/9; max-height:520px; object-fit:cover; }
.case-split{ display:grid; grid-template-columns:1.3fr .7fr; gap:var(--gutter); align-items:end; }
.case-split-media{ aspect-ratio:4/3; max-height:480px; overflow:hidden; }
.case-split-media img{ width:100%; height:100%; object-fit:cover; }
.case-split-text{ padding-bottom:var(--space-5); }
.case-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); }
.case-pair img{ width:100%; aspect-ratio:4/3; max-height:420px; object-fit:cover; }
.case-caption{ margin-top:var(--space-5); font-size:16px; color:var(--ink-soft); max-width:52ch; }
@media (max-width:900px){
  .case-split{ grid-template-columns:1fr; }
  .case-pair{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Before / After — honest framing (검증된 동일 현장 쌍이 없어 "실제 현장" 두 장으로 표기)
   ========================================================================== */
.compare-shot{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); }
.compare-shot-item{ position:relative; aspect-ratio:4/3; max-height:420px; overflow:hidden; background:var(--bg-warm); }
.compare-shot-item img{ width:100%; height:100%; object-fit:cover; }
.compare-shot-label{
  position:absolute; left:var(--space-5); bottom:var(--space-5);
  font-family:var(--font-caption); font-size:11.5px; letter-spacing:.1em; color:#fff;
  text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.5);
}
@media (max-width:768px){ .compare-shot{ grid-template-columns:1fr; } }

/* ==========================================================================
   Process — number always attached to its own step, no timeline nodes
   ========================================================================== */
.proc-row{
  display:grid; grid-template-columns:40px 1fr; gap:var(--space-5);
  padding:var(--space-6) 0; border-top:1px solid var(--line);
  align-items:baseline;
}
.proc-row:last-child{ border-bottom:1px solid var(--line); }
.proc-num{ font-family:var(--font-caption); font-size:15px; color:var(--accent); }
.proc-body{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--space-6); row-gap:var(--space-2); }
.proc-body h3{ font-family:var(--font-display); font-weight:600; font-size:19px; flex:none; min-width:132px; }
.proc-body p{ color:var(--ink-soft); font-size:15.5px; max-width:44ch; margin:0; }

/* ==========================================================================
   Precision details — text + close-up photo, no icon cards
   ========================================================================== */
.precision-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter) var(--gutter); }
.precision-item{ border-top:1px solid var(--line); padding-top:var(--space-5); }
.precision-item-media{ aspect-ratio:5/4; overflow:hidden; margin-bottom:var(--space-5); }
.precision-item-media img{ width:100%; height:100%; object-fit:cover; }
.precision-item h4{ font-family:var(--font-display); font-weight:500; font-size:19px; }
.precision-item p{ margin-top:6px; color:var(--ink-soft); font-size:15px; }
@media (max-width:900px){ .precision-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .precision-list{ grid-template-columns:1fr; } }

/* ==========================================================================
   FAQ — plain list, border rules only
   ========================================================================== */
.faq-row{ border-top:1px solid var(--line); }
.faq-row:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:grid; grid-template-columns:40px 1fr 24px; align-items:center; gap:var(--space-5);
  padding:var(--space-6) 0; text-align:left;
}
.faq-q-num{ font-family:var(--font-caption); font-size:13px; color:var(--ink-soft); }
.faq-q-text{ font-family:var(--font-display); font-size:18px; font-weight:500; }
.faq-q-mark{ font-size:20px; font-weight:300; color:var(--ink-soft); transition:transform .4s var(--ease); justify-self:end; }
.faq-row.is-open .faq-q-mark{ transform:rotate(45deg); }
.faq-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.faq-row.is-open .faq-a-wrap{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a{ padding:0 0 var(--space-6) 64px; color:var(--ink-soft); font-size:15.5px; max-width:56ch; }

/* ==========================================================================
   CTA — landscape photo strip + resolved single-column statement, no boxed background
   ========================================================================== */
.cta-final-media{ width:100%; aspect-ratio:21/9; max-height:380px; overflow:hidden; margin-bottom:var(--space-8); }
.cta-final-media img{ width:100%; height:100%; object-fit:cover; }
.cta-final-body{ max-width:64ch; }
.cta-final-body h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(32px,4.2vw,58px); letter-spacing:-.01em; line-height:1.1; }
.cta-final-body .lead{ margin-top:var(--space-5); color:var(--ink-soft); font-size:18px; max-width:44ch; }
.cta-final-actions{ margin-top:var(--space-7); display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap; }
@media (max-width:900px){ .cta-final-media{ aspect-ratio:4/3; max-height:320px; } }

/* ==========================================================================
   Footer — minimal
   ========================================================================== */
.site-footer{ border-top:1px solid var(--line); padding:var(--space-8) 0 var(--space-6); }
.footer-top{ display:flex; justify-content:space-between; gap:var(--space-7); flex-wrap:wrap; padding-bottom:var(--space-6); border-bottom:1px solid var(--line); }
.footer-biz{ font-size:14px; line-height:1.9; color:var(--ink-soft); }
.footer-biz strong{ color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:17px; display:block; margin-bottom:var(--space-2); }
.footer-links{ display:flex; gap:var(--space-6); }
.footer-links a{ font-family:var(--font-caption); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.footer-links a:hover{ color:var(--accent); }
.footer-services{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); margin-top:var(--space-6); }
.footer-services a{ font-size:13.5px; color:var(--ink-soft); white-space:nowrap; }
.footer-services a:hover{ color:var(--accent); }
.footer-bottom{ margin-top:var(--space-6); font-family:var(--font-caption); font-size:11.5px; color:var(--ink-soft); opacity:.7; }
@media (max-width:640px){ .footer-top{ flex-direction:column; } }

/* ==========================================================================
   Detail page (sink-top-replace) — shares editorial language
   ========================================================================== */
.detail-hero{ padding-top:150px; }
.detail-hero-label{ margin-bottom:var(--space-6); }
.detail-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(40px,6vw,84px); letter-spacing:-.02em; line-height:1; }
.detail-hero-desc{ margin-top:var(--space-6); color:var(--ink-soft); font-size:17px; max-width:56ch; }
.detail-hero-media{ width:100%; aspect-ratio:21/9; max-height:560px; overflow:hidden; margin-top:var(--space-8); }
.detail-hero-media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .detail-hero-media{ aspect-ratio:4/3; } }

.note-block{ max-width:70ch; padding-top:var(--space-6); border-top:1px solid var(--line); margin-top:var(--space-8); }
.note-block .caption{ margin-bottom:var(--space-4); }
.note-block h3{ font-family:var(--font-display); font-weight:500; font-size:22px; }
.note-block p{ margin-top:var(--space-4); color:var(--ink-soft); font-size:16px; }

.check-list{ columns:3; column-gap:var(--gutter); }
.check-row{ break-inside:avoid; display:flex; gap:10px; padding:14px 0; border-top:1px solid var(--line); font-size:15.5px; }
.check-row:nth-last-child(-n+3){ border-bottom:1px solid var(--line); }
@media (max-width:900px){ .check-list{ columns:2; } }
@media (max-width:560px){ .check-list{ columns:1; } }

.mini-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter); }
.mini-step{ border-top:1px solid var(--line); padding-top:var(--space-4); }
.mini-step-num{ font-family:var(--font-caption); font-size:13px; color:var(--ink-soft); }
.mini-step h4{ font-family:var(--font-display); font-weight:500; font-size:17px; margin-top:8px; }
.mini-step p{ margin-top:6px; color:var(--ink-soft); font-size:14.5px; }
@media (max-width:768px){ .mini-steps{ grid-template-columns:1fr 1fr; } }

.material-compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); }
.material-col{ border-top:1px solid var(--line); padding-top:var(--space-5); }
.material-col h3{ font-family:var(--font-display); font-weight:500; font-size:22px; }
.material-col ul{ margin-top:var(--space-4); display:flex; flex-direction:column; gap:10px; }
.material-col li{ display:flex; gap:8px; font-size:15px; color:var(--ink-soft); }
.material-col li::before{ content:"—"; flex:none; color:var(--ink-soft); }
@media (max-width:768px){ .material-compare{ grid-template-columns:1fr; } }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); margin-top:var(--space-7); }
.stat-cell{ border-top:1px solid var(--accent); padding-top:var(--space-3); }
.stat-cell-label{ font-family:var(--font-caption); font-size:11.5px; color:var(--ink-soft); letter-spacing:.06em; }
.stat-cell-value{ margin-top:6px; font-family:var(--font-display); font-weight:500; font-size:17px; }
@media (max-width:768px){ .stat-row{ grid-template-columns:1fr; } }

.scope-compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); }
.scope-col{ border-top:1px solid var(--line); padding-top:var(--space-5); }
.scope-col.is-included{ border-top-color:var(--accent); }
.scope-col ul{ margin-top:var(--space-4); display:flex; flex-direction:column; gap:10px; }
.scope-col li{ font-size:15px; color:var(--ink-soft); }
@media (max-width:768px){ .scope-compare{ grid-template-columns:1fr; } }

.related-list{ display:flex; flex-direction:column; }