/**
 * @fileoverview 편지지 — 핑크/로즈 고급 테마 CSS Variables 오버라이드
 * @project 편지지 (빈티지 편지 앨범)
 * @generated 20260526_200000
 *
 * 이 파일은 styles.css 이후에 <link>로 로드해 CSS Cascade 우선순위로
 * :root 변수를 핑크/로즈/골드 테마로 재정의한다.
 * 기존 styles.css는 수정하지 않는다.
 *
 * 포함 내용:
 *  1. :root — 핑크/로즈/골드 CSS Variables 재정의
 *  2. 카드 border / shadow 핑크·골드 적용
 *  3. 헤더 로고 골드 그라디언트
 *  4. 버튼 Primary 골드 포인트
 *  5. .page-wrapper::before / .page-wrapper::after — 양쪽 여백 장식
 *     (min-width: 1100px 이상 데스크탑에서만 표시)
 *  6. 폴라로이드 골드 포인트 — 신규
 *  7. 커버 D+day 골드 그라디언트 — 신규
 *  8. 앨범 배지 핑크 오버라이드 — 신규
 */

/* =========================================================================
   1. 핑크/로즈/골드 CSS Variables 재정의
   tokens.json > cssVariables 매핑 기준
   ========================================================================= */

:root {
  /* Primary — 세피아 → 핑크/로즈 */
  --color-primary-900: #7B1F3A;
  --color-primary-700: #B5476A;
  --color-primary-500: #D4809A;
  --color-primary-300: #F0B8CB;
  --color-primary-100: #FCE8F0;

  /* Secondary — 잉크 블루 → 로즈/핑크 */
  --color-secondary-700: #8B3558;
  --color-secondary-400: #CF8FAA;
  --color-secondary-100: #FADADD;

  /* Semantic — 핑크 계열 조정 */
  --color-success: #5A8F6A;
  --color-warning: #C9A84C;
  --color-error:   #C0394B;
  --color-info:    #7B5EA7;

  /* Background */
  --color-bg-page:    #FFF0F5;
  --color-bg-surface: #FFF5F8;
  --color-bg-card:    #FFFAFE;
  --color-bg-overlay: rgba(123, 31, 58, 0.55);

  /* Text */
  --color-text-primary:   #4A1030;
  --color-text-secondary: #8B3558;
  --color-text-muted:     #C4789A;
  --color-text-on-dark:   #FFF0F5;

  /* Border */
  --color-border-default: #F0B8CB;
  --color-border-strong:  #D4809A;
  --color-border-focus:   #B5476A;

  /* Gold — 신규 토큰 (styles.css에 없던 변수) */
  --color-gold:       #C9A84C;
  --color-gold-light: #F0D98C;
  --color-gold-dark:  #9E7A2A;

  /* Shadow — 핑크 베이스로 교체 */
  --shadow-xs:    0 1px 2px rgba(123, 31, 58, 0.08);
  --shadow-sm:    0 2px 6px rgba(123, 31, 58, 0.12);
  --shadow-md:    0 4px 16px rgba(123, 31, 58, 0.16);
  --shadow-lg:    0 8px 32px rgba(123, 31, 58, 0.20);
  --shadow-inset: inset 0 1px 3px rgba(123, 31, 58, 0.10);
  --shadow-gold:  0 2px 12px rgba(201, 168, 76, 0.30);

  /* z-index 보완 (드래그, 음악, 하트 파티클) */
  --z-deco:  1;
  --z-drag:  20;
  --z-music: 50;
  --z-heart: 500;
}

/* =========================================================================
   2. 카드 border / shadow 핑크·골드 적용
   ========================================================================= */

.letter-card {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-sm);
  border-top-color: var(--color-primary-300);
  border-bottom-color: var(--color-primary-300);
}

.letter-card:hover {
  box-shadow: var(--shadow-md);
  border-top-color: var(--color-primary-500);
  border-bottom-color: var(--color-primary-500);
}

/* Featured 카드 — 골드 border */
.letter-card--featured {
  border-top-color: var(--color-gold) !important;
  border-bottom-color: var(--color-gold) !important;
  box-shadow:
    var(--shadow-md),
    var(--shadow-gold);
}

/* =========================================================================
   3. 헤더 로고 — 핑크/골드 그라디언트
   ========================================================================= */

.site-header__logo {
  background: linear-gradient(
    135deg,
    var(--color-primary-700) 0%,
    var(--color-gold) 60%,
    var(--color-primary-500) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.site-header__logo:hover {
  -webkit-text-fill-color: transparent;
}

/* =========================================================================
   4. 버튼 Primary — 핑크 기반 골드 포인트
   ========================================================================= */

.btn--primary {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

.btn--primary:hover {
  background-color: var(--color-primary-900);
  border-color: var(--color-primary-900);
  box-shadow: var(--shadow-gold);
}

/* 업로드 페이지 제출 버튼 — 골드 그라디언트 */
#upload-submit-btn {
  background: linear-gradient(
    135deg,
    var(--color-primary-700) 0%,
    var(--color-gold-dark) 100%
  );
  border: none;
}

#upload-submit-btn:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--color-primary-900) 0%,
    var(--color-gold) 100%
  );
  box-shadow: var(--shadow-gold);
}

/* =========================================================================
   5. 드롭존 — 핑크 포커스 색상
   ========================================================================= */

.drop-zone:hover,
.drop-zone:focus {
  border-color: var(--color-primary-500);
  background-color: var(--color-primary-100);
}

.drop-zone--dragover {
  border-color: var(--color-primary-700);
  background-color: var(--color-primary-100);
}

/* =========================================================================
   6. 폼 포커스 — 핑크 포인트
   ========================================================================= */

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(180, 71, 106, 0.15);
}

/* 편지 텍스트에리어 줄 배경 — 핑크 primary-100 */
.form-textarea {
  background-image: repeating-linear-gradient(
    transparent,
    transparent calc(var(--leading-relaxed) * var(--size-md) - 1px),
    var(--color-primary-100) calc(var(--leading-relaxed) * var(--size-md) - 1px),
    var(--color-primary-100) calc(var(--leading-relaxed) * var(--size-md))
  );
}

/* =========================================================================
   7. 스피너 — 핑크 토큰
   ========================================================================= */

.spinner {
  border-color: var(--color-primary-300);
  border-top-color: var(--color-primary-700);
}

/* =========================================================================
   8. 앨범 배지 — 핑크 포인트
   ========================================================================= */

.album-badge {
  background: rgba(219, 112, 147, 0.15);
  color: var(--color-primary-700);
  border: 1px solid rgba(219, 112, 147, 0.3);
}

.album-badge:hover {
  background-color: var(--color-primary-300);
}

.album-badge:active {
  background-color: var(--color-primary-500);
  color: var(--color-text-on-dark);
}

/* =========================================================================
   9. 양쪽 여백 장식 (C4)
   .page-wrapper::before (왼쪽) / .page-wrapper::after (오른쪽)
   min-width: 1100px 이상 데스크탑에서만 표시
   ========================================================================= */

@media (min-width: 1100px) {
  .page-wrapper {
    position: relative;
    overflow: visible;
  }

  .page-wrapper::before,
  .page-wrapper::after {
    content: '';
    position: fixed;
    top: 0;
    width: calc((100vw - 680px) / 2 - 20px);
    min-width: 60px;
    height: 100vh;
    pointer-events: none;
    z-index: var(--z-deco, 1);

    /*
     * SVG 배경 패턴 — 하트(♥), 꽃(✿), 작은 별(✦) 조합
     * 핑크(#F0B8CB)와 골드(#C9A84C) 색상으로 구성
     */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3C!-- 큰 하트 --%3E%3Cpath d='M20 28 C20 22 14 18 10 22 C6 26 10 34 20 40 C30 34 34 26 30 22 C26 18 20 22 20 28 Z' fill='%23F0B8CB' opacity='0.7'/%3E%3C!-- 꽃 --%3E%3Ccircle cx='60' cy='20' r='4' fill='%23C9A84C' opacity='0.5'/%3E%3Ccircle cx='56' cy='16' r='3' fill='%23F0B8CB' opacity='0.6'/%3E%3Ccircle cx='64' cy='16' r='3' fill='%23F0B8CB' opacity='0.6'/%3E%3Ccircle cx='56' cy='24' r='3' fill='%23F0B8CB' opacity='0.6'/%3E%3Ccircle cx='64' cy='24' r='3' fill='%23F0B8CB' opacity='0.6'/%3E%3C!-- 작은 하트 --%3E%3Cpath d='M55 55 C55 52 52 50 50 52 C48 50 45 52 45 55 C45 58 50 62 50 62 C50 62 55 58 55 55 Z' fill='%23D4809A' opacity='0.5'/%3E%3C!-- 별 --%3E%3Cpath d='M20 65 L21.5 69 L26 69 L22.5 71.5 L24 76 L20 73.5 L16 76 L17.5 71.5 L14 69 L18.5 69 Z' fill='%23C9A84C' opacity='0.4'/%3E%3C!-- 점 장식 --%3E%3Ccircle cx='65' cy='50' r='2' fill='%23F0B8CB' opacity='0.5'/%3E%3Ccircle cx='70' cy='45' r='1.5' fill='%23C9A84C' opacity='0.4'/%3E%3Ccircle cx='60' cy='55' r='1.5' fill='%23F0B8CB' opacity='0.4'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-size: 80px 80px;
    opacity: 0.22;
  }

  /* 왼쪽 여백 */
  .page-wrapper::before {
    left: 0;
  }

  /* 오른쪽 여백 — 수평 뒤집기로 좌우 대칭 */
  .page-wrapper::after {
    right: 0;
    transform: scaleX(-1);
  }
}

/* =========================================================================
   10. 헤더 스크롤 시 핑크 shadow
   ========================================================================= */

.site-header--scrolled {
  box-shadow: 0 2px 12px rgba(123, 31, 58, 0.12);
}

/* =========================================================================
   11. 토스트 — 핑크 info 색상
   ========================================================================= */

.toast--info {
  background-color: var(--color-primary-700);
}

/* =========================================================================
   12. 라이트박스 오버레이 — 핑크 어두운 색
   ========================================================================= */

.lightbox__overlay,
.modal__overlay {
  background-color: var(--color-bg-overlay);
}

/* =========================================================================
   13. 테마 컬러 메타 반영 (body 배경색)
   ========================================================================= */

body {
  background-color: var(--color-bg-page);
}

/* =========================================================================
   14. 폴라로이드 골드 포인트 — 신규
   ========================================================================= */

.polaroid {
  border: 1px solid rgba(201, 168, 76, 0.2);
}

.polaroid__date {
  color: var(--color-gold, #C9A84C);
}

/* =========================================================================
   15. 커버 D+day 골드 그라디언트 — 신규
   ========================================================================= */

.cover-dday {
  background: linear-gradient(135deg, #C9A84C, #F0D060, #C9A84C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}