/*
 * style-02-magazine.css — 02 Editorial Magazine 완성본
 * NOULE AI Brand OS
 *
 * 기준: style-02-magazine-spec.md (모리) 수치 그대로 구현
 * 레이아웃: 좌우 2분할 — 텍스트존(236px) + 이미지존(289px 풀블리드)
 * 텍스트존: flex column (상단부 = 브랜드/이름/직책/메시지, 하단부 = 연락처+QR)
 *
 * 금지: 순백, 채도 높은 색, clamp/vw, bold weight
 * 주의: html2canvas mask-image 미지원 → 소프트 마스크는 실제 DOM 요소 사용
 */

/* ── CSS 변수 (s02 전용) ── */
.card--style-02 {
  --s02-bg:              #F0E8DC;
  --s02-text-primary:    #2E2620;
  --s02-text-secondary:  #6B5F52;
  --s02-text-muted:      #7A6E62;
  --s02-text-label:      #8C7E6A;
  --s02-rule:            #C8BFB0;
  --s02-qr-dark:         #3A332C;

  /* 고정 수치 */
  --s02-text-zone-w:     350px;
  --s02-image-zone-x:    350px;
  --s02-padding-left:    28px;
  --s02-padding-right:   20px;
  --s02-margin-top:      28px;
  --s02-margin-bottom:   26px;

  /* 폰트 */
  --s02-font-title: 'Cormorant Garamond', 'Noto Serif KR', Georgia, serif;
  --s02-font-name:  'Noto Serif KR', 'Cormorant Garamond', Georgia, serif;
  --s02-font-body:  'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif;
}

/* ── 카드 본체 ── */
.card--style-02 {
  background-color: var(--s02-bg);
  border-radius: 0;
  font-family: var(--s02-font-body);
}

/* card-frame.css의 .card-wrap .card-shadow(border-radius:18px) override */
.card-wrap .card--style-02 {
  border-radius: 0 !important;
}

/* ── 배경 레이어 숨김 (02는 이미지존이 별도 DOM) ── */
.card--style-02 .card__bg,
.card--style-02 .card__bg-image,
.card--style-02 .card__overlay {
  display: none;
}

/* ── 콘텐츠 레이어 리셋 ── */
.card--style-02 .card__content {
  padding: 0;
  display: block;
}

/* ── card-frame.css .card__qr 숨김 (02는 텍스트존 내 QR 사용) ── */
.card--style-02 .card__qr {
  display: none;
}

/* ══════════════════════════════════════════════════
   TEXT ZONE — 좌측 (0 ~ 236px)
   flex column: 상단 콘텐츠 + 하단 고정 연락처/QR
   ══════════════════════════════════════════════════ */
.card--style-02 .s02-text-zone {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s02-text-zone-w);
  height: 315px;
  background-color: var(--s02-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--s02-margin-top) var(--s02-padding-right) var(--s02-margin-bottom) var(--s02-padding-left);
  box-sizing: border-box;
}

/* 에디토리얼 소형 라벨 */
.card--style-02 .s02-editorial-label {
  font-family: var(--s02-font-body);
  font-size: 6.5px;
  font-weight: 300;
  letter-spacing: 0.20em;
  color: var(--s02-text-label);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* 브랜드명 — 대형 세리프 타이틀 */
.card--style-02 .s02-brand-name {
  font-family: var(--s02-font-title);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.08;
  color: var(--s02-text-primary);
  word-break: keep-all;
  overflow: hidden;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* 얇은 가로 구분선 */
.card--style-02 .s02-rule {
  width: 24px;
  height: 0.8px;
  background: var(--s02-rule);
  margin-bottom: 11px;
  flex-shrink: 0;
}

/* 이름 */
.card--style-02 .s02-person-name {
  font-family: var(--s02-font-name);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--s02-text-primary);
  word-break: keep-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* 직책 */
.card--style-02 .s02-position {
  font-family: var(--s02-font-body);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--s02-text-secondary);
  word-break: keep-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* 브랜드 메시지 */
.card--style-02 .s02-message {
  font-family: var(--s02-font-body);
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--s02-text-muted);
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  flex-shrink: 1;
  min-height: 0;
}

/* 중간 여백 (에디토리얼 숨공간) */
.card--style-02 .s02-spacer {
  flex: 1;
  min-height: 8px;
}

/* ── 하단 연락처 + QR ── */
.card--style-02 .s02-bottom-block {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* QR 캔버스 래퍼 */
.card--style-02 .s02-qr-wrap {
  width: 46px;
  min-width: 46px;
  height: 46px;
  flex-shrink: 0;
  opacity: 0.85;
  display: block;
}

.card--style-02 .s02-qr-wrap canvas {
  width: 46px;
  height: 46px;
  display: block;
}

/* 연락처 텍스트 */
.card--style-02 .s02-contact-text {
  font-family: var(--s02-font-body);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.72;
  color: var(--s02-text-secondary);
  overflow: hidden;
  min-width: 0;
}

.card--style-02 .s02-contact-text div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════
   IMAGE ZONE — 우측 풀블리드 (236px ~ 525px)
   ══════════════════════════════════════════════════ */
.card--style-02 .s02-image-zone {
  position: absolute;
  left: var(--s02-image-zone-x);
  top: 0;
  right: 0;
  bottom: 0;
  width: 175px;
  height: 315px;
  overflow: hidden;
  /* 폴백 그라데이션 (AI 이미지 로드 전 / 실패 시) */
  background: linear-gradient(
    160deg,
    #D4B8A8 0%,
    #C4A882 35%,
    #B8A090 70%,
    #A89080 100%
  );
}

/* AI 이미지 */
.card--style-02 .s02-image-zone img.s02-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 소프트 마스크: 이미지존 좌측 22px 페이드
   html2canvas 호환 — 실제 DOM 요소 사용 */
.card--style-02 .s02-image-fade {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 100%;
  background: linear-gradient(to right, #F0E8DC, transparent);
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════════════
   NOULE 유입 QR — 우하단 코너 고정 (개인 연락처 아님 · 유입/워터마크)
   규칙: 항상 우하단, 저채도 이미지 위에도 스캔되게 밝은 패드, 은은한 유입 멘트
   ══════════════════════════════════════════════════ */
.card--style-02 .s02-noule-qr {
  position: absolute;
  right: 12px;
  bottom: 11px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(247, 241, 233, 0.88);
  padding: 2px 3px;
  border-radius: 1px;
}
.card--style-02 .s02-noule-qr canvas {
  width: 42px;
  height: 42px;
  display: block;
  image-rendering: pixelated;
}
.card--style-02 .s02-noule-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.18;
}
.card--style-02 .s02-noule-make {
  font-family: var(--s02-font-body);
  font-size: 5.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #5E5348;
}
.card--style-02 .s02-noule-url {
  font-family: var(--s02-font-body);
  font-size: 4.5px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #9A8E7E;
}