/* ══════════════════════════════════════════
   NONÜR · home — 메인
   · 크기는 base.css의 5단(cap/body/lead/title/display)만 쓴다
   · 영문이 주인공, 국문이 받친다
   · 핀이 풀릴 때 배경과 텍스트가 '함께' 올라간다 (텍스트를 지우지 않는다)
   · 애니메이션은 핀 구간의 앞부분에서 끝내고, 남는 구간은 '머무름'으로 쓴다
   ══════════════════════════════════════════ */

.act{position:relative}

/* 문단/이미지 등장 — passage.css의 .rise와 동일 규칙(이 페이지엔 passage.css를 안 불러오므로 복제) */
.rise{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rise.on{opacity:1;transform:none}

/* ═══ 막 1 · ARRIVAL — 200svh (핀 100 + 머무름 포함) ═══ */
.act1{height:200svh;background:var(--charcoal)}
.act1__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.act1__bg{position:absolute;inset:0}
.act1__bg video{width:100%;height:100%;object-fit:cover}
.act1__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,14,.38) 0%,rgba(14,16,14,.16) 38%,rgba(14,16,14,.74) 100%)}
.act1__copy{position:relative;z-index:2;color:var(--white);padding:0 0 12svh 6vw;max-width:60rem}
/* 스크롤 유도 — 처음 온 사람도 알아볼 수 있게 텍스트 + 움직이는 화살표 아이콘을 함께 쓴다 */
.act1__cue{position:absolute;right:6vw;bottom:6svh;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:var(--fs-cap);letter-spacing:.2em;color:rgba(250,248,243,.6)}
.act1__cue-arrow{display:block;width:16px;height:16px;animation:act1Cue 1.6s var(--ease) infinite}
@keyframes act1Cue{
  0%{transform:translateY(-3px);opacity:.35}
  50%{transform:translateY(5px);opacity:1}
  100%{transform:translateY(-3px);opacity:.35}
}
@media (max-width:767px){.act1__cue{right:1.4rem;bottom:4svh}}
.act1__etym{font-size:var(--fs-cap);font-weight:400;letter-spacing:.02em;color:rgba(250,248,243,.7);margin-bottom:2.4rem}
.act1__etym b{font-weight:600;color:var(--white)}
/* "노닐다"는 라벨이라 항상 보이고, 설명만 다른 문장처럼 스크롤에 따라 밝아진다.
   .w 단어 opacity가 .2→1로 움직이므로, 다 밝아졌을 때 실제로 눈에 띄도록 밑바탕을 밝게 잡는다. */
.act1__etym-def{color:rgba(250,248,243,.95)}
.act1__en{font-weight:300;font-size:var(--fs-display);line-height:1.08;letter-spacing:-.025em;white-space:nowrap}
/* display 단 최소값(44px)이 좁은 화면에서 그대로 유지돼 "Not just make fragrance."가
   두 줄로 넘어갔다. 화면 폭에 비례해서 줄어들도록 이 구간만 vw로 잡는다.
   상한 44px는 fs-display 최소값과 같아 767px 경계에서 튀지 않는다. */
@media (max-width:767px){
  .act1__en{font-size:clamp(20px,8.6vw,44px)}
}
.act1__kr{font-weight:400;font-size:var(--fs-body);margin-top:1.3rem;color:rgba(250,248,243,.72)}
/* 조금만 작게 — lead 단 안에서 92%로 낮춘다 */
.act1__sub{font-weight:200;font-size:calc(var(--fs-lead) * .92);line-height:1.5;margin-top:3rem;color:rgba(250,248,243,.95)}
/* 단어 발광 */
.js .w{opacity:.2;transition:opacity .45s var(--ease)}
.js .w.on{opacity:1}

/* ═══ 막 2 · THE CLAIM — 220svh · 문장 두 개가 스크롤에 따라 교체 ═══ */
.act2{height:220svh;background:var(--charcoal)}
.act2__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
/* 스케일은 앞 65%에서 끝내고 나머지는 머무름 */
.act2__bg{position:absolute;inset:0;transform:scale(calc(1.16 - .16 * min(1, var(--p,0) / .65)))}
.act2__bg img{width:100%;height:100%;object-fit:cover}
.act2__bg::after{content:"";position:absolute;inset:0;background:rgba(14,16,14,.5)}
.act2__copy{position:relative;z-index:2;color:var(--white);padding-left:6vw;max-width:min(60rem,76vw);text-align:left}
.act2__copy .e{font-weight:500;font-size:var(--fs-title);line-height:1.28;letter-spacing:-.02em}
/* 국문은 영문보다 한 단 작게 */
.act2__copy .k{font-weight:300;font-size:var(--fs-lead);line-height:1.4;letter-spacing:-.01em;margin-top:1.4rem;color:rgba(250,248,243,.6);word-break:keep-all}
/* 영문은 문장 중간에서 어색하게 끊기지 않게 — 줄이 나뉘더라도 균형 있게 나눈다 */
.act2__copy .e,.act2__copy .k{text-wrap:balance}
/* 좁은 화면에서만 나타나는 줄바꿈 — 긴 문장이 제멋대로 끊기지 않도록 끊을 지점을 지정한다.
   글자 크기를 더 줄이면 영문이 국문과 같은 단이 되어 위계가 무너지므로 이 방법을 쓴다. */
.br-sm{display:none}
@media (max-width:991px){.br-sm{display:inline}}
@media (max-width:767px){
  .act2__copy{max-width:none;padding:0 1rem}
  /* 가장 긴 문장("People think scent is the final element.")이 한 줄로 화면 폭을 꽉 채우는 크기.
     화면 폭에 비례해야 어느 기기에서도 끝까지 차므로 vw로 잡고, 위아래를 clamp로 묶는다. */
  .act2__copy .e{font-size:clamp(17px,5.4vw,30px);line-height:1.35}
  .act2__copy .k{font-size:var(--fs-body);line-height:1.6;margin-top:1rem}
}

/* 두 문장이 같은 자리에서 교체된다(그대로 겹쳐두고 opacity만 바꾼다) */
.act2__lines{list-style:none;display:grid}
.act2__lines li{grid-area:1/1;opacity:0;transition:opacity 1s var(--ease)}
.act2__lines li.is-on{opacity:1}

/* ═══ 막 3 · THE EMOTIONS — 스크롤에 따라 하나씩 나타남(Overture 방식) ═══ */
.act3{background:var(--charcoal);padding:16svh 0 4svh}
.act3__lead{
  padding:0 6vw;margin-bottom:10svh;color:var(--white);
  display:flex;align-items:baseline;gap:1.6rem;flex-wrap:wrap;
}
.act3__lead b{font-weight:500;font-size:var(--fs-title);letter-spacing:-.02em;text-wrap:balance}
.act3__lead em{font-style:normal;font-weight:300;font-size:var(--fs-lead);letter-spacing:-.01em;color:rgba(250,248,243,.45)}

.act3__list{display:flex;flex-direction:column;gap:14svh;padding:0 6vw}
.act3__item{position:relative;color:var(--white);width:58vw;max-width:52rem}
.act3__item img{width:100%;height:58svh;object-fit:cover;display:block}
.act3__item figcaption{margin-top:1.6rem;display:flex;align-items:baseline;gap:1.1rem}
.act3__item figcaption .n{font-size:var(--fs-cap);color:var(--stone)}
.act3__item figcaption b{display:block;font-weight:500;font-size:var(--fs-lead);letter-spacing:-.015em}
.act3__item figcaption em{display:block;font-style:normal;font-weight:400;font-size:var(--fs-cap);color:rgba(250,248,243,.55);margin-top:.45rem}
/* 한 줄씩 좌우로 어긋나게 두어 트랙을 넘기던 감각을 세로에서도 살린다 */
.act3__item--r{margin-left:auto}
/* 아직 이름 붙지 않은 다섯 번째 감정 — 흐릿한 티저 */
.act3__item--teaser img{opacity:.4;filter:blur(3px) grayscale(.6)}
.act3__item--teaser figcaption b{color:var(--stone)}

/* act4와 같은 900px 기준을 쓴다 — 767px로는 가로 모드 폰(768~900px 폭)이 데스크톱 폭(58vw 교차배치)으로
   렌더링되어 사진 가로폭이 사진마다 들쭉날쭉해 보였다. */
@media (max-width:991px){
  .act3{padding:12svh 0 2svh}
  .act3__lead{padding:0 6vw;margin-bottom:7svh}
  .act3__list{gap:9svh;padding:0 6vw}
  .act3__item{width:100%;max-width:none;margin-left:0}
  .act3__item img{height:40svh}
}

/* ═══ 막 4 · THE RECORD — 걷는 영상 위, 문장만 · 280svh ═══ */
.act4{height:280svh;background:var(--charcoal)}
.act4__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;padding:0 6vw}
.act4__bg{position:absolute;inset:0}
.act4__bg video{width:100%;height:100%;object-fit:cover}
.act4__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,16,14,.82) 0%,rgba(14,16,14,.6) 46%,rgba(14,16,14,.3) 100%)}
.act4__copy{position:relative;z-index:2;max-width:44rem;color:var(--white)}
.act4__lines{list-style:none;display:flex;flex-direction:column;gap:2.4rem}
.act4__lines li{opacity:.24;transition:opacity .5s var(--ease)}
.act4__lines li.is-on{opacity:1}
/* 영문이 주인공, 국문이 받친다. 네 문장이 한 화면에 들어와야 하므로 lead 단계를 쓴다. */
.act4__lines b{display:block;font-weight:400;font-size:var(--fs-lead);line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.act4__lines b strong{font-weight:600}
.act4__lines em{display:block;font-style:normal;font-weight:400;font-size:var(--fs-body);line-height:1.6;color:rgba(250,248,243,.6);margin-top:.8rem;word-break:keep-all}

@media (max-width:991px){
  /* ── 모바일은 스크롤이 아니라 '탭'으로 문장을 넘긴다 ──
     스크롤로 넘기면 관성 때문에 손을 뗀 뒤에도 문장이 저절로 지나간다.
     한 화면에 머무르게 두고, 탭할 때만 다음 문장으로 바꾼다. */
  .act4{height:100svh}
  .act4__pin{padding:0 1.6rem;cursor:pointer}
  .act4__bg::after{background:linear-gradient(180deg,rgba(14,16,14,.7) 0%,rgba(14,16,14,.82) 100%)}
  .act4__lines{display:grid;gap:0}
  /* 전환은 즉시 — 페이드를 두면 문장이 바뀔 때마다 반짝이는 것처럼 보인다 */
  .act4__lines li{grid-area:1/1;pointer-events:none;transition:none}
  .act4__lines li:not(.is-on){opacity:0}
  .act4__snaps{display:none}

  /* 탭 안내 · 진행 표시 — 탭으로 넘긴다는 것을 알 수 있어야 한다 */
  .act4__nav{position:absolute;left:1.6rem;right:1.6rem;bottom:9svh;z-index:3;
    display:flex;align-items:center;gap:1.1rem;color:var(--white)}
  .act4__dots{display:flex;gap:.5rem}
  .act4__dots i{width:6px;height:6px;border-radius:50%;background:rgba(250,248,243,.3);transition:background .3s var(--ease)}
  .act4__dots i.on{background:var(--white)}
  .act4__next{font-size:var(--fs-cap);letter-spacing:.16em;color:rgba(250,248,243,.72);
    min-height:44px;display:inline-flex;align-items:center;padding:0}
  .act4__next[hidden]{display:none}

  /* 다 본 뒤에만 나타나는 스크롤 신호 — passage 페이지의 SCROLL 큐와 같은 어법 */
  .act4__cue{display:none;align-items:center;gap:.8rem;
    font-size:var(--fs-cap);letter-spacing:.2em;color:rgba(250,248,243,.55)}
  .act4[data-done="1"] .act4__cue{display:inline-flex}
  .act4__cue i{display:block;width:1px;height:2.6rem;
    background:linear-gradient(180deg,rgba(250,248,243,.55),transparent);
    animation:act4Cue 1.9s var(--ease) infinite}
  @keyframes act4Cue{
    0%{transform:translateY(-5px);opacity:.15}
    45%{opacity:1}
    100%{transform:translateY(7px);opacity:.15}
  }
  /* 다 본 뒤에는 좌우로 넘길 수 있다는 것도 알려준다 */
  .act4__dots{transition:opacity .4s var(--ease)}
  .act4[data-done="1"] .act4__dots{opacity:.75}

  /* 동작 줄이기·no-JS에서는 모든 문장을 opacity:1로 강제하는데, 그리드로 겹쳐두면 글자가 뒤섞인다.
     이 조합에서는 겹치지 않게 세로로 풀어 전부 보여준다(탭이 동작하지 않는 환경이므로). */
  html.rm .act4,html:not(.js) .act4{height:auto}
  html.rm .act4__lines,html:not(.js) .act4__lines{display:flex;flex-direction:column;gap:2rem}
  html.rm .act4__lines li,html:not(.js) .act4__lines li{grid-area:auto;pointer-events:auto;opacity:1}
  html.rm .act4__nav,html:not(.js) .act4__nav{display:none}
}
/* 데스크톱에서는 스크롤로 넘기므로 탭 안내를 숨긴다 */
@media (min-width:901px){.act4__nav{display:none}}

/* ═══ 막 5 · THE PASSAGES — 애니메이션 없음(의도) ═══ */
.act5__head{background:var(--white);padding:9rem 2.4rem 0;display:flex;align-items:baseline;gap:2rem;flex-wrap:wrap}
.act5__head h2{font-weight:300;font-size:var(--fs-display);letter-spacing:-.02em}
.act5__head p{font-size:var(--fs-body);color:var(--stone)}
@media (max-width:767px){.act5__head{padding:6rem 1.4rem 0}}

/* ═══ 막 6 · BRAND MARK — 여백이 주인공 ═══ */
.act6{
  background:var(--charcoal);color:var(--white);
  min-height:92svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.6rem;text-align:center;padding:16svh 2rem;
}
.act6__mark{
  display:block;width:min(30vw,340px);aspect-ratio:1749/410;
  background:currentColor;
  -webkit-mask:url('../img/logo.png') center/contain no-repeat;
  mask:url('../img/logo.png') center/contain no-repeat;
}
.act6__tag{font-weight:300;font-size:var(--fs-lead);letter-spacing:-.01em}
.act6__tag .kr{font-weight:400;font-size:var(--fs-cap);margin-top:1.1em;color:var(--stone);letter-spacing:.06em}
@media (max-width:767px){.act6{min-height:70svh;padding:12svh 1.4rem}.act6__mark{width:56vw}}

/* ═══ 막 7 · CONTACT ═══ */
.act7{background:var(--ivory);padding:12svh 6vw 13svh;display:flex;align-items:baseline;gap:3vw;flex-wrap:wrap}
.act7 h2{font-weight:300;font-size:var(--fs-title);letter-spacing:-.02em}
.act7__mail{
  font-weight:400;font-size:var(--fs-body);letter-spacing:-.01em;
  border-bottom:1px solid currentColor;padding-bottom:.3rem;
  min-height:44px;display:inline-flex;align-items:center;transition:color .3s;
}
.act7__mail:hover{color:var(--moss)}
@media (max-width:767px){.act7{padding:9svh 1.4rem 10svh;gap:1.6rem}}

/* ═══ 모션 축소 · no-JS 안전판 ═══ */
/* 막 3은 더 이상 핀/트랙을 쓰지 않으므로 이 목록에서 뺀다 — 원래도 자연스러운 세로 흐름이라 손댈 게 없다 */
html.rm .act1,html.rm .act2,html.rm .act4{height:auto}
html.rm .act1__pin,html.rm .act2__pin,html.rm .act4__pin{position:static;height:auto;padding-top:12svh;padding-bottom:12svh}
html.rm .w,html.rm .act4__lines li,html.rm .act2__lines li{opacity:1}
html:not(.js) .act4__lines li,html:not(.js) .act2__lines li{opacity:1}
/* 막 2 문장 교체도 겹쳐두는 방식이라, 모션 축소·no-JS에서는 세로로 풀어 겹치지 않게 한다 */
html.rm .act2__lines,html:not(.js) .act2__lines{display:flex;flex-direction:column;gap:2.4rem;position:static}
html.rm .rise,html:not(.js) .rise{opacity:1;transform:none}
.act4__snaps{display:none}

/* ═══ 홈 · ABOUT 블록 — 레퍼런스 2번째 섹션 ═══ */
.hm-about{background:var(--ivory);padding:14svh 6vw}
.hm-about .label{display:block;margin-bottom:2.4rem}
.hm-about__h{
  /* 강조 단(600) — 프로젝트 웨이트 규칙(200/400/600)의 강조 값을 쓴다 */
  font-weight:600;font-size:calc(var(--fs-display) * .7);line-height:1.1;
  letter-spacing:-.03em;max-width:16em;
}
.hm-about__p{
  margin-top:3rem;max-width:36em;font-size:var(--fs-lead);
  line-height:1.55;letter-spacing:-.01em;
}
.hm-about__more{
  display:inline-flex;align-items:center;min-height:44px;margin-top:2.6rem;
  font-size:var(--fs-cap);letter-spacing:.16em;border-bottom:1px solid currentColor;
}

/* ═══ 홈 · UPCOMING(CROSSING) — 레퍼런스 3번째 섹션 ═══ */
.hm-up{background:var(--white);padding:10svh 6vw;overflow:hidden}
.hm-up__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;margin-bottom:2.6rem}
.hm-up__more{font-size:var(--fs-cap);letter-spacing:.16em;color:var(--stone);min-height:44px;display:inline-flex;align-items:center}
.hm-up__more:hover{color:var(--charcoal)}
.hm-up__list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25em}
.hm-up__list a{display:flex;flex-direction:column;gap:.625em}
.hm-up__img{
  display:grid;place-items:center;aspect-ratio:4/3;background:var(--charcoal);
  overflow:hidden;
}
.hm-up__img--empty{background:var(--ivory);border:1px dashed rgba(28,27,24,.24)}
.hm-up__redact{
  width:52%;height:14%;
  background:repeating-linear-gradient(90deg,var(--stone) 0 12px,transparent 12px 18px);
  opacity:.5;
}
.hm-up__no{font-size:var(--fs-cap);color:var(--stone);letter-spacing:.14em}
.hm-up__t{font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em}
.hm-up__d{color:var(--stone);letter-spacing:.1em}
@media (max-width:991px){.hm-up__list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){
  .hm-about{padding:10svh 1.4rem}
  .hm-up{padding:8svh 1.4rem}
  .hm-up__list{grid-template-columns:repeat(2,1fr)}
}

/* ═══ THE ATLAS — 목적지 지구본 ═══
   선언 바로 다음에 온다. "매번 다른 문법으로"라는 말의 증거로 읽혀야 하므로
   지표면(PASSAGE)과 궤도(CROSSING)가 반드시 한 화면에 같이 보여야 한다. */
.atlas{background:var(--ivory);padding:13svh 6vw 12svh}
.atlas__grid{
  display:grid;gap:clamp(2rem,4vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(320px,62vmin) minmax(0,1fr);max-width:1500px;margin:0 auto;
}
.atlas__title{font-weight:200;font-size:var(--fs-title);letter-spacing:-.03em;line-height:1.06}
.atlas__title .kr{margin-top:.9rem;font-size:var(--fs-body);color:var(--stone)}
.atlas__filter{display:flex;gap:1.4rem;margin-top:2.2rem;flex-wrap:wrap}
.atlas__filter button{
  font-size:var(--fs-cap);letter-spacing:.18em;color:var(--stone);
  padding:.4rem 0;border-bottom:1px solid transparent;min-height:44px;
}
.atlas__filter button[aria-pressed="true"]{color:var(--charcoal);border-bottom-color:currentColor}

/* ── 구체 ── */
.globe{position:relative;aspect-ratio:1;width:100%}
.globe__cv{width:100%;height:100%;display:block;touch-action:none}
.globe.is-fly .globe__cv,.globe.is-drag .globe__cv{cursor:none}
.globe__plane{
  position:absolute;left:0;top:0;width:30px;height:30px;pointer-events:none;
  opacity:0;transition:opacity .18s var(--ease);color:var(--charcoal);will-change:transform;
}
.globe.is-fly .globe__plane{opacity:1}
.globe.is-hot .globe__plane{color:var(--moss)}

/* ── 핀 호버 팝업 — 오른쪽 빈 자리에 그 향의 짧은 설명 ── */
.gpop{
  margin-top:1.4rem;padding:1.1rem 1.2rem;background:var(--white);
  border-left:2px solid var(--moss);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.gpop.is-on{opacity:1;transform:none}
.globe.is-broken~.atlas__hud .gpop{border-left-color:var(--orange)}
.gpop__t{display:block;font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em;margin-bottom:.5rem}
.gpop__b{font-size:var(--fs-cap);line-height:1.75;color:var(--charcoal);opacity:.78;margin-bottom:.6rem}
.gpop__n{font-size:var(--fs-cap);color:var(--stone);letter-spacing:.04em;line-height:1.6}

/* ── HUD — 좌표는 기계가 읽는 값이므로 mono ── */
.atlas__hud{display:grid;gap:1.1rem}
.atlas__dest{
  font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.06em;
  line-height:1.5;min-height:2.6em;
}
.atlas__rows{display:grid;gap:.55rem}
.atlas__rows div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;align-items:baseline}
.atlas__rows .k{font-size:var(--fs-cap);letter-spacing:.2em;color:var(--stone)}
.atlas__rows .v{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.06em;font-variant-numeric:tabular-nums}
/* 궤도 목적지 — 좌표계가 깨진 상태 */
.atlas .globe.is-broken~.atlas__hud .atlas__dest,
.atlas .globe.is-broken~.atlas__hud .v{color:var(--orange)}

/* 지구본을 못 돌리는 사람도 목적지를 다 봐야 한다 — 지구본은 즐거움이고 이 목록이 실제 길이다 */
.atlas__list{display:grid;margin-top:1.6rem;border-top:1px solid rgba(28,27,24,.14)}
.atlas__list a,.atlas__list span.atlas__row{
  display:flex;gap:1rem;align-items:baseline;padding:.85rem 0;
  border-bottom:1px solid rgba(28,27,24,.14);font-size:var(--fs-cap);letter-spacing:.04em;
}
.atlas__list a{transition:color .25s}
.atlas__list a:hover{color:var(--moss)}
.atlas__list .n{color:var(--stone);letter-spacing:.16em;flex:none}
.atlas__list .s{margin-left:auto;color:var(--stone);flex:none}
.atlas__hint{margin-top:1.1rem;font-size:var(--fs-cap);color:var(--stone);letter-spacing:.04em}

@media (max-width:991px){
  .atlas__grid{grid-template-columns:1fr}
  .globe{max-width:70vmin;margin:0 auto}
}
@media (max-width:767px){
  .atlas{padding:9svh 1.4rem 9svh}
  .atlas__rows div{grid-template-columns:5.5rem 1fr;gap:.7rem}
}

/* ═══ SHOP ═══ */
.shop-sec{background:var(--white);padding:12svh 6vw 12svh}
.shop-sec__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;max-width:1500px;margin:0 auto 3.2rem;
}
.shop-sec__head h2{font-weight:200;font-size:var(--fs-title);letter-spacing:-.03em}
.shop-sec__head .kr{margin-top:.7rem;font-size:var(--fs-body);color:var(--stone)}
.shop-sec__more{font-size:var(--fs-cap);letter-spacing:.18em;color:var(--stone);min-height:44px;display:inline-flex;align-items:center}
.shop-sec__more:hover{color:var(--charcoal)}
/* 실측: 5열 · 행 간격 6em(칸 간격 1.25em) → 991↓ 3열 → 767↓ 2열 → 479↓ 간격만 축소.
   행 간격이 칸 간격보다 훨씬 큰 것이 이 그리드의 성격이라 그대로 가져간다. */
.shop-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6em 1.25em;
  max-width:1500px;margin:0 auto;
}
@media (max-width:991px){.shop-grid{grid-template-columns:repeat(3,1fr);gap:4em 1.25em}}
.p-card{display:flex;flex-direction:column}
.p-card__img{aspect-ratio:1;background:var(--ivory);overflow:hidden}
.p-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.p-card:hover .p-card__img img{transform:scale(1.04)}
.p-card__b{padding:1.1rem 0 0;display:flex;flex-direction:column;gap:.35rem;flex:1}
.p-card__n{font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em}
.p-card__n .kr{font-weight:400;color:var(--stone);margin-top:.2rem}
.p-card__s{font-size:var(--fs-cap);color:var(--stone);letter-spacing:.04em}
.p-card__p{font-size:var(--fs-body);letter-spacing:.02em;margin-top:.2rem}
.p-card__add{
  margin-top:auto;border:1px solid var(--charcoal);padding:.85rem 1rem;
  font-size:var(--fs-cap);letter-spacing:.16em;min-height:44px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.p-card__add:hover{background:var(--charcoal);color:var(--white)}
.p-card__add.is-done{background:var(--moss);border-color:var(--moss);color:var(--white)}
@media (max-width:767px){.shop-grid{grid-template-columns:repeat(2,1fr);gap:3em 1.25em}}
/* 479↓는 열 수를 더 줄이지 않고 간격만 좁힌다 — 실측 그대로 */
@media (max-width:479px){.shop-grid{grid-template-columns:repeat(2,1fr);gap:1.25em .625em}}
/* 실측: 상품 설명은 991↓에서 숨긴다 */
@media (max-width:991px){.p-card__s{display:none}}
@media (max-width:767px){.shop-sec{padding:9svh 1.4rem 9svh}}