/* ============================================================
   Dandoc.zip 03호 — 크랙 특집
   1·2호 지면 문법을 그대로 쓰고, 호 전용 액센트(시멘트 그레이)와
   크랙 그래픽(svg 2종)만 얹습니다. styles.css 뒤에 실립니다.
   - crack-rule.svg    : 구간 구분선 (2호의 잔디 띠 자리)
   - crack-texture.svg : 표제부 바탕 잔금 무늬
   ============================================================ */

body.issue03 {
  --cement: #66665f;
  --cement-hi: #c9c8c0;
  --accent: var(--cement);
  --accent-hi: var(--cement-hi);
  overflow-x: clip;
}

/* figure 기본 좌우 여백(40px) 제거 — 본문 글줄과 폭을 맞춥니다 */
figure { margin-left: 0; margin-right: 0; }

/* ---------- 크랙 구분선 ------------------------------------- */
.crack-rule {
  margin: 3rem calc(50% - 50vw);
  width: 100vw;
  height: 72px;
  /* 크랙2 원본 비율 그대로 가로로 이어 붙입니다. 좌우 끝이 맞물려 이음매 없이 연결됩니다. */
  background: url("/assets/issue03/crack-rule.svg") left center / auto 100% repeat-x;
}
@media (max-width: 520px) {
  .crack-rule { height: 50px; margin-top: 2.25rem; margin-bottom: 2.25rem; }
}

/* ---------- 표제 ------------------------------------------- */
.i3-hero { position: relative; padding-top: 2rem; isolation: isolate; }
.i3-hero::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: -1rem; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: url("/assets/issue03/crack-texture.svg") center top / 760px auto repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.i3-hero h1 { font-size: 2.05rem; line-height: 1.3; margin-top: 1rem; width: 133%; }
@media (max-width: 520px) { .i3-hero h1 { font-size: 1.45rem; } }
.i3-hero .lede { margin-top: 1.6rem; background: var(--paper); }
.i3-hero .lede .para:first-child { margin-top: 0; }

/* ---------- 이미지 차례 ------------------------------------- */
.toc-img { margin-top: 2rem; border-top: 3px solid var(--ink); padding-top: .9rem; }
.toc-img .toc-lead {
  font-family: var(--fd); font-weight: 700; font-size: .8rem; letter-spacing: .14em;
  display: inline-block; transform: scaleX(.75); transform-origin: 0 50%;
}
.toc-img ol { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .35rem; }
/* 목차 카드: 왼쪽 먹색 바탕에 글자, 오른쪽에 사진(목차 이미지 원본의 사진 부분)을 페이드로 겹칩니다 */
.toc-img a {
  position: relative; display: flex; align-items: center; gap: .85rem; min-height: 3.6rem;
  padding: .55rem 42% .55rem .9rem; background: var(--ink); color: var(--paper); text-decoration: none;
  overflow: hidden; border: 2px solid var(--ink); transition: transform .15s, box-shadow .15s;
}
.toc-img img {
  position: absolute; right: 0; top: 0; height: 100%; width: 46%; object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%); mask-image: linear-gradient(to right, transparent 0, #000 45%);
}
.toc-img .ti-num {
  font-family: var(--fd); font-weight: 700; font-size: 1.3rem; line-height: 1; min-width: 1.7rem; position: relative; z-index: 1;
  transform: scaleX(.75); transform-origin: 0 50%;
}
.toc-img .ti-t { font-weight: 700; font-size: .86rem; line-height: 1.4; position: relative; z-index: 1; }
.toc-img a:hover, .toc-img a:focus-visible { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--accent); }
@media (max-width: 520px) { .toc-img a { padding-right: 34%; } .toc-img img { width: 40%; } .toc-img .ti-t { font-size: .82rem; } }

/* ---------- 섹션 머리 -------------------------------------- */
.i3-sec { margin-top: 0; }
.i3-sec .sub { font-size: .95rem; color: var(--ink-soft); font-weight: 700; margin-top: .45rem; }

/* ---------- 사진 / 그림 ------------------------------------- */
.i3-photo { margin: 1.25rem 0 0; }
.i3-photo .ph { position: relative; border: 2px solid var(--ink); overflow: hidden; display: block; }
.i3-photo img { display: block; width: 100%; }
.i3-photo figcaption, .i3-fig figcaption {
  font-size: .74rem; color: var(--ink-soft); line-height: 1.6;
  margin-top: .55rem; border-left: 3px solid var(--accent); padding-left: .7rem;
}
.i3-photo.narrow { max-width: 26rem; }
.i3-fig { margin: 1.25rem 0 0; }
.i3-fig img { display: block; width: 100%; }
.i3-fig.boxed { border: 2px solid var(--ink); padding: .9rem; background: #fff; }
.i3-fig.boxed figcaption { margin-top: .8rem; }
.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");
}

/* ---------- 02 위치별 확인 카드 ----------------------------- */
.loc-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.loc { display: grid; grid-template-columns: 7.2rem 1fr; border: 2px solid var(--ink); background: var(--paper); }
.loc .ph { position: relative; border-right: 2px solid var(--ink); overflow: hidden; }
.loc .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-body { padding: .7rem .85rem .8rem; }
.loc-name {
  font-family: var(--fd); font-weight: 700; font-size: 1.05rem; line-height: 1.3;
  display: inline-block; transform: scaleX(.75); transform-origin: 0 50%;
}
.loc dl { margin: .35rem 0 0; }
.loc dt {
  font-family: var(--fd); font-weight: 700; font-size: .64rem; letter-spacing: .1em;
  display: inline-block; padding: .14rem .4rem .1rem; margin-top: .45rem;
  background: var(--ink); color: var(--paper); transform: scaleX(.75); transform-origin: 0 50%;
}
.loc dt.pt { background: var(--accent); }
.loc dd { margin: .2rem 0 0; font-size: .82rem; line-height: 1.55; }
@media (max-width: 400px) { .loc { grid-template-columns: 5.6rem 1fr; } }

/* ---------- 03 기록 체크리스트 / 순서 ------------------------ */
.rec-list .txt b { display: block; font-size: .95rem; }
.rec-list .txt span { display: block; font-size: .84rem; color: var(--ink-soft); line-height: 1.6; margin-top: .1rem; }
.flow { list-style: none; margin: 1.25rem 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; counter-reset: f; }
.flow li { border: 2px solid var(--ink); padding: .6rem .55rem .7rem; position: relative; background: var(--paper); counter-increment: f; }
.flow li::before {
  content: "0" counter(f); font-family: var(--fd); font-weight: 700; font-size: 1.35rem; line-height: 1;
  display: block; transform: scaleX(.75); transform-origin: 0 50%;
}
.flow li:last-child { background: var(--ink); color: var(--paper); }
.flow b { display: block; font-size: .84rem; margin-top: .35rem; line-height: 1.35; }
.flow span { display: block; font-size: .7rem; line-height: 1.45; margin-top: .25rem; opacity: .8; }
@media (max-width: 520px) { .flow { grid-template-columns: 1fr 1fr; } }

/* ---------- 사이드 노트 ------------------------------------- */
.sidenote {
  position: relative; margin-top: 3rem; border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 0 var(--accent); padding: 1.15rem 1.1rem 1.35rem 1.1rem; 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%; width: 133%;
}
.sidenote .closing { font-weight: 700; margin-top: 1rem; }
/* 앱 아이콘 — 스토어 링크. 글자 링크는 본문 문장에 걸고 아이콘은 그 아래 이미지로 둡니다 */
.app-icons { display: flex; gap: 1.1rem; margin-top: .8rem; }
.app-icons a { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-decoration: none; color: var(--ink); width: 5.2rem; }
.app-icons img { width: 3.6rem; height: 3.6rem; border-radius: 22%; border: 1.5px solid rgba(19,19,19,.18); display: block; background: #fff; }
.app-icons span { font-size: .7rem; font-weight: 700; line-height: 1.3; text-align: center; }
.app-icons a:hover img { box-shadow: 3px 3px 0 0 var(--accent); }
body.issue03 .prod-why { display: block; }
body.issue03 .prod-pill { display: block; width: fit-content; }

/* ---------- 04 균열 종류 ------------------------------------ */
.kind { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .9rem; }
.kind div { border: 2px solid var(--ink); padding: .65rem .75rem .75rem; }
.kind div:last-child { background: var(--ink); color: var(--paper); }
.kind b {
  font-family: var(--fd); font-size: 1rem; display: inline-block; transform: scaleX(.75); transform-origin: 0 50%;
}
.kind span { display: block; font-size: .8rem; line-height: 1.55; margin-top: .25rem; }

/* ---------- 05 보수 방식 / 재료 ------------------------------ */
.method-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.method { border: 2px solid var(--ink); display: grid; grid-template-columns: 9rem 1fr; align-items: center; background: var(--paper); }
.method .pic { border-right: 2px solid var(--ink); background: #fff; height: 100%; display: flex; align-items: center; padding: .55rem; }
.method .pic img { width: 100%; display: block; }
.method-body { padding: .75rem .85rem .85rem; }
.method-name {
  font-family: var(--fd); font-weight: 700; font-size: 1.15rem; display: inline-block; transform: scaleX(.75); transform-origin: 0 50%;
}
.method-body p { font-size: .85rem; line-height: 1.6; margin-top: .25rem; }
.method-tag { display: inline-block; margin-top: .45rem; border: 1.5px solid var(--ink); font-size: .72rem; font-weight: 700; padding: .12rem .45rem; }
@media (max-width: 420px) {
  .method { grid-template-columns: 1fr; }
  .method .pic { border-right: none; border-bottom: 2px solid var(--ink); justify-content: center; }
  .method .pic img { max-width: 15rem; }
}
.mat-list { margin: .9rem 0 0; border-top: 2px solid var(--ink); }
.mat-list > div { display: grid; grid-template-columns: 8.6rem 1fr; gap: .6rem; padding: .6rem 0; border-bottom: 1.5px dotted var(--ink); }
.mat-list dt { font-weight: 700; font-size: .88rem; }
.mat-list dd { margin: 0; font-size: .85rem; line-height: 1.6; }
@media (max-width: 420px) { .mat-list > div { grid-template-columns: 1fr; gap: .1rem; } }
.callout { border-left: 4px solid var(--ink); padding: .2rem 0 .2rem .85rem; margin-top: 1.1rem; font-weight: 700; }

/* ---------- 06 사례 질문 ------------------------------------ */
.q-box { border: 2px solid var(--ink); background: var(--ink); color: var(--paper); padding: .85rem 1rem; margin-top: 1.6rem; font-weight: 700; line-height: 1.55; }

/* ---------- 관련 자료 인라인 링크 --------------------------- */
.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; }

/* ---------- 마무리 ------------------------------------------ */