/*
 * style-05-scandi.css — 05 Scandinavian Premium 완성본
 * NOULE AI Brand OS — Phase 2a
 *
 * 기준: style-05-scandi-spec.md (모리) 수치 그대로 구현
 * 레이아웃: absolute 배치 (그리드 아님) — spec 수치와 1:1 대응
 *
 * 금지: #fff 순백, 채도 높은 색, clamp/vw, bold weight
 */

/* ── CSS 변수 (s05 전용) ── */
.card--style-05 {
  --s05-bg:          #F0EBE1;
  --s05-text-primary:   #2E2620;
  --s05-text-secondary: #6B5F52;
  --s05-text-muted:     #7A6E62;
  --s05-text-strip:     #8C7E6A;
  --s05-divider:        #C8BFB0;
  --s05-symbol-stroke:  #8C7E6A;
  --s05-qr-dark:        #3A332C;

  /* 고정 수치 */
  --s05-strip-w:        42px;
  --s05-center-start:   60px;   /* 44px + 16px padding */
  --s05-divider-x:      374px;
  --s05-right-start:    392px;  /* 374 + 14 + 4 */
  --s05-margin-v:       28px;
  --s05-margin-r:       28px;

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

/* ── 카드 본체 ── */
.card--style-05 {
  background-color: var(--s05-bg);
  border-radius: 0;   /* 캡처 일치: 인쇄 명함은 radius 없음 */
  font-family: var(--s05-font-body);
}

/* ── 배경 레이어 override ── */
.card--style-05 .card__bg {
  background-color: var(--s05-bg);
  background-image: none;
}

.card--style-05 .card__bg-image,
.card--style-05 .card__overlay {
  display: none;  /* Phase 2a: 단색 배경 */
}

/* ── .card__content: padding 0으로 리셋 후 절대배치 사용 ── */
.card--style-05 .card__content {
  padding: 0;
  display: block;
}

/* ══════════════════════════════════════════════════
   LEFT STRIP — 수직 브랜드 라벨
   ══════════════════════════════════════════════════ */
.card--style-05 .slot-wordmark {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s05-strip-w);
  height: 315px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* reset: remove old rule and padding */
  flex-direction: row;
  padding: 0;
}

.card--style-05 .slot-wordmark__brand {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--s05-font-strip);
  font-size: 7.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--s05-text-strip);
  white-space: nowrap;
  text-transform: uppercase;
  /* reset Phase 0 overrides */
  text-orientation: initial;
  max-height: none;
  overflow: visible;
  text-overflow: clip;
}

/* hide the old rule element — hairline is now its own absolute div */
.card--style-05 .slot-wordmark__rule {
  display: none;
}

/* ══════════════════════════════════════════════════
   HAIRLINE DIVIDER — 1px 수직선
   ══════════════════════════════════════════════════ */
.card--style-05 .s05-divider {
  position: absolute;
  left: var(--s05-divider-x);
  top: var(--s05-margin-v);
  bottom: var(--s05-margin-v);
  width: 1px;
  background-color: var(--s05-divider);
}

/* ══════════════════════════════════════════════════
   CENTER ZONE — 심볼·이름·직책·메시지
   ══════════════════════════════════════════════════ */
.card--style-05 .slot-main {
  position: absolute;
  left: var(--s05-center-start);
  right: calc(525px - var(--s05-divider-x) + 14px);  /* = 525-374+14 = 165px from right */
  top: var(--s05-margin-v);
  bottom: var(--s05-margin-v);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  min-width: 0;
}

/* 꽃 심볼 컨테이너 */
.card--style-05 .slot-main__symbol {
  margin-bottom: 14px;
  flex-shrink: 0;
  line-height: 0;
}

/* 이름 — Noto Serif KR 300, 32px */
.card--style-05 .slot-main__name {
  font-family: var(--s05-font-name);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--s05-text-primary);
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* 직책 — Pretendard 300, 10px */
.card--style-05 .slot-main__position {
  font-family: var(--s05-font-body);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--s05-text-secondary);
  word-break: keep-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* 브랜드 메시지 — Pretendard 300, 9px */
.card--style-05 .slot-main__message {
  font-family: var(--s05-font-body);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: var(--s05-text-muted);
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ══════════════════════════════════════════════════
   RIGHT ZONE — 연락처 블록
   ══════════════════════════════════════════════════ */
.card--style-05 .slot-contact {
  position: absolute;
  left: var(--s05-right-start);
  right: var(--s05-margin-r);
  top: var(--s05-margin-v);
  bottom: 84px;   /* QR 공간 확보 */
  font-family: var(--s05-font-body);
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--s05-text-secondary);
  display: flex;
  flex-direction: column;
  /* reset Phase 0 */
  border-left: none;
  padding-left: 0;
  gap: 0;
}

/* label (tel/email/web/addr) — 숨김, 연락처만 표시 */
.card--style-05 .slot-contact__item--label {
  display: none;
}

/* 연락처 줄 */
.card--style-05 .slot-contact__item {
  font-family: var(--s05-font-body);
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--s05-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════
   QR — 기존 .card__qr 숨김 (s05-noule-qr로 대체)
   ══════════════════════════════════════════════════ */
.card--style-05 .card__qr {
  display: none !important;
}

/* ══════════════════════════════════════════════════
   NOULE 유입 QR — 우하단 코너 고정 (02 패턴 동일)
   ══════════════════════════════════════════════════ */
.card--style-05 .s05-noule-qr {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(240, 235, 225, 0.90);
  padding: 2px 3px;
  border-radius: 1px;
}

.card--style-05 .s05-noule-qr .s05-qr-canvas {
  width: 42px;
  height: 42px;
  display: block;
  image-rendering: pixelated;
}

.card--style-05 .s05-noule-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.18;
}

.card--style-05 .s05-noule-make {
  font-family: var(--s05-font-body);
  font-size: 5.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #5E5348;
}

.card--style-05 .s05-noule-url {
  font-family: var(--s05-font-body);
  font-size: 4.5px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #9A8E7E;
}