/* ============================================================
   parapa tile — design system
   잉크/몰탈/크림 · Syne(영문 액센트) + Pretendard(한글) + Gothic A1(가는 한글) + Syne Mono(라벨)
   에디토리얼 갤러리 · 줄눈 그리드 모티브 · 무채색 + 몰탈 accent 1
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Gothic+A1:wght@200;300;400&family=Syne+Mono&family=Noto+Serif+KR:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;1,400;1,500&display=swap');

:root{
  --ink:#1c1917;
  --ink-soft:#403a35;
  --mortar:#8a7d6d;
  --mortar-dk:#6f6457;
  --cream:#f5f3ef;
  --cream2:#ece7dd;
  --bg:#faf8f4;
  --line:#e2dccf;
  --line-soft:#ede8df;
  --white:#fffdfa;

  --sans:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
  --syne:'Syne',sans-serif;
  --thin:'Gothic A1',sans-serif;
  --mono:'Syne Mono',monospace;

  --wrap:1200px;
  --gut:clamp(20px,5vw,64px);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.7;letter-spacing:-.01em;font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--cream)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* kicker / labels */
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mortar)}
.en{font-family:var(--syne);font-weight:800;letter-spacing:-.02em}

/* headings — 크고 가볍게 */
h1,h2,h3{font-weight:300;letter-spacing:-.025em;line-height:1.12}
.h-hero{font-size:clamp(38px,7vw,82px);font-weight:300}
.h-sec{font-size:clamp(28px,4.6vw,52px)}
.h-sub{font-size:clamp(21px,2.6vw,30px)}
.lead{font-size:clamp(16px,2vw,20px);font-weight:300;color:var(--ink-soft);line-height:1.75}
strong,b{font-weight:600}

/* ===== nav ===== */
#nav{
  position:sticky;top:0;z-index:1000;
  background:rgba(250,248,244,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
#nav .bar{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  height:70px;display:flex;align-items:center;justify-content:space-between;
}
#nav .logo{display:flex;align-items:center;gap:13px}
#nav .logo img.mk{height:34px;width:auto}
#nav .logo .wm{font-family:var(--syne);font-weight:800;font-size:25px;letter-spacing:-1px;color:var(--ink)}

/* 데스크탑 메뉴 */
#nav .menu{display:flex;align-items:center;gap:34px}
#nav .menu a{font-size:15px;color:var(--ink-soft);font-weight:500;transition:color .2s}
#nav .menu a:hover,#nav .menu a.active{color:var(--ink)}
#nav .tel{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--ink);padding:8px 16px;background:var(--cream2);
  border-radius:2px;transition:.2s;
}
#nav .tel:hover{background:var(--ink);color:var(--cream)}

/* 햄버거 버튼 — 기본 숨김, 모바일에서만 노출 */
.burger{
  display:none;            /* 데스크탑: 숨김 */
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;border:0;cursor:pointer;
  padding:10px 8px;
  /* 메뉴 열렸을 때도 항상 최상단 */
  position:fixed;
  top:15px;
  right:clamp(16px,5vw,40px);
  z-index:3000;            /* mobile-menu(2500) 위 */
}
.burger span{
  display:block;
  width:24px;height:2px;
  background:var(--ink);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s;
  transform-origin:center;
}
/* X 변형 */
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== 모바일 풀스크린 메뉴 ===== */
/* 기본 상태: 화면 밖(translateX 100%), 불투명, 포인터 없음 */
.mobile-menu{
  display:block;            /* display:none 하면 transition 안 먹힘 */
  position:fixed;
  inset:0;
  z-index:2500;
  background:var(--cream);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .46s cubic-bezier(.2,.8,.2,1), visibility 0s linear .46s;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* 열린 상태 */
.mobile-menu.open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .46s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}

/* 내부 레이아웃 */
.mm-inner{
  min-height:100%;
  padding:90px var(--gut) 52px;
  display:flex;flex-direction:column;justify-content:space-between;
}
/* 메뉴 링크 목록 */
.mm-links{display:flex;flex-direction:column;flex:1}
.mm-links a{
  display:flex;align-items:baseline;gap:18px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none;
  transition:padding-left .32s cubic-bezier(.2,.8,.2,1);
}
.mm-links a:hover,.mm-links a:active{padding-left:10px}
.mm-links .n{
  font-family:var(--mono);font-size:11px;
  color:var(--mortar);letter-spacing:.12em;
  flex:none;width:24px;
}
.mm-links .ko{
  font-family:'Noto Serif KR',serif;
  font-size:clamp(28px,8vw,40px);
  font-weight:600;
  color:var(--ink);letter-spacing:-.02em;line-height:1;
}
.mm-links .en{
  font-family:var(--syne);font-weight:700;font-size:13px;
  color:var(--mortar);margin-left:auto;letter-spacing:.04em;
}
/* 하단: 전화번호 + SNS */
.mm-foot{display:flex;flex-direction:column;gap:18px}
.mm-tel{
  font-family:'Newsreader',serif;font-style:italic;
  font-size:clamp(26px,7vw,34px);
  color:var(--ink);letter-spacing:-.01em;
  text-decoration:none;
}
.mm-tel:hover{color:var(--mortar)}
.mm-sns{display:flex;gap:24px}
.mm-sns a{
  font-family:var(--mono);font-size:12px;
  color:var(--mortar-dk);letter-spacing:.06em;
  text-decoration:none;
}
.mm-sns a:hover{color:var(--ink)}

/* ===== buttons ===== */
/* 주 CTA: 텍스트 + 하단 hairline + 화살표 슬라이드 */
.btn{
  display:inline-flex;align-items:center;gap:0;
  font-size:15px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--mono);
  padding:0;background:none;border:none;border-radius:0;
  cursor:pointer;text-decoration:none;
  position:relative;color:var(--ink);
  transition:color .25s;
}

/* btn-ink: 주 CTA — 잉크 텍스트, 하단 실선, 화살표 -->로 이동 */
.btn-ink{
  color:var(--ink);
  padding-bottom:4px;
}
.btn-ink::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;
  height:1px;background:var(--ink);
  transform-origin:left center;
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.btn-ink:hover::after{
  transform:scaleX(1.04);
  background:var(--mortar);
}
.btn-ink .arr{
  display:inline-block;
  font-family:var(--mono);
  font-size:14px;
  margin-left:10px;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s;
  opacity:.7;
}
.btn-ink:hover .arr{
  transform:translateX(5px);
  opacity:1;
}

/* btn-line: 보조 — 몰탈 텍스트, 하단 점선(dotted), 화살표 없음 */
.btn-line{
  color:var(--mortar);
  padding-bottom:3px;
  letter-spacing:.1em;
}
.btn-line::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;
  height:1px;
  background:repeating-linear-gradient(90deg,var(--mortar) 0,var(--mortar) 4px,transparent 4px,transparent 8px);
  opacity:.55;
  transition:opacity .28s;
}
.btn-line:hover{color:var(--ink);}
.btn-line:hover::after{
  background:repeating-linear-gradient(90deg,var(--ink) 0,var(--ink) 4px,transparent 4px,transparent 8px);
  opacity:.85;
}

.cta-row{display:flex;gap:28px;flex-wrap:wrap;align-items:center}

/* ===== sections ===== */
section{position:relative}
.pad{padding:clamp(64px,11vw,140px) 0}
.pad-s{padding:clamp(48px,8vw,90px) 0}
.divline{height:1px;background:var(--line)}

/* hero */
.hero{padding:clamp(70px,12vw,130px) 0 clamp(50px,8vw,90px)}
.hero .kick{margin-bottom:26px}
.hero h1{margin-bottom:30px}
.hero .lead{max-width:620px;margin-bottom:40px}
.hero .cta-row{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.hero-media{margin-top:clamp(40px,7vw,76px);position:relative}
.hero-media img{width:100%;height:clamp(300px,52vw,620px);object-fit:cover;border-radius:3px}
.hero-media .tagcap{position:absolute;left:0;bottom:-32px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mortar)}

/* service chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:14px;font-weight:500;color:var(--ink-soft);background:var(--cream);padding:9px 17px;border-radius:2px;border:1px solid var(--line-soft)}

/* section head */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(36px,5vw,60px);flex-wrap:wrap}
.sec-head .kick{margin-bottom:14px;display:block}
.sec-head .more{font-size:15px;color:var(--mortar-dk);font-weight:600;white-space:nowrap}
.sec-head .more:hover{color:var(--ink)}

/* pillars (3 cols) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.pillar{background:var(--bg);padding:clamp(28px,3.4vw,42px) clamp(24px,2.6vw,34px)}
.pillar .no{font-family:var(--mono);font-size:12px;color:var(--mortar);letter-spacing:.1em}
.pillar h3{font-size:23px;font-weight:500;margin:14px 0 12px}
.pillar p{font-size:15px;color:var(--ink-soft);font-weight:300}

/* feature grid (signature preview) */
.feat-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.feat{position:relative;overflow:hidden;border-radius:3px;background:var(--cream2)}
.feat img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.feat:hover img{transform:scale(1.045)}
.feat .ov{position:absolute;left:18px;bottom:16px;right:18px;color:#fff;z-index:2}
.feat .ov .t{font-size:17px;font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.feat .ov .m{font-family:var(--mono);font-size:10px;letter-spacing:.08em;opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 52%,rgba(15,13,12,.62));z-index:1;opacity:.92}
.feat.big{grid-column:span 6;aspect-ratio:4/3.1}
.feat.sm{grid-column:span 3;aspect-ratio:3/3.4}
.feat.wide{grid-column:span 6;aspect-ratio:4/3.1}

/* proof strip */
.proof{background:var(--ink);color:var(--cream)}
.proof .wrap{padding-top:clamp(56px,8vw,90px);padding-bottom:clamp(56px,8vw,90px)}
.proof .kick{color:var(--mortar)}
.proof h2{color:var(--cream);margin:16px 0 34px;font-size:clamp(24px,3.4vw,40px)}
.venues{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}
.venues span{font-family:var(--syne);font-weight:700;font-size:clamp(17px,2.2vw,25px);color:#cfc6b8;letter-spacing:-.01em}
.venues span.dim{color:#6a6256;font-weight:600;font-size:16px;font-family:var(--mono)}
.stat-row{display:flex;gap:clamp(30px,6vw,80px);margin-top:48px;flex-wrap:wrap}
.stat .n{font-family:var(--syne);font-weight:800;font-size:clamp(34px,5vw,58px);color:var(--cream);line-height:1}
.stat .l{font-size:14px;color:#a99e8f;margin-top:8px}

/* about teaser */
.about-teaser{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.about-teaser .q{font-size:clamp(20px,2.6vw,30px);font-weight:300;line-height:1.5;letter-spacing:-.02em}
.about-teaser .q em{font-style:normal;color:var(--mortar-dk);font-family:var(--thin);font-weight:300}
.about-teaser img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}

/* CTA band */
.cta-band{background:var(--cream2);text-align:center}
.cta-band .wrap{padding:clamp(60px,9vw,110px) var(--gut)}
.cta-band h2{margin-bottom:18px}
.cta-band .lead{max-width:540px;margin:0 auto 36px}
.cta-band .cta-row{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;align-items:center}

/* ===== footer ===== */
footer{background:var(--ink);color:#b8ad9d}
footer .wrap{padding:clamp(54px,7vw,80px) var(--gut) 40px}
footer .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:48px}
footer .logo-wm{font-family:var(--syne);font-weight:800;font-size:34px;letter-spacing:-1.5px;color:var(--cream)}
footer .logo-kr{font-family:var(--thin);font-weight:300;font-size:15px;letter-spacing:.3em;color:#8a7d6d;margin-top:8px}
footer .cols{display:flex;gap:clamp(36px,6vw,84px);flex-wrap:wrap}
footer .col h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6f6457;margin-bottom:14px;font-weight:400}
footer .col a,footer .col p{display:block;font-size:15px;color:#cfc6b8;margin-bottom:9px}
footer .col a:hover{color:var(--cream)}
footer .bot{border-top:1px solid #332e29;padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#6f6457}

/* ===== sub pages ===== */
.sub-hero{padding:clamp(82px,12vw,150px) 0 clamp(28px,4vw,50px)}
.sub-hero .kick{display:block;margin-bottom:20px}
.prose{max-width:680px}
.prose p{font-size:clamp(16px,1.9vw,19px);font-weight:300;color:var(--ink-soft);margin-bottom:22px;line-height:1.8}

/* services */
.svc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.svc{background:var(--bg);padding:clamp(26px,3vw,38px)}
.svc h3{font-size:21px;font-weight:500;margin-bottom:10px}
.svc p{font-size:15px;color:var(--ink-soft);font-weight:300}
.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:8px}
.tech{background:var(--bg);padding:26px clamp(24px,2.6vw,32px)}
.tech .tn{font-size:18px;font-weight:600;margin-bottom:8px}
.tech .tn::before{content:"";display:inline-block;width:14px;height:3px;background:var(--mortar);vertical-align:middle;margin-right:10px}
.tech .td{font-size:14px;color:var(--ink-soft);font-weight:300;padding-left:24px}
.mat{background:var(--cream);padding:clamp(30px,4vw,48px);border-radius:3px}

/* portfolio gallery (masonry via columns) */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.fbtn{font-size:14px;font-weight:500;color:var(--ink-soft);background:none;border:1px solid var(--line);padding:8px 17px;border-radius:2px;cursor:pointer;transition:.2s;font-family:var(--sans)}
.fbtn:hover{border-color:var(--mortar)}
.fbtn.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.gallery{column-count:3;column-gap:14px}
.gcell{break-inside:avoid;margin-bottom:14px;position:relative;border-radius:3px;overflow:hidden;background:var(--cream2)}
.gcell img{width:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gcell:hover img{transform:scale(1.04)}
.gcell figcaption{position:absolute;left:0;bottom:0;right:0;padding:20px 14px 11px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#fff;background:linear-gradient(transparent,rgba(15,13,12,.6));opacity:0;transition:.3s}
.gcell:hover figcaption{opacity:1}

/* repair */
.repair-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.rep{background:var(--bg);padding:clamp(26px,3vw,38px)}
.rep h3{font-size:20px;font-weight:500;margin-bottom:10px}
.rep p{font-size:15px;color:var(--ink-soft);font-weight:300}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ccard{background:var(--cream);padding:clamp(30px,3.6vw,46px);border-radius:3px;display:flex;flex-direction:column;gap:8px;transition:.25s;border-left:3px solid transparent}
a.ccard:hover{background:var(--cream2);border-left-color:var(--mortar);transform:translateY(-2px)}
.ccard.big{grid-column:span 2;background:var(--ink);color:var(--cream);border-left-color:var(--mortar)}
.ccard .cl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mortar)}
.ccard.big .cl{color:var(--mortar)}
.ccard .cv{font-family:var(--syne);font-weight:800;font-size:clamp(24px,3.4vw,38px);letter-spacing:-.01em}
.ccard .cm{font-size:14px;color:var(--ink-soft);font-weight:300}
.ccard.big .cm{color:#a99e8f}

@media(max-width:880px){
  .svc-list,.tech-grid,.repair-grid,.contact-grid{grid-template-columns:1fr}
  .ccard.big{grid-column:span 1}
  .gallery{column-count:2;column-gap:10px}
  .gcell{margin-bottom:10px}
}
@media(max-width:520px){ .gallery{column-count:1} }

/* reveal anim */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ===== responsive ===== */
@media(max-width:880px){
  /* 데스크탑 메뉴 숨김, 햄버거 표시 */
  #nav .menu{display:none !important}
  .burger{display:flex}
  .pillars{grid-template-columns:1fr}
  .feat.big,.feat.sm,.feat.wide{grid-column:span 12;aspect-ratio:4/3}
  .about-teaser{grid-template-columns:1fr;gap:28px}
  .about-teaser img{order:-1}
}

/* 데스크탑에서 mobile-menu 완전 숨김 */
@media(min-width:881px){
  .mobile-menu{
    display:none !important;
  }
  .burger{display:none !important}
}

/* === 안1 폰트: 묵직한 미술관 (Noto Serif KR 600 + Newsreader italic). 로고 워드마크(.wm/.en)는 Syne 유지 === */
h1,h2,h3,.h-hero,.h-sec,.h-sub{font-family:'Noto Serif KR',serif;font-weight:600}
.lead{font-weight:300}
.kick{font-family:'Newsreader',serif;font-style:italic;text-transform:none;letter-spacing:.01em;font-size:16px}
.stat .n{font-family:'Newsreader',serif;font-style:italic;font-weight:400;color:#f5f3ef}
#nav .tel{font-family:'Newsreader',serif;font-style:italic;font-size:15px}
.ccard .cv,.mm-tel{font-family:'Newsreader',serif;font-style:italic}
.mm-links .ko{font-family:'Noto Serif KR',serif;font-weight:600}
.pillar h3,.svc h3,.rep h3,.tech .tn{font-family:'Noto Serif KR',serif;font-weight:600}

/* === 서비스 칩 → 번호+명조 세로 인덱스 (border 박스 탈피) === */
.svc-strip-a .sa-row{display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;gap:0 22px;padding:22px 0;border-bottom:1px solid var(--line)}
.svc-strip-a .sa-row:first-child{border-top:1px solid var(--line)}
.svc-strip-a .sa-row:hover .sa-name{color:var(--mortar-dk)}
.svc-strip-a .sa-num{font-family:'Newsreader',serif;font-style:italic;font-size:14px;color:var(--mortar);letter-spacing:.06em;padding-top:6px}
.svc-strip-a .sa-name{font-family:'Noto Serif KR',serif;font-weight:600;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.025em;line-height:1.2;transition:color .25s}
.svc-strip-a .sa-note{font-family:'Newsreader',serif;font-style:italic;font-size:15px;color:var(--mortar);opacity:.72;white-space:nowrap}
@media(max-width:600px){.svc-strip-a .sa-note{display:none}.svc-strip-a .sa-row{grid-template-columns:32px 1fr}}


/* ============================================================
   parapa tile — glass layer (append only, no overwrites)
   marble-vein sheen · frosted cream surfaces ·절제된 깊이
   ============================================================ */

/* ===== 1. CSS 커스텀 속성 확장 ===== */
:root {
  --glass-cream: rgba(245,243,239,.62);
  --glass-cream-hover: rgba(245,243,239,.78);
  --glass-ink: rgba(28,25,23,.55);
  --glass-ink-hover: rgba(28,25,23,.72);
  --glass-hi: rgba(255,253,250,.55);   /* 상단 하이라이트 */
  --glass-hi-dark: rgba(255,253,250,.08);
  --glass-edge: rgba(255,253,250,.28);
  --glass-edge-dark: rgba(255,253,250,.10);
  --glass-blur: 18px;
  --glass-blur-sm: 10px;
  --glass-sheen: radial-gradient(ellipse 480px 280px at var(--mx,50%) var(--my,30%), rgba(255,253,250,.13) 0%, transparent 68%);
  --glass-sheen-dark: radial-gradient(ellipse 460px 260px at var(--mx,50%) var(--my,30%), rgba(255,253,250,.07) 0%, transparent 65%);
}

/* ===== 2. nav 글래스 강화 ===== */
#nav {
  background: rgba(250,248,244,.82) !important;
  backdrop-filter: saturate(160%) blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur)) !important;
  border-bottom: 1px solid rgba(255,253,250,.55) !important;
  box-shadow:
    0 1px 0 0 var(--line-soft),
    0 4px 24px -4px rgba(28,25,23,.06),
    inset 0 1px 0 0 var(--glass-hi);
}

/* nav 안에 mouse-sheen 레이어 */
#nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-sheen);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
#nav:hover::before { opacity: 1; }
#nav .bar { position: relative; z-index: 1; }

/* ===== 3. 서비스 인덱스 행 hover glass ===== */
.svc-strip-a .sa-row {
  position: relative;
  overflow: hidden;
  transition:
    padding-left .32s cubic-bezier(.2,.8,.2,1),
    background .3s ease;
  border-radius: 2px;
}
.svc-strip-a .sa-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-cream);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  border-radius: 2px;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.svc-strip-a .sa-row:hover::before { opacity: 1; }
.svc-strip-a .sa-row:hover { padding-left: 8px; }

/* ===== 4. pillars 글래스 표면 ===== */
.pillar {
  position: relative;
  overflow: hidden;
  transition: box-shadow .38s ease, transform .38s cubic-bezier(.2,.8,.2,1);
}
.pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,253,250,.18) 0%,
    transparent 55%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .38s ease;
}
.pillar:hover {
  box-shadow:
    0 0 0 1px rgba(255,253,250,.6),
    0 8px 32px -8px rgba(28,25,23,.09),
    inset 0 1px 0 0 var(--glass-hi);
  transform: translateY(-2px);
  z-index: 2;
}
.pillar:hover::after { opacity: 1; }

/* ===== 5. feat 이미지 카드 — 글래스 캡션 강화 ===== */
.feat .ov {
  background: linear-gradient(transparent, rgba(15,13,12,.0));
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    backdrop-filter .45s ease,
    -webkit-backdrop-filter .45s ease,
    bottom .38s cubic-bezier(.2,.8,.2,1);
  border-radius: 0 0 3px 3px;
  padding: 22px 18px 16px;
}
.feat:hover .ov {
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  bottom: 0;
}
/* .feat 카드 hover 시 상단 유리 sheen */
.feat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(
    180deg,
    rgba(255,253,250,.12) 0%,
    transparent 100%
  );
  opacity: 0;
  z-index: 3;
  transition: opacity .45s ease;
  pointer-events: none;
  border-radius: 3px 3px 0 0;
}
.feat:hover::before { opacity: 1; }

/* ===== 6. .proof 섹션 글래스 심도 ===== */
.proof {
  position: relative;
  overflow: hidden;
}
.proof::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-sheen-dark);
  pointer-events: none;
  z-index: 0;
}
.proof .wrap { position: relative; z-index: 1; }

/* proof 통계 숫자에 미세 glass 테두리 */
.stat {
  position: relative;
  padding: 20px 24px 18px;
  border-radius: 3px;
  transition: background .32s ease, box-shadow .32s ease;
}
.stat:hover {
  background: rgba(255,253,250,.06);
  box-shadow:
    inset 0 1px 0 0 rgba(255,253,250,.14),
    0 4px 20px -4px rgba(0,0,0,.18);
}

/* ===== 7. about-teaser 이미지 glass lift ===== */
.about-teaser img {
  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    box-shadow .5s ease;
}
.about-teaser img:hover {
  transform: scale(1.015) translateY(-3px);
  box-shadow:
    0 16px 48px -12px rgba(28,25,23,.16),
    0 0 0 1px rgba(255,253,250,.35);
}

/* ===== 8. CTA band 글래스 표면 ===== */
.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(255,253,250,.45) 0%,
      rgba(236,231,221,.20) 50%,
      rgba(255,253,250,.30) 100%
    );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; }
/* sheen */
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-sheen);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.cta-band:hover::after { opacity: 1; }

/* ===== 9. 연락 카드(.ccard) 글래스 ===== */
.ccard {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow:
    inset 0 1px 0 0 rgba(255,253,250,.62),
    0 2px 12px -4px rgba(28,25,23,.07);
  transition:
    background .28s ease,
    box-shadow .32s ease,
    transform .32s cubic-bezier(.2,.8,.2,1),
    border-left-color .25s ease;
}
.ccard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glass-hi) 30%,
    var(--glass-hi) 70%,
    transparent 100%
  );
  pointer-events: none;
}
a.ccard:hover {
  box-shadow:
    inset 0 1px 0 0 rgba(255,253,250,.88),
    0 12px 36px -8px rgba(28,25,23,.13),
    0 0 0 1px rgba(138,125,109,.18);
  transform: translateY(-3px);
}

/* .ccard.big — 잉크 배경 위 dark glass */
.ccard.big {
  background: var(--ink) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255,253,250,.14),
    0 4px 20px -4px rgba(0,0,0,.22);
}
.ccard.big::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,253,250,.10) 30%,
    rgba(255,253,250,.10) 70%,
    transparent 100%
  );
}

/* ===== 10. 갤러리 셀(.gcell) 글래스 figcaption ===== */
.gcell figcaption {
  background:
    linear-gradient(transparent, rgba(15,13,12,.58));
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  box-shadow: inset 0 1px 0 0 rgba(255,253,250,.08);
  padding: 28px 14px 13px;
}
.gcell {
  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    box-shadow .42s ease;
}
.gcell:hover {
  transform: translateY(-3px) scale(1.008);
  box-shadow:
    0 12px 36px -8px rgba(28,25,23,.14),
    0 0 0 1px rgba(255,253,250,.30);
  z-index: 2;
}

/* ===== 11. btn 글래스 glow ===== */
.btn-ink:hover {
  text-shadow: 0 0 12px rgba(28,25,23,.12);
}
.btn-line:hover {
  text-shadow: 0 0 8px rgba(138,125,109,.15);
}

/* ===== 12. 모바일 메뉴 glass 강화 ===== */
.mobile-menu {
  background: rgba(245,243,239,.94) !important;
  backdrop-filter: saturate(150%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(22px) !important;
}
.mm-links a {
  position: relative;
  overflow: hidden;
  transition:
    padding-left .32s cubic-bezier(.2,.8,.2,1),
    background .25s ease;
  border-radius: 2px;
}
.mm-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,253,250,.5);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.mm-links a:hover::before { opacity: 1; }

/* ===== 13. 히어로 이미지 glass hover ===== */
.hero-media {
  position: relative;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,253,250,.10) 0%,
    transparent 50%
  );
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-media:hover::after { opacity: 1; }

/* ===== 14. prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .pillar,
  .gcell,
  .ccard,
  .about-teaser img {
    transition: none !important;
    transform: none !important;
  }
  .feat::before,
  .feat .ov,
  .svc-strip-a .sa-row::before,
  #nav::before,
  .cta-band::after {
    transition: none !important;
  }
}

/* ===== 15. 모바일 blur 성능 최적화 ===== */
@media (max-width: 880px) {
  .ccard {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
  .feat .ov {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .gcell figcaption {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .svc-strip-a .sa-row::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}