/* ============================================================
   판교 하우스 노트 02호 — 정원 관리 특집
   styles.css 뒤에 실립니다.
   ============================================================ */

body.issue02 {
  --accent: var(--green);
  --accent-hi: var(--green-hi);
  /* .grass-rule 의 100vw 는 세로 스크롤바 폭까지 포함해서 좌우로 몇 px 넘칩니다.
     clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아 sticky 를 깨지 않습니다. */
  overflow-x: clip;
}

/* ---------- 잔디 구분선 -------------------------------------- */
.grass-rule {
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  height: 56px;
  background-image: url("/assets/issue02/grass.webp");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}
.grass-rule.tall { height: 84px; }
@media (max-width: 520px) {
  .grass-rule { height: 44px; margin-top: 2.25rem; margin-bottom: 2.25rem; }
  .grass-rule.tall { height: 62px; }
}

/* ---------- 표제 ------------------------------------------- */
.i2-hero { padding-top: 2rem; }
.i2-hero h1 { font-size: 2.1rem; line-height: 1.28; margin-top: 1rem; }

/* ---------- 사진 ------------------------------------------- */
.i2-photo { margin: 1.25rem 0 0; }
.i2-photo .ph { position: relative; border: 2px solid var(--ink); overflow: hidden; display: block; }
.i2-photo img { display: block; width: 100%; }
.i2-photo figcaption {
  font-size: .74rem; color: var(--ink-soft); line-height: 1.6;
  margin-top: .55rem; border-left: 3px solid var(--accent); padding-left: .7rem;
}
/* 인쇄물 그레인 — 1호 지면의 질감을 맞추기 위한 사진 마감 */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply; opacity: .26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.1rem; }
@media (max-width: 420px) { .photo-pair { grid-template-columns: 1fr; } }

/* ---------- 사이드 노트 ------------------------------------- */
.sidenote { margin-top: 3rem; border: 2px solid var(--ink); box-shadow: 5px 5px 0 0 var(--accent); padding: 1.15rem 1.1rem 1.35rem; background: var(--paper); }
.sidenote .kicker { font-family: var(--fd); font-size: .7rem; letter-spacing: .16em; background: var(--accent); color: var(--paper); display: inline-block; padding: .28rem .55rem .22rem; font-weight: 700; transform: scaleX(.75); transform-origin: 0 50%; }
.sidenote .sn-h { font-family: var(--fd); font-size: 1.28rem; line-height: 1.35; margin-top: .8rem; font-weight: 700; transform: scaleX(.75); transform-origin: 0 50%; }
.sidenote .h3 { margin-top: 1.5rem; }

/* ---------- 문제 → 살펴볼 경계 ------------------------------ */
.edge-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.edge-list li { border: 2px solid var(--ink); padding: .7rem .8rem; margin-top: .6rem; display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.edge-q { display: block; font-size: .86rem; font-weight: 700; line-height: 1.5; }
.edge-a { display: block; font-size: .8rem; line-height: 1.55; color: var(--ink-soft); margin-top: .2rem; }
.edge-ico { width: 2rem; height: 2rem; flex-shrink: 0; color: var(--accent); }
.edge-ico svg { width: 100%; height: 100%; display: block; }

/* ---------- 개선 사례 3단 ---------------------------------- */
.stepcase { margin-top: 1.2rem; }
.step { border: 2px solid var(--ink); padding: .95rem 1rem 1.1rem; margin-top: .8rem; }
.step-tag { font-family: var(--fd); font-size: .68rem; letter-spacing: .14em; font-weight: 700; display: inline-block; padding: .24rem .5rem .18rem; background: var(--ink); color: var(--paper); transform: scaleX(.75); transform-origin: 0 50%; }
.step.now .step-tag { background: var(--accent); }
.step-h { font-weight: 700; font-size: .95rem; margin: .6rem 0 0; line-height: 1.5; }
.step-t { font-size: .87rem; line-height: 1.7; margin: .5rem 0 0; }
.step-bar { display: flex; gap: 3px; margin-top: .8rem; }
.step-bar i { height: 6px; flex: 1; background: rgba(19, 19, 19, .14); }
.step-bar i.on { background: var(--accent); }

/* ---------- 현장 사례 버튼 (FIELD CASE 박스 안) --------------- */
.fl-label { display: block; font-family: var(--fd); font-size: .68rem; letter-spacing: .12em; font-weight: 700; color: var(--ink-soft); transform: scaleX(.75); transform-origin: 0 50%; margin: 1rem 0 .45rem; }
.field-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.field-links a {
  display: inline-flex; align-items: center; gap: .32rem;
  font-size: .78rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
  border: 1.5px solid var(--ink); background: var(--paper); padding: .45rem .65rem;
}
.field-links a i { font-style: normal; color: var(--accent); }
.field-links a:hover, .field-links a:focus-visible { background: var(--ink); color: var(--paper); }
.field-links a:hover i, .field-links a:focus-visible i { color: var(--paper); }

/* ---------- 관련 자료 인라인 링크 --------------------------- */
.reflist { font-size: .78rem; line-height: 1.7; margin-top: .9rem; color: var(--ink-soft); border-top: 1.5px dotted var(--ink); padding-top: .5rem; }
.reflist b { font-family: var(--fd); font-size: .68rem; letter-spacing: .1em; color: var(--ink); margin-right: .35rem; transform: scaleX(.75); display: inline-block; }
.reflist a { color: var(--accent); font-weight: 700; text-decoration: none; }
.reflist a:hover { text-decoration: underline; }

/* ---------- 비교 삽화 --------------------------------------
   figure 는 브라우저 기본값이 margin:1em 40px 이라 좌우가 들어갑니다.
   본문 글줄과 폭을 맞추기 위해 좌우 마진을 0 으로 되돌립니다. */
figure { margin-left: 0; margin-right: 0; }
.dia { border: 2px solid var(--ink); padding: .9rem; margin: 1.1rem 0 0; }
/* 좌/우 비교 삽화. 그림 자체에 테두리가 그려져 있어 CSS 테두리는 넣지 않습니다. */
.dia-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .7rem; align-items: start; }
.dia-pair img { display: block; width: 100%; height: auto; }
@media (max-width: 420px) { .dia-pair { grid-template-columns: 1fr; gap: .4rem; } }
.dia-title { font-family: var(--fd); font-size: .82rem; letter-spacing: .06em; font-weight: 700; transform: scaleX(.75); transform-origin: 0 50%; width: 133%; }
.dia svg { display: block; width: 100%; height: auto; margin-top: .7rem; }
.dia figcaption { font-size: .72rem; color: var(--ink-soft); line-height: 1.6; margin-top: .6rem; }

/* ---------- 제품 카드 줄바꿈 -------------------------------- */
body.issue02 .prod-why { display: block; }
body.issue02 .prod-pill { display: block; width: fit-content; }

/* 옥타곤 가로 75% 압축은 .kicker / .sn-h / .step-tag 각 규칙에 직접 넣었습니다.
   .calc / .prod-where / summary 처럼 1호와 공통인 요소는 build.mjs 의
   patchOctagon 이 styles.css 뒤에 붙여 두 호가 함께 적용받습니다. */