/* =============================================================
   Section 2 · About Me — 재활용 종이 스크랩북 결
   ============================================================= */

.about {
  position: relative;
  overflow: hidden;
  padding: var(--space-24) 0;
  /* 재활용 종이 베이스 + 부드러운 구김 음영 */
  background-color: #EFECDF;
  background-image:
    radial-gradient(60% 50% at 18% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(50% 60% at 85% 30%, rgba(214,208,188,.5), transparent 60%),
    radial-gradient(70% 60% at 70% 95%, rgba(206,200,178,.55), transparent 55%),
    radial-gradient(40% 40% at 35% 80%, rgba(255,255,255,.4), transparent 60%);
}
/* 굵은 구김 음영 (큰 스케일 노이즈) */
.about::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 720px 720px;
  mix-blend-mode: soft-light; opacity: .55;
}
/* 미세한 종이 결 (그레인) */
.about::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: .14;
}

.about__inner {
  position: relative; z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.about__top {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
  gap: var(--space-16);
}

/* ---------------- 폴라로이드 사진 ---------------- */
.about__figure { justify-self: center; }
.about__photo {
  position: relative;
  width: min(340px, 80vw);
  background: #fffef9;
  padding: 14px 14px 52px;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(40,40,30,.22), 0 2px 6px rgba(40,40,30,.12);
  transform: rotate(-3.5deg);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.about__photo:hover { transform: rotate(-1.5deg) scale(1.02); }
.about__photo img { width: 100%; display: block; border-radius: 1px; }
.about__photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 16px;
  text-align: center; font-size: var(--fs-small);
  color: #6b6553; letter-spacing: .02em;
}
/* 테이프 */
.about__photo::before {
  content: ""; position: absolute; top: -14px; left: 50%;
  width: 96px; height: 30px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(233,255,112,.45);
  border: 1px solid rgba(205,233,75,.5);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ---------------- 본문 (타이틀 + 설명) ---------------- */
.about__label {
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing: .14em; color: var(--color-coral-deep);
  margin-bottom: var(--space-3);
}
.about__title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: var(--fw-extra);
  line-height: 1.3; letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-6);
}
.about__desc {
  font-size: 1.05rem; line-height: var(--lh-body);
  color: #3a4038; max-width: 56ch; margin: 0;
}

/* ---------------- 이력 ---------------- */
.about__history {
  position: relative; z-index: 2;
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 2px dashed rgba(140,134,112,.45);
}
.about__history h3 {
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing: .14em; color: var(--color-subtext);
  margin: 0 0 var(--space-6);
}
.about__history ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-8);
}
.about__history li {
  position: relative; padding-left: 28px;
  font-size: 1rem; line-height: 1.5; color: var(--color-ink);
}
/* 라임 잎사귀 마커 */
.about__history li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 14px; height: 14px;
  background: var(--color-lime);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 1px rgba(120,140,60,.35);
}

/* ---------------- 두들 (연속성, 최소) ---------------- */
.about__doodle { position: absolute; z-index: 1; pointer-events: none; }
.about__doodle--star { top: 8%; right: 7%; width: 34px; color: var(--color-coral);
  animation: twinkle 2.8s ease-in-out infinite; }
.about__doodle--heart { bottom: 12%; left: 5%; width: 26px; color: var(--color-coral);
  animation: floaty 4.5s ease-in-out infinite; }
.about__doodle svg { width: 100%; height: 100%; display: block; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .about { padding: var(--space-16) 0; }
  .about__top { grid-template-columns: 1fr; gap: var(--space-12); }
  .about__history ul { grid-template-columns: 1fr; }
  .about__doodle--star { right: 4%; }
}