/*
 * style-03-japanese.css — 03 "또렷한 각인" Modern Branding v2
 * NOULE AI Brand OS
 *
 * 재설계: 색블록 절반 폐기 → 컬러 수직 스트라이프 + hairline 악센트.
 * 크림 전면 배경 위에 업종별 포인트 컬러가 좌측 스트라이프·이름 아래 룰로 각인.
 * 02(화보)·05(여백)와 완전히 다른 구조.
 */

/* ── CSS 변수 ── */
.card--style-03 {
  --s03-bg:             #F2EDE5;
  --s03-accent:         #C4846A;    /* 업종별 교체: 포인트 컬러 */
  --s03-stripe-w:       5px;        /* 좌측 컬러 스트라이프 폭 */
  --s03-text-primary:   #2E2620;
  --s03-text-secondary: #6B5F52;
  --s03-text-muted:     #8C7E6A;
  --s03-rule-color:     var(--s03-accent);

  --s03-pad-l:          28px;       /* 스트라이프 우측 여백 시작 */
  --s03-pad-r:          24px;
  --s03-pad-v:          26px;
  --s03-divider-x:      310px;      /* 좌 텍스트존 / 우 연락처존 경계 */

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

/* ── 카드 본체: 크림 전면 ── */
.card--style-03 {
  background-color: var(--s03-bg);
  border-radius: 0;
  font-family: var(--s03-font-body);
}

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

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

/* ══════════════════════════════════════════════════
   좌측 컬러 스트라이프 — 업종별 포인트 컬러 각인
   ══════════════════════════════════════════════════ */
.card--style-03 .s03-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--s03-stripe-w);
  background-color: var(--s03-accent);
}

/* ══════════════════════════════════════════════════
   좌 텍스트존 — 심볼 · 이름 · 직책 · 메시지
   ══════════════════════════════════════════════════ */
.card--style-03 .s03-text-zone {
  position: absolute;
  left: calc(var(--s03-stripe-w) + var(--s03-pad-l));
  top: var(--s03-pad-v);
  width: calc(var(--s03-divider-x) - var(--s03-stripe-w) - var(--s03-pad-l));
  bottom: var(--s03-pad-v);
  display: flex;
  flex-direction: column;
}

/* 이름 — 세리프 대형 */
.card--style-03 .s03-name {
  font-family: var(--s03-font-name);
  font-size: 38px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--s03-text-primary);
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 이름 아래 컬러 hairline — 포인트 각인 */
.card--style-03 .s03-name-rule {
  height: 1.5px;
  background-color: var(--s03-accent);
  margin: 8px 0 9px;
  flex-shrink: 0;
  width: 100%;
  opacity: 0.8;
}

/* 직책 */
.card--style-03 .s03-position {
  font-family: var(--s03-font-body);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--s03-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  margin-bottom: 5px;
}

/* 영문 부제 */
.card--style-03 .s03-subtitle {
  font-family: var(--s03-font-sub);
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--s03-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* 메시지 — 하단 고정 */
.card--style-03 .s03-message {
  margin-top: auto;
  font-family: var(--s03-font-body);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.65;
  color: var(--s03-text-muted);
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ══════════════════════════════════════════════════
   수직 구분선
   ══════════════════════════════════════════════════ */
.card--style-03 .s03-divider {
  position: absolute;
  left: var(--s03-divider-x);
  top: var(--s03-pad-v);
  bottom: var(--s03-pad-v);
  width: 0.5px;
  background: rgba(140, 126, 106, 0.25);
}

/* ══════════════════════════════════════════════════
   우 연락처존
   ══════════════════════════════════════════════════ */
.card--style-03 .s03-contact-zone {
  position: absolute;
  left: calc(var(--s03-divider-x) + 18px);
  right: var(--s03-pad-r);
  top: var(--s03-pad-v);
  bottom: 80px;   /* QR 공간 확보 */
  font-family: var(--s03-font-body);
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.75;
  color: var(--s03-text-secondary);
  display: flex;
  flex-direction: column;
}

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

/* 회사명 — 컬러 악센트 */
.card--style-03 .s03-company {
  font-family: var(--s03-font-sub);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--s03-accent);
  text-transform: uppercase;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════
   NOULE 유입 QR — 우하단 코너 고정 (02 패턴 동일)
   ══════════════════════════════════════════════════ */
.card--style-03 .card__qr {
  display: none !important;
}

.card--style-03 .s03-noule-qr {
  position: absolute;
  right: 12px;
  bottom: 11px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(242, 237, 229, 0.90);
  padding: 2px 3px;
  border-radius: 1px;
}

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

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

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

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