@charset "utf-8";
/* ==========================================================================
   고신 상업공간 인테리어 — commercial.kosininterior.com
   레퍼런스 톤: 웜 크림 배경 + 잉크 블랙 + 오렌지 액센트, 세리프 디스플레이
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --cream:#FFFDF8;
  --cream-2:#F9F1E2;
  --sand:#F1E7D3;
  --beige:#DACAB6;
  --ink:#111111;
  --ink-2:#514E4A;
  --ink-3:#75706A;                      /* 크림 위 4.9:1 (이전 #8F8A82는 3.4:1로 AA 미달) */
  --line:rgba(17,17,17,.13);
  --line-soft:rgba(17,17,17,.07);
  --accent:#F66F00;                     /* 원색 — 어두운 배경 전용 */
  --accent-deep:#AE4500;                /* 밝은 배경의 글자/채움 — cream 5.7:1, sand(카드 hover) 4.7:1 */
  --accent-fg:var(--accent-deep);       /* 문맥 토큰: .night/.foot 안에서 --accent 로 뒤집힌다 */
  --night:#191713;
  --night-2:#221F1A;

  --r:.75rem;
  --r-lg:1.25rem;
  --nav-h:4.6rem;

  --margin:clamp(1.15rem, 4.2vw, 4.5rem);
  --gutter:clamp(.7rem, 1.35vw, 1.4rem);
  --sec:clamp(4.5rem, 11vw, 11rem);
  --row:clamp(6.5rem, 14.5vw, 15rem);   /* 이미지 그리드의 모듈러 행 높이 */

  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-serif:"Instrument Serif","Gowun Batang",Georgia,"Nanum Myeongjo",serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-sans);font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  line-height:1.7;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--accent-deep);color:#fff}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:96rem;margin-inline:auto;padding-inline:var(--margin)}
/* 문서 폭을 늘리지 않는 스킵링크 (left:-9999px 는 가로 오버플로를 만든다) */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;clip-path:none;z-index:999;
  background:var(--ink);color:var(--cream);padding:.7rem 1.1rem;border-radius:var(--r)}

/* ---------- type ---------- */
.kick{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:.6rem;
}
.kick::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.55}
.kick.plain::before{display:none}

/* 한글 세리프(Gowun Batang)는 받침 때문에 라틴 기준 행간·자간을 그대로 쓰면 붙는다.
   .98/-.032em 는 Instrument Serif 기준값이라 한글 2줄 제목에서 획이 겹쳤다. */
.display{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(2.65rem,1.1rem + 7.1vw,7.5rem);
  line-height:1.05;letter-spacing:-.018em;
}
.h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(2rem,1rem + 3.5vw,4.25rem);
  line-height:1.13;letter-spacing:-.016em;
}
.h3{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.4rem,1rem + 1.35vw,2.25rem);
  line-height:1.26;letter-spacing:-.012em;
}
.thin{color:var(--ink-3)}
.lead{
  font-size:clamp(1rem,.95rem + .42vw,1.28rem);
  line-height:1.66;color:var(--ink-2);letter-spacing:-.014em;
}
.small{font-size:.875rem;line-height:1.65;color:var(--ink-2)}
.mono{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase}

/* 한글은 단어 중간에서 끊지 않는다 (주식회/사 고신 같은 어색한 줄바꿈 방지) */
body{word-break:keep-all;overflow-wrap:break-word}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.6rem;border-radius:100px;
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  border:1px solid var(--ink);transition:.35s var(--ease);white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--ink);color:var(--cream)}
/* 흰 글자를 얹는 면(面)은 --accent 가 아니라 --accent-deep — 원색 위 흰 글자는 2.9:1 이라 못 읽는다 */
.btn.solid:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn.ghost:hover{background:var(--ink);color:var(--cream)}
.btn.accent{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn.accent:hover{background:var(--ink);border-color:var(--ink)}
.btn.light{border-color:rgba(255,255,255,.35);color:#fff}
.btn.light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

.tlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9375rem;font-weight:600;padding-bottom:.28rem;
  border-bottom:1px solid var(--line);transition:.3s var(--ease);
}
.tlink:hover{border-color:var(--accent-fg);color:var(--accent-fg);gap:.85rem}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,253,248,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.stuck{border-bottom-color:var(--line-soft)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--nav-h)}
.brand{display:flex;flex-direction:column;line-height:1;flex-shrink:0}
.brand b{font-family:var(--font-serif);font-weight:400;font-size:1.5rem;letter-spacing:.09em}
.brand b i{color:var(--accent-fg);font-style:normal}
.brand small{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.19em;color:var(--ink-3);margin-top:.3rem;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links a{
  padding:.5rem .82rem;border-radius:100px;font-size:.9rem;font-weight:500;
  color:var(--ink-2);transition:.25s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink);background:var(--sand)}
.nav-cta{
  margin-left:.5rem;background:var(--ink)!important;color:var(--cream)!important;
  padding:.62rem 1.15rem!important;font-weight:600!important;
}
.nav-cta:hover{background:var(--accent-deep)!important}
.burger{display:none;width:2.6rem;height:2.6rem;flex-direction:column;justify-content:center;align-items:flex-end;gap:.32rem}
.burger span{display:block;height:1.5px;background:var(--ink);transition:.3s var(--ease)}
.burger span:nth-child(1){width:1.4rem}
.burger span:nth-child(2){width:1rem}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(.41rem) rotate(45deg);width:1.4rem}
.burger[aria-expanded=true] span:nth-child(2){transform:translateY(-.41rem) rotate(-45deg);width:1.4rem}

.mmenu{
  position:fixed;inset:var(--nav-h) 0 auto;z-index:99;background:var(--cream);
  border-bottom:1px solid var(--line);padding:1rem var(--margin) 2rem;
  display:none;flex-direction:column;max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
}
.mmenu.open{display:flex}
.mmenu a{
  display:flex;flex-direction:column;gap:.18rem;padding:1rem 0;
  border-bottom:1px solid var(--line-soft);font-size:1.2rem;font-weight:600;
}
.mmenu a small{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;color:var(--ink-3)}
.mmenu .btn{margin-top:1.5rem}

/* ---------- section shell ---------- */
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:clamp(3rem,7vw,6rem)}
.eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.eyebrow .num{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.eyebrow .ln{flex:1;height:1px;background:var(--line)}
.eyebrow .tag{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(3rem,6vw,5.5rem)}
.hero-type{max-width:62rem}
.hero .display{margin:1.4rem 0 0}
/* 강조 단어가 전부 한글인데 Gowun Batang 에는 이탤릭이 없다 →
   브라우저가 기울여 그린 가짜 이탤릭이 보였다. 기울이지 않고 색으로만 강조한다. */
.hero .display em{font-style:normal;color:var(--accent-fg)}
.hero-sub{margin-top:1.6rem;max-width:38rem}
.hero-act{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;margin-top:2.6rem;
  padding-top:1.4rem;border-top:1px solid var(--line);
}
.hero-meta span{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.hero-meta b{color:var(--ink);font-weight:500}

.mosaic{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  grid-auto-rows:var(--row);margin-top:clamp(2.5rem,5vw,4rem);
}
.mosaic figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--sand)}
[data-full]{cursor:zoom-in}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mosaic figure:hover img{transform:scale(1.035)}
.mosaic .mA{grid-column:span 7;grid-row:span 3}
.mosaic .mB{grid-column:span 5;grid-row:span 3}
.mosaic .mC{grid-column:span 5;grid-row:span 2}
.mosaic .mD{grid-column:span 7;grid-row:span 2}
figcaption{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:rgba(17,17,17,.6);backdrop-filter:blur(6px);
  padding:.4rem .7rem;border-radius:100px;
  opacity:0;transform:translateY(5px);transition:.4s var(--ease);
}
.mosaic figure:hover figcaption{opacity:1;transform:none}
/* 터치 기기엔 hover 가 없다 — 캡션이 영영 안 보이던 문제 */
@media (hover:none){figcaption{opacity:1;transform:none}}

/* ---------- value row ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.values.four{grid-template-columns:repeat(4,1fr)}   /* 인라인 style 금지 — 미디어쿼리를 이겨버린다 */
.vcard{
  padding:clamp(1.5rem,2.6vw,2.4rem);border-radius:var(--r-lg);
  background:var(--cream-2);border:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:.85rem;min-height:15rem;
  transition:.4s var(--ease);
}
.vcard:hover{background:var(--sand);transform:translateY(-3px)}
.vcard .vn{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-fg)}
.vcard h2,.vcard h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.35rem,1rem + 1.1vw,1.95rem);line-height:1.26;letter-spacing:-.012em;margin-top:auto}
.vcard p{font-size:.9375rem;color:var(--ink-2);line-height:1.62}

/* ---------- statement ---------- */
.statement{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.9rem,1rem + 4vw,4.5rem);line-height:1.16;letter-spacing:-.016em;
  max-width:26ch;
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem)}

/* ---------- steps ---------- */
.step{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4.5rem);
  align-items:center;padding-block:clamp(2.5rem,5vw,4.5rem);
  border-top:1px solid var(--line);
}
.step:nth-child(even) .step-img{order:-1}
.step-n{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-fg);display:block;margin-bottom:1rem;
}
.step h3{margin-bottom:1rem}
.step ul{margin-top:1.6rem;display:flex;flex-direction:column;gap:.6rem}
.step li{
  display:flex;gap:.7rem;font-size:.9375rem;color:var(--ink-2);
  padding-bottom:.6rem;border-bottom:1px solid var(--line-soft);
}
.step li::before{content:"—";color:var(--ink-3);flex-shrink:0}
.step-img{border-radius:var(--r-lg);overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.step-img img{width:100%;height:100%;object-fit:cover}

/* ---------- dark block ---------- */
/* 어두운 면에선 눌린 색보다 원색 오렌지가 더 또렷하다 (--accent-fg 를 뒤집는다) */
.night,.foot{--accent-fg:var(--accent)}
.night{background:var(--night);color:var(--cream)}
.night .h2,.night .statement{color:var(--cream)}
.night .lead,.night .small{color:rgba(255,253,248,.66)}
.night .eyebrow .num{color:var(--cream)}
.night .eyebrow .ln{background:rgba(255,253,248,.18)}
.night .eyebrow .tag,.night .kick{color:rgba(255,253,248,.5)}
.risks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:clamp(2rem,4vw,3.5rem)}
.risk{
  padding:clamp(1.4rem,2.4vw,2.2rem);border-radius:var(--r-lg);
  background:var(--night-2);border:1px solid rgba(255,253,248,.09);
  display:flex;flex-direction:column;gap:.7rem;
}
.risk b{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(2.2rem,1.4rem + 2.4vw,3.6rem);line-height:1.1;color:var(--accent-fg);letter-spacing:-.012em;
}
.risk p{font-size:.9375rem;line-height:1.6;color:rgba(255,253,248,.66)}

/* ---------- works grid ---------- */
.wgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);grid-auto-rows:var(--row)}
.wcard{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--sand);
  display:block;transition:transform .5s var(--ease);
}
.wcard:hover{transform:translateY(-4px)}
.wcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.wcard:hover img{transform:scale(1.04)}
.wcard::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,9,7,.78) 0%,rgba(10,9,7,.18) 42%,transparent 68%);
}
.wcard .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.1rem,2vw,1.7rem);color:#fff}
.wcard .meta .tag{
  display:inline-block;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.11em;
  text-transform:uppercase;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
  padding:.3rem .6rem;border-radius:100px;margin-bottom:.7rem;
}
.wcard .meta b{
  display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.15rem,1rem + .75vw,1.7rem);line-height:1.22;letter-spacing:-.012em;
}
.wcard .meta small{display:block;margin-top:.3rem;font-size:.8125rem;color:rgba(255,255,255,.7)}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}
.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}
.c3{grid-column:span 3}
/* 행 높이는 모듈러 단위(--row)의 배수 — 같은 줄의 카드는 같은 rs 값을 써야 정렬된다 */
.rs2{grid-row:span 2}.rs3{grid-row:span 3}.rs4{grid-row:span 4}

/* ---------- category list ---------- */
.cats{border-top:1px solid var(--line)}
.cat{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,3rem);
  align-items:center;padding-block:clamp(1.4rem,2.6vw,2.2rem);
  border-bottom:1px solid var(--line);transition:.35s var(--ease);
}
.cat:hover{background:var(--cream-2);padding-inline:1rem;border-radius:var(--r)}
.cat .cn{font-family:var(--font-mono);font-size:.6875rem;color:var(--ink-3);letter-spacing:.1em}
.cat .ct{display:flex;flex-direction:column;gap:.35rem}
.cat .ct b{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.25rem,1rem + 1vw,1.9rem);letter-spacing:-.012em;line-height:1.28}
.cat .ct span{font-size:.9375rem;color:var(--ink-2);line-height:1.6}
.cat .cthumb{width:clamp(4.5rem,9vw,7.5rem);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--sand);flex-shrink:0}
.cat .cthumb img{width:100%;height:100%;object-fit:cover}
/* 연혁용 변형 — 연도 + 내용 2단 */
.cat.hist{grid-template-columns:clamp(5rem,10vw,9rem) 1fr}
.cat.hist .cn{font-size:.8125rem;color:var(--accent-fg);letter-spacing:.06em}
.cat.hist .ct b{font-size:clamp(1.1rem,1rem + .6vw,1.5rem)}

/* ---------- project detail rows ---------- */
.pj{padding-block:clamp(3rem,6vw,5.5rem);border-top:1px solid var(--line)}
.pj-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,3.5rem);align-items:end;margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.pj-facts{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:1.2rem}
.pj-facts div{display:flex;flex-direction:column;gap:.2rem}
.pj-facts dt{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.pj-facts dd{margin:0;font-size:.9375rem;font-weight:500}
.pj-imgs{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);grid-auto-rows:var(--row)}
.pj-imgs figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--sand)}
.pj-imgs img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pj-imgs figure:hover img{transform:scale(1.035)}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:1.5rem}
.tbl th,.tbl td{padding:1rem .8rem;text-align:left;border-bottom:1px solid var(--line);font-size:.9375rem;vertical-align:top}
.tbl th{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.tbl td b{font-weight:600}
.tbl tr:hover td{background:var(--cream-2)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.35rem 0;cursor:pointer;list-style:none;
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);font-weight:600;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:1.3rem;color:var(--ink-3);transition:.3s var(--ease);flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--accent-fg)}
.faq p{padding:0 0 1.5rem;color:var(--ink-2);font-size:.9375rem;line-height:1.72;max-width:60ch}

/* ---------- CTA ---------- */
.cta{background:var(--sand);border-radius:var(--r-lg);padding:clamp(2.2rem,5.5vw,5rem);text-align:center}
.cta .h2{margin:1.2rem auto 0;max-width:20ch}
.cta .lead{margin:1.3rem auto 0;max-width:44ch}
.cta-act{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2rem}

/* ---------- contact ---------- */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:clamp(2rem,4vw,3rem)}
.ccard{
  padding:clamp(1.5rem,2.6vw,2.4rem);border-radius:var(--r-lg);
  background:var(--cream-2);border:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:.5rem;transition:.35s var(--ease);
}
.ccard:hover{background:var(--sand);transform:translateY(-3px)}
.ccard .cl{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.ccard .cv{font-family:var(--font-serif);font-size:clamp(1.35rem,1rem + 1.2vw,2rem);letter-spacing:-.02em;line-height:1.2}
.ccard p{font-size:.875rem;color:var(--ink-2);margin-top:.2rem}

/* ---------- sitemap ---------- */
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,3rem)}
.smap section h2{font-family:var(--font-serif);font-weight:400;font-size:1.35rem;letter-spacing:-.02em;padding-bottom:.8rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.smap li a{display:block;padding:.55rem 0;font-size:.9375rem;color:var(--ink-2);border-bottom:1px solid var(--line-soft);transition:.25s}
.smap li a:hover{color:var(--accent-fg);padding-left:.4rem}

/* ---------- trust strip ---------- */
.trust{background:var(--cream-2);border-block:1px solid var(--line-soft)}
.trust .wrap{padding-block:clamp(1.6rem,3vw,2.4rem);display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.5rem}
.trust .tl{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-right:auto}
.trust li{font-size:.8125rem;font-weight:500;color:var(--ink-2);padding:.42rem .85rem;background:var(--cream);border:1px solid var(--line-soft);border-radius:100px}
.trust ul{display:flex;flex-wrap:wrap;gap:.5rem}

/* ---------- footer ---------- */
.foot{background:var(--night);color:rgba(255,253,248,.62);padding-block:clamp(3rem,6vw,5rem) 2rem;margin-top:0}
.foot a{color:inherit;transition:color .25s}
.foot a:hover{color:var(--accent-fg)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.8rem,4vw,4rem);padding-bottom:clamp(2.2rem,4vw,3.5rem);border-bottom:1px solid rgba(255,253,248,.12)}
.foot .brand b{color:var(--cream)}
/* .42 / .38 은 night 위에서 4:1 미만이었다 — 작은 글자는 4.5:1 이 필요하다 */
.foot h3{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,253,248,.56);font-weight:500;margin-bottom:1.1rem}
.foot li{margin-bottom:.6rem;font-size:.9rem}
.foot .fbig{
  font-family:var(--font-serif);font-size:clamp(1.5rem,1rem + 1.6vw,2.3rem);
  color:var(--cream);letter-spacing:-.02em;display:inline-block;margin-top:.3rem;
}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;padding-top:1.6rem;font-size:.78rem;color:rgba(255,253,248,.56)}
.foot-bot ul{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot-note{margin-top:1rem;font-size:.78rem;line-height:1.7;color:rgba(255,253,248,.54);max-width:52rem}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(12,11,9,.94);display:none;place-items:center;padding:clamp(1rem,4vw,3rem)}
.lb.open{display:grid}
.lb img{max-width:100%;max-height:86dvh;object-fit:contain;border-radius:var(--r)}
.lb-cap{position:absolute;left:0;right:0;bottom:clamp(1rem,3vw,2rem);text-align:center;color:rgba(255,255,255,.72);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;padding-inline:1rem}
.lb-x{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);width:2.8rem;height:2.8rem;border-radius:100px;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;font-size:1.3rem;transition:.25s}
.lb-x:hover{background:rgba(255,255,255,.22)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .mosaic img,.wcard img,.pj-imgs img{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .foot-top{grid-template-columns:1fr 1fr}
  .smap{grid-template-columns:1fr 1fr}
  .values.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
  .values,.values.four,.risks,.ccards{grid-template-columns:1fr}
  .two-col,.step,.pj-head{grid-template-columns:1fr}
  .step:nth-child(even) .step-img{order:0}
  /* 모바일: 12칸 전폭 · 행 높이는 3단위 고정으로 통일 */
  .mosaic .mA,.mosaic .mB,.mosaic .mC,.mosaic .mD,
  .c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12}
  .mosaic .mA,.mosaic .mB,.mosaic .mC,.mosaic .mD,
  .rs2,.rs3,.rs4{grid-row:span 3}
  .cat{grid-template-columns:1fr auto;gap:1rem}
  .cat .cn{display:none}
  .cat.hist{grid-template-columns:1fr;gap:.35rem}
  .cat.hist .cn{display:block}   /* 연혁은 연도가 핵심이라 모바일에서도 남긴다 */
  .foot-top{grid-template-columns:1fr}
  .smap{grid-template-columns:1fr}
}
@media (max-width:520px){
  .hero-act .btn,.cta-act .btn{width:100%}
  .trust .tl{width:100%;margin-bottom:.3rem}
}

@media print{
  .nav,.mmenu,.lb,.cta,.foot-bot{display:none}
  body{background:#fff}
}