/* ==========================================================================
   p-dongjeon.css — 동전파스 고유 레이어 (mag.css 위에 얹음)
   모티프: 동전 = 원 — 동심원, 방사 눈금, 원형 썸네일
   정렬: ★ 좌 영상 / 우 텍스트 (샤론파스와 좌우 반전)
   타이포: 명조 유지하되 여백을 크게, 숫자는 원 안에
   ========================================================================== */

/* ── 스플릿 좌우 반전 ★ 샤론파스와 정반대 ────────────────────────────── */
.hero-panel {
  order: 2;
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 6vw, 88px);
}
.hero-media {
  order: 1;
}
/* 경계 그라데이션도 방향 반전 (오른쪽 패널과 맞닿음) */
.hero-media::after {
  background: linear-gradient(
    to left,
    rgba(8, 11, 13, 0.92) 0%,
    rgba(8, 11, 13, 0.28) 22%,
    rgba(8, 11, 13, 0) 46%
  );
}

/* ── 여백을 크게 (4종뿐이라 밀도를 낮춘다) ───────────────────────────── */
.hero-inner {
  max-width: 470px;
}
.hero h1 {
  line-height: 1.34;
  letter-spacing: -0.02em;
}
.hero-sub {
  line-height: 1.9;
}
.section {
  padding: 112px 0;
}

/* ── 히어로 모티프: 동심원 + 2.8cm 링 ───────────────────────────────── */
.ring-motif {
  position: absolute;
  right: clamp(-70px, -3vw, -20px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 34vw, 520px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
}
.ring-motif span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 154, 120, 0.22);
}
.ring-motif span:nth-child(2) {
  inset: 12%;
  border-color: rgba(255, 154, 120, 0.16);
}
.ring-motif span:nth-child(3) {
  inset: 24%;
  border-color: rgba(255, 154, 120, 0.12);
}
.ring-motif span:nth-child(4) {
  inset: 36%;
  border-color: rgba(255, 154, 120, 0.09);
}
/* 방사 눈금 */
.ring-motif::before,
.ring-motif::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 154, 120, 0.12);
}
.ring-motif::after {
  left: 0;
  right: 0;
  top: 50%;
  bottom: auto;
  width: auto;
  height: 1px;
}
.hero-inner {
  position: relative;
  z-index: 2;
}

/* 숫자를 원 안에 — 2.8cm 배지 */
.dia-badge {
  display: inline-grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 1px solid var(--brand-500);
  color: var(--brand-400);
  font-family: var(--serif);
  margin-bottom: 26px;
  line-height: 1.2;
  text-align: center;
}
.dia-badge b {
  display: block;
  font-size: 25px;
  letter-spacing: -0.03em;
}
.dia-badge span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  margin-top: 2px;
}

/* ── 도형 언어: 원형 썸네일·원형 인덱스 ──────────────────────────────── */
.row-figure {
  border-radius: 50%;
  padding: 16px;
}
.ing-ic {
  border-radius: 50%;
}
.sec-no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sec-no::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--brand-500);
}
.reco-cell svg,
.check-list svg {
  border-radius: 50%;
}

/* ── 시그니처 섹션: 크기 비교 + 온감/쿨 비교 ─────────────────────────── */
.size-compare {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  flex-wrap: wrap;
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--line-soft);
}
.size-item {
  text-align: center;
}
.size-circle {
  border-radius: 50%;
  border: 1px dashed var(--brand-400);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  color: var(--brand-400);
  font-family: var(--serif);
  font-size: 13px;
}
/* 비율만 표현 — 화면 물리 크기는 기기마다 달라 실측을 단정하지 않는다 */
.size-circle.coin {
  width: 106px;
  height: 106px;
}
.size-circle.big {
  width: 148px;
  height: 148px;
  border-style: solid;
}
.size-item p {
  font-size: 13.5px;
  color: var(--fg-mid);
}
.size-item p b {
  display: block;
  color: var(--fg);
  font-family: var(--serif);
  font-size: 15px;
  margin-bottom: 3px;
}
.size-note {
  font-size: 12.5px;
  color: var(--fg-dim);
  word-break: keep-all;
  margin-top: 16px;
}

.type-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 34px;
}
.type-cell {
  background: var(--bg);
  padding: 28px 26px;
}
.section-soft .type-cell {
  background: var(--bg-soft);
}
.type-head {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.type-head i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  border: 1px solid currentColor;
}
.type-cell.warm .type-head {
  color: #ff9a78;
}
.type-cell.cool .type-head {
  color: #8cc2ff;
}
.type-cell dl {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 0;
}
.type-cell dt {
  font-size: 12.5px;
  color: var(--fg-dim);
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.type-cell dd {
  font-size: 14px;
  color: var(--fg-mid);
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  word-break: keep-all;
}

@media (max-width: 900px) {
  /* 세로 스택에서는 영상이 위(order 1), 텍스트가 아래(order 2) — 반전 유지 */
  .hero-panel {
    padding: 44px 22px 60px;
  }
  .hero-media::after {
    background: linear-gradient(
      to bottom,
      rgba(8, 11, 13, 0.86) 0%,
      rgba(8, 11, 13, 0.2) 34%,
      rgba(8, 11, 13, 0.9) 100%
    );
  }
  .ring-motif {
    display: none;
  }
  .hero-inner {
    max-width: none;
  }
  .section {
    padding: 68px 0;
  }
}

@media (max-width: 620px) {
  .type-compare {
    grid-template-columns: 1fr;
  }
}