/* =====================================================================
 * 세종 놀이터 · 사주 결과 화면 스타일 (시안 '세종 놀이터 · 사주 결과 시안'과 1:1)
 * ---------------------------------------------------------------------
 * - 모든 클래스는 sj- (화면) / sjc- (공유 카드) 로 시작해서 사이트 기존 CSS와 겹치지 않음
 * - 색·간격·글자 크기는 아래 변수만 고치면 전체가 같이 바뀜
 * - 숫자(px)는 시안에서 그대로 가져온 값이니 임의로 바꾸지 말 것
 * ===================================================================== */

.sj-root {
  /* 색 */
  --sj-bg: #F3F5F9;          /* 화면 바탕 */
  --sj-surface: #FFFFFF;     /* 흰 카드 */
  --sj-panel: #F7F8FB;       /* 카드 안 회색 상자 */
  --sj-border: #E3E7EE;      /* 카드 테두리 */
  --sj-border-strong: #D5DBE5;
  --sj-text: #14213A;        /* 본문 진한 글자 */
  --sj-text-2: #3B475C;      /* 보통 글자 */
  --sj-text-3: #5A6578;      /* 설명 글자 */
  --sj-muted: #6B7689;       /* 작은 회색 글자 */
  --sj-blue: #1D4ED8;
  --sj-blue-soft: #EAF1FF;
  --sj-gold-border: #F1D48A; /* 재물운 카드 테두리 */
  --sj-gold-bg: #FFF1C7;     /* 재물운 꼬리표 */
  --sj-gold-text: #8A5A00;
  --sj-gold-bar: #D99A1E;    /* 기운 막대 */
  --sj-kakao: #FEE500;

  /* 오행 막대 색 */
  --sj-wood: #3E8E5A;
  --sj-fire: #D9573B;
  --sj-earth: #C08A2E;
  --sj-metal: #5B6B86;
  --sj-water: #2F6FB5;

  /* 모양 */
  --sj-radius-lg: 20px;
  --sj-radius: 18px;
  --sj-radius-sm: 12px;
  --sj-gap: 14px;

  box-sizing: border-box;
  width: 100%;
  background: var(--sj-bg);
  color: var(--sj-text);
  font-family: 'IBM Plex Sans KR', 'Pretendard', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.sj-root *, .sj-root *::before, .sj-root *::after { box-sizing: border-box; }
.sj-serif { font-family: 'Noto Serif KR', serif; }

/* ---------- 전체 틀 ---------- */
.sj-main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: var(--sj-gap);
}
@media (min-width: 768px) {
  .sj-main { padding: 28px 32px 56px; }
}

.sj-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  font-size: 14px; font-weight: 700; color: var(--sj-text-2);
  text-decoration: none;
}

.sj-card {
  background: var(--sj-surface);
  border: 1px solid var(--sj-border);
  border-radius: var(--sj-radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.sj-h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--sj-text); }
.sj-sub { font-size: 12px; color: var(--sj-muted); }
.sj-head { display: flex; flex-direction: column; gap: 3px; }
.sj-note {
  margin: 0; padding: 10px 12px;
  background: var(--sj-panel); border-radius: 10px;
  font-size: 13px; line-height: 1.6; color: var(--sj-text-2);
}

/* ---------- 1. 공유 카드 영역 ---------- */
.sj-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sj-hero-top {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.sj-hero-label { font-size: 13px; font-weight: 700; color: var(--sj-text-2); }
.sj-hero-birth { font-size: 12px; color: var(--sj-muted); }
.sj-card-frame {
  /* 카드 원본은 540×675. 화면에 맞게 줄여서 보여줌 (JS가 --sjc-scale 계산) */
  width: 100%;
  max-width: 358px;
  aspect-ratio: 540 / 675;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 33, 58, 0.22);
  position: relative;
}
@media (min-width: 768px) {
  .sj-card-frame { max-width: 432px; }
}
.sj-card-frame > .sjc {
  position: absolute; left: 0; top: 0;
  transform: scale(var(--sjc-scale, 0.663));
  transform-origin: top left;
}
.sj-share {
  width: 100%; max-width: 358px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
@media (min-width: 768px) {
  .sj-share { max-width: 432px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sj-only-mobile { display: none !important; }
}
.sj-hero-hint { font-size: 12px; color: var(--sj-muted); text-align: center; }

/* ---------- 버튼 ---------- */
.sj-btn {
  min-height: 46px; padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--sj-border-strong);
  background: var(--sj-surface); color: var(--sj-text);
  font: inherit; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; cursor: pointer;
}
.sj-btn--dark { background: var(--sj-text); border-color: var(--sj-text); color: #FFFFFF; }
.sj-btn--kakao { background: var(--sj-kakao); border-color: var(--sj-kakao); color: #191919; }
.sj-btn--ghost-dark { background: transparent; border-color: #3A5170; color: #FFFFFF; min-height: 48px; }
.sj-btn:focus-visible { outline: 3px solid var(--sj-blue); outline-offset: 2px; }

/* ---------- 2. 이번 달 재물운 ---------- */
.sj-fortune {
  background: var(--sj-surface);
  border: 2px solid var(--sj-gold-border);
  border-radius: var(--sj-radius-lg);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.sj-fortune-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.sj-tag-gold {
  font-size: 12px; font-weight: 700; color: var(--sj-gold-text);
  background: var(--sj-gold-bg); padding: 4px 10px; border-radius: 999px;
}
.sj-strength { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.sj-strength-bars { display: inline-flex; gap: 3px; }
.sj-strength-bars i { width: 8px; height: 14px; border-radius: 2px; background: var(--sj-gold-bar); }
.sj-strength-bars i.is-off { background: #EADBB8; }
.sj-fortune-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.sj-fortune-text { margin: 0; font-size: 16px; line-height: 1.75; color: var(--sj-text-2); }
.sj-fortune-text b { color: var(--sj-text); }
.sj-keywords { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-keyword {
  font-size: 14px; font-weight: 700; color: var(--sj-blue);
  background: var(--sj-blue-soft); padding: 6px 12px; border-radius: 999px;
}
.sj-habits {
  padding: 16px; background: var(--sj-panel); border-radius: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.sj-habits-title { font-size: 15px; font-weight: 700; }
.sj-habit { display: flex; gap: 12px; align-items: flex-start; }
.sj-habit-no {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--sj-text); color: #FFFFFF;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sj-habit-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sj-habit-text { font-size: 15px; font-weight: 700; line-height: 1.5; }
.sj-habit-why { font-size: 13px; line-height: 1.6; color: var(--sj-text-3); }
.sj-next {
  padding: 14px; border: 1px dashed #C9D2E0; border-radius: 14px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.sj-next-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 220px; }
.sj-next-label { font-size: 12px; font-weight: 700; color: var(--sj-muted); }
.sj-next-text { font-size: 14px; line-height: 1.55; }
.sj-next-link {
  flex: none; min-height: 32px; display: inline-flex; align-items: center;
  font-size: 12px; color: var(--sj-text-3); text-decoration: underline;
}

/* ---------- 3·4. 사주 기둥 + 오행 균형 (PC에서 두 칸) ---------- */
.sj-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sj-gap); }
.sj-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sj-pillars.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sj-pillar {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: 12px;
  background: var(--sj-panel); border: 1.5px solid transparent;
}
.sj-pillar.is-me { background: var(--sj-blue-soft); border-color: var(--sj-blue); }
.sj-pillar-label { font-size: 11px; font-weight: 600; color: var(--sj-muted); }
.sj-pillar-value { font-family: 'Noto Serif KR', serif; font-size: 19px; font-weight: 700; color: var(--sj-text); }
.sj-pillar-tag { font-size: 10px; font-weight: 700; color: #8A94A6; }
.sj-pillar.is-me .sj-pillar-tag { color: var(--sj-blue); }

.sj-bars { display: flex; flex-direction: column; gap: 8px; }
.sj-bar-row { display: grid; grid-template-columns: 54px 1fr 18px; align-items: center; gap: 10px; }
.sj-bar-label { font-size: 13px; font-weight: 500; }
.sj-bar-row.is-dominant .sj-bar-label { font-weight: 700; }
.sj-bar-track { height: 10px; border-radius: 999px; background: #EEF1F6; overflow: hidden; }
.sj-bar-fill { display: block; height: 10px; border-radius: 999px; opacity: 0.6; }
.sj-bar-row.is-dominant .sj-bar-fill { opacity: 1; }
.sj-bar-fill.wood { background: var(--sj-wood); }
.sj-bar-fill.fire { background: var(--sj-fire); }
.sj-bar-fill.earth { background: var(--sj-earth); }
.sj-bar-fill.metal { background: var(--sj-metal); }
.sj-bar-fill.water { background: var(--sj-water); }
.sj-bar-count { font-size: 13px; font-weight: 700; text-align: right; }
.sj-balance-note {
  padding: 10px 12px; background: var(--sj-panel); border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; line-height: 1.6; color: var(--sj-text-2);
}
.sj-balance-note b { color: var(--sj-text); }

/* ---------- 5. 사용 설명서 ---------- */
.sj-manual { display: flex; flex-direction: column; gap: 8px; }
.sj-manual-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--sj-text-2); }
.sj-chip { flex: none; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; line-height: 1.6; }
.sj-chip--good { color: #0E7A4F; background: #E4F5EC; }
.sj-chip--care { color: #A0471F; background: #FCEDE4; }

/* ---------- 6. 짝꿍 카드 (색은 짝꿍 오행 팔레트) ---------- */
.sj-partner {
  border-radius: var(--sj-radius-lg); padding: 22px 20px;
  color: #FFFFFF; display: flex; flex-direction: column; gap: 14px;
  background: var(--sjp-bg);
}
.sj-partner-label { font-size: 13px; font-weight: 600; color: var(--sjp-soft); }
.sj-partner-row { display: flex; align-items: center; gap: 14px; }
.sj-partner-icon {
  flex: none; width: 64px; height: 64px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif KR', serif; font-size: 30px; font-weight: 900; color: var(--sjp-accent);
}
.sj-partner-name { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.sj-partner-desc { font-size: 14px; color: var(--sjp-soft); }
.sj-partner-why { font-size: 13px; line-height: 1.6; color: var(--sjp-soft); }
.sj-partner-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-partner-btns .sj-btn { flex: 1 1 140px; min-height: 48px; }

/* ---------- 7. 데이터 유형 연결 ---------- */
.sj-nextstep {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px; background: var(--sj-surface);
  border: 2px solid var(--sj-blue); border-radius: var(--sj-radius);
  text-decoration: none; color: var(--sj-text);
}
.sj-nextstep-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sj-nextstep-title { font-size: 16px; font-weight: 700; line-height: 1.45; }
.sj-nextstep-desc { font-size: 13px; color: var(--sj-muted); }
.sj-nextstep-badge {
  flex: none; font-size: 13px; font-weight: 700; color: var(--sj-blue);
  background: var(--sj-blue-soft); padding: 8px 12px; border-radius: 10px;
}

/* ---------- 8. 안내 + 버튼 ---------- */
.sj-disclaimer {
  padding: 14px 16px; background: var(--sj-surface);
  border: 1px solid var(--sj-border); border-radius: 14px;
  font-size: 12px; line-height: 1.7; color: var(--sj-muted);
}
.sj-disclaimer b { color: var(--sj-text); }
.sj-bottom-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sj-bottom-btns .sj-btn { min-height: 48px; }

/* =====================================================================
 * 공유 카드 (540×675 고정, 이미지 저장 시 2배 = 1080×1350)
 * ===================================================================== */
.sjc {
  position: relative; width: 540px; height: 675px; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--sjc-bg); color: #FFFFFF;
  font-family: 'IBM Plex Sans KR', 'Pretendard', system-ui, sans-serif;
}
.sjc-art {
  position: absolute; left: 0; top: 0; width: 540px; height: 400px;
  transform: translateY(-34px) scale(0.84); transform-origin: 50% 100%;
}
.sjc-art > svg { position: absolute; left: 0; top: 0; }
.sjc-art-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--sjc-bg) 100%); }
/* 그림이 0.84배로 줄어 양옆 끝선이 보이지 않게 좌우도 바탕색으로 흐리게 */
.sjc-art-side { position: absolute; top: 0; bottom: 0; width: 90px; }
.sjc-art-side--l { left: 0; background: linear-gradient(90deg, var(--sjc-bg) 0%, rgba(0, 0, 0, 0) 100%); }
.sjc-art-side--r { right: 0; background: linear-gradient(270deg, var(--sjc-bg) 0%, rgba(0, 0, 0, 0) 100%); }
.sjc-top { position: relative; padding: 28px 32px 0; display: flex; justify-content: space-between; align-items: center; }
.sjc-kicker { font-size: 14px; font-weight: 700; color: var(--sjc-accent); }
.sjc-badge { font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.14); padding: 4px 10px; border-radius: 999px; }
.sjc-nick { position: relative; padding: 8px 32px 0; font-size: 20px; font-weight: 700; }
.sjc-bottom {
  position: relative; margin-top: auto; padding: 0 30px 20px;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--sjc-bg) 16%);
}
.sjc-names { display: flex; flex-direction: column; gap: 2px; padding-top: 34px; }
.sjc-han { font-family: 'Noto Serif KR', serif; font-size: 15px; font-weight: 700; letter-spacing: 8px; color: #E9C46A; }
.sjc-name { font-family: 'Noto Serif KR', serif; font-size: 50px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.12; }
.sjc-desc { font-size: 16px; color: var(--sjc-soft); }
.sjc-panels { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; }
.sjc-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: rgba(255, 255, 255, 0.08); border-radius: 12px; }
.sjc-panel-label { font-size: 12px; font-weight: 700; color: var(--sjc-accent); }
.sjc-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 64px; }
.sjc-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 30px; }
.sjc-bar-n { font-size: 11px; font-weight: 700; }
.sjc-bar-fill { width: 14px; border-radius: 4px 4px 2px 2px; background: rgba(255, 255, 255, 0.42); }
.sjc-bar-fill.is-zero { background: rgba(255, 255, 255, 0.18); }
.sjc-bar-han { font-family: 'Noto Serif KR', serif; font-size: 12px; font-weight: 700; color: var(--sjc-soft); }
.sjc-bar.is-dominant .sjc-bar-n,
.sjc-bar.is-dominant .sjc-bar-han { color: var(--sjc-accent); }
.sjc-bar.is-dominant .sjc-bar-fill { background: var(--sjc-accent); }
.sjc-stem-row { display: flex; align-items: center; gap: 10px; }
.sjc-stem { flex: none; font-family: 'Noto Serif KR', serif; font-size: 42px; font-weight: 900; line-height: 1; }
.sjc-stem-desc { font-size: 13px; line-height: 1.45; color: var(--sjc-soft); }
.sjc-kw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sjc-kw-label { font-size: 12px; font-weight: 700; color: var(--sjc-accent); }
.sjc-kw-chip { font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, 0.12); padding: 4px 10px; border-radius: 999px; }
.sjc-kw-hidden { font-size: 13px; color: var(--sjc-soft); }
.sjc-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
}
.sjc-foot-partner { color: var(--sjc-soft); }
.sjc-foot-partner b { color: #FFFFFF; }
.sjc-foot-site { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.sjc-foot-logo { width: 20px; height: 20px; border-radius: 5px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }

/* 오행별 카드 팔레트 */
.sjc.wood,  .sj-partner.wood  { --sjc-bg: #17241A; --sjc-accent: #A8D484; --sjc-soft: #C9DDBB; --sjp-bg: #17241A; --sjp-accent: #A8D484; --sjp-soft: #C9DDBB; }
.sjc.fire,  .sj-partner.fire  { --sjc-bg: #1C1714; --sjc-accent: #F0955A; --sjc-soft: #E8D5C6; --sjp-bg: #1C1714; --sjp-accent: #F0955A; --sjp-soft: #E8D5C6; }
.sjc.earth, .sj-partner.earth { --sjc-bg: #241C12; --sjc-accent: #E3B76A; --sjc-soft: #E3D3B8; --sjp-bg: #241C12; --sjp-accent: #E3B76A; --sjp-soft: #E3D3B8; }
.sjc.metal, .sj-partner.metal { --sjc-bg: #1A1D22; --sjc-accent: #C9D1DC; --sjc-soft: #D3D8DF; --sjp-bg: #1A1D22; --sjp-accent: #C9D1DC; --sjp-soft: #D3D8DF; }
.sjc.water, .sj-partner.water { --sjc-bg: #0F1B2A; --sjc-accent: #8EC0EA; --sjc-soft: #C6D9EC; --sjp-bg: #0F1B2A; --sjp-accent: #8EC0EA; --sjp-soft: #C6D9EC; }

/* 좁은 칸 버튼은 한 줄 유지 */
.sj-share .sj-btn, .sj-bottom-btns .sj-btn { font-size: 13px; padding: 0 6px; white-space: nowrap; }

/* =====================================================================
 * v5 · 공유 받은 사람 화면 + 결과 맨 위 '친구와 나의 사이'
 * ===================================================================== */
.sj-root--paper { background: #F7F3EC; }
.sj-shared-head { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.sj-shared-kicker { font-size: 13px; font-weight: 700; color: #B03A2E; }
.sj-shared-title { margin: 0; font-size: 24px; line-height: 1.38; font-weight: 700; letter-spacing: -0.6px; }

.sj-locked {
  background: #FFFFFF; border: 1px solid #E8E0D2; border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.sj-locked-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sj-locked-title { font-size: 15px; font-weight: 700; }
.sj-locked-badge { font-size: 12px; font-weight: 700; color: #8A5A00; background: #FFF1C7; padding: 4px 10px; border-radius: 999px; }
.sj-keyword--blur { filter: blur(4px); user-select: none; color: #1D4ED8; }
.sj-locked-note { font-size: 12px; line-height: 1.6; color: #5A4E40; }

.sj-btn--try {
  min-height: 64px; border: 0; border-radius: 14px; background: #B03A2E; color: #FFFFFF;
  font-size: 17px; flex-direction: column; gap: 2px;
}
.sj-btn-sub { font-size: 12px; font-weight: 600; color: #F6D9D4; }

.sj-card--paper { border-color: #E8E0D2; }
.sj-strip-title { font-size: 14px; font-weight: 700; }
.sj-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sj-strip-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sj-strip-tile {
  width: 52px; height: 52px; padding: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif KR', serif; font-size: 22px; font-weight: 900; color: var(--sjp-accent);
}
.sj-strip-name { font-size: 11px; line-height: 1.35; text-align: center; color: #3A3027; }
.sj-disclaimer--paper { background: #FBF8F3; border-color: #E8E0D2; color: #5A4E40; }

/* 입력 화면 위 한 줄 */
.sj-friend-banner {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #FFF8EC; border: 1px solid #E9C46A; border-radius: 12px;
  font-size: 13px; line-height: 1.5; color: #3A3027;
}
.sj-friend-banner-tile {
  flex: none; width: 32px; height: 32px; padding: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif KR', serif; font-size: 16px; font-weight: 900; color: var(--sjp-accent);
}

/* 결과 화면 맨 위 '친구와 나의 사이' */
.sj-friend {
  background: #FFFFFF; border: 2px solid #14213A; border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.sj-friend-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sj-friend-kicker { font-size: 13px; font-weight: 700; color: #3B475C; }
.sj-friend-tag { font-size: 12px; font-weight: 700; color: #14213A; background: #FFD66B; padding: 4px 10px; border-radius: 999px; }
.sj-friend-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.sj-friend-who { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.sj-friend-tile {
  width: 56px; height: 56px; padding: 0; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif KR', serif; font-size: 26px; font-weight: 900; color: var(--sjp-accent);
}
.sj-friend-name { font-size: 13px; font-weight: 700; color: #14213A; }
.sj-friend-char { font-size: 12px; color: #5A6578; }
.sj-friend-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sj-friend-arrow-mark { font-size: 22px; font-weight: 700; color: #14213A; line-height: 1; }
.sj-friend-arrow-label { font-size: 11px; font-weight: 700; color: #5A6578; }
.sj-friend-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.4; text-align: center; }
.sj-friend-line { margin: 0; font-size: 14px; line-height: 1.7; color: #3B475C; text-align: center; }
.sj-btn--friend { background: #14213A; border-color: #14213A; color: #FFFFFF; min-height: 48px; }
@media (min-width: 768px) { .sj-btn--friend { align-self: center; min-width: 320px; } .sj-btn--try { align-self: center; width: 100%; max-width: 432px; } }

/* v6 · 나와 닮은 투자 스타일 */
.sj-style { background: #FFFFFF; border: 1px solid var(--sj-line, #E3E7EE); border-left: 5px solid #5B6B86; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sj-style.wood { border-left-color: #3E8E5A; } .sj-style.fire { border-left-color: #D9573B; } .sj-style.earth { border-left-color: #C08A2E; }
.sj-style.metal { border-left-color: #5B6B86; } .sj-style.water { border-left-color: #2F6FB5; }
.sj-style-head { display: flex; align-items: center; gap: 12px; }
.sj-style-tile { flex: none; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif KR', serif; font-size: 22px; font-weight: 900; padding: 0; color: var(--sjp-accent); }
.sj-style-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sj-style-label { font-size: 12px; font-weight: 700; color: var(--sj-muted, #6B7689); }
.sj-style-name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: var(--sj-text, #14213A); }
.sj-style-text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--sj-text-2, #3B475C); }
.sj-style-all { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #F7F8FB; border-radius: 12px; }
.sj-style-all-label { font-size: 12px; font-weight: 700; color: var(--sj-muted, #6B7689); }
.sj-style-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sj-style-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: #3B475C; background: #FFFFFF; border: 1px solid #D5DBE5; padding: 5px 10px; border-radius: 999px; }
.sj-style-pill b { font-family: 'Noto Serif KR', serif; font-weight: 900; }
.sj-style-pill.is-me { background: #14213A; border-color: #14213A; color: #FFFFFF; font-weight: 700; }
.sj-style-note { font-size: 12px; line-height: 1.6; color: var(--sj-muted, #6B7689); }

/* 카드 이미지 '길게 눌러 저장' 창 (앱 안 브라우저) */
.sj-imgsheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 16, 28, 0.78); }
.sj-imgsheet-box { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: #FFFFFF; text-align: center; }
.sj-imgsheet-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--sj-text); }
.sj-imgsheet-sub { margin: 0; font-size: 13px; line-height: 1.55; color: var(--sj-text-3); }
.sj-imgsheet-img { display: block; width: 100%; height: auto; border-radius: 12px; -webkit-touch-callout: default; user-select: auto; }
.sj-imgsheet-close { width: 100%; }
.sj-imgsheet-ext { font-size: 12px; color: var(--sj-text-3); text-decoration: underline; padding: 6px 0; }