/* INSIDE PLAY for You — 디자인 시스템
   🔴 정본: Drive 09_시스템/dev_연동/forYou_디자인정본_V3_2026-07-26.md (0~16장 + 17장 본부 편입).
      개발 임의변경 금지 — 색·글꼴·규격을 바꾸려면 정본이 먼저 바뀌어야 한다.
   기준 폭 390px · 최소 점검 320px · 가로 스크롤 0 · 본문/선택지 16px 미만 금지. */
:root {
  /* ══ 디자인 정본 V3 (본부 2026-07-26 · 0~16장 코덱스 + 17장 본부 편입 · 동급 효력) ══
     🔴 개발 임의변경 금지. 한 줄 정의: 따뜻한 아이보리 위에서 **실제 카드와 같은 네이비**가
        행동의 중심을 잡고, 번트 오렌지는 **현재 단계와 선택만** 알려준다.
     🔴 역할이 다르다 — 네이비=지금 눌러야 하는 핵심 행동 · 오렌지=현재 위치·선택·진행.
        같은 요소에서 경쟁시키지 않는다(절대잠금 7).
     🔴 구 토큰(--blue/--light/--navy/--orange/--ink…)은 **V3 값으로 다시 묶어** 남은 사용처가
        저절로 팔레트 안으로 들어오게 한다(17-3 구색 잔재 일소). 새 포인트색은 추가하지 않는다. */

  /* 2장 팔레트 */
  --v-outer:      #E8DED1;   /* 페이지 바깥·화면 구분 */
  --v-bg1:        #FBF7EF;   /* 화면 그라데이션 시작 */
  --v-bg2:        #F6ECDE;   /* 화면 그라데이션 끝 */
  --v-navy:       #102038;   /* 🔴 주요 CTA — 실물 카드 뒷면 네이비와 같은 색 */
  --v-navy-h:     #0C192D;   /* hover */
  --v-navy-a:     #081323;   /* active */
  --v-ctatext:    #FFF9F0;   /* 네이비 버튼 위 글자 */
  --v-track:      #E5D9CA;   /* 진행바 트랙 */

  /* 글꼴 — 3장. 🔴 명조 전폐(Georgia·나눔명조·Noto Serif KR·system serif 금지).
     --serif 는 호출부가 많아 토큰만 산세리프로 되묶는다(혼용 자체가 금지 사항). */
  --serif: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* 기존 이름 유지 · 값만 V3 로 — 호출부를 건드리지 않고 화면 전체가 한 번에 넘어간다. */
  --d-ink: #20272A;      /* 제목(차콜). 🔴 CTA 배경은 --v-navy 다 — 4.4 「CTA에 #232B34 금지」 */
  --d-body: #414A4D;     /* 본문 */
  --d-sub: #756E66;      /* 보조 정보 */
  --d-hint: #756E66;     /* 힌트·라벨 */
  --d-faint: #9C948A;    /* 워드마크·크레딧 */
  --d-line: #DED1C0;     /* 기본 선 */
  --d-chip: #FFFCF7;     /* 칩·말풍선 */
  --d-orange: #B95F34;   /* 🔴 선택·진행 오렌지 */
  --d-orangeSoft: #F0DED0;
  --d-orangeLine: #D9AF82;
  --d-orangeDash: #D9AF82;
  --d-green: #1E7B45;
  --d-shadow: 0 1px 3px rgba(84,58,34,.07);

  --w-card: #FFFCF7;     /* 크림 화이트 — 선택지·결과 문장·보조 버튼 */
  --w-line: #DED1C0;
  --w-hint: #756E66;
  --w-faint: #9C948A;
  --w-cardline: #D9AF82;
  --w-chip: #F0E6D8;
  --w-optbg: #FFFCF7;

  /* 구 토큰 되묶기 — 17-3 교정표(파랑 제목→차콜 · 연파랑 박스→크림) 를 값으로 흡수한다. */
  --navy: #102038;
  --blue: #20272A;   /* 구 파란 제목·배지 → 차콜 */
  --light: #FFFCF7;  /* 구 연파랑 배경 박스 → 크림 */
  --orange: #B95F34;
  --gold: #D9AF82;
  --ink: #20272A;
  --mut: #756E66;
  --line: #DED1C0;
  --bg: #F6ECDE;
  --white: #fff;
  /* 🔴 17-1 콘텐츠 색 예외 — 8캐릭터·듀오·카드 앞면은 일러스트 세계관이다.
     UI 팔레트로 다시 칠하지 않는다. 아래 8색은 그래서 그대로 둔다. */
  --L: #E2574C; --A: #E8913A; --B: #E4B93C; --E: #6FC7A6;
  --K: #4CAF6E; --F: #5B8FDE; --V: #8E6FC7; --H: #E88BB6;
  /* 패턴색 */
  --ok: #1E7B45; --okbg: #EFF5EF; --warn: #A8432F; --warnbg: #F8ECE6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  /* 🔴 코드정본 V2 — 바깥 페이지 배경 = 화면 톤(아이보리). 회색 프레임 금지(무드 유지). */
  background: linear-gradient(var(--v-bg1,#FBF7EF), var(--v-bg2,#F6ECDE)); background-attachment: fixed;
  color: var(--ink); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* 중앙 카드 레이아웃 — 데스크톱 전용 레이아웃 없음, 폰 그대로 중앙 정렬.
   #app 배경 투명 → 바깥 아이보리 톤이 그대로 보이게(회색/흰 프레임 제거). 각 화면이 자기 배경을 칠함. */
/* 🔴 문항 전환(q-in/q-out)이 translateX 로 좌우 슬라이드 → 뷰포트 밖으로 삐져나가 모바일에서
   페이지가 흔들렸다(대표: 답 누르고 넘어갈 때 계속 흔들림). overflow-x:clip 로 가로 넘침만
   잘라 흔들림을 없앤다(clip 은 스크롤 컨테이너를 안 만들어 세로 스크롤·position:sticky 안 깨짐). */
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: transparent; overflow-x: clip; }
/* 🔴 V3 7장 — 화면 배경. 우상단 밝은 점이 아이보리에 깊이를 준다(장식 아님·구분용). */
.screen { padding: 22px 20px 24px; min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 92% 5%, rgba(255,255,255,.9), transparent 28%),
    linear-gradient(180deg, var(--v-bg1,#FBF7EF), var(--v-bg2,#F6ECDE)); }

/* 타이포 */
h1 { font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1.35; }
h2 { font-size: 17px; font-weight: 800; color: var(--navy); }
h3 { font-size: 14px; font-weight: 800; color: var(--ink); }
.mut { color: var(--mut); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; }
.center { text-align: center; }

/* 브랜드 헤더 */
/* 🔴 §7 — 워드마크가 홈 버튼(정본 v2.1.1). 하단 탭바는 만들지 않는다.
   button 이지만 생김새는 그대로 두고(브랜드), 터치 타깃만 44px 이상 확보한다. */
.brand { display: block; width: 100%; text-align: center; padding: 10px 0 6px;
  min-height: 44px; background: none; border: 0; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent; }
.brand:active { opacity: .6; }
.brand .name { font-size: 12px; letter-spacing: 2px; font-weight: 800; color: var(--navy); }
.brand .by { font-size: 8.5px; letter-spacing: 1.6px; color: #B9C2D0; font-weight: 700; margin-top: 2px; }

/* 버튼 */
/* 정본 규칙1·2 — 채움 버튼(CTA)은 화면당 1개 · ink 배경 · radius 13 · 13px/500. 주황 채움 금지. */
/* 🔴 V3 4장 — 주요 CTA. 다음 단계로 보내는 핵심 행동에만 네이비 채움을 쓴다.
   높이·글자 크기를 고정해 문구 길이에 따라 버튼이 들쭉날쭉해지지 않게 한다(4.4). */
.btn {
  display: block; width: 100%; border: 0; cursor: pointer;
  border-radius: 14px; padding: 16px; font-size: 17px; font-weight: 800; line-height: 1.2;
  font-family: inherit; min-height: 54px; transition: background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-navy {
  background: var(--v-navy, #102038); color: var(--v-ctatext, #FFF9F0);
  box-shadow: 0 10px 24px rgba(16,32,56,.22);
}
.btn-primary:hover, .btn-navy:hover { background: var(--v-navy-h, #0C192D); }
.btn-primary:active, .btn-navy:active { background: var(--v-navy-a, #081323); transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(185,95,52,.35); outline-offset: 2px; }
/* 🔴 10장 보조 버튼 — 주요 CTA 와 구별한다. 네이비로 채우지 않는다(한 화면에 네이비 채움은 하나). */
.btn-ghost {
  background: rgba(255,252,247,.8); color: var(--v-navy, #102038);
  border: 1px solid var(--d-line, #DED1C0); border-radius: 14px;
  min-height: 50px; font-size: 16px; font-weight: 700; box-shadow: none;
}
.btn:disabled { background: #C9C6C0; color: #F7F4EE; box-shadow: none; cursor: not-allowed; opacity: 1; }
.btn + .btn { margin-top: 8px; }
.spacer { flex: 1; }

/* 필드 */
/* 🔴 16px 미만 금지 — iOS Safari·카톡 인앱은 **16px 미만 입력창에 포커스하면 자동 확대**하고
   포커스를 잃어도 **원래 배율로 안 돌아온다**. 그래서 이름을 치고 나면 화면이 확대된 채
   설문이 시작돼 핀치로 되돌려야 했다(대표 실기기 3차 §3). 15px → 16px.
   ⚠️ maximum-scale=1 로 확대를 막는 우회는 쓰지 않는다 — 저시력 사용자의 확대까지 막는다. */
.field { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
  font-size: 16px; font-family: inherit; color: var(--ink); background: #fff; margin-top: 8px; }
.field:focus { outline: none; border-color: var(--blue); }
label.lbl { display: block; font-size: 13px; font-weight: 700; margin-top: 16px; }
label.lbl.me { color: var(--navy); }
label.lbl.yo { color: var(--orange); }

/* 관계 선택 칩 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { border: 1.5px solid var(--line); border-radius: 16px; padding: 8px 14px; font-size: 13px;
  color: var(--mut); background: #fff; cursor: pointer; min-height: 40px; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; }
/* 부제 있는 장면 칩 — 상황 설명을 칩 서브텍스트로(§12-c 32, '주제' 단어 노출 금지) */
.chips { align-items: flex-start; }
.chip-sub { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.chip-sub .chip-t { font-size: 13px; }
.chip-sub .chip-s { font-size: 11px; color: var(--mut); line-height: 1.35; font-weight: 400; white-space: normal; }
.chip-sub.on .chip-s { color: rgba(255,255,255,.82); }

/* ══ 시작 화면 A안 (코덱스 시안 · 본부 A안 채택 2026-07-29) — 밀도 개선. V3 토큰만 사용. ══ */
/* 관계 제목 + 「관계 다시 고르기」 한 행 — 상단 층수 감소. */
.setup-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.setup-hd h1 { margin: 0; }
.setup-hd .setup-back { margin-top: 0; padding: 0; font-size: 13px; }
/* 라벨 위계 분리 — 이름 라벨은 굵게, 도움말은 메타 크기·색. 단어 단위로만 줄바꿈. */
.field-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; word-break: keep-all; }
/* 두 이름 입력을 한 연한 카드로 — '한 번의 입력 행동'. */
.name-card { margin-top: 16px; padding: 14px; background: var(--w-card, #FFFCF7);
  border: 1px solid var(--d-line, #DED1C0); border-radius: 14px; }
.name-card .lbl:first-child { margin-top: 0; }

/* S1 관계 그리드 (2열) — 회신 4.5b */
.relgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; }
.relchip { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 8px; font-size: 15px;
  font-weight: 600; color: var(--navy); background: #fff; cursor: pointer; text-align: center; font-family: inherit;
  white-space: nowrap; }   /* 🔴 「함께하는 파트너」 등 긴 라벨 실기기 폰트에서 2줄 방지(320px 여유 확인). 라벨 축약 대신 한 줄 강제. */
.relchip:hover { border-color: var(--blue); background: var(--light); }
.relchip.off { border-style: dashed; color: #C3C9CF; font-weight: 500; font-size: 12.5px;
  cursor: default; grid-column: 1 / -1; }

/* S3 문항 상단 메타 (번호 · 장면) */
.qmeta { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--mut); margin-bottom: 14px; }
.qmeta .mut { color: var(--w-hint, #756E66); }

/* 랜딩 S1 */
.hero { padding: 24px 4px 10px; text-align: center; }
.hero .big { font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1.35; }
.hero .lede { margin-top: 12px; font-size: 14px; color: var(--mut); }
.charstrip { display: flex; justify-content: center; gap: 5px; margin: 18px 0; }
.charstrip .c { width: 30px; height: 40px; border-radius: 8px; display: flex; align-items: flex-end;
  justify-content: center; color: #fff; font-weight: 800; font-size: 12px; padding-bottom: 4px; }
.how { margin-top: 30px; }
.how .step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.how .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--light);
  color: var(--navy); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.bookline { margin-top: 20px; padding: 14px; background: var(--light); border-radius: 12px;
  font-size: 13px; color: var(--navy); text-align: center; }

/* 진행바 */
/* 정본 §2 — 진행바 3px · 배경 #EEF0F3 · fill 1부 ink / 2부 주황. */
.prog { height: 3px; background: #EEF0F3; border-radius: 3px; margin: 4px 0 16px; }
.prog > i { display: block; height: 3px; background: var(--d-ink, #20272A); border-radius: 3px; transition: width .2s; }

/* 문항 */
/* V2-B 세리프 스템 — 15px/1.65 · ink 500 · 주황 스템 금지(2부도 ink). */
.q-face { font-family: var(--serif); font-size: 15px; font-weight: 500; line-height: 1.65; margin-bottom: 8px; word-break: keep-all; }
.q-face.me, .q-face.yo { color: var(--d-ink, #20272A); }
.q-text { font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--ink); margin-bottom: 4px; min-height: 54px; }
.opts { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
/* 정본 규칙3 — 선택지 = 흰 배경 + line 0.5px + radius 12. 선택 = 보더 1.5px ink(채움 금지). */
.opt { border: .5px solid var(--w-line, #DED1C0); border-radius: 12px; padding: 15px 16px; font-size: 15px;
  background: var(--w-optbg, #FFFCF7); cursor: pointer; text-align: left; min-height: 54px; font-family: inherit; color: var(--d-body, #414A4D); font-weight: 400; }
.opt:active { transform: translateY(1px); }
.opt.sel-me, .opt.sel-yo { background: #fff; color: var(--d-ink, #20272A); border: 1.5px solid var(--d-ink, #20272A); font-weight: 500; }

/* 카드 공개 / 카드 비주얼 */
.reveal { text-align: center; justify-content: center; }
/* V3 11장 — 카드 설명 17px/600. 리드도 본문 규격 아래로 내리지 않는다. */
.reveal .lead { font-size: 17px; font-weight: 600; color: var(--d-sub, #756E66); }
.reveal .small.mut.center { font-size: 17px; font-weight: 600; line-height: 1.72;
  color: var(--d-body, #414A4D); word-break: keep-all; margin-top: 10px; }
/* v5 §8 — S4 공개 = 실물 카드 이미지(문패·키워드 카드에 포함). */
/* 🔴 V3 8장 — 단독 카드 공개 약 158px 폭. 뒤에 **밝은 웜톤 헤일로**를 허용하되
   카드보다 먼저 보일 정도로 강하면 안 된다(네온·글로우·콘페티 금지). */
.bigcard { margin: 18px auto; max-width: 158px; position: relative; }
.bigcard::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 240px; height: 240px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(217,175,130,.30), rgba(217,175,130,0) 68%); }
.bigcard > * { position: relative; z-index: 1; }
.bigcard .art { width: 158px; margin: 0 auto; }
.bigcard .art img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }

/* ── 결과 (§회신006) ─────────────────────────────────────────────── */
/* ① 헤더 */
.rhead { font-size: 20px; font-weight: 800; color: var(--navy); line-height: 1.35; text-align: center; margin: 4px 0 14px; }
.rhead .prov { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--light); color: var(--blue); font-size: 11px; font-weight: 700; vertical-align: middle; }

/* ② 카드 2장 — 자기인식 카드만 (격차 카드 4장은 안 보여준다) */
.rcards { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rcard { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 128px; }
.rcard .who { font-size: 11px; font-weight: 800; text-align: center; }
.rcard.me .who { color: var(--navy); }
.rcard.yo .who { color: var(--orange); }
/* v5 §8 — 폴백 미니 카드 = 실물 카드 이미지 그대로(세로형). */
.minicard { width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.minicard img { display: block; width: 100%; height: auto; }

.rcards .x { font-size: 20px; color: var(--mut); font-weight: 800; }

/* ③ 패턴 배지 */
/* 🔴 17-3 — 조합 배지는 크림 + 보조선 + 차콜 한 벌로 통일. 패턴별 색 분기(녹/적/청)를 없앤다.
   「주의」만 오렌지 글자로 톤을 준다(색이 아니라 글자색으로). */
.rbadge { display: block; width: fit-content; margin: 12px auto 0; padding: 5px 14px; border-radius: 999px;
  font-weight: 800; font-size: 13px; background: var(--w-card, #FFFCF7);
  border: 1px solid var(--d-line, #DED1C0); color: var(--d-ink, #20272A); }
.rbadge.caution { color: var(--d-orange, #B95F34); }
.rbadge.mirror { color: var(--d-ink, #20272A); }

/* ④ 헤드라인 */
.rheadline { margin-top: 14px; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink); text-align: center; }

/* ⑤~⑨ 본문 섹션 */
.rsec { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.rsec p { font-size: 14px; line-height: 1.65; }
.rlabel { font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.rsec.tension .rlabel { color: var(--warn); }
.rsec.note { background: var(--light); border: none; border-radius: 14px; padding: 14px; }

/* ⑤ 국면 3개 */
.moment { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.moment:last-child { border-bottom: none; }
.moment .mt { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.moment .mx { font-size: 13.5px; line-height: 1.6; color: var(--mut); margin-top: 3px; }

/* 「우리 조합 카드」 (겉/속 2층 · 본부 2026-07-22) — 결과 hero */
.rcombocard { margin-top: 22px; }
.ccard { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: 0 4px 18px rgba(11,61,145,.06); }
.ccard > summary { list-style: none; cursor: pointer; display: block; padding: 0 0 16px; }
.ccard > summary::-webkit-details-marker { display: none; }
/* 🔴 듀오는 훅 **아래**에 온다(대표 2026-07-27) — 카드 중간의 전면 밴드.
   위쪽 글과 붙지 않게 여백을 준다. 카드 상단 모서리는 .ccard 의 overflow 가 잡는다. */
.ccard-duo { display: block; width: 100%; margin-top: 14px; background: var(--w-chip, #F0E6D8); }
/* 🔴 17-3 — 연파랑 조합 유형 배지 폐기. 크림 + 보조선 + 차콜. */
.ccard-type { display: inline-flex; margin: 14px 0 0 18px; padding: 4px 12px; border-radius: 999px;
  background: var(--w-card, #FFFCF7); border: 1px solid var(--d-line, #DED1C0); color: var(--d-ink, #20272A); font-size: 13px; font-weight: 800; }
.ccard-name { margin: 8px 18px 0; font-size: 20px; font-weight: 800; color: var(--d-ink, #20272A); letter-spacing: -.025em; }
.ccard-hook { margin: 8px 18px 0; font-size: 16.5px; line-height: 1.6; color: var(--d-body, #414A4D); word-break: keep-all; }
.ccard-tip { margin: 12px 18px 0; padding-top: 12px; border-top: 1px solid var(--d-line, #DED1C0); font-size: 16.5px; line-height: 1.6; color: var(--d-ink, #20272A); word-break: keep-all; }
.ccard-tip b { color: var(--navy); }
/* 「계속 보기」 — 텍스트 링크 → 버튼 승격(병합 화면 문법 통일). */
.ccard-more { display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 16px 18px 6px; padding: 14px 16px; text-align: center;
  font-size: 14px; font-weight: 800; color: var(--orange); border: 1.5px solid var(--orange);
  border-radius: 14px; background: linear-gradient(180deg, #FFF6EF, #FFE7D6);
  box-shadow: 0 4px 14px rgba(255,140,66,.24); cursor: pointer; transition: transform .12s; }
.ccard-more:active { transform: scale(.98); }
.ccard-more .chev { display: inline-block; animation: ccbounce 1.5s ease-in-out infinite; }
@keyframes ccbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .ccard-more .chev { animation: none; } }
.ccard[open] .ccard-more { color: var(--mut); border-color: var(--line); background: #fff; box-shadow: none; }
.ccard[open] .ccard-more .chev { animation: none; transform: rotate(180deg); }
.ccard-body { padding: 2px 18px 18px; }
.ccard-sec { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.ccard-sec:first-child { border-top: none; }
.ccard-lbl { font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.ccard-sec p { font-size: 13.5px; line-height: 1.65; color: var(--ink); margin: 4px 0 0; }
.ccard-sec p b { color: var(--navy); margin-right: 4px; }
/* v3 — 자세히 속으로 옮긴 섹션들 */
.cc-twoline { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.ccard-body .rheadline { text-align: left; margin-top: 4px; font-size: 15px; }
.ccard-body .rsec { margin-top: 16px; }
.ccard-body .disclaimer { margin-top: 16px; }
/* v3 5) 3상태 서사 — 상태 배너 + 카드 라벨 */
/* 🔴 17-3 — 민트 배너·연파랑 배너 폐기. 둘 다 크림 박스 + 보조선, 강조어만 오렌지. */
.rstate { margin: 12px auto 0; padding: 12px 14px; border-radius: 14px; font-size: 16.5px; font-weight: 600;
  line-height: 1.55; text-align: center; word-break: keep-all;
  background: var(--w-card, #FFFCF7); border: 1px solid var(--d-line, #DED1C0); color: var(--d-ink, #20272A); }
.rstate b { font-weight: 800; color: var(--d-orange, #B95F34); }
.rstate.a, .rstate.c { background: var(--w-card, #FFFCF7); color: var(--d-ink, #20272A); }
.ccard-status { margin: 12px auto 2px; width: fit-content; padding: 4px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 800; background: var(--w-card, #FFFCF7);
  border: 1px solid var(--d-line, #DED1C0); color: var(--d-ink, #20272A); }

/* ⑩ 오늘의 한 걸음 */
.rstep { margin-top: 18px; padding: 14px; border: 1px solid var(--d-line, #DED1C0); border-left: 3px solid var(--d-orange, #B95F34); border-radius: 0 14px 14px 0; background: var(--w-card, #FFFCF7); }
.rstep b { font-size: 12px; font-weight: 800; color: var(--orange); }
.rstep p { font-size: 14px; line-height: 1.6; margin-top: 5px; }

/* ⑪ 격차 — 카드 중심 재설계 (회신024) */
/* 격차(gap) — 조합 카드 「계속 보기」 안에 flat 삽입. 상단 구분선으로 한 섹션처럼. */
.gapflat { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.gapflat > .gline { margin: 0 0 12px; }
.gapflat > .ghcards { margin-bottom: 4px; }
.gapv2 { margin-top: 22px; border: 1.5px solid var(--line); border-radius: 18px; padding: 16px; background: var(--w-card, #FFFCF7); }
.ghero { border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 16px; background: var(--w-card, #FFFCF7); }
.ghcards { display: flex; align-items: center; justify-content: center; gap: 10px; }
.hcard { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 112px; }
.hcard .hwho { font-size: 11px; font-weight: 800; text-align: center; }
.hcard.me .hwho { color: var(--navy); }
.hcard.yo .hwho { color: var(--orange); }
/* v5 §8 — 격차 히어로 = 실물 카드 이미지(세로형). */
.hcard .hart { width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.hcard .hart img { display: block; width: 100%; height: auto; }
.hcard .hph { font-size: 11px; color: var(--mut); text-align: center; line-height: 1.35; }
.ghcards .gx { font-size: 20px; color: var(--mut); font-weight: 800; }
.gline { margin-top: 16px; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink); text-align: center; }
.ginvite { margin-top: 12px; padding: 11px 14px; background: var(--light); border-radius: 12px;
  font-size: 14px; font-weight: 700; color: var(--navy); text-align: center; }
/* 자세히▾ (축별 상세 — 접힘) */
details.gdetail { margin-top: 12px; }
details.gdetail > summary { cursor: pointer; list-style: none; text-align: center; padding: 10px 12px;
  font-size: 13px; font-weight: 800; color: var(--navy); border: 1.5px solid var(--line);
  border-radius: 12px; background: #fff; }
details.gdetail > summary::-webkit-details-marker { display: none; }
details.gdetail > summary::after { content: ' ▾'; }
details.gdetail[open] > summary::after { content: ' ▴'; }
.gaxes { list-style: none; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.gaxes li { font-size: 13px; padding: 6px 0; line-height: 1.5; }
.gaxes li.ok { color: var(--mut); }
.gaxes li.diff b { color: var(--navy); }
.gaxes li .s { font-size: 12.5px; color: var(--ink); margin-top: 2px; }
/* ② 내가 본 상대 (가볍게) */
.gmine { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.gline2 { font-size: 14px; line-height: 1.6; color: var(--ink); }
.gline2 .sub { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mut); }
/* ③ 맨 아래 */
.gclose { margin-top: 16px; font-size: 13px; color: var(--mut); line-height: 1.6; text-align: center; }
/* half — 격차 잠금 */
.gaplock { margin-top: 20px; padding: 16px; border: 1.5px solid var(--orange); border-radius: 16px;
  background: #FFF7F2; text-align: center; }
.gaplock .lk { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.gaplock .fine { font-size: 12px; color: var(--mut); margin-top: 8px; }

/* ⑫ 정답이 아니다 (L5) */
.disclaimer { margin-top: 22px; padding: 14px; border: 1px dashed var(--d-line, #DED1C0); border-radius: 14px; background: var(--w-card, #FFFCF7); }
.disclaimer p { font-size: 12px; color: var(--mut); line-height: 1.6; }
.disclaimer p + p { margin-top: 5px; }

/* ⑬ 보관 (90일 · 내게 보내기 · 삭제) */
.storage { margin-top: 18px; }
.storage .note { font-size: 12.5px; color: var(--mut); line-height: 1.6; }
.storage .row { display: flex; gap: 8px; margin-top: 10px; }
.storage .row .btn { flex: 1; margin-top: 0; }
.btn-slim { padding: 11px 12px; font-size: 13.5px; }

/* ⑭ 다른 사람과 해보기 */
.retention { margin-top: 20px; text-align: center; }
.retention p { font-size: 13px; color: var(--mut); margin-bottom: 8px; }

/* 도감 (8카드 모두 보기) */
.dex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.dex-cell { text-align: center; }
.dex-cell .m { width: 100%; aspect-ratio: 1; border-radius: 10px; display: flex; align-items: flex-end;
  justify-content: center; color: #fff; font-weight: 900; padding-bottom: 4px; overflow: hidden; }
.dex-cell .m img { width: 100%; height: 100%; object-fit: contain; }
.dex-cell .n { font-size: 10.5px; margin-top: 3px; }

/* 푸터 / 링크 */
.foot { margin-top: 26px; text-align: center; font-size: 11px; color: var(--mut); }
.foot a { color: var(--mut); }
.linkrow { margin-top: 14px; text-align: center; font-size: 12px; }
.linkrow a { color: var(--blue); text-decoration: none; }

/* 재접촉 옵트인 */
.optin { margin-top: 22px; padding: 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--w-card, #FFFCF7); }
.optin .optin-t { font-size: 14px; font-weight: 800; color: var(--navy); }
.optin-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink); padding: 5px 0; cursor: pointer; }
.optin-row input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--navy); }
.optin.done { border-color: var(--ok); background: var(--okbg); }
.optin.done .k { font-size: 13.5px; font-weight: 700; color: var(--ok); }

/* 캐릭터 아트 래퍼 (이미지/폴백 공통) */
/* v5 §8 — 카드 아트 래퍼(artHTML): 실물 카드 이미지. width는 인라인, 높이 원본 비율. */
.cardart { display: inline-block; line-height: 0; }
.cardart-img { display: block; width: 100%; height: auto; border-radius: 10px; }
.cardart-ph { align-items: center; justify-content: center; width: 100%; aspect-ratio: 697/1122;
  background: var(--c, var(--navy)); color: #fff; font-weight: 900; font-size: 28px; border-radius: 10px; }

/* 개인정보 처리방침 */
.legal { font-size: 13px; line-height: 1.7; }
.legal h2 { margin: 18px 0 6px; font-size: 15px; }
.legal ul { margin: 4px 0 4px 18px; }

/* 공유/복사 — 토스트 + 항상 보이는 링크 폴백 (요청_액션점검) */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; padding: 12px 18px;
  border-radius: 12px; opacity: 0; transition: opacity .25s, transform .25s; z-index: 100; max-width: 88%; text-align: center; }
.toast.on { opacity: .96; transform: translate(-50%, 0); }
/* 길게 눌러 저장 오버레이 — 공유 시트 미지원 인앱 폴백 */
.savesheet { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 130;
  display: flex; align-items: flex-start; justify-content: center; padding: 20px 14px 28px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
.savesheet-card { background: #fff; border-radius: 16px; padding: 16px 16px 18px; max-width: 420px; width: 100%;
  margin: auto; position: relative; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.savesheet-x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0; background: none;
  font-size: 18px; color: var(--mut); cursor: pointer; line-height: 1; }
.savesheet-t { font-size: 16px; font-weight: 800; color: var(--navy); text-align: center; margin: 4px 24px 12px; }
.savesheet-img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line);
  -webkit-touch-callout: default; /* 🔴 길게 눌러 '이미지 저장' 메뉴가 뜨게 (기본값 유지) */ }
.savesheet-hint { font-size: 13px; color: var(--mut); text-align: center; margin: 12px 4px 4px; line-height: 1.5; }
.savesheet-done { display: block; width: 100%; margin-top: 14px; }
.linkfb { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.linkfb .lfbox { background: #fff; border-radius: 18px; padding: 20px 18px; width: 100%; max-width: 360px; }
.linkfb .lfmsg { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 12px; text-align: center; }
/* 🔴 여기도 16px — 링크 패널은 열자마자 input.focus()+select() 를 부른다(복사 편의).
   13px 이면 그 순간 iOS 가 확대해 버린다. 링크가 길어 보이는 건 폭이 아니라 스크롤로 감당. */
.linkfb .lfurl { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font-size: 16px; color: var(--ink); background: var(--w-card, #FFFCF7); }
.linkfb .lfrow { display: flex; gap: 8px; margin-top: 12px; }
.linkfb .lfrow .btn { flex: 1; margin-top: 0; }

/* 결과 알림 토스트/배너 — 앱 디자인(흰 카드·부드러운 그림자·radius·좌측 원형 체크·2줄) */
.reveal-note { position: fixed; top: 14px; left: 50%; z-index: 130;
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 28px); max-width: 384px;
  background: #fff; border: 1px solid rgba(11,61,145,.06); border-radius: 16px;
  padding: 13px 15px; box-shadow: 0 12px 32px rgba(11,30,70,.16);
  transform: translate(-50%, -145%); opacity: 0;
  transition: transform .42s cubic-bezier(.2,.85,.25,1), opacity .3s; }
.reveal-note.on { transform: translate(-50%, 0); opacity: 1; }
/* 재열람 = 상단 고정 배너(안 사라짐) */
.reveal-note.sticky { top: 0; left: 0; right: 0; width: 100%; max-width: none;
  border-radius: 0 0 16px 16px; transform: translateY(-100%); padding-top: calc(13px + env(safe-area-inset-top)); }
.reveal-note.sticky.on { transform: translateY(0); }
body.reveal-banner-on #app { padding-top: 70px; }
.rn-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--navy);
  color: #fff; font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rn-tx { line-height: 1.34; min-width: 0; }
.rn-a { font-size: 14px; font-weight: 800; color: var(--navy); }
.rn-b { font-size: 12.5px; color: var(--mut); margin-top: 1px; }
/* 리빌 애니메이션 — 상대 답 도착 시 결과 화면 부드럽게 다시 그림 */
/* R9 — 2번째 완주자 릴레이 CTA (둘 다 완성 → 상대에게 알리기) */
.relaycta { margin: 18px 0 4px; padding: 14px; border-radius: 14px; text-align: center;
  background: var(--light); border: 1px solid rgba(11,61,145,.10); }
.relaycta-t { font-size: 14px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.relaycta .btn { margin-top: 0; }
/* 신규#3·#9 — half 상단 기다리는 중 상태 + 물어보기 CTA */
.rwait { margin: 12px 0 10px; padding: 11px 13px; border-radius: 12px; text-align: center;
  background: #FFF4EC; color: #B8501F; font-size: 13.5px; }
.rwait b { color: var(--navy); }
.rwait + .rtopinvite { margin-top: 0; }
.rtopinvite { width: 100%; }
/* 신규#7 — setup 뒤로가기 */
.linkback { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 6px 2px;
  background: none; border: none; color: var(--navy); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.linkback:active { opacity: .6; }
/* 신규#7 — 곧 열림(비활성) 관계 칩 */
.relchip.off[disabled] { cursor: default; }
/* 결과 저장(이미지/PDF) 버튼 행 */
/* 🔴 §4-b (대표 체험 1차) — 연파랑 배경 + 남색 채움 버튼 + 이모지 = 디자인 정본 밖이었다.
   크림 배경 + **보더 버튼**(채움 금지 — 화면당 채움 1개 규칙) + 이모지 제거. */
.saverow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--w-card, #FFFCF7); border: 0.5px solid var(--w-line, #DED1C0); }
.saverow-t { font-size: 13px; font-weight: 500; color: var(--d-ink, #20272A); margin-right: auto; }
.saverow .btn { margin-top: 0; flex: 0 0 auto; }
/* 저장 버튼 = 보더만. 주 CTA(ink 채움)와 무게가 겹치지 않게. */
.saverow .btn-navy {
  background: transparent; color: var(--d-body, #414A4D);
  border: 0.5px solid var(--w-line, #DED1C0); font-weight: 500; }
/* 🔴 캡처 중 상호작용 chrome(버튼)만 숨긴다 — 결과 내용은 그대로. */
.result.capturing .storage,
.result.capturing .retention,
.result.capturing .relaycta,
.result.capturing .relaytop,
.result.capturing .ro-banner,
.result.capturing .stg-warn,
.result.capturing .rtopinvite { display: none !important; }

/* ══ §25 초대 루프 (v2.4 · 2026-07-27) ══ */
/* 이음새③ — B 병합 첫 화면 최상단 「알려주기」 배너(제1 행동). 크림 + 오렌지 포인트(V3 6색). */
.relaytop { margin: 0 0 14px; padding: 14px; border-radius: 14px; text-align: center;
  background: var(--w-card, #FFFCF7); border: 1px solid var(--d-line, #DED1C0);
  border-left: 3px solid var(--d-orange, #B95F34); }
.relaytop-t { font-size: 15px; font-weight: 800; color: var(--d-ink, #20272A); margin-bottom: 10px; word-break: keep-all; }
.relaytop .btn { margin-top: 0; }
/* 이음새① — 보내기 미리보기(카톡 말풍선=OG 카드). "무엇을 보내는지" 눈으로 확인. */
.sendprev { margin: 12px 0 4px; }
.sendprev-lbl { font-size: 13px; font-weight: 700; color: var(--d-sub, #756E66); margin-bottom: 7px; }
.sendprev-og { display: block; width: 100%; max-width: 300px; margin: 0 auto; border-radius: 12px;
  border: 1px solid var(--d-line, #DED1C0); box-shadow: 0 4px 14px rgba(84,58,34,.08); }
/* §25 보관 주소 복구 화면 — 초대 오발송 안전망. */
.recover .rc-body { margin-top: 26px; text-align: center; }
.recover .rc-msg { font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--d-ink, #20272A); word-break: keep-all; }
.recover .rc-msg b { color: var(--d-orange, #B95F34); font-weight: 800; }
/* 🔴 P0-2 열람 전용 안내 배너 · P1 자동보관 실패 안내 */
.ro-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
  background: var(--w-card, #FFFCF7); color: var(--d-ink, #20272A); border: 1px solid var(--d-line, #DED1C0); }
.stg-warn { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.55;
  background: #FFF6EF; color: var(--orange); border: 1.5px solid var(--orange); }
.stg-warn b { font-weight: 800; }
.stg-warn .btn { display: block; width: 100%; margin-top: 10px; }
.screen.result.revealed { animation: revealfade .6s ease; }
@keyframes revealfade { from { opacity: .4; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* 이름 입력 바텀시트 — window.prompt(시스템 창) 대체. 아래에서 스르륵. */
.sheetwrap { position: fixed; inset: 0; z-index: 140; background: rgba(11,20,45,0);
  display: flex; align-items: flex-end; justify-content: center; transition: background .28s; }
.sheetwrap.on { background: rgba(11,20,45,.42); }
.sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 22px 22px 0 0;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 34px rgba(11,30,70,.2);
  transform: translateY(100%); transition: transform .34s cubic-bezier(.2,.85,.25,1); }
.sheetwrap.on .sheet { transform: translateY(0); }
.sheet-grab { width: 40px; height: 4px; border-radius: 3px; background: rgba(11,30,70,.16); margin: 6px auto 16px; }
.sheet-t { font-size: 18px; font-weight: 800; color: var(--navy); text-align: center; }
.sheet-sub { font-size: 13px; color: var(--mut); text-align: center; margin-top: 6px; }
.sheet-in { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-size: 16px; color: var(--ink); background: #fff; text-align: center; margin: 18px 0 12px; }
.sheet-in:focus { outline: none; border-color: var(--navy); }
.sheet .sheet-ok { width: 100%; margin-top: 0; }
.sheet-skip { display: block; width: 100%; margin-top: 10px; padding: 9px; background: none; border: none;
  color: var(--mut); font-size: 13.5px; cursor: pointer; }
.sheet-skip:active { opacity: .6; }

/* §7·§8·§9 팝업 — 공통 바텀시트 요소(openSheet). .locked = 버튼으로만 닫힘(배경·스와이프·X 무효). */
.sheet-label { font-size: 12px; font-weight: 800; color: var(--d-orange, #B95F34); letter-spacing: .3px; margin-bottom: 6px; }
.sheet-title { font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--d-ink, #20272A); margin-bottom: 12px; word-break: keep-all; }
.sheet-body { margin-bottom: 14px; }
.sheet-p { font-size: 14.5px; line-height: 1.6; color: var(--d-sub, #414A4D); word-break: keep-all; }
.sheet-p b { color: var(--d-ink, #20272A); font-weight: 800; }
.sheet-note { font-size: 12.5px; color: var(--w-hint, #8A8179); margin-top: 8px; word-break: keep-all; }
.ipsheet .sheet-btn + .sheet-btn { margin-top: 8px; }

/* §27-5 보내기 화면 — 상태줄 + 혼자 보기 격하 링크 */
.send27 .send-status { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px;
  background: var(--w-soft, #F0DED0); border-radius: 12px; padding: 10px 12px; margin: 4px 0 14px;
  font-size: 13px; font-weight: 700; color: var(--d-sub, #756E66); word-break: keep-all; }
.send27 .send-status b { color: var(--d-ink, #20272A); font-weight: 800; }
.send27 .send-lock { color: var(--d-orange, #B95F34); font-weight: 800; }
.dc-solo-link { display: block; width: 100%; margin-top: 12px; padding: 8px; background: none; border: none;
  color: var(--d-sub, #756E66); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; word-break: keep-all; }
.dc-solo-link:active { opacity: .6; }

/* 인트로 영상 (요청_인트로영상_임베드) — 1:1, 관계 선택 CTA 밀지 않게 상단 컴팩트 */
.introwrap { position: relative; width: 100%; max-width: 340px; margin: 6px auto 4px; cursor: pointer; }
.introvid { width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; display: block;
  background: #000; object-fit: cover; }
/* 포스터 오버레이 — 영상 위를 덮어 멈춘 첫 화면을 보여준다.
   .playing 이면 숨겨 영상이 드러난다(재생 후에도 poster 속성 대신 이걸로 확실히 복귀). */
.introposter { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 16px;
  object-fit: cover; display: block; pointer-events: none; }
.playbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; min-width: 44px; min-height: 44px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35); pointer-events: none; }
.introwrap.playing .introposter, .introwrap.playing .playbtn { display: none; }
/* 🔊/🔇 음소거 토글 — 재생 중에만 코너에 표시. 한 번 누른 선택은 기억(음소거 모드). */
.soundtog { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 18px;
  cursor: pointer; display: none; align-items: center; justify-content: center; line-height: 1; }
.introwrap.playing .soundtog { display: flex; }
.soundtog:active { transform: scale(.94); }
.introwrap + .hero { padding-top: 8px; }

/* ── 어드민 품질 점검 뷰 (요청_어드민_품질점검뷰) ─────────────────── */
.qv { padding: 14px 16px 40px; }
.qbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qsel { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 14px;
  font-family: inherit; background: #fff; color: var(--ink); }
.qchip { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.qchip.live { background: var(--okbg); color: var(--ok); }
.qchip.stg { background: #EAF1FF; color: #2B5AA8; }
.qchip.soon { background: var(--light); color: var(--blue); }
.qchip.pend { background: var(--warnbg); color: var(--warn); }
.qmetrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.qm { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.qm b { display: block; font-size: 18px; font-weight: 900; color: var(--navy); }
.qm span { font-size: 11px; color: var(--mut); }
.qm.good b { color: var(--ok); } .qm.bad b { color: var(--warn); }
.qtabs { display: flex; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; }
.qtab { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 700; color: var(--mut); cursor: pointer; }
.qtab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.qmut { font-size: 12px; color: var(--mut); margin-bottom: 8px; }
/* 뷰1 문항 */
.qitem { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.qitem.flagged { border-color: var(--warn); background: var(--warnbg); }
.qih { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.qinum { width: 22px; height: 22px; border-radius: 50%; background: var(--light); color: var(--navy);
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.qiax { font-size: 11px; font-weight: 700; color: var(--blue); }
.qflag { font-size: 11px; font-weight: 700; color: #fff; background: var(--warn); padding: 2px 8px; border-radius: 999px; }
.qis { font-size: 14px; font-weight: 600; color: var(--ink); }
.qio { display: flex; gap: 14px; margin-top: 5px; font-size: 12.5px; color: var(--mut); }
/* 뷰2 결과 5모양 */
.qrevstat { font-size: 12px; color: var(--warn); background: var(--warnbg); padding: 8px 12px; border-radius: 10px; margin-bottom: 10px; }
.qshape { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.qsh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.qspat { font-size: 13px; font-weight: 800; }
.qspair { font-size: 12px; font-weight: 700; color: var(--navy); background: var(--light); padding: 2px 8px; border-radius: 999px; }
.qsgap { font-size: 11px; color: var(--mut); }
.qshead { font-size: 13px; line-height: 1.5; color: var(--ink); }
.qsnote { font-size: 12px; color: var(--mut); margin-top: 4px; }
.qsmut { font-size: 12px; color: #B9C2D0; }
/* 뷰3·4 매트릭스 */
.qmxwrap { overflow-x: auto; }
.qmx { border-collapse: collapse; font-size: 12px; }
.qmx th { padding: 5px 8px; font-weight: 800; color: var(--navy); background: #F7F9FC; position: sticky; }
.qmx td { text-align: center; }
.qcell { width: 30px; height: 30px; cursor: pointer; font-weight: 700; color: var(--ink); border: 1px solid #fff; }
.qcell:hover { outline: 2px solid var(--navy); }
/* 패턴 이름 표기 매트릭스 — 셀에 한글 이름이 들어가 넓어짐 */
.qmxpat .qcell { width: auto; min-width: 46px; height: auto; padding: 6px 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.qmxpat th { font-size: 12px; }
.qboard th.qbrel { text-align: left; white-space: nowrap; }
.qbcell { padding: 6px 10px; font-size: 11px; font-weight: 700; border: 1px solid #EEF1F5; text-align: center; }
.qbcell.live { background: var(--okbg); color: var(--ok); }
.qbcell.soon { background: var(--light); color: var(--blue); }
.qbcell.na { color: #D3D9E0; }
.qbver { font-size: 9px; color: var(--mut); font-weight: 600; }
/* 결과 미리보기 모달 */
.qmodal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: flex;
  align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; }
.qmbox { background: #F2F5FA; border-radius: 16px; width: 100%; max-width: 480px; margin: auto; }
.qmbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
  position: sticky; top: 0; background: #fff; border-radius: 16px 16px 0 0; z-index: 1; }
.qmbody { padding: 0 4px 8px; }
.qmbody .result { min-height: auto; }

/* ══ v4 결과화면 (카드 뒤집기 + 자세히 유도 + 혼자 모드) 2026-07-23 ══ */
/* §1 카드 뒤집기 헤더 */
.fliphead { margin-top: 8px; }
.fh-cards { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.fh-x { align-self: center; font-size: 20px; font-weight: 800; color: var(--mut); margin-top: 30px; }
.fh-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 122px; }   /* V3 8장 — 병합 페어 120~126px */
.idlbl { font-size: 12px; font-weight: 800; color: var(--mut); }
.idcard { width: 100%; }
/* v5 §8 — 카드 = 실물 이미지(앞면 세로형 / 병합 플립 뒤=실물 검정 뒷면). */
.idcard-face { width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 10px rgba(11,61,145,.10); }
.idcard-face img { display: block; width: 100%; height: auto; }
/* 미스터리 '?' 뒷면 — 결정/대기/혼자의 '아직 안 열린' 카드(가볍게). 실물 검정 뒷면은 병합 플립에서만. */
/* 🔴 17-3 — 연파랑 미스터리 카드 폐기. 크림 + 웜 점선(아직 안 열림을 톤으로 말한다). */
.idback-q { aspect-ratio: 697 / 1122; display: flex; align-items: center; justify-content: center;
  background: var(--w-card, #FFFCF7); border: 1.5px dashed var(--d-orangeDash, #D9AF82); box-shadow: none; }
.idback-q .idq { font-size: 46px; font-weight: 900; color: var(--d-orangeDash, #D9AF82); }
/* 3D 플립 (병합 첫 진입 1회) — 앞/뒤 겹침. 잘라내지 않게 contain. */
.flip3d { perspective: 800px; }
.flip3d-inner { position: relative; width: 100%; aspect-ratio: 697 / 1122; transform-style: preserve-3d;
  animation: fcflip .9s cubic-bezier(.4,0,.2,1) .35s both; }
.flip3d-inner .idcard-face { position: absolute; inset: 0; backface-visibility: hidden; box-shadow: none; }
.flip3d-inner .idcard-face img { width: 100%; height: 100%; object-fit: contain; }
.flip3d-inner .idback { transform: rotateY(0deg); }
.flip3d-inner .idcard-face:not(.idback) { transform: rotateY(180deg); }
@keyframes fcflip { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) {
  .flip3d-inner { animation: none; transform: rotateY(180deg); }
}
/* §2 자세히 유도 티저 */
.cc-teaser { margin: 10px 18px 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); opacity: .5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* §3 블러 미리보기 */
.blurgap { position: relative; margin-top: 20px; border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; }
.bg-dummy { filter: blur(5px); padding: 20px 16px; pointer-events: none; user-select: none; }
.bg-cards { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.bg-c { width: 76px; height: 96px; border-radius: 12px; background: #DCE3EC; }
.bg-x { font-size: 18px; color: #9AA6B4; font-weight: 800; }
.bg-line { text-align: center; font-size: 14px; color: #7A8494; }
.bg-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 16px; text-align: center;
  background: rgba(255,255,255,.55); }
.bg-over .bg-lock { font-size: 28px; }
.bg-over p { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.5; }
/* §4 CTA 위계 */
.ctaA { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ctaA .cta-invite { width: 100%; }
.ctaA .cta-fine { font-size: 12px; color: var(--mut); line-height: 1.5; text-align: center; margin: 2px 0 0; }
.storagefold { margin-top: 18px; }
.storagefold > summary { list-style: none; cursor: pointer; text-align: center; font-size: 13px;
  font-weight: 800; color: var(--mut); padding: 8px; }
.storagefold > summary::-webkit-details-marker { display: none; }
.storagefold[open] > summary .chev { display: inline-block; transform: rotate(180deg); }
.storagefold .storage { margin-top: 4px; }
/* §5 혼자 모드 */
/* 🔴 §4 — 헤더 연파랑(#F4F6FA) 폐기. 크림 + 보조선 + 차콜(V3 17-3). */
.solomode { border: 1px solid var(--d-line, #DED1C0); border-radius: 14px; overflow: hidden; }
.solomode > summary { list-style: none; cursor: pointer; text-align: center; padding: 13px;
  font-size: 15px; font-weight: 800; color: var(--d-ink, #20272A); background: var(--w-card, #FFFCF7); }
.solomode > summary::-webkit-details-marker { display: none; }
.solo-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.solo-head { display: flex; align-items: center; gap: 12px; }
.solo-ava { width: 58px; flex: none; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.solo-ava img { display: block; width: 100%; height: auto; }
.solo-nm { font-size: 16px; font-weight: 800; color: var(--d-ink, #20272A); }
.solo-sub { font-size: 13px; color: var(--d-sub, #756E66); margin-top: 2px; }
.solo-sec .solo-lbl { font-size: 12.5px; font-weight: 800; color: var(--d-orange, #B95F34); letter-spacing: .02em; margin-bottom: 4px; }
.solo-sec p { font-size: 16px; line-height: 1.65; color: var(--d-body, #414A4D); word-break: keep-all; }
.solo-warn { background: #FFF7E6; border-radius: 10px; padding: 10px 12px; font-size: 12.5px;
  line-height: 1.55; color: #8A6D1F; }
.solo-warn b { font-weight: 800; }
.solo-lock { border: 1.5px dashed var(--d-orangeDash, #D9AF82); border-radius: 14px; padding: 10px 12px;
  font-size: 14px; color: var(--d-sub, #756E66); text-align: center; }

/* ══ v5 결정선행 구조 (결정/대기/풀) + 재방문 배너 · 2026-07-23 ══ */
/* §1 결정 화면 */
.result.decision { text-align: center; }
/* 🔴 17-3 — 민트 배지 폐기. 크림 + 보조선 + 오렌지 포인트 글자. */
.dc-done { width: fit-content; margin: 6px auto 0; padding: 6px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 800; background: var(--w-card, #FFFCF7);
  border: 1px solid var(--d-line, #DED1C0); color: var(--d-orange, #B95F34); }
.dc-title { margin: 16px 0 0; font-size: 29px; font-weight: 800; line-height: 1.30; letter-spacing: -.025em; word-break: keep-all; }
.dc-sub { margin: 10px 4px 0; font-size: 17px; font-weight: 600; line-height: 1.72; color: var(--d-body, #414A4D); word-break: keep-all; }
.dc-q { margin: 20px 0 0; font-size: 17px; font-weight: 800; color: var(--d-ink, #20272A); }
.dc-cta { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dc-cta .cta-invite { width: 100%; }
.dc-cta .dc-solo { width: 100%; margin-top: 10px; }
.dc-cap { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--d-sub, #756E66); word-break: keep-all; }
.dc-cap b { color: var(--navy); font-weight: 800; }
.dc-cap.mut { color: #9AA6B4; }
/* 정본 v1.9.2 ① — 상대의 몫을 알리는 줄. 초대 버튼 부연 아래, 조용하지만 읽히게. */
.dc-ask { margin: 6px 12px 0; font-size: 12.5px; line-height: 1.6; color: var(--d-sub, #756E66); word-break: keep-all; }
/* §2 대기 화면 */
.result.waiting { text-align: center; }
.wt-msg { margin: 20px 8px 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.wt-msg b { color: var(--navy); font-weight: 800; }
/* v1.8 대기 안내 — 나가도 된다 + 자동 알림 없음(정직). 본문 톤(작고 차분하게). */
.wt-guide { margin: 12px 10px 0; font-size: 12.5px; line-height: 1.7; color: var(--mut); word-break: keep-all; }
.wt-guide b { color: var(--d-body, #414A4D); font-weight: 500; }
.wt-keeplink { margin-top: 14px; }
.wt-solo { display: block; margin: 12px auto 0; background: none; border: 0; color: #9AA6B4;
  font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px; }
/* ③ 병합 첫 화면 격차 요약 — 카드 페어 **위**. 결론이라 조용하되 확실히 읽히게(v2.0 §22 양방향). */
/* 🔴 V3 9장 — 결과 비교 문장. 크림 화이트 패널 + 왼쪽 3px 오렌지 선, 강조어만 오렌지 800.
   정방향·역방향은 **같은 위계**로 보여준다(한쪽을 흐리게 하지 않는다). 사이 간격 10px. */
.gapsumwrap { margin: 14px 0 12px; }
.gapsum-lead { font-size: 14px; font-weight: 700; color: var(--d-sub, #756E66);
  margin-bottom: 4px; text-align: center; word-break: keep-all; }
/* 파일럿 §26-① — 격차 요약 앞 설명 한 줄(카드가 무엇으로 정해지는지) */
.gapsum-explain { font-size: 12.5px; color: var(--w-hint, #8A8179);
  margin: 0 0 11px; text-align: center; line-height: 1.5; word-break: keep-all; }
.gapsum { margin: 0 0 10px; text-align: left; font-size: 16.5px; font-weight: 600; line-height: 1.55;
  color: var(--d-ink, #20272A); word-break: keep-all;
  background: var(--w-card, #FFFCF7); border: 1px solid var(--d-line, #DED1C0);
  border-left: 3px solid var(--d-orange, #B95F34); border-radius: 0 14px 14px 0; padding: 13px 15px; }
.gapsum b, .gapsum strong { color: var(--d-orange, #B95F34); font-weight: 800; }
.gapsum.rev { color: var(--d-ink, #20272A); }
.gapsum:last-child { margin-bottom: 0; }

/* ── §1 홈 칩 (4차) — 전 화면 우상단 고정 ─────────────────────────────
   🔴 아이콘 단독 금지: ⌂ + 글자 「홈」. 터치 44px 이상.
   스타일은 **현행 톤 기준 임시** — 크림 배경 + 연한 테두리 + 잉크 글자.
   디자인 V3 코드 정본이 확정되면 **색만 승계**(구조는 그대로 둘 것). */
/* 🔴 17-2 홈 칩 — 구조 유지 · V3 톤으로 색만 승계. 크림 배경 + 보조선 + 차콜. */
.homechip { position: fixed; top: 8px; right: 10px; z-index: 120;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 6px 12px;
  background: var(--w-card, #FFFCF7); border: 1px solid var(--d-line, #DED1C0);
  border-radius: 999px; box-shadow: 0 1px 3px rgba(42, 51, 61, .06);
  color: var(--d-ink, #20272A); font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.homechip:active { opacity: .6; }
.homechip .hc-ico { font-size: 14px; line-height: 1; }
/* 좌상단 ← 상시 칩 (인앱 네비 상시화 2026-07-29) — homechip 의 좌측 미러. 같은 자리·같은 크기. */
.backchip { position: fixed; top: 8px; left: 10px; z-index: 120;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 6px 12px;
  background: var(--w-card, #FFFCF7); border: 1px solid var(--d-line, #DED1C0);
  border-radius: 999px; box-shadow: 0 1px 3px rgba(42, 51, 61, .06);
  color: var(--d-ink, #20272A); font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.backchip:active { opacity: .6; }
.backchip .hc-ico { font-size: 15px; line-height: 1; }
/* 칩이 헤더 내용물 위로 겹치지 않게 자리 비우기 (좌: 뒤로 · 우: 홈) */
.ip-top { padding-right: 62px; padding-left: 62px; }
@media (max-width: 340px) { .homechip, .backchip { padding: 6px 10px; font-size: 12px; } .ip-top { padding-right: 56px; padding-left: 56px; } }
/* 캡처(이미지 저장)에는 UI 크롬이 들어가면 안 된다 */
.result.capturing .homechip, .result.capturing .backchip { display: none; }
/* 🔴 결과 스크롤 시 상단 칩(←·홈)이 본문을 갑자기 덮지 않게 — 최상단 페이드 마스크(칩 z120 아래 z110).
   스크롤 본문이 칩 밑에서 매끄럽게 사라진다(2026-07-29 시각검수). 캡처 시엔 제외. */
.screen.result::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 58px; z-index: 110;
  background: linear-gradient(180deg, var(--v-bg1, #FBF7EF) 56%, rgba(251,247,239,0)); pointer-events: none; }
.result.capturing::before { display: none; }

/* ① 4단계 여정 바 (v2.0 §22) — 전 화면 상단 상시. 진행바보다 위, 작고 조용하게.
   현재 단계만 ink 강조 · 지난 단계 ✓ · 남은 단계 hint(디자인 정본 토큰). */
/* 오른쪽 여백은 홈 칩 자리 — 여정 바가 칩 밑으로 파고들지 않게. */
/* 🔴 V3 6장 진행 단계 — 크림 화이트 반투명 패널. 현재 단계만 오렌지 소프트 배경 + 오렌지 원형 번호.
   네 단계가 **한 줄에서** 읽혀야 한다(줄바꿈 금지 · 320px 에서도). 단계명을 아이콘으로 대체하지 않는다. */
/* 🔴 인앱 네비 상시화(2026-07-29) — 좌상단 ← 칩이 생겨 여정바를 칩 밴드 **아래**로(전 폭).
   기존 ≤360px 규칙(칩과 줄 분리)을 전 폭에 적용 — 좌/우 칩과 가로 충돌 없이 네 단계 한 줄 유지. */
.journeybar { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap;
  gap: 2px; margin: 52px 0 0 0; padding: 7px 9px; border-radius: 999px;
  background: rgba(255,252,247,.8); border: 1px solid var(--d-line, #DED1C0);
  font-size: 12px; font-weight: 700; color: var(--d-sub, #756E66); letter-spacing: -.3px;
  overflow: hidden; }
.jb-step { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 3px 7px; border-radius: 999px; min-width: 0; }
.jb-step > i { font-style: normal; display: inline-grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  background: var(--d-line, #DED1C0); color: var(--w-card, #FFFCF7); font-size: 10px; font-weight: 800; }
.jb-step > span { overflow: hidden; text-overflow: ellipsis; }
.jb-step.on { background: var(--d-orangeSoft, #F0DED0); color: var(--d-ink, #20272A); font-weight: 800; }
.jb-step.on > i { background: var(--d-orange, #B95F34); color: var(--v-ctatext, #FFF9F0); }
.jb-step.done { color: var(--d-sub, #756E66); }
.jb-step.done > i { background: var(--d-orange, #B95F34); color: var(--v-ctatext, #FFF9F0); }
.jb-arrow { color: var(--d-line, #DED1C0); flex: none; }
/* 🔴 좁은 폭(≤360px) — 홈 칩 자리를 비워 두면 네 단계가 잘려 「서…」 「맞춰…」가 된다.
   V3 6장은 **네 단계가 한 줄에서 읽힐 것**을 요구하므로, 칩과 줄을 나눠 전체 폭을 쓴다. */
@media (max-width: 360px) {
  .journeybar { margin: 52px 0 0 0; font-size: 11px; padding: 6px 7px; gap: 0; }
  .jb-step { padding: 3px 4px; }
  .jb-step > i { width: 16px; height: 16px; font-size: 9.5px; }
  .jb-arrow { margin: 0 -1px; }
}

/* ── §4 카드 뒤집기(보상의 탭) ─────────────────────────────────────────
   🔴 디자인 정본 준수: 빛·파티클 없음. 실물 카드 뒤집는 손맛만 — 0.6초 rotateY 하나. */
/* 🔴 폭을 명시한다 — 앞뒷면이 position:absolute 라 컨테이너에 **내재 폭이 없다**.
   .screen 이 flex column 이라 폭 0으로 접혀 카드가 통째로 안 보였다(실측). */
.tapcard { perspective: 900px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  width: 100%; margin: 0 auto; }
.bigcard .tapcard { width: 158px; max-width: 100%; }   /* V3 8장 — 단독 카드 158px */
.tapcard-inner { position: relative; width: 100%; aspect-ratio: 697 / 1122;
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.34, .12, .2, 1); }
.tapcard.flipped .tapcard-inner { transform: rotateY(180deg); }
.tapcard-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px; overflow: hidden; box-shadow: 0 3px 12px rgba(35, 43, 52, .16); }
.tapcard-face img, .tapcard-face .cardart-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tapcard-front { transform: rotateY(180deg); }
/* 미세 흔들림 — "누를 수 있다"만 알린다. 크게 흔들면 싸구려가 된다. */
.tapcard.nudge .tapcard-inner { animation: cardNudge 2.4s ease-in-out 1s infinite; }
.tapcard.flipped .tapcard-inner { animation: none; }
@keyframes cardNudge {
  0%, 88%, 100% { transform: rotate(0deg); }
  92%  { transform: rotate(-1.4deg); }
  96%  { transform: rotate(1.4deg); }
}
.tapme { text-align: center; font-size: 12.5px; color: var(--d-orange, #B95F34); margin-top: 12px; }
/* §4-a 연출 — 누르고 0.5초 뜸(살짝 눌리는 느낌) → 플립 → 링 글로우 1회 + 살짝 확대 후 안착.
   🔴 콘페티·파티클 금지(디자인 정본). 움직이는 건 카드 하나뿐.
   🔴 V3 17-5 판정 대기 — 이 링의 주황(#D2701F)이 상태 오렌지(#B95F34)와 충돌하는지는
      **대표 판정 항목**이다. 그래서 V3 리스킨에서 이 값만 일부러 안 건드렸다(본부 지시).
      판정이 「통일」로 나면 rgba(185,95,52,…) 로 바꾸면 된다. */
.tapcard.holding .tapcard-inner { animation: none; transform: scale(.97); transition: transform .5s ease; }
.tapcard.landed .tapcard-inner { animation: cardLand 1.1s ease .6s 1 both; }
@keyframes cardLand {
  0%   { filter: drop-shadow(0 0 0 rgba(210,112,31,0)); }
  30%  { filter: drop-shadow(0 0 14px rgba(210,112,31,.55)); }
  100% { filter: drop-shadow(0 0 0 rgba(210,112,31,0)); }
}
.tapcard.landed .tapcard-face { animation: cardPop .9s cubic-bezier(.2,.9,.25,1) .6s 1 both; }
@keyframes cardPop { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
.tapcard.landed .tapcard-front { animation-name: cardPopFront; }
@keyframes cardPopFront {
  0%   { transform: rotateY(180deg) scale(1); }
  35%  { transform: rotateY(180deg) scale(1.06); }
  100% { transform: rotateY(180deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tapcard.landed .tapcard-inner, .tapcard.landed .tapcard-face { animation: none; }
}

/* §2-c 듀오 이미지 자리 선확보 — 이미지가 늦게 와도 아래 텍스트가 먼저 튀어오르지 않게.
   듀오 원본은 정사각(1:1). 비율을 미리 잡아 레이아웃을 고정한다. */
.ccard-duo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--w-card, #FFFCF7); }

/* §3-d 2부 배지 2줄 — 작은 맥락 줄(칩 밖) + 칩. */
.ip-scene-ctx { font-size: 11.5px; color: var(--w-hint, #756E66); margin-bottom: 5px; word-break: keep-all; }

/* §3-c 혼자 열기 확인창 */
.ask-msg { font-size: 14.5px; line-height: 1.6; color: var(--d-ink, #20272A);
  text-align: center; margin: 4px 6px 16px; word-break: keep-all; }
.ask-msg b { font-weight: 500; color: var(--d-orange, #B95F34); }
@media (prefers-reduced-motion: reduce) {
  .tapcard.nudge .tapcard-inner { animation: none; }
  .tapcard-inner { transition-duration: .2s; }
}

/* ② 전송 분리 — 보조 링크(복사). 주 버튼(공유)과 무게 차이를 분명히. */
/* §5 — 주 버튼 아래 수단 안내(라벨은 사람, 수단은 여기로). */
.dc-how { margin: 6px 12px 0; font-size: 11.5px; color: var(--w-hint, #756E66); text-align: center; word-break: keep-all; }
.dc-copylink { display: block; margin: 10px auto 0; background: none; border: 0; padding: 4px;
  font-size: 12.5px; color: var(--w-hint, #756E66); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font-family: inherit; }
/* 대기 화면 재전송 다리 — 복사 경로에서만 뜬다. */
.wt-resend { margin-top: 14px; }
/* §2 풀(혼자) */
.full-label { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--navy);
  background: var(--light); border-radius: 999px; padding: 7px 14px; width: fit-content; margin: 10px auto 4px; }
.full-label b { font-weight: 800; }
.solo-fulllock { margin-top: 16px; border: 1.5px dashed var(--orange); border-radius: 14px; padding: 13px 14px;
  font-size: 13px; line-height: 1.5; color: var(--ink); text-align: center; }
.solo-fulllock b { color: var(--navy); font-weight: 800; }
.solo-fulllock .btn { margin-top: 10px; }
/* §4 홈 재방문 배너 */
.resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin: 12px 0 4px; padding: 13px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--d-line, #DED1C0); background: var(--w-card, #FFFCF7); text-align: left; }
.resume-banner.done { border-color: var(--d-orange, #B95F34); background: var(--w-card, #FFFCF7); }
.resume-banner.survey { border-color: var(--d-orange, #B95F34); background: var(--d-orangeSoft, #F0DED0); }
.resume-banner.survey .rb-t, .resume-banner.survey .rb-cta { color: var(--orange); }
.resume-banner .rb-t { font-size: 13.5px; line-height: 1.4; color: var(--navy); }
.resume-banner.done .rb-t { color: var(--d-ink, #20272A); }
.resume-banner .rb-t b { font-weight: 800; }
.resume-banner .rb-cta { flex: none; font-size: 13px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.resume-banner.done .rb-cta { color: var(--d-orange, #B95F34); }

/* ═══ 홈 '내 결과' 목록 (본부 목업) ═══ */
.myresults { margin: 12px 0 6px; }
/* 🔴 §1 홈 정체성(3차) — "도착했는데 홈인지 모르겠다"는 지적. 13px 라벨은 간판이 아니다.
   워드마크 바로 아래 **헤드라인급**으로 세워 "여기가 내 결과들"이라고 먼저 말하게 한다.
   (홈 전면 개편은 디자인 V3 — 지금은 간판만.) */
/* V3 17-4 — 홈 「내 결과」 25px/800 헤드라인. */
.mr-head { font-size: 25px; font-weight: 800; color: var(--d-ink, #20272A);
  margin: 6px 2px 10px; letter-spacing: -.025em; line-height: 1.3; }
.mr-list { display: flex; flex-direction: column; gap: 6px; }
.mr-list.arch { margin-top: 8px; opacity: .85; }
/* 🔴 §1(대표 2026-07-27) 슬림 행 — 결과가 3~4개면 목록이 화면을 다 먹어 랜딩 히어로가 밀렸다.
   완료·대기 행은 **한 줄짜리 슬림 행**으로 내리고, 강조 카드는 「진행 중」 하나만 남긴다.
   🔴 높이를 줄여도 터치는 48px 아래로 안 내린다(V3 12장) — 행 자체가 터치 타깃이다. */
.mr-row { position: relative; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--d-line, #DED1C0); border-radius: 14px; background: var(--w-card, #FFFCF7);
  padding: 5px 10px; min-height: 48px; flex-wrap: wrap; }
/* 진행 중 = 홈의 제1 CTA. 유일하게 강조 카드로 남긴다(오렌지 보조선 + 오렌지 소프트). */
.mr-row.k-inprogress { border: 1.5px solid var(--d-orange, #B95F34); background: var(--d-orangeSoft, #F0DED0); padding: 10px; min-height: 64px; }
/* 🔴 §2 — 완성 항목 초록/민트 보더·배경 폐기(V3 잔재). 크림 + 보조선, 완성 표시는 오렌지 글자로. */
.mr-row.k-merged { border-color: var(--d-line, #DED1C0); background: var(--w-card, #FFFCF7); }
.mr-row.k-merged .mr-sub { color: var(--d-orange, #B95F34); font-weight: 700; }
.mr-open { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; min-width: 0;
  border: 0; background: none; cursor: pointer; text-align: left; padding: 2px; font-family: inherit; }
.mr-mini { flex: none; width: 27px; height: 38px; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--d-line, #DED1C0); background: var(--w-card, #FFFCF7); display: flex; align-items: center; justify-content: center; }
.mr-row.k-inprogress .mr-mini { width: 38px; height: 52px; }
.mr-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-mini.myst { font-size: 15px; font-weight: 800; color: var(--d-orangeDash, #D9AF82); background: var(--w-card, #FFFCF7); border-style: dashed; border-color: var(--d-orangeDash, #D9AF82); }
.mr-mini.prog { flex-direction: column; background: #fff; border-color: var(--orange); color: var(--orange); font-weight: 800; }
.mr-mini.prog span { font-size: 16px; line-height: 1; }
.mr-mini.prog i { font-size: 10px; font-style: normal; opacity: .8; }
.mr-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mr-title { font-size: 13px; font-weight: 700; color: var(--d-ink, #20272A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-sub { font-size: 12px; color: var(--d-sub, #756E66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-sub b { font-weight: 700; color: var(--d-ink, #20272A); }
.mr-row.k-inprogress .mr-title { font-size: 15px; color: var(--d-ink, #20272A); }
.mr-row.k-inprogress .mr-sub { color: var(--d-orange, #B95F34); font-weight: 700; }
.mr-cta { flex: none; font-size: 12.5px; font-weight: 800; color: var(--d-orange, #B95F34); white-space: nowrap; padding-right: 4px; }
.mr-row.k-inprogress .mr-cta { font-size: 13.5px; }
.mr-more { flex: none; width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  font-size: 18px; color: var(--mut); line-height: 1; border-radius: 8px; }
.mr-more.restore { width: auto; padding: 0 12px; font-size: 12.5px; font-weight: 800; color: var(--navy); }
.mr-menu { flex-basis: 100%; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.mr-mi { border: 1.5px solid var(--navy); background: #fff; color: var(--navy); border-radius: 10px;
  padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.mr-mi.del { border-color: var(--warn); color: var(--warn); }
.mr-mnote { flex-basis: 100%; font-size: 11.5px; color: var(--mut); line-height: 1.45; margin: 2px 0 0; }
.mr-toggle { display: block; width: 100%; margin-top: 8px; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--navy); padding: 6px; font-family: inherit; }
.mr-toggle.arch { color: var(--mut); }
.mr-backup { display: block; width: 100%; margin-top: 12px; padding: 11px 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--navy); background: #fff; color: var(--navy); font-size: 13px; font-weight: 800; font-family: inherit; }
.mr-safe { font-size: 11.5px; color: var(--mut); line-height: 1.5; text-align: center; margin: 12px 2px 2px; }

/* 최초 로딩 인디케이터 — 은은한 점멸(콘텐츠 로드 동안). 서로보기 UX 6-① */
.loading-dots { animation: ld-pulse 1.4s ease-in-out infinite; }
@keyframes ld-pulse { 0%,100% { opacity:.45 } 50% { opacity:1 } }

/* 서로보기 UX §2 — 문항 상시 배지(1부/2부) + 2부 시각 모드(배경 톤). */
/* 정본 §2 — 1부 배지 = hint 텍스트(칩 아님) · 2부 = orangeSoft 칩. */
.q-badge { display:inline-block; font-size:11px; font-weight:500; letter-spacing:.2px; }
.q-badge.p1 { color:var(--d-hint, #756E66); }
.q-badge.p2 { background:var(--d-orangeSoft, #F0DED0); color:#B85E11; padding:3px 9px; border-radius:999px; }
/* 톤 흐름(서로보기 §2-b) — CSS 배경만, 그림 0. 은은하게(답 영역이 주인공). */
/* V2-A 웜 아이보리 — 시간대 3막 유지. 🔴 보라·라벤더·회색 금지. */
.screen.tone-morning { background:linear-gradient(180deg,#FBF6EE 0%,#F4EADA 100%); }  /* 1부 아침 */
.screen.tone-day     { background:linear-gradient(180deg,#FCF8F1 0%,#F6EFE2 100%); }  /* 낮 */
.screen.tone-dusk    { background:linear-gradient(180deg,#FAF2E6 0%,#F3E7D3 100%); }  /* 노을 */
.screen.tone-evening { background:linear-gradient(180deg,#FBF4E9 0%,#F5E9D6 100%); }  /* 2부 */
.screen.tone-night   { background:linear-gradient(180deg,#FBF4E9 0%,#F5E9D6 100%); }  /* 2부 */

/* 생각풍선 앵커 — 도형만. 은은하게 · 스크롤 유발 금지. */
/* V2-C 앵커 — 실물 카드 뒷면(S3 마주 보기). 선택지와 [다음] 사이 여백 중앙. */
.q-anchor { margin:18px auto 4px; text-align:center; }
.qa-face { display:flex; align-items:center; justify-content:center; gap:12px; }
.qa-card { position:relative; }
.qa-card img { display:block; height:72px; width:auto; border-radius:7px; box-shadow:0 2px 5px rgba(42,51,61,.12); }
.qa-card.l { transform:rotate(6deg); }
.qa-card.r { transform:rotate(-6deg); }
.qa-lb { display:block; font-size:9.5px; color:var(--w-hint, #756E66); margin-top:6px; }
.qa-dash { width:34px; height:0; border-top:1px dashed var(--w-cardline, #D9AF82); }
/* 2부 — 좌 흐리게 · 우 들림(rotateY)+? 배지 */
.qa-face.p2 { gap:22px; }
.qa-card.dim { opacity:.45; }
.qa-card.lift { transform:scale(1.1) perspective(320px) rotateY(38deg); }
.qa-card.lift img { box-shadow:0 5px 12px rgba(42,51,61,.20); }
.qa-q { position:absolute; top:-9px; right:-11px; width:22px; height:22px; border-radius:11px; background:#fff;
  border:.5px solid var(--d-orangeDash, #D9AF82); color:var(--d-orange, #B95F34); font-size:14px; font-weight:500;
  display:flex; align-items:center; justify-content:center; }
.qa-cap { font-size:11px; color:var(--w-hint, #756E66); margin-top:10px; }
.qa-cap b { color:var(--d-body, #414A4D); font-weight:500; }

/* 서로보기 UX §1 — 시작 온보딩 3장(카드뉴스). 글자 크게, 은유 없이. 임시 이모지 그림. */
.screen.ob { justify-content:center; min-height:78vh; text-align:center; }
.ob-card { display:flex; flex-direction:column; align-items:center; gap:18px; padding:8px 4px; }
.ob-graphic { font-size:56px; line-height:1.1; letter-spacing:6px; }
.ob-title { font-size:26px; line-height:1.35; font-weight:800; }
.ob-title b { color:var(--blue, #102038); }
.ob-sub { font-size:16px; line-height:1.55; color:#5B6672; max-width:20em; margin:0 auto; }
.ob-dots { display:flex; gap:7px; justify-content:center; margin:22px 0 14px; }
.ob-dot { width:7px; height:7px; border-radius:50%; background:#D6DCE4; }
.ob-dot.on { background:var(--blue, #102038); width:20px; border-radius:4px; }

/* 서로보기 UX §5 — 격차 리드인 + 결과 닫는 문장(정본 v1.2). */
.glead { font-weight:700; font-size:15px; color:var(--blue, #102038); margin:0 0 6px; }
.rt-closing { font-size:13px; color:#5B6672; line-height:1.65; margin:12px 0 4px; }

/* 교정쇄 시리즈 스택(실화면 뷰어) — 같은 시리즈 화면을 자연 높이로 압축해 세로 스택. */
.vseries { display:flex; flex-direction:column; }
.vseries-item { border-bottom:10px solid #E8ECF3; }
.vseries-lb { position:sticky; top:0; z-index:5; background:var(--navy, #22335B); color:#fff;
    font-size:12px; font-weight:800; padding:5px 12px; letter-spacing:.2px; }
.vseries-frame { padding:4px 0 10px; }
.vseries-frame .screen { min-height:auto !important; justify-content:flex-start !important; }
.vseries-frame .spacer { display:none !important; }   /* 시리즈에선 버튼 밀어내기 제거(압축) */

/* 화면 갤러리 (요청 2026-07-30) — 전 화면·팝업 한 페이지 스택 */
/* 🔴 PC 에서도 실제 휴대폰처럼 — 갤러리 전체를 폰 폭 중앙 정렬. 각 화면은 또렷한 기기 카드로(짤린 느낌 방지). */
.gx-wrap { display:flex; flex-direction:column; padding:14px 0 44px; max-width:392px; margin:0 auto; }
.gx-head { background:var(--navy, #22335B); color:#fff; font-size:13px; font-weight:800; padding:9px 12px; }
.gx-head .gx-mut { font-weight:600; opacity:.7; font-size:11px; }
/* 스탠드얼론 접이식 칩 — 기본 접힘(details 에 open 없음). 임베드(admin2)면 렌더 안 함(칩은 어드민이 밖에). */
.gx-fold { background:#EEF1F7; border-bottom:1px solid #D6DCE8; }
.gx-fold > summary { cursor:pointer; list-style:none; font-size:12px; font-weight:800; color:var(--navy, #22335B); padding:9px 12px; }
.gx-fold > summary::-webkit-details-marker { display:none; }
.gx-fold > summary::before { content:'▸ '; }
.gx-fold[open] > summary::before { content:'▾ '; }
.gx-chips { display:flex; flex-wrap:wrap; gap:5px; padding:0 10px 10px; max-height:180px; overflow-y:auto; }
.gx-chip { font-size:11px; font-weight:700; color:var(--navy, #22335B); background:#fff;
    border:1px solid #C9D2E4; border-radius:7px; padding:4px 8px; text-decoration:none; }
.gx-anchor { display:block; height:0; scroll-margin-top:0; }
/* 각 화면 = 실제 휴대폰(376px) 기기 카드. 또렷한 베젤·그림자로 폰 한 대처럼(짤린 느낌 방지). */
.gx-item { width:376px; max-width:calc(100% - 12px); margin:0 auto 22px; border:2px solid #2B2620;
    border-radius:28px; overflow:hidden; background:#FBF7EF; box-shadow:0 12px 34px rgba(16,32,56,.20); }
/* 화면 라벨 = iframe 안 sticky 상단(칩은 밖으로 뺐으므로 top:0). */
.gx-lb { position:sticky; top:0; z-index:5; background:var(--d-orange, #B95F34); color:#fff;
    font-size:12px; font-weight:800; padding:5px 12px; letter-spacing:.2px; }
.gx-ref { font-weight:600; opacity:.85; margin-left:4px; }
.gx-frame { padding:4px 0 10px; position:relative; }
.gx-frame .screen, .gx-frame .ip-screen { min-height:auto !important; justify-content:flex-start !important; }
.gx-frame .spacer { display:none !important; }
/* 갤러리 안의 팝업은 실제 오버레이 대신 프레임 안에 정적 배치(닫힘 로직 없이 모양만) */
.gx-pop { background:rgba(11,20,45,.42); padding:40px 0 0; }
.gx-pop .sheet { position:static; transform:none; box-shadow:0 -8px 24px rgba(0,0,0,.14); }

/* 🔴 넘기기(스위처) — 세로 스크롤 스택 대신 한 화면씩 전환(플립 느낌). */
.gx-chip { cursor:pointer; }
.gx-nav { display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 8px 4px; }
.gx-arrow { font-size:13px; font-weight:800; color:var(--navy,#22335B); background:#fff;
    border:1px solid #C9D2E4; border-radius:9px; padding:7px 14px; cursor:pointer; }
.gx-arrow:active { background:#EEF1F7; }
.gx-pos { font-size:12.5px; font-weight:800; color:#756E66; min-width:60px; text-align:center; }
.gx-switch .gx-stage { position:relative; }
.gx-switch .gx-page { display:none; }
.gx-switch .gx-page.on { display:block; }
.gx-page.on.gxA { animation: gxSlA .26s ease; }
.gx-page.on.gxB { animation: gxSlB .26s ease; }
@keyframes gxSlA { from { opacity:.35; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
@keyframes gxSlB { from { opacity:.35; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }

/* 교정쇄 결과 시리즈 — 갈림 수 선택기(0·1·2·3). 병합 화면 격차 문구 4종 확인용. */
.vgapbar { position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:8px;
    background:#FFF3E6; border-bottom:1px solid #F0D9A8; padding:8px 12px; font-size:12.5px; font-weight:800; color:#8A5A12; }
.vgaphint { font-size:11px; font-weight:600; color:#B08A4A; }
.vgapbtns { margin-left:auto; display:inline-flex; gap:6px; }
.vgapb { width:32px; height:32px; border-radius:8px; border:1px solid #E0C088; background:#fff;
    font-weight:800; font-size:14px; color:#8A5A12; cursor:pointer; }
.vgapb.on { background:var(--orange, #B95F34); color:#fff; border-color:var(--orange, #B95F34); }

/* 🔴 온보딩 — 디자인 정본 §1 (본부 2026-07-24). 흰 카드·헤어라인·CTA ink·주황 포인트만. */
.screen.ob2 { background:transparent; min-height:100vh; padding:16px 20px 22px; }  /* 코드정본 V2 — 바깥=아이보리 톤(body), 회색 프레임 제거 */
.ob2 .ob-wm { text-align:center; font-size:8px; letter-spacing:2.5px; font-weight:500; color:var(--w-faint, #9C948A); }
.ob2 .ob-wm-sp { height:12px; }
/* 카드 = 흰 배경·radius 26·패딩 30/18/22·그림자 규칙5 */
.ob2 .ob-card { flex:1; justify-content:center; gap:22px; background:#fff; border-radius:26px;
  padding:30px 18px 22px; box-shadow:var(--d-shadow,0 1px 3px rgba(42,51,61,.06)); margin:12px 0; }
.ob2 .ob-card { background:var(--w-card, #FFFCF7); }
.ob2 .ob-graphic { width:100%; display:flex; flex-direction:column; align-items:center; letter-spacing:normal; }
.ob2 .ob-title { font-family:var(--serif); font-size:17.5px; font-weight:500; line-height:1.55; color:var(--d-ink, #20272A); word-break:keep-all; }
.ob2 .ob-title b { font-weight:500; color:var(--d-ink, #20272A); }
.ob2 .ob-sub { font-size:11.5px; color:var(--d-sub, #756E66); line-height:1.7; }
.ob2 .ob-dots { margin:14px 0 12px; }
.ob2 .ob-dot { width:4px; height:4px; background:#DDE1E5; }
.ob2 .ob-dot.on { width:14px; height:4px; border-radius:2px; background:var(--d-ink, #20272A); }
.ob2 .ob-skip { display:block; margin:10px auto 0; background:none; border:none; font-size:9.5px;
  color:var(--d-hint, #756E66); text-decoration:underline; cursor:pointer; font-family:inherit; }
.ob2 .ob-credit { text-align:center; font-size:8.5px; color:var(--w-faint, #9C948A); margin-top:12px; }
/* ① VS — 라벨 + 회색 칩 말풍선(꼬리) + VS 원 30px ink + 점선 inline */
/* ── 온보딩 1장 VS — 코드정본 V2 구조(.ob-bubrow/.ob-side/.ob-lab/.ob-bub/.ob-vs 원) ──
   🔴 좌우 **같은 폭 + 같은 높이**. 예전엔 우측이 1줄이라 flex-end 정렬에서 높이가 어긋나
      좌우 크기가 달라 보였다(대표 지적). stretch + 라벨 높이 고정으로 못 박는다. */
.ob-bubrow { display:flex; align-items:stretch; justify-content:center; gap:10px; }
.ob-side { display:flex; flex-direction:column; width:110px; }
.ob-lab { font-size:8.5px; color:var(--w-hint, #756E66); text-align:center; margin-bottom:5px; min-height:12px; }
.ob-side .ob-bub { flex:1; display:flex; align-items:center; justify-content:center; }
.ob-vs { width:30px; height:30px; border-radius:50%; background:var(--d-ink, #20272A); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:500;
  flex-shrink:0; align-self:center; }
/* (구) 래퍼 — 남은 참조 방어용 */
.ob-vscol-row { display:flex; align-items:flex-end; justify-content:center; gap:10px; }
/* 코드정본 V2 — 말풍선 좌우 동일 폭(110px)·같은 회색·꼬리 없음·주황 금지 */
.ob-vscol { display:flex; flex-direction:column; align-items:center; gap:6px; width:110px; }
.ob-bublbl { font-size:8.5px; color:var(--w-hint, #756E66); }
.ob-bub { position:relative; width:100%; background:var(--w-chip, #F0E6D8); border-radius:13px; padding:11px 12px;
  font-size:13.5px; font-weight:500; line-height:1.4; color:var(--d-body, #414A4D); text-align:center; word-break:keep-all; }
.ob-bub.orange { color:var(--d-body, #414A4D); }   /* 코드정본 — 주황 텍스트 금지, 같은 회색 톤 */
/* 🔴 꼬리 없음(코드정본 온보딩 규칙) — tail-* 는 쓰지 않는다. */
.ob-dashwrap { text-align:center; margin-top:18px; }
.ob-dashed { display:inline-block; background:var(--d-orangeSoft, #F0DED0); border:1.3px dashed var(--d-orangeDash, #D9AF82);
  border-radius:14px; padding:11px 16px 12px; font-size:14px; color:var(--d-body, #414A4D); position:relative; word-break:keep-all; }
.ob-dashed b { color:var(--d-orange, #B95F34); }
.ob-dashlbl { display:block; font-size:9px; font-weight:500; color:var(--d-orange, #B95F34); margin-bottom:4px; }
/* ② 네 글자 부정 — ○○○○ 취소선 박스 */
.ob-four { display:flex; justify-content:center; }
.ob-4box { position:relative; border:1px solid var(--w-line, #DED1C0); border-radius:12px; padding:16px 22px;
  font-size:15px; letter-spacing:6px; color:#C3C9CF; }
.ob-4box::after { content:''; position:absolute; left:10%; right:10%; top:50%; height:1px; background:#8A929B; transform:rotate(-8deg); }
/* ③ 문항 미리보기 미니카드 150px */
.ob-mini { width:170px; background:var(--w-card, #FFFCF7); border:.5px solid var(--w-line, #DED1C0); border-radius:13px; padding:14px; text-align:left; }
.ob-qstem { font-size:12px; font-weight:500; color:var(--d-ink, #20272A); margin-bottom:8px; }
/* ⑧ 체험형 — 미니 문항이 **실제 버튼**이 된다(순수 데모·기록 없음). */
.ob-qopt { display:block; width:100%; text-align:left; background:transparent; font-family:inherit; cursor:pointer;
  border:.5px solid var(--w-line, #DED1C0); border-radius:10px; padding:9px 11px; font-size:12px;
  color:var(--d-body, #414A4D); margin-top:7px; word-break:keep-all; transition:border-color .15s, color .15s; }
.ob-qopt.on { border:1.5px solid var(--d-ink, #20272A); color:var(--d-ink, #20272A); font-weight:500; }
.ob-qcheck { color:var(--d-orange, #B95F34); font-weight:500; margin-right:5px; }
/* 고르기 전 유도 — 미니 문항 바로 아래. 살짝 떠오르는 정도(과하지 않게). */
.ob-tapme { margin-top:9px; text-align:center; font-size:11px; color:var(--d-orange, #B95F34);
  animation:obTap 1.6s ease-in-out infinite; }
@keyframes obTap { 0%,100% { transform:translateY(0); opacity:.75; } 50% { transform:translateY(-3px); opacity:1; } }
/* 고른 뒤 확인 — 「쉽죠?」 */
.ob-done2 { margin-top:10px; text-align:center; font-size:12px; line-height:1.65; color:var(--d-sub, #756E66); word-break:keep-all; }
.ob-done2 b { font-weight:500; color:var(--d-ink, #20272A); }
/* 게이트 — 고르기 전 [시작하기] 비활성 톤 */
.ob2 .btn-primary:disabled { opacity:.32; cursor:default; }
@media (prefers-reduced-motion: reduce) { .ob-tapme { animation:none; } }

/* V2-B 전환 헤드라인 세리프 */
.pb-title { font-family: var(--serif); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════════
   🔴 디자인 코드정본 V2 (본부 2026-07-24 · forYou_디자인코드정본_V2.html)
   본부가 마크업·CSS를 직접 작성 → 클래스·구조 그대로 이식. {상대}·문항 텍스트만 치환.
   값은 코드정본 :root 와 동일한 기존 토큰(--d- · --w- 계열)으로 매핑(값 불변):
   --ink#232B34=--d-ink · --body#4A5560=--d-body · --sub#6B7480=--d-sub ·
   --whint#A39A8A=--w-hint · --wfaint#B8AE9E=--w-faint · --wline#E8DFD0=--w-line ·
   --wcard#FFFDF9=--w-card · --orange#D2701F=--d-orange · --oline#E0B98C=--d-orangeDash ·
   --osoft#FDF1E4=--d-orangeSoft.  (전역 --ink=#222 충돌 회피 위해 :root 재정의 안 함.)
   ════════════════════════════════════════════════════════════════════════ */
.ip-screen { min-height:100vh; display:flex; flex-direction:column; padding:22px 20px 18px;
  background:linear-gradient(#FBF6EE,#F4EADA);
  /* 🔴 V3 3.1 — Pretendard 를 **맨 앞**에. -apple-system 이 앞에 있으면 iOS 에서 시스템
     글꼴(Apple SD Gothic Neo)이 이기고 Pretendard 가 안 걸린다. 정본 스택 그대로. */
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Noto Sans KR',sans-serif; }
.ip-screen.part2 { background:linear-gradient(#FBF4E9,#F5E9D6); }
/* 🔴 V3 3.2 명조 전폐 — .serif 는 호출부가 남아 있을 수 있어 클래스를 지우지 않고 **무력화**한다.
   (지웠다가 어딘가에서 스타일이 통째로 빠지는 것보다, 산세리프로 되묶는 편이 안전하다.) */
.serif { font-family:var(--serif); font-weight:700; }
.ip-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
/* §7 — 문항 화면 워드마크 = 홈 버튼. 생김새는 그대로, 터치 타깃만 44px. */
.ip-wordmark { font-size:11px; color:var(--w-faint, #9C948A); letter-spacing:3px;
  background:none; border:0; padding:12px 8px 12px 0; min-height:44px; cursor:pointer;
  font-family:inherit; -webkit-tap-highlight-color:transparent; }
.ip-wordmark:active { opacity:.6; }
.ip-count { font-size:13px; color:var(--w-hint, #756E66); }
/* 🔴 V3 6장 진행바 — 진행은 언제나 오렌지다(1부/2부 색을 가르지 않는다). */
.ip-bar { height:4px; background:var(--v-track, #E5D9CA); border-radius:99px; margin-bottom:22px; }
.ip-bar > i { display:block; height:100%; background:var(--d-orange, #B95F34); border-radius:99px; transition:width .2s; }
.ip-scene { font-size:12.5px; color:var(--w-hint, #756E66); margin-bottom:12px; }
.part2 .ip-scene { display:inline-block; align-self:flex-start; background:var(--d-orangeSoft, #F0DED0);
  color:#B85E11; border-radius:999px; padding:4px 12px; font-weight:500; }
/* 🔴 V3 3.3 — 문항 줄기 25px/800. 한글 제목이 한 줄에 들어가라고 크기를 줄이지 않는다. */
.ip-stem { font-size:25px; font-weight:800; line-height:1.40; letter-spacing:-.025em;
  color:var(--d-ink, #20272A); margin-bottom:22px; word-break:keep-all; }
/* 🔴 V3 5장 — 선택지. 17px 아래로 내리지 않는다(절대잠금 5). 사이 간격 12px. */
.ip-opt { display:block; width:100%; text-align:left; background:var(--w-card, #FFFCF7);
  border:1px solid var(--w-line, #DED1C0); border-radius:14px; padding:17px; font-size:17px;
  font-weight:600; color:var(--d-body, #414A4D); line-height:1.52; min-height:58px;
  margin-bottom:12px; word-break:keep-all; font-family:inherit; cursor:pointer; }
/* 🔴 자동 진행(본부 2026-07-26 §1) — 선택 상태는 **오렌지 보더**다. 「다음」이 사라진 만큼
   "골랐다"는 신호를 선택지 자신이 져야 한다. 색은 반드시 --d-orange(코드정본 #D2701F) —
   전역 --orange(#FF8C42)는 다른 색이다. */
/* 🔴 V3 5장 선택 상태 — 오렌지 2px 테두리 + 오렌지 점. 네이비로 채우지 않는다.
   🔴 12장 접근성 — 색만으로 상태를 전달하지 않는다(테두리 굵기 + 점 + 글자색 함께). */
.ip-opt.sel { border:2px solid var(--d-orange, #B95F34); background:var(--w-card, #FFFCF7);
  color:var(--d-ink, #20272A); box-shadow:0 12px 28px rgba(84,58,34,.10);
  padding:16px; position:relative; padding-left:40px; }
.ip-opt.sel::before { content:''; position:absolute; left:17px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%; background:var(--d-orange, #B95F34); }
.ip-anchor { flex:1; display:flex; align-items:center; justify-content:center; padding:14px 0; }
.ip-anchor .wrap { text-align:center; }
/* 앵커 최종 v1.5 — 사람 실루엣 + 생각풍선(풍선 속=상황). 카드 미사용. 색은 --d-orange(=코드정본 --orange #D2701F).
   🔴 전역 --orange=#FF8C42 와 다르므로 반드시 --d-orange 사용. 좌표는 코드정본 그대로. */
.ip-think { display:inline-flex; align-items:flex-end; gap:5px; }
.ip-me { position:relative; width:46px; height:52px; }
.ip-me .h { position:absolute; left:50%; transform:translateX(-50%); top:0; width:26px; height:26px; border-radius:50%; background:var(--d-ink, #20272A); }
.ip-me .b { position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:44px; height:22px; background:var(--d-ink, #20272A); border-radius:22px 22px 0 0; }
.part2 .ip-me .h { background:linear-gradient(#20272A 30%,#77503A 70%,#B95F34); }
.part2 .ip-me .b { background:linear-gradient(#8A5E37,#B95F34); }
.ip-me .tag { position:absolute; bottom:-13px; left:50%; transform:translateX(-50%); font-size:10px; color:#B8956A; white-space:nowrap; }
.ip-dot1 { width:6px; height:6px; border-radius:50%; background:#E4D9C6; margin-bottom:26px; }
.ip-dot2 { width:9px; height:9px; border-radius:50%; background:#E9DFCC; margin-bottom:38px; }
.ip-bubble { position:relative; background:var(--w-card, #FFFCF7); border:0.5px solid var(--w-line, #DED1C0); border-radius:18px; padding:13px 16px 10px; margin-bottom:12px; box-shadow:0 1px 3px rgba(42,51,61,.06); }
.part2 .ip-bubble { background:#FEFAF4; border-color:#F0D9BC; }
.ip-mini { position:relative; display:inline-block; width:26px; height:30px; }
.ip-mini .h { position:absolute; left:50%; transform:translateX(-50%); top:0; width:14px; height:14px; border-radius:50%; background:var(--d-ink, #20272A); }
.ip-mini .b { position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:24px; height:13px; background:var(--d-ink, #20272A); border-radius:12px 12px 0 0; }
.ip-mini.you .h, .ip-mini.you .b { background:var(--d-orange, #B95F34); }
.ip-mini.big { width:30px; height:34px; }                 /* 2부 풍선 속 {상대} 크게 — 코드정본 17/28px */
.ip-mini.big .h { width:17px; height:17px; }
.ip-mini.big .b { width:28px; height:15px; }
.ip-blabel { font-size:11px; color:var(--w-hint, #756E66); margin-top:5px; }
.ip-caption { font-size:12.5px; color:var(--w-hint, #756E66); margin-top:10px; }
.ip-caption b { font-weight:500; color:var(--d-body, #414A4D); }
.ip-q { position:absolute; top:-10px; right:-9px; background:#FFF; border:0.5px solid var(--d-orangeDash, #D9AF82);
  border-radius:9px; padding:1px 7px; font-size:13px; color:#B85E11; font-weight:500; }
.ip-cta { display:block; width:100%; background:var(--d-ink, #20272A); color:#FBF6EE; border:none;
  border-radius:14px; padding:16px 0; font-size:16px; font-weight:500; font-family:inherit; cursor:pointer; }
.ip-cta:disabled { opacity:.35; cursor:not-allowed; }
/* §2 — 자동 진행에서 「이전」은 **유일한 정정 경로**라 승격한다. 하단 좌측 · 보조 버튼 톤 ·
   터치 44px 이상(구 13px 밑줄 텍스트는 너무 작다는 대표 지적). 「다음」이 빠진 자리를 쓴다. */
/* 🔴 V3 10장 보조 버튼 규격 — 주요 CTA(네이비 채움)와 확실히 구별한다. 터치 50px. */
.ip-prev { display:inline-flex; align-items:center; justify-content:center; align-self:flex-start;
  min-height:50px; padding:0 20px; margin-top:14px; font-size:16px; font-weight:700;
  background:rgba(255,252,247,.8); border:1px solid var(--d-line, #DED1C0); border-radius:14px;
  color:var(--v-navy, #102038); cursor:pointer; font-family:inherit; }

/* 자동 진행 연출 — 선택 표시를 0.22초 붙들었다가 0.18초에 걸쳐 빠진다(합 0.4초 = ADVANCE_MS).
   🔴 innerHTML 로 새로 그려지는 화면이라 transition 은 안 걸린다(시작 상태가 없다) → keyframe.
   q-out 중에는 pointer-events 를 끊어 연타를 화면 차원에서도 막는다(JS 가드와 이중). */
@keyframes qOut { from { opacity:1; transform:none } to { opacity:.2; transform:translateX(-12px) } }
@keyframes qIn  { from { opacity:0; transform:translateX(14px) } to { opacity:1; transform:none } }
.ip-screen.q-out { animation:qOut .18s ease .22s both; pointer-events:none; }
.ip-screen.q-in  { animation:qIn .3s ease both; }
@media (prefers-reduced-motion: reduce) {
  .ip-screen.q-out { animation:none; opacity:1; transform:none; }
  .ip-screen.q-in  { animation:none; }
}

/* ══ 온보딩·1부 진입·전환 — 시안 V 조합판 (정본 v2.3 §5-b·§5-c·§6 · 2026-07-26) ══
   🔴 레이아웃·구도는 시안 V, **색은 현행 V3 임시 톤**을 쓴다(정본 지시). V3 전면 전환 때
      이 파일의 토큰만 갈아끼우면 구조는 그대로 승계된다 — 그래서 색을 직접 안 박고 var 로 뺀다. */
.screen.obv { display:flex; flex-direction:column; padding-bottom:18px; }
.sv-eyebrow { margin-top:20px; color:var(--d-orange, #B95F34); font-size:13px; font-weight:600; letter-spacing:-.2px; }
.sv-h1 { margin-top:6px; font-family:var(--serif); font-size:26px; line-height:1.35; font-weight:500;
  color:var(--d-ink, #20272A); letter-spacing:-.4px; word-break:keep-all; }
/* 🔴 V3 9장/10장 — 안내·비교 문장은 **크림 패널 + 왼쪽 오렌지 선**이다.
   시안 V 의 네이비 박스를 그대로 두면 한 화면에 어두운 덩어리가 둘(안내+CTA)이 되어
   "지금 눌러야 하는 것"이 흐려진다. 네이비는 CTA 하나만 갖는다. */
.sv-why { padding:15px 16px; border-radius:14px; background:var(--w-card, #FFFCF7);
  border:1px solid var(--d-line, #DED1C0); border-left:3px solid var(--d-orange, #B95F34);
  color:var(--d-ink, #20272A); text-align:center; font-size:17px; font-weight:600;
  line-height:1.55; word-break:keep-all; }
.sv-why strong { color:var(--d-orange, #B95F34); font-weight:800; }
.sv-micro { text-align:center; color:var(--w-hint, #756E66); font-size:12px; margin-top:11px; }
/* 파일럿 §26-④ — 온보딩은 '먼저 보는 안내'임을 최상단에 명시 + 마지막 장 '할 일' 요약 */
.obv .ob-guide { text-align:center; font-size:11.5px; letter-spacing:.2px; color:var(--w-hint, #8A8179);
  margin-bottom:6px; word-break:keep-all; }
.obv .ob-todo { margin:2px 0 12px; padding:11px 14px; border-radius:12px;
  background:var(--w-soft, #F6EFE3); color:var(--d-ink, #20272A);
  font-size:13.5px; line-height:1.5; text-align:center; word-break:keep-all; }
.sv-line { padding:14px 15px; border-left:3px solid var(--d-orange, #B95F34); border-radius:0 13px 13px 0;
  background:var(--w-card, #FFFCF7); font-size:14.5px; line-height:1.55; word-break:keep-all; }
.sv-line strong { font-weight:600; color:var(--d-ink, #20272A); }

/* ══ 이해 개편 v1 (정본 §27) — 프로토타입 정렬(네이비 #102038·크림 카드·오렌지 강조) ══ */
/* §27-2 온보딩 1장 · §27-6 B 초대 (같은 박스 구성 공유) */
.ob1 { text-align:left; }
.ob1-title { font-size:22px; font-weight:800; line-height:1.35; letter-spacing:-0.02em;
  color:var(--d-ink, #20272A); margin:6px 0 14px; word-break:keep-all; }
.ob1-title b { color:var(--d-orange, #B95F34); }
.ob1-box { background:var(--w-card, #FFFCF7); border:1px solid var(--d-line, #DED1C0);
  border-radius:16px; padding:14px 16px; margin-bottom:12px; box-shadow:0 4px 12px rgba(84,58,34,.04); }
.ob1-box.mine { border-left:4px solid var(--d-orange, #B95F34); }
.ob1-box-t { font-size:15px; font-weight:800; color:var(--d-ink, #20272A); margin-bottom:5px; }
.ob1-box-d { font-size:13.5px; font-weight:600; line-height:1.6; color:var(--d-sub, #414A4D); word-break:keep-all; }
.ob1-box-d b { color:var(--d-ink, #20272A); font-weight:800; }
.ob1-n { color:var(--d-orange, #B95F34); font-weight:800; }
.ob1-arrow { text-align:center; font-size:13px; font-weight:800; color:var(--d-orange, #B95F34); margin:2px 0 12px; }
.ob1-lock { display:flex; align-items:center; justify-content:center; gap:6px; text-align:center;
  background:var(--w-soft, #F0DED0); border-radius:12px; padding:12px 14px;
  font-size:13.5px; font-weight:700; color:var(--d-ink, #20272A); word-break:keep-all; }
.ob1-lockicon { flex:0 0 auto; color:var(--d-orange, #B95F34); }
.b-invite .inv-situation { font-size:14px; font-weight:600; line-height:1.6; color:var(--d-sub, #414A4D);
  margin:0 0 16px; word-break:keep-all; }

/* §27-1 랜딩 — 결과 미리보기 + 구조 한 줄 */
.lp-preview { background:var(--w-card, #FFFCF7); border:1px solid var(--d-line, #DED1C0);
  border-radius:16px; padding:14px; margin-top:14px; text-align:center; }
.lp-preview-cards { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.lp-preview-cards img { width:64px; height:auto; border-radius:8px; box-shadow:0 4px 10px rgba(16,32,56,.14); }
.lp-x { font-size:18px; font-weight:800; color:var(--d-orange, #B95F34); }
.lp-preview-cap { font-size:12.5px; font-weight:700; color:var(--d-sub, #756E66); line-height:1.5; word-break:keep-all; }
.lp-structure { margin-top:14px; padding:11px 14px; border-radius:12px; background:var(--w-soft, #F0DED0);
  font-size:13.5px; font-weight:700; color:var(--d-ink, #20272A); text-align:center; word-break:keep-all; }
.lp-structure b { color:var(--d-orange, #B95F34); font-weight:800; }

/* §27-3 문항 상시 차례 라벨 */
.ip-turn { font-size:12.5px; font-weight:800; color:var(--d-orange, #B95F34);
  margin:8px 0 6px; letter-spacing:.1px; word-break:keep-all; }

/* §27-7 결과 격차 3항목 */
.gapsumwrap.gap3 { margin:14px 0 12px; }
.gap3 .gapsum-lead { font-size:15px; font-weight:800; color:var(--d-ink, #20272A);
  margin-bottom:10px; text-align:center; word-break:keep-all; }
.gap3-list { display:flex; flex-direction:column; gap:9px; margin-bottom:12px; }
.gap3-item { display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--w-card, #FFFCF7); border:1px solid var(--d-line, #DED1C0);
  border-left:4px solid var(--d-orange, #B95F34); border-radius:12px; padding:12px 14px;
  font-size:14px; font-weight:700; color:var(--d-ink, #20272A); }
.gap3-item.df { border-left-color:var(--d-sub, #756E66); }
.gap3-axis { word-break:keep-all; }
.gap3-state { font-size:13px; font-weight:800; color:var(--d-orange, #B95F34); white-space:nowrap; }
.gap3-item.df .gap3-state { color:var(--d-sub, #756E66); }
.gap3-mark { font-weight:900; }
.gap3-sum { text-align:center; font-size:15px; font-weight:800; color:var(--d-ink, #20272A);
  background:var(--w-soft, #F0DED0); border-radius:12px; padding:12px 14px; word-break:keep-all; }

/* ① 여행 직함 2패널 */
.sv-stage { margin:auto 0 15px; }
.sv-travel { height:min(46vh,330px); display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.sv-panel { position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--w-line, #DED1C0); }
.sv-panel.daughter { background:linear-gradient(180deg,#EDF2F4,#DFE9EC); }
.sv-panel.husband { background:linear-gradient(180deg,#FAF0E2,#F0DFC8); }
.sv-plabel { position:absolute; left:10px; top:10px; z-index:5; padding:5px 9px; border-radius:999px;
  background:var(--w-card, #FFFCF7); color:var(--d-ink, #20272A); font-size:11.5px; font-weight:600; }
.sv-bubble { position:absolute; left:10px; right:10px; top:48px; min-height:100px; z-index:4; border-radius:15px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center;
  padding:10px 8px; background:var(--w-card, #FFFCF7); color:var(--d-ink, #20272A);
  font-size:14px; line-height:1.35; font-weight:500; box-shadow:0 6px 16px rgba(42,51,61,.07); }
.sv-bubble::after { content:''; position:absolute; bottom:-9px; left:26px;
  border-top:10px solid var(--w-card, #FFFCF7); border-right:10px solid transparent; }
.sv-role { display:inline-flex; align-items:center; min-height:22px; padding:3px 9px; border-radius:999px;
  background:var(--d-orangeSoft, #F0DED0); color:var(--d-orange, #B95F34); font-size:10.5px; font-weight:600; }
.daughter .sv-role { background:#E4ECEF; color:var(--d-ink, #20272A); }
.sv-person { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:84px; height:118px; }
.sv-person .h { position:absolute; left:19px; top:0; width:46px; height:46px; border-radius:50%; background:var(--d-ink, #20272A); }
.sv-person .b { position:absolute; left:0; bottom:0; width:84px; height:72px; border-radius:42px 42px 12px 12px; background:var(--d-ink, #20272A); }
.sv-mate { position:absolute; width:35px; height:53px; bottom:24px; z-index:3; }
.daughter .sv-mate { left:8px; } .husband .sv-mate { right:8px; }
.sv-mate::before { content:''; position:absolute; left:8px; top:0; width:19px; height:19px; border-radius:50%; background:var(--d-orange, #B95F34); }
.sv-mate::after { content:''; position:absolute; left:0; bottom:0; width:35px; height:34px; border-radius:18px 18px 5px 5px; background:var(--d-orange, #B95F34); }
.husband .sv-mate::before, .husband .sv-mate::after { background:#8AA096; }
.sv-map { position:absolute; left:50%; bottom:15px; transform:translateX(-50%); width:52px; height:38px; z-index:4;
  border:4px solid #8AA5B3; border-radius:5px; background:var(--w-card, #FFFCF7); }
.sv-map::after { content:''; position:absolute; left:7px; right:7px; top:9px; border-top:2px dashed var(--d-orange, #B95F34); }
.sv-bag { position:absolute; left:11px; bottom:13px; width:25px; height:31px; z-index:4; border-radius:4px;
  background:#8AA096; border-top:4px solid #6C8478; }

/* ② 혼자/둘이 대비 */
.sv-contract { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:auto 0 15px; }
.sv-side { height:min(44vh,300px); border-radius:20px; background:var(--w-card, #FFFCF7);
  border:1px solid var(--w-line, #DED1C0); display:flex; flex-direction:column; align-items:center;
  padding:16px 8px 14px; overflow:hidden; }
.sv-side.duo { border:1.5px solid var(--d-orange, #B95F34); }
.sv-kicker { font-size:12.5px; font-weight:600; color:var(--d-sub, #756E66); text-align:center; word-break:keep-all; }
.sv-solocard { margin:auto; position:relative; }
.sv-solocard img { display:block; width:84px; height:auto; border-radius:10px; box-shadow:0 10px 22px rgba(42,51,61,.16); }
.sv-half { position:absolute; left:0; right:0; bottom:0; height:50%; border-radius:0 0 10px 10px;
  background:rgba(246,236,222,.82); }
.sv-duocards { margin:auto; display:flex; align-items:center; justify-content:center; }
.sv-duocards img { width:70px; height:auto; border-radius:9px; box-shadow:0 10px 20px rgba(42,51,61,.16); }
.sv-duocards img:first-child { transform:rotate(-7deg) translateX(6px); }
.sv-duocards img:last-child { transform:rotate(7deg) translateX(-6px); }
.sv-word { font-size:22px; font-weight:600; letter-spacing:-.5px; }
.solo .sv-word { color:var(--d-sub, #756E66); } .duo .sv-word { color:var(--d-orange, #B95F34); }
.sv-sub { font-size:12px; line-height:1.4; color:var(--d-sub, #756E66); text-align:center; margin-top:3px; }

/* ③ 세 단계 */
.sv-proc { margin:auto 0 16px; position:relative; }
.sv-procline { position:absolute; left:48px; right:48px; top:84px; height:2px; background:var(--d-orangeLine, #D9AF82); }
.sv-procgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; position:relative; }
.sv-pcard { min-height:min(38vh,250px); padding:12px 6px; border-radius:17px; background:var(--w-card, #FFFCF7);
  border:1px solid var(--w-line, #DED1C0); text-align:center; display:flex; flex-direction:column; align-items:center; }
.sv-pn { width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--d-orangeSoft, #F0DED0); color:var(--d-orange, #B95F34); font-size:14px; font-weight:600; }
.sv-part { height:110px; width:100%; display:grid; place-items:center; margin:9px 0; }
.sv-choiceart { width:66px; display:grid; gap:8px; }
.sv-choiceart i { height:27px; border:1.5px solid var(--w-line, #DED1C0); border-radius:7px; background:#fff; }
.sv-choiceart i:last-child { border-color:var(--d-orange, #B95F34); background:var(--d-orangeSoft, #F0DED0); }
.sv-sendart { width:62px; height:96px; border:4px solid var(--d-ink, #20272A); border-radius:13px;
  position:relative; background:var(--w-chip, #F0E6D8); }
.sv-sendart::before { content:''; position:absolute; width:36px; height:48px; border-radius:5px;
  background:var(--d-ink, #20272A); left:9px; top:14px; transform:rotate(-5deg); }
.sv-sendart::after { content:''; position:absolute; right:-16px; top:36px;
  border-left:10px solid var(--d-orange, #B95F34); border-top:7px solid transparent; border-bottom:7px solid transparent; }
.sv-openart { display:flex; align-items:center; justify-content:center; }
.sv-openart img { width:48px; height:auto; border-radius:6px; box-shadow:0 8px 15px rgba(42,51,61,.16); }
.sv-openart img:first-child { transform:rotate(-8deg) translateX(4px); }
.sv-openart img:last-child { transform:rotate(8deg) translateX(-4px); }
.sv-pt { font-size:15px; font-weight:600; color:var(--d-ink, #20272A); }
.sv-pc { font-size:11.5px; line-height:1.45; color:var(--d-sub, #756E66); margin-top:6px; word-break:keep-all; }

/* §5-c 1부 진입 · §6 전환 — 같은 무대, 초점만 반대 */
.sv-answer { height:min(46vh,330px); border-radius:22px; position:relative; overflow:hidden;
  border:1px solid var(--w-line, #DED1C0); }
.sv-answer.mine { background:linear-gradient(180deg,#EDF2F4,#DFE9EC); }
.sv-answer.yours { background:linear-gradient(180deg,#FAF0E2,#F0DFC8); }
/* 진행 확인 칩 = **상태**다 → 오렌지 계열(네이비는 행동 전용 · 절대잠금 7). */
.sv-done { position:absolute; right:11px; top:11px; z-index:5; padding:5px 10px; border-radius:999px;
  background:var(--d-orangeSoft, #F0DED0); color:var(--d-orange, #B95F34);
  font-size:12px; font-weight:800; }
.sv-abubble { position:absolute; left:18px; right:18px; top:50px; min-height:64px; z-index:4; border-radius:15px;
  display:grid; place-items:center; text-align:center; padding:8px 12px; background:var(--w-card, #FFFCF7);
  color:var(--d-ink, #20272A); font-size:15px; line-height:1.35; font-weight:500; box-shadow:0 6px 16px rgba(42,51,61,.07); }
.sv-abubble::after { content:''; position:absolute; bottom:-9px;
  border-top:10px solid var(--w-card, #FFFCF7); border-right:10px solid transparent; }
.sv-answer.mine .sv-abubble::after { left:34%; }
.sv-answer.yours .sv-abubble::after { right:34%; transform:scaleX(-1); }
.sv-choices { position:absolute; left:20px; right:20px; top:130px; z-index:4; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.sv-choice { height:46px; border-radius:11px; border:1.5px solid var(--w-line, #DED1C0); background:var(--w-card, #FFFCF7);
  display:flex; align-items:center; justify-content:center; gap:6px; color:var(--d-sub, #756E66); font-size:13px; font-weight:500; }
.sv-choice::before { content:''; width:10px; height:10px; border:1.5px solid #C3BDB2; border-radius:50%; }
.sv-choice.on { border-color:var(--d-orange, #B95F34); background:var(--d-orangeSoft, #F0DED0); color:var(--d-orange, #B95F34); }
.sv-choice.on::before { border-color:var(--d-orange, #B95F34); background:var(--d-orange, #B95F34); }
.sv-pair { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); width:190px; height:112px; }
.sv-hu { position:absolute; bottom:0; }
.sv-hu .h { position:absolute; border-radius:50%; } .sv-hu .b { position:absolute; bottom:0; border-radius:50% 50% 12px 12px; }
.sv-hu.focus { width:84px; height:110px; z-index:3; }
.sv-hu.focus .h { left:21px; top:0; width:42px; height:42px; } .sv-hu.focus .b { left:0; width:84px; height:70px; }
.sv-hu.mate { width:56px; height:78px; z-index:2; }
.sv-hu.mate .h { left:14px; top:0; width:28px; height:28px; } .sv-hu.mate .b { left:0; width:56px; height:52px; }
.sv-hu.ink .h, .sv-hu.ink .b { background:var(--d-ink, #20272A); }
.sv-hu.orange .h, .sv-hu.orange .b { background:var(--d-orange, #B95F34); }
.sv-answer.mine .sv-hu.focus { left:28px; } .sv-answer.mine .sv-hu.mate { right:26px; }
.sv-answer.yours .sv-hu.mate { left:26px; } .sv-answer.yours .sv-hu.focus { right:28px; }
.sv-hu b { position:absolute; left:50%; top:-20px; transform:translateX(-50%); padding:3px 8px; border-radius:999px;
  background:var(--w-card, #FFFCF7); font-size:10.5px; line-height:1.1; font-weight:600; white-space:nowrap; }
.sv-hu.ink b { color:var(--d-ink, #20272A); } .sv-hu.orange b { color:var(--d-orange, #B95F34); }
.sv-hu.focus::after { content:'답하는 사람'; position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  width:max-content; padding:3px 7px; border-radius:999px; background:var(--w-card, #FFFCF7);
  font-size:9.5px; line-height:1; font-weight:600; }
.sv-hu.ink.focus::after { color:var(--d-ink, #20272A); } .sv-hu.orange.focus::after { color:var(--d-orange, #B95F34); }

/* 좁은 폰 — 무대를 줄여 CTA 가 접히지 않게. 세로 320px 대 기기 대비. */
@media (max-height:700px) {
  .sv-h1 { font-size:23px; }
  .sv-travel, .sv-answer { height:min(40vh,280px); }
  .sv-side { height:min(38vh,262px); }
  .sv-pcard { min-height:min(32vh,214px); }
}

/* 🔴 obv 화면의 보조 요소 — 구 온보딩(.ob2) 전용으로만 스타일이 있어서 새 화면에선 무스타일로
   떨어졌다(「건너뛰고 바로 시작」이 큰 입력창처럼, 크레딧이 본문 크기로). 같은 톤으로 맞춘다. */
.obv .ob-wm { text-align:center; font-size:8px; letter-spacing:2.5px; font-weight:500; color:var(--w-faint, #9C948A); }
.obv .ob-wm-sp { height:12px; }
.obv .ob-skip { display:block; width:auto; margin:12px auto 0; background:none; border:none; font-size:11px;
  color:var(--w-hint, #756E66); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-family:inherit; }
.obv .ob-credit { text-align:center; font-size:9px; line-height:1.5; color:var(--w-faint, #9C948A); margin-top:12px; }
/* 점 인디케이터 — 새 화면의 포인트색(주황)에 맞춘다. 남색 점은 구 팔레트 잔재였다. */
.obv .ob-dot.on { background:var(--d-orange, #B95F34); }
/* CTA 는 안내 박스에 붙지 않는다 — spacer 가 0 이 되는 짧은 화면에서도 숨 쉴 자리를 남긴다. */
.obv .btn-primary { margin-top:14px; }

/* ══ V3 17-3 구색 잔재 일소 — 초대 진입(B) 상태 배지·잠금 줄 ══
   구: 연파랑 배지(#EBF3FE/#0B3D91) + 회청 박스. 신: 크림 + 보조선 + 차콜, 「지금 차례」만 오렌지. */
/* 파일럿 §26-⑤ — 초대받은 사람(B) 첫 화면 최상단 리드인(무슨 상황·뭘 하면 되는지) */
.binvlead { margin:12px 0 2px; padding:12px 14px; border-radius:13px;
  background:var(--w-soft, #F6EFE3); color:var(--d-ink, #20272A);
  font-size:14px; line-height:1.55; word-break:keep-all; }
.invstate { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.invcell { background:var(--w-card,#FFFCF7); border:1px solid var(--d-line,#DED1C0); border-radius:14px;
  padding:11px; text-align:center; font-size:14px; font-weight:600; color:var(--d-sub,#756E66); }
.invcell b { color:var(--d-ink,#20272A); font-weight:800; }
.invcell.now b { color:var(--d-orange,#B95F34); }
.invlock { background:var(--w-card,#FFFCF7); border:1px solid var(--d-line,#DED1C0); border-radius:14px;
  padding:12px; margin-top:8px; font-size:14px; color:var(--d-sub,#756E66); word-break:keep-all; }
.invfine { margin-top:8px; text-align:center; color:var(--d-sub,#756E66); font-size:13px; }