/* ===========================================================
   MAGAZINE — magazine.html 전용. 공통 토큰과 내비·푸터는 style.css를 쓴다.
   그리드를 편집 언어로 쓴다: 비대칭 무게, 여백을 구조로,
   디스플레이와 본문 사이의 큰 크기 대비.
   사진은 아직 없어 프로시저럴 그라디언트다. --img만 덮어쓰면 교체된다.
   =========================================================== */

/* 더미 사진 — 브랜드 시안(deck)에서 잘라낸 것이다. 실제 촬영본이 나오면 이 경로만 바꾸면 된다.
   --proc는 사진이 없을 때를 위한 그라디언트 대체본으로 남겨 둔다. */
[data-shot="a"]{ --img:url(img/window.jpg); --proc:linear-gradient(200deg,#e7f0f3,#cfe0e7 55%,#a8c2ce); }
[data-shot="b"]{ --img:url(img/tote.jpg);   --proc:linear-gradient(160deg,#f7f0e6,#ecdccd 58%,#cbb49f); }
[data-shot="c"]{ --img:url(img/yoga.jpg);   --proc:linear-gradient(20deg,#f2f0f2,#e0dde3 56%,#b9b5c0); }
[data-shot="d"]{ --img:url(img/towel.jpg);  --proc:linear-gradient(140deg,#f6f3ec,#e6e2d7 52%,#c2beb0); }
[data-shot="e"]{ --img:url(img/sign.jpg);   --proc:linear-gradient(170deg,#f9ece4,#efd9cd 56%,#d0ab9c); }
[data-shot="f"]{ --img:url(img/water.jpg);  --proc:linear-gradient(220deg,#eaf1f2,#d3e2e4 54%,#9fb9bd); }
[data-shot="g"]{ --img:url(img/leaf.jpg);   --proc:linear-gradient(120deg,#f4eef2,#e4d6de 56%,#bfa9b4); }
[data-shot="h"]{ --img:url(img/swan.jpg);   --proc:linear-gradient(200deg,#f1f2ec,#dfe2d6 55%,#b4b8a8); }
[data-shot="i"]{ --img:url(img/card.jpg);   --proc:linear-gradient(200deg,#eef2f4,#dbe4e9 55%,#adc0cb); }

.mast,.feature,.chips,.posts,.index,.sub{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2;
}

/* ───────── 마스트헤드 — 디스플레이와 본문의 극단적 크기 대비 ───────── */
.mast{ padding-top:clamp(140px,20vh,220px); padding-bottom:clamp(40px,7vh,80px); }
.mast__meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--display); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.mast__meta i{ display:block; width:20px; height:1px; background:rgba(44,49,52,.2); }
.mast__title{
  font-family:var(--display); font-size:clamp(64px,14vw,196px); font-weight:400;
  line-height:.92; letter-spacing:-.02em; color:var(--ink); margin:clamp(18px,3vh,34px) 0 0;
}
.mast__title .ch{ animation-delay:calc(.7s + var(--i) * .045s); }
/* 리드는 오른쪽으로 밀어 둔다 — 빈 왼쪽 칸이 읽기의 신호가 된다 */
.mast__lead{
  margin-top:clamp(26px,4vh,44px); margin-left:auto; max-width:46ch;
  font-size:clamp(14px,1.15vw,16px); color:var(--body);
}
@media (max-width:760px){ .mast__lead{ margin-left:0; } }

/* ───────── 이달의 글 ───────── */
.feature{ padding-block:clamp(40px,6vh,70px); }
.feature__link{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap:clamp(20px,3vw,52px); align-items:center;
}
.feature__shot{
  margin:0; aspect-ratio:4/3; max-height:min(58vh, 520px); border-radius:clamp(10px,1.2vw,18px);
  background-image:var(--img, var(--proc)); background-size:cover; background-position:center;
  transition:transform .9s var(--ease);
}
.feature__link:hover .feature__shot{ transform:scale(1.015); }
.feature__kicker,.post__kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.feature__kicker em,.post__kicker em{ font-style:italic; text-transform:none; letter-spacing:0; font-size:16px; color:var(--peach-deep); }
.feature__kicker i,.post__kicker i{ display:block; width:18px; height:1px; background:rgba(44,49,52,.2); }
.feature__title{ font-size:clamp(26px,3.2vw,44px); font-weight:200; line-height:1.26; margin:20px 0 22px; }
.feature__desc{ color:var(--body); font-size:14.5px; max-width:40ch; }
.feature__more{ margin-top:28px; font-family:var(--display); font-style:italic; font-size:17px; color:var(--peach-deep); }
.feature__more em,.post__more em{ display:inline-block; transition:transform .45s var(--ease); }
.feature__link:hover .feature__more em{ transform:translateX(6px); }


/* ───────── 분류 ───────── */
.chips{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-block:clamp(30px,5vh,56px); border-top:1px solid var(--line); margin-top:clamp(30px,5vh,60px);
}
.chip{
  display:inline-flex; align-items:baseline; gap:8px; cursor:pointer;
  padding:9px 18px; border:1px solid var(--line); border-radius:99px; background:transparent;
  font-size:12.5px; letter-spacing:.04em; color:var(--body);
  transition:background-color .4s var(--ease), border-color .4s var(--ease), color .4s;
}
.chip span{ font-family:var(--display); font-size:11px; color:var(--muted); }
.chip:hover{ border-color:var(--peach-deep); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--warm-white); }
.chip.is-on span{ color:rgba(250,248,243,.6); }

/* ───────── 글 목록 — 6칸 위에서 폭을 달리해 비대칭을 만든다 ───────── */
.posts{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(22px,3vw,52px) clamp(16px,2vw,32px); padding-bottom:clamp(60px,9vh,120px);
}
.post{ grid-column:span 2; }
.post--wide{ grid-column:span 3; }
.post a{ display:block; }
.post__shot{
  margin:0 0 18px; aspect-ratio:4/3; border-radius:clamp(8px,1vw,14px);
  background-image:var(--img, var(--proc)); background-size:cover; background-position:center;
  transition:transform .8s var(--ease);
}
.post__shot--tall{ aspect-ratio:3/4; }
.post a:hover .post__shot{ transform:scale(1.015); }
.post h3{ font-size:clamp(17px,1.6vw,22px); font-weight:400; line-height:1.44; margin:14px 0 10px; transition:color .35s; }
.post a:hover h3{ color:var(--peach-deep); }
.post__desc{ color:var(--body); font-size:13.5px; line-height:1.8; }
/* 사진 없이 문장만으로 서는 칸 — 그리드에 리듬을 준다 */
.post--quote{ background:var(--card); border-radius:clamp(8px,1vw,14px); padding:clamp(26px,2.4vw,38px); align-self:start; }
.post--quote blockquote{
  margin:18px 0 14px; font-family:var(--display); font-style:italic;
  font-size:clamp(18px,1.8vw,23px); line-height:1.48; color:var(--ink);
}
.post__more{ margin-top:22px; font-family:var(--display); font-style:italic; font-size:15px; color:var(--peach-deep); }
.post a:hover .post__more em{ transform:translateX(6px); }
.posts[data-filter="move"]    .post:not([data-axis="move"]),
.posts[data-filter="nourish"] .post:not([data-axis="nourish"]),
.posts[data-filter="rest"]    .post:not([data-axis="rest"]),
.posts[data-filter="insight"] .post:not([data-axis="insight"]){ display:none; }
@media (max-width:1100px){
  .posts{ grid-template-columns:repeat(4,1fr); }
  .post{ grid-column:span 2; } .post--wide{ grid-column:span 4; }
}
@media (max-width:720px){
  .posts{ grid-template-columns:1fr; }
  .post,.post--wide{ grid-column:span 1; }
  .post__shot--tall{ aspect-ratio:4/3; }
}

/* ───────── 지난 호 색인 ───────── */
.index{ padding-block:clamp(70px,11vh,150px); border-top:1px solid var(--line); }
.index__head{ margin-bottom:clamp(30px,5vh,56px); }
.index__title{ font-size:clamp(26px,3.4vw,46px); font-weight:200; }
.index__list li{ border-top:1px solid var(--line); }
.index__list li:last-child{ border-bottom:1px solid var(--line); }
.index__list a{
  display:grid; grid-template-columns:56px 1fr auto auto; gap:clamp(12px,2.4vw,34px); align-items:baseline;
  padding:clamp(20px,2.6vh,30px) 0; transition:padding-inline .5s var(--ease);
}
.index__list a:hover{ padding-inline:16px; }
.index__no{ font-family:var(--display); font-size:13px; letter-spacing:.2em; color:var(--muted); }
.index__t{ font-size:clamp(17px,2vw,26px); font-weight:200; color:var(--ink); transition:color .35s; }
.index__list a:hover .index__t{ color:var(--peach-deep); }
.index__c{ font-family:var(--display); font-style:italic; font-size:15px; color:var(--muted); }
.index__d{ font-family:var(--display); font-size:13px; letter-spacing:.1em; color:var(--muted); }
/* 커서를 따라오는 사진 — 목록에는 글자만 두고 여백을 지킨다 */
.index__peek{
  position:absolute; left:0; top:0; width:clamp(180px,20vw,280px); aspect-ratio:4/5;
  border-radius:10px; background-image:var(--img, var(--proc)); background-size:cover; background-position:center;
  pointer-events:none; z-index:3; opacity:0; scale:.92;
  transition:opacity .45s var(--ease), scale .45s var(--ease);
}
.index__peek.is-on{ opacity:1; scale:1; }
@media (max-width:900px){
  .index__peek{ display:none; }
  .index__list a{ grid-template-columns:44px 1fr; row-gap:6px; }
  .index__c,.index__d{ grid-column:2; }
}

/* ───────── 구독 ───────── */
.sub{ text-align:center; padding-block:clamp(80px,12vh,170px); border-top:1px solid var(--line); }
.sub__title{ font-size:clamp(24px,3.6vw,48px); font-weight:200; max-width:20ch; margin-inline:auto; line-height:1.4; }
.sub__desc{ margin-top:22px; color:var(--body); font-size:14px; }
.sub__form{ display:grid; gap:12px; max-width:440px; margin:clamp(36px,5vh,56px) auto 0; text-align:left; }