/* ============================================
   PageLab Component Styles
   재사용 가능한 UI 컴포넌트
   Figma Component 변수 기반
   ============================================ */

/* ============================================
   CSS Variables - Component Tokens
   Component.json 값 기반
   ============================================ */
:root {
  /* Button Sizing */
  --comp-btn-radius: 999px;
  --comp-btn-max-width: 400px;
  --comp-btn-group-max-width: 480px;

  /* Large Button */
  --comp-btn-large-padding-hor: 32px;
  --comp-btn-large-padding-ver: 16px;
  --comp-btn-large-gap: 8px;

  /* Medium Button */
  --comp-btn-medium-padding-hor: 24px;
  --comp-btn-medium-padding-ver: 12px;
  --comp-btn-medium-gap: 6px;

  /* Small Button */
  --comp-btn-small-padding-hor: 20px;
  --comp-btn-small-padding-ver: 8px;
  --comp-btn-small-gap: 4px;

  /* XSmall Button */
  --comp-btn-xsmall-padding-hor: 14px;
  --comp-btn-xsmall-padding-ver: 6px;
  --comp-btn-xsmall-gap: 4px;

  /* Ghost Button */
  --comp-btn-ghost-radius: 8px;
  --comp-btn-ghost-large-padding-hor: 16px;
  --comp-btn-ghost-large-padding-ver: 16px;
  --comp-btn-ghost-medium-padding-hor: 10px;
  --comp-btn-ghost-medium-padding-ver: 12px;
  --comp-btn-ghost-small-padding-hor: 8px;
  --comp-btn-ghost-small-padding-ver: 10px;
  --comp-btn-ghost-xsmall-padding-hor: 6px;
  --comp-btn-ghost-xsmall-padding-ver: 4px;

  /* Icon Button */
  --comp-btn-ic-radius: 999px;
  --comp-btn-ic-large-padding: 16px;
  --comp-btn-ic-medium-padding: 12px;
  --comp-btn-ic-small-padding: 8px;

  /* Icon Ghost Button */
  --comp-btn-ic-ghost-radius: 8px;
  --comp-btn-ic-ghost-large-padding: 8px;
  --comp-btn-ic-ghost-medium-padding: 4px;
  --comp-btn-ic-ghost-small-padding: 2px;
}

/* ============================================
   Label / Badge Component
   ============================================ */
.pl-label {
  display: inline-flex;
  align-items: center;
  padding: var(--pl-spacing-2) var(--pl-spacing-4);
  font-size: var(--pl-font-size-label-lg);
  font-weight: var(--pl-font-weight-default);
  border-radius: var(--pl-radius-1);
  line-height: var(--pl-line-height-default);
}

.pl-label--filled {
  background: var(--pl-bg-brand);
  color: var(--pl-text-invert);
}

.pl-label--outline {
  background: transparent;
  border: var(--pl-border-1) solid var(--pl-border-brand);
  color: var(--pl-text-brand);
}

.pl-label--light {
  background: var(--pl-bg-brand-light);
  color: var(--pl-text-brand);
}

/* ============================================
   Button Component Base
   ============================================ */
.pl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--comp-btn-medium-gap);
  padding: var(--comp-btn-medium-padding-ver) var(--comp-btn-medium-padding-hor);
  font-family: var(--pl-font-main);
  font-size: var(--pl-font-size-label-lg);
  font-weight: var(--pl-font-weight-default);
  line-height: var(--pl-line-height-default);
  border-radius: var(--comp-btn-radius);
  border: var(--pl-border-2) solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  max-width: var(--comp-btn-max-width);
  white-space: nowrap;
  overflow: hidden;
}

/* Overlay Layer for Button States */
.pl-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
  pointer-events: none;
}

.pl-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

/* ============================================
   Button Variants
   ============================================ */

/* Primary Button (filled_primary)
   brand cyan 배경은 다크모드에서도 유지되므로 텍스트는 항상 흰색 */
.pl-btn--primary {
  background: var(--pl-bg-brand);
  color: var(--pl-neutral-0);
}

.pl-btn--primary::before {
  background: transparent;
}

.pl-btn--primary:hover::before {
  background: var(--pl-alpha-brand-12);
}

.pl-btn--primary:active::before {
  background: var(--pl-alpha-brand-24);
}

.pl-btn--primary:focus-visible {
  outline: 2px solid var(--pl-border-brand);
  outline-offset: 2px;
}

/* Secondary Button */
.pl-btn--secondary {
  background: var(--pl-bg-neutral);
  color: var(--pl-text-primary);
}

.pl-btn--secondary::before {
  background: transparent;
}

.pl-btn--secondary:hover::before {
  background: var(--pl-alpha-black-12);
}

.pl-btn--secondary:active::before {
  background: var(--pl-alpha-black-24);
}

.pl-btn--secondary:focus-visible {
  outline: 2px solid var(--pl-border-default);
  outline-offset: 2px;
}

/* Outline Button */
.pl-btn--outline {
  background: transparent;
  border: var(--pl-border-2) solid var(--pl-border-brand);
  color: var(--pl-text-brand);
}

.pl-btn--outline::before {
  background: transparent;
}

.pl-btn--outline:hover::before {
  background: var(--pl-alpha-brand-12);
}

.pl-btn--outline:active::before {
  background: var(--pl-alpha-brand-24);
}

.pl-btn--outline:focus-visible {
  outline: 2px solid var(--pl-border-brand);
  outline-offset: 2px;
}

/* Ghost Button */
.pl-btn--ghost {
  background: transparent;
  color: var(--pl-text-primary);
  border-radius: var(--comp-btn-ghost-radius);
}

.pl-btn--ghost::before {
  background: transparent;
}

.pl-btn--ghost:hover::before {
  background: var(--pl-alpha-black-12);
}

.pl-btn--ghost:active::before {
  background: var(--pl-alpha-black-24);
}

.pl-btn--ghost:focus-visible {
  outline: 2px solid var(--pl-border-default);
  outline-offset: 2px;
}

/* Filled Secondary Button (filled_secondary)
   --pl-bg-brand-light 토큰이 라이트/다크 자동 반전 처리
   라이트: lightblue-5 (#edf8fc) / 다크: lightblue-70 (#007daf) */
.pl-btn--filled-secondary {
  background: var(--pl-bg-brand-light);
  color: var(--pl-text-primary);
}

.pl-btn--filled-secondary::before {
  background: transparent;
}

.pl-btn--filled-secondary:hover::before {
  background: var(--pl-alpha-black-12);
}

.pl-btn--filled-secondary:active::before {
  background: var(--pl-alpha-black-24);
}

.pl-btn--filled-secondary:focus-visible {
  outline: 2px solid var(--pl-border-brand);
  outline-offset: 2px;
}

/* Outline Secondary Button (outlined_secondary)
   중립 테두리, 모드 전환 시 자동 반전 */
.pl-btn--outline-secondary {
  background: transparent;
  border: var(--pl-border-2) solid var(--pl-border-default);
  color: var(--pl-text-primary);
}

.pl-btn--outline-secondary::before {
  background: transparent;
}

.pl-btn--outline-secondary:hover::before {
  background: var(--pl-alpha-black-12);
}

.pl-btn--outline-secondary:active::before {
  background: var(--pl-alpha-black-24);
}

.pl-btn--outline-secondary:focus-visible {
  outline: 2px solid var(--pl-border-default);
  outline-offset: 2px;
}

/* ============================================
   Button Sizes
   ============================================ */

/* Large Button */
.pl-btn--large {
  padding: var(--comp-btn-large-padding-ver) var(--comp-btn-large-padding-hor);
  gap: var(--comp-btn-large-gap);
  font-size: var(--pl-font-size-body-lg);
}

/* Medium Button (default) */
.pl-btn--medium {
  padding: var(--comp-btn-medium-padding-ver) var(--comp-btn-medium-padding-hor);
  gap: var(--comp-btn-medium-gap);
}

/* Small Button */
.pl-btn--small {
  padding: var(--comp-btn-small-padding-ver) var(--comp-btn-small-padding-hor);
  gap: var(--comp-btn-small-gap);
  font-size: var(--pl-font-size-label-md);
}

/* XSmall Button */
.pl-btn--xsmall {
  padding: var(--comp-btn-xsmall-padding-ver) var(--comp-btn-xsmall-padding-hor);
  gap: var(--comp-btn-xsmall-gap);
  font-size: var(--pl-font-size-label-sm);
}

/* Full Width Button */
.pl-btn--full {
  width: 100%;
  max-width: 100%;
}

/* ============================================
   Icon Button
   ============================================ */
.pl-btn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.pl-btn--icon-only {
  padding: var(--comp-btn-ic-medium-padding);
  border-radius: var(--comp-btn-ic-radius);
}

.pl-btn--icon-only.pl-btn--large {
  padding: var(--comp-btn-ic-large-padding);
}

.pl-btn--icon-only.pl-btn--small {
  padding: var(--comp-btn-ic-small-padding);
}

.pl-btn--icon-only.pl-btn--ghost {
  padding: var(--comp-btn-ic-ghost-medium-padding);
  border-radius: var(--comp-btn-ic-ghost-radius);
}

.pl-btn--icon-only.pl-btn--ghost.pl-btn--large {
  padding: var(--comp-btn-ic-ghost-large-padding);
}

.pl-btn--icon-only.pl-btn--ghost.pl-btn--small {
  padding: var(--comp-btn-ic-ghost-small-padding);
}

/* ============================================
   Button Group
   ============================================ */
.pl-btn-group {
  display: flex;
  gap: var(--pl-spacing-3);
  flex-wrap: wrap;
  max-width: var(--comp-btn-group-max-width);
}

.pl-btn-group--full {
  width: 100%;
  max-width: 100%;
}

.pl-btn-group--center {
  justify-content: center;
}

.pl-btn-group--end {
  justify-content: flex-end;
}

/* ============================================
   Button Loading State
   ============================================ */
.pl-btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.pl-btn--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  animation: pl-btn-spin 0.6s linear infinite;
}

@keyframes pl-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   Card Component (pl-card)
   <pl-card label="01" title="제목" description="설명">
   ============================================ */
.pl-card {
  display: flex;
  flex-direction: column;
  gap: var(--pl-spacing-4);
  padding: var(--pl-spacing-6);
  background: var(--pl-bg-default);
  border: var(--pl-border-1) solid var(--pl-border-light);
  border-radius: var(--pl-radius-3);
  transition: box-shadow 0.2s ease;
}

.pl-card:hover {
  box-shadow: 0 4px 16px var(--pl-alpha-black-08);
}

/* Label / Step Number */
.pl-card__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--pl-font-size-label-md);
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-text-brand);
  background: var(--pl-bg-brand-light);
  border-radius: var(--pl-radius-2);
  flex-shrink: 0;
}

/* Image */
.pl-card__image {
  width: 100%;
  border-radius: var(--pl-radius-2);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.pl-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content */
.pl-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--pl-spacing-2);
}

.pl-card__title {
  font-size: var(--pl-font-size-title-sm);
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-text-primary);
  line-height: var(--pl-line-height-title);
}

.pl-card__desc {
  font-size: var(--pl-font-size-body-md);
  color: var(--pl-text-secondary);
  line-height: var(--pl-line-height-body);
}

.pl-card__note {
  font-size: var(--pl-font-size-label-sm);
  color: var(--pl-text-tertiary);
  line-height: var(--pl-line-height-default);
}

/* Dark Mode */
.preview-content[data-theme="dark"] .pl-card {
  background: var(--pl-bg-default);
  border-color: var(--pl-border-default);
}

.preview-content[data-theme="dark"] .pl-card:hover {
  box-shadow: 0 4px 16px var(--pl-alpha-black-24);
}

.preview-content[data-theme="dark"] .pl-card__title {
  color: var(--pl-text-primary);
}

.preview-content[data-theme="dark"] .pl-card__desc {
  color: var(--pl-text-secondary);
}