/*
 * style-04-editorial.css — 04 "고요한 손길" v2
 * NOULE AI Brand OS
 *
 * 재설계: 빈약한 코드 SVG → AI 손그림 일러스트 이미지.
 * 좌 30% 일러스트존 + 우 70% 텍스트존(극단 자간 이름).
 * 심볼 없음 — 일러스트가 주인공.
 */

/* ── CSS 변수 ── */
.card--style-04 {
  --s04-bg:             #F3EDE3;
  --s04-text-primary:   #3A3228;
  --s04-text-secondary: #6B5F52;
  --s04-text-muted:     #7A6E62;
  --s04-rule:           #C8C0B6;

  --s04-illust-w:       158px;
  --s04-text-start:     168px;
  --s04-padding-text:   24px;
  --s04-margin-top:     26px;
  --s04-margin-bottom:  22px;

  --s04-font-name: 'Noto Serif KR', Georgia, serif;
  --s04-font-body: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif;
}

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

.card--style-04 .card__bg,
.card--style-04 .card__bg-image,
.card--style-04 .card__overlay {
  display: none;
}

.card--style-04 .card__content {
  padding: 0;
  display: block;
}

/* ══════════════════════════════════════════════════
   일러스트존 — 좌 0→158px, AI 손그림 이미지
   ══════════════════════════════════════════════════ */
.card--style-04 .s04-illust-zone {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s04-illust-w);
  height: 315px;
  overflow: hidden;
}

.card--style-04 .s04-illust-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 우측으로 배경색 페이드 — 텍스트존과 자연스럽게 블렌드 */
.card--style-04 .s04-illust-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 40%, var(--s04-bg) 100%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   텍스트존 — 우 168→525px
   ══════════════════════════════════════════════════ */
.card--style-04 .s04-text-zone {
  position: absolute;
  left: var(--s04-text-start);
  right: 0;
  top: var(--s04-margin-top);
  bottom: 0;
  padding-left: var(--s04-padding-text);
  padding-right: var(--s04-padding-text);
  box-sizing: border-box;
}

/* 이름 — 극단 자간 */
.card--style-04 .s04-name {
  font-family: var(--s04-font-name);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.35em;
  line-height: 1.6;
  color: var(--s04-text-primary);
  margin-bottom: 10px;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 직책 */
.card--style-04 .s04-position {
  font-family: var(--s04-font-body);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--s04-text-secondary);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 브랜드 메시지 */
.card--style-04 .s04-message {
  font-family: var(--s04-font-body);
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--s04-text-muted);
  word-break: keep-all;
  margin-bottom: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 얇은 구분선 */
.card--style-04 .s04-rule {
  width: 24px;
  height: 0.8px;
  background: var(--s04-rule);
  margin-bottom: 14px;
}

/* 연락처 */
.card--style-04 .s04-contact {
  font-family: var(--s04-font-body);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: var(--s04-text-secondary);
}

.card--style-04 .s04-contact-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════
   QR — 기존 숨김
   ══════════════════════════════════════════════════ */
.card--style-04 .card__qr {
  display: none !important;
}

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

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

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

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

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