/* ==========================================================================
   커스텀AI 디자인 정본 — canon.css
   ★ 이 파일 하나가 네 화면의 색·글자·카드를 정한다
        랜딩(onsaju.html) · 문항 · 무료 리포트 · 유료 리포트 (diagnose.html)

   ★ 바꿀 일이 생기면 **이 파일만** 고친다 (정본 규칙 7-4-1 —
     증상이 보이는 화면이 아니라 그 화면을 만드는 코드를 고친다).
     화면 쪽 CSS 에 색을 직접 적으면 또 두 벌이 된다.

   출처 — 값은 전부 대표님 시안 PNG(941x1672)에서 픽셀로 뽑았다. 눈대중 아니다
        evidence/redesign/_17-report-design/report-1of5.png ~ 5of5.png

   쓰는 법
        <link rel="stylesheet" href="/assets/canon.css">
        그 다음 아래 클래스만 쓴다. 새 색·새 카드 종류를 만들지 않는다
   ========================================================================== */

/* ── 큰 제목 글꼴 (자체 호스팅 subset · 별도 파일) ────────────────────────
   ★ 큰 제목만 CanonHead(=지마켓 산스 Bold subset).  본문·버튼·설명은 Pretendard 다
   ★ 이 줄을 지우면 제목이 자동으로 Pretendard 로 떨어진다 (깨지지 않는다) */
@import url("canon-head-font.css");

:root{
  /* ── 색 12개 · 시안 실측 hex ──────────────────────────────────────────
     ★ 여기 없는 색을 화면에서 새로 만들지 않는다 */
  --paper:#F6F5F4;        /* 지면 — 아주 옅은 웜그레이. ★ 흰색 아니다 */
  --card:#FEFDFD;         /* 흰 카드 */
  --lav:#F1EFFB;          /* 연라벤더 면 — 아이콘 원 · ✅ 행 · 프롬프트 안쪽 */
  --lav-out:#F4F2FE;      /* 연라벤더 외곽 — 프롬프트 카드 바깥 */
  --lav-pill:#EFECF9;     /* 뱃지 pill (「무료 결과」) */
  --gray-row:#F3F3F4;     /* ❌ 쪽 회색 행 */
  --amber-bg:#FEFAE8;     /* 노랑 배너 면 */
  --amber-hl:#FEEF9E;     /* 노랑 형광 — 제목 마커 밑줄 */
  --amber-pill:#FEF3B4;   /* 노랑 pill — 결과 단어 */
  --purple:#5F2496;       /* ★ 딥퍼플. 붉은 보라다 (푸른 인디고 #5247E0 아님) */
  --red:#F85350;          /* ❌ — ★ 판정에만 */
  --green:#52C14E;        /* ✅ — ★ 판정에만 */

  /* 글자색 · 선 */
  --ink:#1A1730;          /* 제목 — 검정 아닌 아주 어두운 남보라 */
  --ink-body:#3F434B;     /* 본문 */
  --ink-dim:#6B6F78;      /* 보조 설명 */
  --ink-faint:#9A9AA2;    /* 자간 넓힌 라벨 */
  --line:rgba(26,23,48,.09);
  --track:#E0DCE2;        /* 진행바 빈 칸 */

  /* ★ 형광 마커 획 — ★ 랜딩(.hl)과 리포트(.cn .hl)가 ★ 이 한 줄을 같이 본다.
     ★ 각자 gradient 를 적으면 그게 바로 「두 벌」이다 (정본 7-4-1) */
  --hl-marker:linear-gradient(180deg,transparent 70%,var(--amber-hl) 70%,var(--amber-hl) 96%,transparent 96%);

  /* ── 글꼴 ──────────────────────────────────────────────────────────── */
  --f-body:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --f-head:"CanonHead","Pretendard Variable",Pretendard,system-ui,sans-serif;

  /* ── 글자 스케일 (375px 기준) ──────────────────────────────────────── */
  --fs-h1:27px;  --fs-h2:23px;  --fs-lead:21px;
  --fs-body:17px; --fs-sub:14.5px; --fs-label:12px;
  --lh-head:1.3;  --lh-body:1.68;

  /* ── 모양 ─────────────────────────────────────────────────────────── */
  --r:22px; --r-c:16px; --r-s:11px;
  --sh:0 1px 2px rgba(26,23,48,.03), 0 8px 26px rgba(26,23,48,.045);
  --sh-lift:0 2px 6px rgba(26,23,48,.05), 0 18px 46px rgba(26,23,48,.09);
  --sp:18px;      /* 카드 사이 */
  --sp-block:34px;/* 덩어리 사이 */
}

/* ★ 제목 글꼴은 Gmarket 이 Pretendard 보다 글자폭이 넓다.
   ★ 그래서 자간을 한 단 더 조인다. 안 조이면 375px 에서 제목이 한 줄 더 내려간다 */
.cn h1,.cn h2,.cn .cn-h{
  font-family:var(--f-head); font-weight:700;
  letter-spacing:-.045em; line-height:var(--lh-head);
  color:var(--ink); margin:0 0 14px;
  /* ★ 2026-09-16 — 시안은 제목이 **두 줄로 고르게** 갈라진다(다섯 장 전부).
     이게 없으면 375px 에서 「당신이 약점이라고 생각했던 / 것」처럼 마지막 줄에
     글자 하나만 떨어진다(실측). balance 를 모르는 브라우저는 지금까지와 똑같이 흘린다 */
  text-wrap:balance;
}
.cn h1,.cn .cn-h{font-size:var(--fs-h1)}
.cn h2{font-size:var(--fs-h2)}

/* ── 본문 ───────────────────────────────────────────────────────────── */
.cn{
  font-family:var(--f-body); font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--ink-body); letter-spacing:-.02em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
.cn p{margin:0 0 10px}
.cn p:last-child{margin-bottom:0}
.cn b,.cn strong{font-weight:700; color:var(--ink)}
.cn .sub{font-size:var(--fs-sub); color:var(--ink-dim)}
.cn .lead{font-size:var(--fs-lead); font-weight:700; color:var(--ink); line-height:1.45}

/* ★ 형광은 ★ 배경칠이 아니라 ★ 마커로 그은 밑줄이다.
   ★ 글자 뒤를 통째로 칠하면 시안과 달라진다.  한 장에 한 군데만 */
.cn .hl{
  background-image:var(--hl-marker);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:0 .04em; font-style:normal;
}

/* ── 자간 넓힌 라벨 (상단 소제목 · 하단 줄 · 영문) ───────────────────── */
.cn .cn-label{
  font-family:var(--f-body); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.18em; color:var(--ink-faint); margin:0 0 10px;
}

/* ══════════════════════════════════════════════════════════════════════
   페이지 프레임 — ★ 이 넷만 고정해도 네 화면이 「한 벌」로 보인다
   ══════════════════════════════════════════════════════════════════════ */
.pg{background:var(--paper); padding:22px 16px 26px; max-width:760px; margin:0 auto}
.pg-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 16px}
.pg-badge{
  background:var(--lav-pill); color:var(--purple); font-weight:700; font-size:13.5px;
  padding:8px 16px; border-radius:999px; letter-spacing:-.02em; white-space:nowrap;
}
.pg-step{text-align:right; font-size:13px; font-weight:700; color:var(--ink-faint)}
.pg-bar{display:flex; gap:5px; margin-top:7px}
.pg-bar i{display:block; width:22px; height:5px; border-radius:999px; background:var(--track)}
.pg-bar i.on{background:var(--purple)}
.pg-foot{
  border-top:1px solid var(--line); margin-top:26px; padding-top:14px;
  display:flex; justify-content:space-between; gap:14px;
  font-size:11.5px; letter-spacing:.16em; color:var(--ink-faint);
}
/* 제목 오른쪽 옅은 원형 blob — 장식.  ★ 글자를 가리면 안 된다
   ★ .pg-head 에 overflow:hidden 을 걸면 blob 이 **네모로 잘려** 회색 상자로 보인다 (375px 실측).
     ★ 자르는 곳은 머리통이 아니라 **지면 가장자리**다.  시안도 페이지 밖으로 흘러나간 원이다 */
.pg{position:relative; overflow:hidden}
.pg-blob{position:absolute; right:-56px; top:-46px; width:210px; height:210px;
  border-radius:50%; background:rgba(26,23,48,.035); pointer-events:none; z-index:0}
.pg-head{position:relative}
.pg-head>*:not(.pg-blob){position:relative; z-index:1}

/* ══════════════════════════════════════════════════════════════════════
   카드 여섯 종 — ★ 이게 전부다.  ★ 일곱 번째를 만들지 않는다
   ══════════════════════════════════════════════════════════════════════ */
.cn .c{background:var(--card); border-radius:var(--r); padding:20px 18px;
       box-shadow:var(--sh); margin:0 0 var(--sp)}

/* ① 인용 카드 — 사용자가 스스로 하던 말
   ★ 세로바를 border-left 로 주면 카드 radius 를 따라 휘어 초승달이 된다 (375px 실측).
     ★ 카드 안쪽에 곧은 막대로 넣는다 */
.cn .c-quote{position:relative; padding:20px 18px 20px 30px}
.cn .c-quote::before{
  content:""; position:absolute; left:18px; top:22px; bottom:22px;
  width:5px; border-radius:3px; background:var(--purple);
}
.cn .c-quote p{
  font-family:var(--f-head); font-weight:700; letter-spacing:-.04em;
  font-size:21px; line-height:1.5; color:var(--purple); margin:0;
}

/* ② 아이콘 카드 — 해석 · 결론 */
.cn .c-icon{display:flex; gap:16px; align-items:flex-start}
.cn .c-icon .bd{flex:1; min-width:0}

/* ③ 노랑 배너 — 그 장의 핵심 한 문장 */
.cn .c-banner{
  background:var(--amber-bg); box-shadow:none; display:flex; gap:14px; align-items:center;
}
.cn .c-banner .bd{font-family:var(--f-head); font-weight:700; letter-spacing:-.04em;
  font-size:19px; line-height:1.45; color:var(--ink)}

/* ④ ❌/✅ 비교 블록 — 잘못된 흐름 → 바꿀 흐름 */
.cn .c-vs .cap{font-size:13px; font-weight:700; color:var(--ink-dim); margin:0 0 7px}
.cn .c-vs .cap.good{color:var(--purple); letter-spacing:.02em}
.cn .c-vs .row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-radius:var(--r-c); padding:14px 16px; margin:0 0 14px;
  font-family:var(--f-head); font-weight:700; letter-spacing:-.04em;
  font-size:18px; line-height:1.4; color:var(--ink);
}
.cn .c-vs .row:last-child{margin-bottom:0}
.cn .c-vs .row.bad{background:var(--gray-row)}
.cn .c-vs .row.good{background:var(--lav)}
.cn .c-vs .mk{flex:none; font-size:20px; line-height:1}

/* ⑤ 프롬프트 카드 — 바로 써먹는 AI 지시 */
.cn .c-prompt{background:var(--lav-out); box-shadow:none}
.cn .c-prompt .hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px;
  font-size:14px; font-weight:700; color:var(--purple);
}
.cn .c-prompt .copy{
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--purple);
  padding:6px 14px; cursor:pointer;
}
.cn .c-prompt .say{
  background:var(--card); border-radius:var(--r-c); padding:15px 16px; margin:0;
  font-size:16px; line-height:1.65; color:var(--ink);
}

/* ⑥ 번호 리스트 — 남은 것 열거
   ★ 2026-09-16 · 시안 report-5of5.png 과 맞춤 (대표님 — "가독성 눈에 확 안 띄어")
     시안: 큰 라벤더 동그라미 숫자  │ 세로 구분선 │ 굵은 첫 마디 + 이어지는 설명
     고치기 전: 작은 동그라미 + **전부 같은 회색 한 줄** → 눈에 걸리는 데가 없었다 */
.cn .c-num ol{list-style:none; margin:0; padding:0}
.cn .c-num li{display:flex; gap:15px; align-items:stretch; padding:15px 0;
  border-bottom:1px solid var(--line)}
.cn .c-num li:last-child{border-bottom:0; padding-bottom:0}
.cn .c-num li:first-child{padding-top:0}
.cn .c-num .n{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--lav); color:var(--purple);
  font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
/* 시안의 세로 구분선. ★ 숫자와 글 사이에만 선다 */
.cn .c-num li>div{flex:1; min-width:0; padding-left:15px; border-left:1px solid var(--line);
  font-size:16.5px; line-height:1.6; color:var(--ink-dim)}
/* 첫 마디 — 엔진이 굵게 쓴 곳만. ★ 화면이 임의로 고르지 않는다 */
.cn .c-num li>div b{color:var(--ink); font-weight:700; font-size:17px}

/* ══════════════════════════════════════════════════════════════════════
   공식 스트립 — 이 서비스의 시그니처
   「강점 + 강점 → 약점」.  ★ 문장으로 풀어 쓰지 않는다
   ══════════════════════════════════════════════════════════════════════ */
.cn .c-formula{
  background:var(--amber-bg); box-shadow:none;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--f-head); font-weight:700; letter-spacing:-.04em;
  font-size:19px; color:var(--ink);
}
.cn .c-formula .out{
  background:var(--amber-pill); border-radius:999px; padding:7px 18px;
}
.cn .tag{background:var(--amber-pill); border-radius:999px; padding:4px 13px;
  font-weight:700; font-size:15px; color:var(--ink); display:inline-block}

/* ══════════════════════════════════════════════════════════════════════
   아이콘 — ★ 라벤더 원 안 ★ 보라 선아이콘.  ★ 원 밖에 놓지 않는다
   ★ ✨만 노랑 원.  ★ 감정 이모지(😀 🔥 ⭐ 👍)는 ★ 한 개도 쓰지 않는다
   ★ 한 장에 아이콘 원 3~4개까지
   ══════════════════════════════════════════════════════════════════════ */
.cn .ic{
  flex:none; width:54px; height:54px; border-radius:50%;
  background:var(--lav); display:flex; align-items:center; justify-content:center;
}
.cn .ic svg{width:27px; height:27px; display:block;
  fill:none; stroke:var(--purple); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.cn .ic.amber{background:var(--amber-pill)}
.cn .ic.amber svg{fill:var(--ink); stroke:none}
.cn .ic.sm{width:40px; height:40px}
.cn .ic.sm svg{width:19px; height:19px}
/* ❌ 쪽 좌측 원만 예외 — 연분홍 (시안 3of5) */
.cn .ic.bad{background:#FDEDEC}
.cn .ic.bad svg{stroke:#E0625F}

/* ══════════════════════════════════════════════════════════════════════
   버튼 — ★ 검정 버튼 금지.  ★ 딥퍼플 하나다
   ══════════════════════════════════════════════════════════════════════ */
.cn .btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:var(--purple); color:#fff; font-family:var(--f-body);
  font-weight:700; font-size:16.5px; letter-spacing:-.02em;
  padding:16px 18px; border:0; border-radius:14px; cursor:pointer;
  box-shadow:0 6px 18px rgba(95,36,150,.22);
}
.cn .btn.ghost{background:var(--card); color:var(--purple); border:1.5px solid var(--lav-pill); box-shadow:none}

/* ══════════════════════════════════════════════════════════════════════
   ★ 리듬 — 눈으로 안 보이는 규칙이라 여기 적어 둔다 (인계서 5절과 같은 내용)
     금지  본문 → 본문 → 본문
     금지  흰 카드 3연속            ★ 같은 종류 2연속까지
     금지  모든 중요한 문장을 bold
     금지  보라색으로만 강조
     금지  HTML table 을 그대로 보여주기
     금지  설명 먼저 · 결론 마지막
     항상  결론/깨달음 → 짧은 이유 → 실제 장면 → 바로 쓸 행동
     ★ 본문 한 문단 최대 2~3줄.  4줄 넘으면 카드 · 도식 · 강조문으로 쪼갠다
   ══════════════════════════════════════════════════════════════════════ */

/* 데스크톱에서는 글자만 한 단 키운다. 레이아웃은 그대로 */
@media (min-width:768px){
  :root{--fs-h1:36px; --fs-h2:29px; --fs-lead:24px; --fs-body:18px; --fs-sub:15.5px}
  .pg{padding:32px 28px 36px}
  .cn .c{padding:26px 24px}
}