/* ==========================================================================
   p-sharon.css — 샤론파스 고유 레이어 (mag.css 위에 얹음)
   모티프: 직사각 첩부제 — 절취선, 크롭마크, 사각 프레임
   정렬: 좌 텍스트 / 우 영상 (매거진조 기본 유지)
   타이포: 명조를 촘촘한 신문 헤드라인처럼 (자간 좁게, 괘선 동반)
   ========================================================================== */

/* ── 히어로 모티프: 절취선 그리드 ────────────────────────────────────── */
.patch-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* 세로 절취선 2줄 */
.patch-motif::before,
.patch-motif::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(140, 194, 255, 0.3) 0 7px,
    transparent 7px 15px
  );
}
/* 본문을 관통하지 않도록 좌우 여백에만 둔다 */
.patch-motif::before {
  left: clamp(10px, 2.6vw, 40px);
}
.patch-motif::after {
  left: auto;
  right: clamp(14px, 3vw, 44px);
  opacity: 0.5;
}

/* 크롭 마크 — 인쇄 재단 표시 */
.crop-mark {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(140, 194, 255, 0.45);
  border-style: solid;
  border-width: 0;
}
.crop-mark.tl {
  top: 88px;
  left: clamp(10px, 2.6vw, 40px);
  border-top-width: 1px;
  border-left-width: 1px;
}
.crop-mark.bl {
  bottom: 64px;
  left: clamp(10px, 2.6vw, 40px);
  border-bottom-width: 1px;
  border-left-width: 1px;
}

/* ── 신문 헤드라인 타이포 ────────────────────────────────────────────── */
.hero h1 {
  letter-spacing: -0.055em; /* 촘촘하게 */
  line-height: 1.14;
  font-size: clamp(32px, 4.4vw, 56px);
}
.hero h1 .lead {
  display: block;
  font-size: clamp(46px, 6.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.06em;
  color: var(--brand-400);
}
/* 제목 아래 괘선 — 신문 기사 구분선 */
.hero h1::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--line);
  margin-top: 20px;
}
/* 세로 캡션 — 신문 사이드 노트 */
.vcaption {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  z-index: 3;
}

/* ── 도형 언어: 사각·절취선 ──────────────────────────────────────────── */
.row-figure,
.ing-ic,
.row-tag {
  border-radius: 0;
}
/* 상품 행 사이를 절취선으로 */
.row-item {
  border-bottom: 1px dashed var(--line-soft);
}
.row-figure {
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: -5px;
}

/* ── 시그니처 섹션: 부위별 사이즈 가이드 ─────────────────────────────── */
.fit-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.fit-cell {
  background: var(--bg);
  padding: 26px 24px;
}
.section-soft .fit-cell {
  background: var(--bg-soft);
}
.fit-part {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 부위 표시용 사각 패치 아이콘 (제품 형태 = 직사각) */
.fit-part i {
  display: block;
  flex: none;
  border: 1px solid var(--brand-400);
  background: rgba(140, 194, 255, 0.1);
}
.fit-part i.s {
  width: 14px;
  height: 20px;
}
.fit-part i.m {
  width: 20px;
  height: 26px;
}
.fit-part i.l {
  width: 26px;
  height: 32px;
}
.fit-cell p {
  font-size: 14px;
  color: var(--fg-mid);
  word-break: keep-all;
  margin-bottom: 12px;
}
.fit-size {
  font-size: 12.5px;
  color: var(--brand-400);
  border-top: 1px dashed var(--line-soft);
  padding-top: 12px;
  letter-spacing: 0.02em;
}
.fit-note {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--fg-dim);
  word-break: keep-all;
}

@media (max-width: 900px) {
  .patch-motif,
  .vcaption {
    display: none;
  }
}