/* ============================================================
   Base / Reset
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.container--wide {
  max-width: var(--container-max-wide);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ---- 공통 이미지 placeholder ----
   실제 이미지가 없을 때 사용하는 자리표시자. 나중에 실제 이미지를 넣으려면
   부모 요소에 style="background-image:url(...)" 를 추가하거나 <img>로 교체하면 됩니다. */
.img-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    135deg,
    oklch(93% 0.006 90),
    oklch(93% 0.006 90) 10px,
    oklch(90% 0.006 90) 10px,
    oklch(90% 0.006 90) 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 12px;
  line-height: 1.5;
  min-height: 120px;
}
.img-placeholder::before {
  content: '🖼 ' attr(data-label);
}

/* 배너처럼 placeholder 위에 제목 텍스트가 겹쳐 올라가는 경우 —
   라벨을 좌상단 코너로 옮겨서 겹침을 방지 */
.img-placeholder--corner {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
}

/* 실제 사진을 placeholder 자리에 넣을 때 쓰는 공용 유틸리티.
   object-position은 얼굴/피사체가 잘리지 않도록 인스턴스별로 style="object-position:...으로 조정 */
.photo-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- 버튼 ---- */
.btn {
  display: inline-block;
  font-weight: 700;
  border-radius: 4px;
  padding: 13px 24px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  text-align: center;
}
.btn-primary { background: var(--blue); color: var(--paper); }
.btn-coral { background: var(--coral); color: var(--paper); }
.btn-amber { background: var(--amber); color: oklch(26% 0.06 70); font-weight: 800; }

/* ---- 유틸 ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}