/* EDAC — 공통 스타일
   레이아웃: 좁은 중앙 열을 따라 흐르는 수직 스택. 아이템이 늘어나도 같은 틀을 쓴다.
   테마: 제품 사진이 전부 흰 배경 스튜디오 컷이라 라이트 단일 테마로 고정.
   색: 알루미늄 중간톤(#A09E9C)과 키캡 레드(#C33B38)를 제품 사진에서 추출. */
:root{
  color-scheme: light;
  --paper:#FBFAF9;
  --surface:#F1EFEE;
  --ink:#141312;
  --muted:#6E6B68;
  --label:#6E6B68;      /* 작은 글자: 흰 배경 대비 4.8:1 */
  --line:#E2DEDB;
  --alum:#A09E9C;       /* 선·장식 전용 (글자에 쓰면 대비 부족) */
  --accent:#C33B38;
  --font-display:'Archivo','IBM Plex Sans KR',system-ui,sans-serif;
  --font-body:'IBM Plex Sans KR','Archivo',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1120px;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-weight:300;
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
@media (max-width:420px){ .wrap, .nav-in{padding-inline:18px} }
.eyebrow{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--label); margin:0 0 18px;
}
h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; text-wrap:balance; margin:0}
h2{font-size:clamp(28px,4.2vw,52px); line-height:1.1}
h3{font-size:clamp(19px,2vw,23px); line-height:1.3; letter-spacing:-.015em}
p{margin:0}
.lede{font-size:clamp(17px,1.5vw,20px); color:var(--muted); max-width:62ch}

/* ── 상단 바 (모든 페이지 공통) ───────────── */
.nav{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--wrap); margin-inline:auto; padding:0 24px;
  height:52px; display:flex; align-items:center; gap:22px;
}
.brand{display:flex; align-items:center; text-decoration:none; flex:none}
.brand img{height:13px; width:auto; display:block}   /* 로고 가로:세로 = 5:1 */
/* 아이템이 늘어나면 잘리는 대신 가로로 스크롤 — 링크에 접근 못 하는 상황을 막는다 */
.nav-items{
  margin-left:auto; display:flex; align-items:center; gap:18px; min-width:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.nav-items::-webkit-scrollbar{display:none}
.nav-items a{
  font-size:13px; color:var(--muted); text-decoration:none; font-weight:400; white-space:nowrap;
  padding:4px 0; border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
.nav-items a:hover{color:var(--ink); border-bottom-color:var(--ink)}
.nav-items a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}
.nav-items a.soon{color:var(--alum)}
.nav-cta{
  font-family:var(--font-body); font-size:13px; font-weight:500; text-decoration:none;
  background:var(--ink); color:var(--paper); border:0; border-radius:980px;
  padding:7px 16px; cursor:pointer; transition:opacity .18s; flex:none;
}
.nav-cta:hover{opacity:.82}
.nav-cta:focus-visible, .nav-items a:focus-visible, .brand:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px}
@media (max-width:640px){ .nav-items{gap:14px} .nav-items a{font-size:12px} }

/* ── 섹션 공통 ────────────────────────────── */
section.band{padding-block:clamp(64px,9vw,128px)}
section.tint{background:var(--surface)}
.sec-head{max-width:62ch; margin-bottom:clamp(28px,4vw,48px)}
.sec-head p.lede{margin-top:16px}

/* ── 푸터 ─────────────────────────────────── */
footer{border-top:1px solid var(--line); padding-block:clamp(40px,5vw,64px) 48px; background:var(--surface)}
.foot-grid{display:flex; flex-wrap:wrap; gap:24px 48px; align-items:flex-start}
.foot-grid .fb img{height:16px; width:auto; display:block}
.foot-grid .fm{color:var(--muted); font-size:14px; flex:1 1 260px}
.foot-grid .fm a{color:var(--muted); text-decoration:none; display:block}
.foot-grid .fm a:hover{color:var(--ink)}
.foot-note{margin-top:28px; font-size:12.5px; color:var(--label); font-family:var(--font-mono); letter-spacing:.04em}
.todo{
  display:inline-block; color:var(--label); font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:.04em; border-bottom:1px dashed var(--alum); padding-bottom:1px;
}

/* ── 홈: 아이템 목록 ──────────────────────── */
.shot-cap{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  color:var(--label); text-transform:uppercase; margin-top:14px; text-align:center;
}
.items{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,32px)}
@media (max-width:760px){ .items{grid-template-columns:1fr} }
.item{
  display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff;
  transition:border-color .2s, transform .2s;
}
.item:hover{border-color:var(--alum); transform:translateY(-3px)}
.item:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.item .shot{
  /* flex:none + min-height:0 — 세로 사진이 들어와도 프레임은 항상 같은 4:3.
     (flex 항목의 min-height:auto를 끄지 않으면 사진의 내재 높이가 프레임을 밀어낸다) */
  flex:none; min-height:0; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:#fff; padding:clamp(14px,2vw,26px);
}
.item .meta{flex:1 1 auto}
.item .shot img{width:100%; height:100%; object-fit:contain}
.item .empty{
  width:100%; height:100%; border:1px dashed var(--alum); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--label);
}
.item .meta{padding:clamp(18px,2.2vw,26px); border-top:1px solid var(--line)}
.item .kind{font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--label)}
.item h3{margin:8px 0 10px; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em}
.item p{color:var(--muted); font-size:15.5px}
.item .go{
  margin-top:16px; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.item.is-soon .go{color:var(--label)}

/* ── 소재(공통 설명) ──────────────────────── */
.mat{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.mat div{padding:clamp(26px,3.2vw,42px) clamp(16px,2.2vw,32px); border-left:1px solid var(--line)}
.mat div:first-child{border-left:0; padding-left:0}
.mat div:last-child{padding-right:0}
.mat .n{font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--accent); margin-bottom:12px}
.mat p{color:var(--muted); font-size:15.5px; margin-top:8px}
@media (max-width:760px){
  .mat{grid-template-columns:1fr}
  .mat div{border-left:0; border-top:1px solid var(--line); padding-inline:0}
  .mat div:first-child{border-top:0}
}

/* ── 다음 아이템으로 ──────────────────────── */
.next{border-top:1px solid var(--line); padding-block:clamp(34px,4vw,56px)}
.next a{display:flex; align-items:baseline; justify-content:space-between; gap:20px; text-decoration:none}
.next .l{font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--label)}
.next .t{font-family:var(--font-display); font-weight:600; font-size:clamp(22px,3vw,38px); letter-spacing:-.02em}
.next a:hover .t{color:var(--accent)}

/* ════════ 제품 페이지 공통 컴포넌트 (아이템마다 재사용) ════════ */
/* ── 히어로 ───────────────────────────────── */
.hero{padding-block:clamp(56px,8vw,104px) clamp(28px,4vw,48px); text-align:center}
.hero h1{
  font-size:clamp(48px,10vw,120px); line-height:.94; letter-spacing:-.045em;
  margin:0 0 4px;
}
.hero .sub{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(17px,2.4vw,27px); letter-spacing:-.01em; color:var(--ink);
  margin-bottom:20px;
}
.hero .lede{margin-inline:auto; text-align:center}
.hero-shot{margin-top:clamp(26px,4vw,44px)}
.hero-shot img{width:auto; height:auto; max-width:min(100%,620px); max-height:78vh; margin-inline:auto}
.shot-cap{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  color:var(--label); text-transform:uppercase; margin-top:14px;
}
/* ── 3가지 요점 ───────────────────────────── */
.points{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:clamp(40px,6vw,72px)}
.points-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.point{padding:clamp(28px,3.4vw,44px) clamp(16px,2.4vw,34px); border-left:1px solid var(--line)}
.point:first-child{border-left:0; padding-left:0}
.point:last-child{padding-right:0}
.point .n{font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--accent); margin-bottom:12px}
.point p{color:var(--muted); font-size:15.5px; margin-top:8px}
@media (max-width:760px){
  .points-grid{grid-template-columns:1fr}
  .point{border-left:0; border-top:1px solid var(--line); padding-inline:0}
  .point:first-child{border-top:0}
}
/* ── 구성 선택기 ──────────────────────────── */
.seg{
  display:inline-flex; position:relative; background:var(--paper);
  border:1px solid var(--line); border-radius:980px; padding:4px; gap:2px;
}
section.tint .seg{background:var(--paper)}
.seg button{
  position:relative; z-index:1; appearance:none; border:0; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--muted);
  padding:8px 22px; border-radius:980px; transition:color .22s;
}
.seg button[aria-pressed="true"]{color:var(--paper)}
.seg-ind{
  position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:80px;
  background:var(--ink); border-radius:980px;
  transition:transform .34s cubic-bezier(.4,.01,.2,1), width .34s cubic-bezier(.4,.01,.2,1);
}
.cfg-top{display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-bottom:clamp(22px,3vw,34px)}
.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--muted); user-select:none}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch .track{
  width:42px; height:25px; border-radius:980px; background:var(--line);
  position:relative; transition:background .24s; flex:none;
}
.switch .track::after{
  content:""; position:absolute; top:3px; left:3px; width:19px; height:19px;
  border-radius:50%; background:var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:transform .24s cubic-bezier(.4,.01,.2,1);
}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{transform:translateX(17px)}
.switch input:focus-visible + .track{outline:2px solid var(--ink); outline-offset:3px}
.stage{
  /* 원본이 900~1086px뿐인 컷이 있어 과하게 확대되지 않도록 폭을 제한 */
  position:relative; width:100%; max-width:880px; margin-inline:auto; aspect-ratio:4/3; max-height:70vh;
  background:var(--paper); border-radius:18px; overflow:hidden;
}
section.tint .stage{background:#fff}
.stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .42s ease; padding:clamp(8px,2vw,28px);
}
.stage img.on{opacity:1}
.cfg-foot{
  display:flex; flex-wrap:wrap; gap:14px 36px; align-items:baseline;
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
}
.cfg-foot .t{font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.015em}
.cfg-foot .d{color:var(--muted); font-size:15.5px; flex:1 1 320px; min-width:0}
.cfg-foot .parts{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--label)}
/* ── 이미지 + 글 교차 ─────────────────────── */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center}
.split.rev .fig{order:2}
.split .fig img{width:100%; height:auto; border-radius:16px}
.split .txt p.lede{margin-top:16px}
.split .txt .note{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; color:var(--label);
}
@media (max-width:860px){
  .split{grid-template-columns:1fr; gap:28px}
  .split.rev .fig{order:0}
}
/* ── 전폭 소재 밴드 ──────────────────────── */
/* 원본 비율 그대로 — cover로 잘라내지 않는다 */
.band-img{margin:0; background:var(--surface); padding-block:clamp(28px,4vw,56px); display:flex; justify-content:center}
.band-img img{width:auto; height:auto; max-width:min(92%,720px)}
/* ── 사용 컷 2열 ──────────────────────────── */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,24px); margin-top:clamp(28px,4vw,48px)}
.duo img{width:100%; height:auto; border-radius:16px}
@media (max-width:700px){ .duo{grid-template-columns:1fr} }
/* ── 갤러리 ───────────────────────────────── */
.gal-set{display:flex; flex-direction:column; gap:clamp(34px,4.5vw,60px); margin-top:clamp(26px,4vw,44px)}
.gal-h{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:12px; margin-bottom:clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--line);
}
.gal-h span{font-family:var(--font-display); font-size:clamp(17px,1.8vw,21px); font-weight:600; letter-spacing:-.015em}
.gal-h em{
  font-family:var(--font-mono); font-style:normal; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--label);
}
.gal{columns:4; column-gap:clamp(10px,1.4vw,18px)}
.gal button{
  appearance:none; border:1px solid var(--line); background:#fff; padding:0; cursor:zoom-in;
  border-radius:12px; overflow:hidden; display:block; position:relative;
  width:100%; margin-bottom:clamp(10px,1.4vw,18px); break-inside:avoid;
  transition:border-color .2s, transform .2s;
}
.gal button:hover{border-color:var(--alum); transform:translateY(-2px)}
.gal button:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.gal img{width:100%; height:auto}
.gal .tag{
  position:absolute; left:8px; bottom:8px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  color:var(--label); background:color-mix(in srgb,#fff 82%,transparent); padding:2px 6px; border-radius:5px;
}
@media (max-width:860px){ .gal{columns:3} }
@media (max-width:520px){ .gal{columns:2} }
/* ── 라이트박스 ───────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:60; background:color-mix(in srgb, var(--ink) 88%, transparent);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
/* display:flex가 [hidden]을 이기므로 명시적으로 되돌림 — 안 하면 닫힌 오버레이가 화면을 덮는다 */
.lb[hidden]{display:none}
.lb{padding-bottom:72px}
.lb img{max-width:min(1100px,92vw); max-height:calc(100vh - 150px); width:auto; border-radius:10px; background:#fff}
.lb .cap{
  position:absolute; left:0; right:0; bottom:max(20px, env(safe-area-inset-bottom,0px));
  text-align:center; color:#CFCBC7; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.lb .x{
  position:absolute; top:max(16px, env(safe-area-inset-top,0px)); right:16px;
  appearance:none; border:0; background:none; color:#fff; font-size:26px; line-height:1;
  width:44px; height:44px; cursor:pointer; border-radius:50%;
}
.lb .x:hover{background:rgba(255,255,255,.14)}
.lb .x:focus-visible{outline:2px solid #fff; outline-offset:2px}
/* ── 사양표 ───────────────────────────────── */
.spec{border-top:1px solid var(--line); margin-top:clamp(26px,4vw,40px)}
.spec dl{display:grid; grid-template-columns:200px 1fr; margin:0}
.spec dt,.spec dd{
  border-bottom:1px solid var(--line); margin:0;
  padding:16px 0; font-size:15.5px;
}
.spec dt{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); padding-top:19px}
.spec dd{color:var(--ink); font-weight:400}
.todo{
  display:inline-block; color:var(--label); font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:.04em; border-bottom:1px dashed var(--alum); padding-bottom:1px;
}
@media (max-width:600px){
  .spec dl{grid-template-columns:1fr}
  .spec dt{border-bottom:0; padding-bottom:0}
  .spec dd{padding-top:4px}
}

/* ── 어두운 히어로 밴드 ─────────────────────
   거실 컷처럼 어두운 사진을 쓰는 제품에서, 히어로 구간만 블랙 배경 + 화이트 톤 글자.
   흰 배경 위에 어두운 사진이 떠 보이던 문제를 없애고 사진의 톤을 그대로 이어받는다. */
.hero-band{background:#0B0B0A; color:#F3F1EC}
.hero-band .eyebrow{color:#8F8A84}
.hero-band h1{color:#F7F5F1}
.hero-band .sub{color:#E7E3DC}
.hero-band .lede{color:#B6B1AA}
.hero-band .shot-cap{color:#8F8A84}
.hero-band .hero{padding-block:clamp(52px,7.5vw,100px) clamp(36px,5vw,64px)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}