/* ============================================
   공통: reset, container, 버튼 시스템(§5), 임시 플레이스홀더(.ph)
   common-design.md § 2, § 5
   ============================================ */

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--color-mono-1);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
input, select, textarea, button { font-family: inherit; }

/* ---- Container (common §2-2)
   콘텐츠 폭(padding 제외)이 1232px 가 되도록 max-width = 1232 + padding*2.
   - PC (≥1280): padding 60+60 → max-width 1352. viewport ≥ 1352 시 콘텐츠 1232 확보.
   - 태블릿 (768~1279): padding 40+40 → max-width 1312.
   - 모바일 (<768): padding 16+16 → max-width 1264.
   - viewport 가 max-width 미만이면 width: 100% 가 우선 → 콘텐츠 자동 축소 (D 패턴, 유동).
   ---- */
.container {
  --c-padding: 16px;
  width: 100%;
  max-width: calc(1232px + var(--c-padding) * 2);
  margin: 0 auto;
  padding-left: var(--c-padding);
  padding-right: var(--c-padding);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .container { --c-padding: 40px; }
}
@media (min-width: 1280px) {
  .container { --c-padding: 60px; }
}

/* ============================================
   버튼 시스템 (common-design.md § 5)
   - shape × size × variant 매트릭스
   - 색 슬롯: --btn-bg / --btn-border / --btn-text
   ============================================ */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  border: 1px solid var(--btn-border, transparent);
  background: var(--btn-bg, transparent);
  color: var(--btn-text, currentColor);
}
.c-btn:hover { filter: brightness(0.97); }
.c-btn:active { filter: brightness(0.93); transform: translateY(0.5px); }
.c-btn:focus-visible {
  outline: 2px solid var(--point-blue-1);
  outline-offset: 2px;
}
.c-btn[disabled],
.c-btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* ---- Sizes ---- */
.c-btn--sm { height: 34px; padding: 0 14px; font-size: 0.875rem; }
.c-btn--md { height: 40px; padding: 0 18px; font-size: 0.9375rem; }
.c-btn--lg { height: 46px; padding: 0 26px; font-size: 1.0625rem; min-width: 130px; }

/* ---- Shapes ---- */
.c-btn--rect-md  { border-radius: var(--radius-md); }
.c-btn--rect-lg  { border-radius: var(--radius-btn-rect); height: 45px; }
.c-btn--pill     { border-radius: var(--radius-pill); }
.c-btn--round    { border-radius: 50%; }

/* ---- Variants (대표 사전 정의 — 색 슬롯 override 권장) ---- */
.c-btn--primary {
  --btn-bg: var(--point-blue-1);
  --btn-text: var(--color-white);
  box-shadow: var(--shadow-cta-primary);
}
.c-btn--secondary {
  --btn-bg: transparent;
  --btn-border: var(--color-mono-6);
  --btn-text: var(--color-mono-1);
}
.c-btn--tertiary {
  --btn-bg: transparent;
  --btn-text: var(--color-mono-3);
}
.c-btn--ghost {
  --btn-bg: transparent;
  --btn-border: var(--color-mono-6);
  --btn-text: var(--color-mono-1);
}

/* ---- IconBtn (Round) ---- */
.c-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--btn-bg, var(--color-white));
  color: var(--btn-text, var(--color-mono-1));
  border: 1px solid var(--btn-border, #DDDDDD);
  cursor: pointer;
  transition: filter 0.15s ease;
}
.c-icon-btn--round { border-radius: 50%; }
.c-icon-btn:hover { filter: brightness(0.97); }
.c-icon-btn:focus-visible { outline: 2px solid var(--point-blue-1); outline-offset: 2px; }

/* ============================================
   임시 사진 영역 플레이스홀더 (.ph)
   - 시안의 사진/일러스트 자리. 추후 실제 이미지/SVG로 교체
   - 회색 빗금 배경 + 라벨 텍스트로 명확히 "임시 영역"임을 표시
   ============================================ */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--color-mono-6);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.03) 8px,
      rgba(0, 0, 0, 0.06) 8px,
      rgba(0, 0, 0, 0.06) 16px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph__label {
  font-size: 11px;
  color: var(--color-mono-4);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  max-width: 80%;
  word-break: keep-all;
}
.ph--on-accent {
  border-color: rgba(255, 255, 255, 0.4);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05) 8px,
      rgba(255, 255, 255, 0.1) 8px,
      rgba(255, 255, 255, 0.1) 16px
    );
}
.ph--on-accent .ph__label { color: #fff; background: rgba(0, 0, 0, 0.3); }