/* 사람유형 — 목업 확정안(A+C)의 팔레트·서체를 그대로 옮긴 것. */
:root {
  --bg: #efeff1;
  --paper: #fff;
  --ink: #20222c;
  --dim: #7a7d8a;
  --line: #e2e2e7;
  --mark: #d9443c;
  --mark-soft: #fbe9e7;
  --teal: #2c6a60;
  --teal-soft: #e2edea;
  --sand: #e8d9b8;
  --f-display: "Black Han Sans", "IBM Plex Sans KR", sans-serif;
  --f-body: "IBM Plex Sans KR", "Malgun Gothic", sans-serif;

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리킨다(DESIGN.md '토큰').
     실측(2026-10-16): --ink 흰 바탕 15.8:1 · #5f6270 흰 바탕 6.1:1 / --bg 위 5.3:1 ·
     --mark #d9443c 위 흰 글자 4.3:1(4.5 미달)이라 주 버튼은 한 단계 짙은 #c0362f(흰 글자 5.5:1). */
  --fb-bg: var(--bg);
  --fb-surface: var(--paper);
  --fb-ink: var(--ink);
  --fb-muted: #5f6270;
  --fb-line: var(--line);
  --fb-accent: #c0362f;
  --fb-on-accent: #fff;
  --fb-display: var(--f-display);
  --fb-display-weight: 400; /* Black Han Sans 는 굵기가 하나뿐 */
  --fb-max: 960px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mark); }
img { max-width: 100%; }

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* 머리말 — 틀은 fb.css 의 .fb-nav. 여기서는 글자 로고만 */
.mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.mark b { color: var(--mark); font-weight: 400; }
.page { padding-block: 40px 56px; }

/* 버튼 */
/* 기존 .btn 은 fb-btn 과 같은 알약 모양으로(화면 템플릿 수십 곳의 class 를 그대로 둔다) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  background: var(--fb-accent);
  color: #fff;
  border: 1px solid var(--fb-accent);
  border-radius: 999px;
  padding: 0 26px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--fb-accent) 30%, transparent);
}
.btn--ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, transparent); box-shadow: none; }

/* 히어로 */
.kicker { font-size: 12px; letter-spacing: 0.12em; color: var(--dim); margin: 0; }
.hero__h {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 10px 0 14px;
  text-wrap: balance;
}
.hero--sm .hero__h { font-size: clamp(26px, 6vw, 36px); }
.hero__p { margin: 0; max-width: 62ch; color: var(--dim); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* 구역 */
.sec { margin-top: 44px; }
.sec__t { font-size: 18px; margin: 0 0 4px; }
.sec__d { color: var(--dim); font-size: 14px; margin: 0 0 16px; max-width: 62ch; }

/* 16유형 카드 */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 휴대폰은 폭에 상관없이 두 개씩. auto-fill 로 두면 360px 기기(국내에 흔하다)에서
     한 줄에 하나로 떨어진다 — 168*2+10 = 346 > 320(본문 폭). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}
/* 그림이 카드를 통째로 채우고, 네 글자 코드와 이름은 아래 띠에 얹는다.
   유형 대표색은 인라인 style 로 --tc 만 넘기고 쓰임새는 여기서 정한다
   (16색을 CSS 에 박아 두면 types.py 와 두 곳에서 관리하게 된다). */
.tcard a {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  border-top: 4px solid var(--tc, var(--line));
  border-radius: var(--fb-r-m);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}
.tcard a:hover { box-shadow: 0 0 0 2px var(--mark); }
.tcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg);
}
/* 띠는 검정이 아니라 유형색 30% 를 섞은 불투명색이다 — 유형마다 색감이 다르게 읽힌다.
   color-mix 를 모르는 브라우저는 바로 위 중립색 선언을 쓴다. */
.tcard__cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 11px 11px;
  border-top: 2px solid var(--tc, var(--line));
  background: #12141a;
  background: color-mix(in srgb, var(--tc, #20222c) 30%, #000);
}
/* 형광색은 types.py 의 NEON 이 인라인 --tcn 으로 넘어온다 — 대표색에서 CSS 로
   계산하지 않는다. 채도를 일률적으로 올리면 회색에 가까운 유형(ISTP 등)이
   엉뚱한 하늘색이 되기 때문이다(근거는 types.py 주석).
   color-mix 를 모르는 브라우저는 번짐만 빠지고 글자색은 그대로다. */
.tcard__code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--tcn, #fff);
  text-shadow: 0 0 8px color-mix(in srgb, var(--tcn, #fff) 80%, transparent),
               0 0 18px color-mix(in srgb, var(--tcn, #fff) 45%, transparent);
}
.tcard__name {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}

/* 캐릭터 (상세·결과) */
.char {
  display: block;
  width: 220px;
  max-width: 60%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--paper);
  margin: 18px 0 24px;
}
.slotbox {
  background: repeating-linear-gradient(135deg, var(--line) 0 6px, transparent 6px 12px);
  border: 1px dashed #b9bcc6;
  border-radius: 6px;
  color: #8b8e99;
  font-size: 12px;
  text-align: center;
  padding: 34px 12px;
  margin: 20px 0 26px;
}

/* 문서·유형 상세 */
.doc h1, .doc__h {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(27px, 6vw, 36px);
  margin: 6px 0 8px;
  letter-spacing: -0.01em;
}
.doc__lead { color: var(--dim); margin: 0; }
/* 유형 상세에서도 대표색을 쓴다 — 코드(kicker)와 캐릭터 테두리. 값은 인라인 --tc 로 온다. */
.doc .kicker { color: var(--tc, var(--dim)); font-weight: 700; letter-spacing: 0.08em; }
.char { border: 3px solid var(--tc, var(--line)); }
.doc h2 {
  font-size: 17px;
  margin: 32px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc p, .doc li { max-width: 68ch; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin-bottom: 7px; }
.doc__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* 검사 */
.alert {
  background: var(--mark-soft);
  border-left: 3px solid var(--mark);
  padding: 12px 14px;
  margin: 0 0 22px;
  font-size: 14px;
}
.quiz { margin-top: 26px; }
.q {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--fb-r-m);
  padding: 18px;
  margin: 0 0 14px;
}
.q--missing { border-color: var(--mark); background: var(--mark-soft); }
.q legend { font-weight: 600; line-height: 1.5; padding: 0; margin-bottom: 12px; }
.q__no { display: inline-block; min-width: 26px; color: var(--mark); font-size: 13px; }
/* 보기 선택지는 label 이라 탭 대상이다 — 한 줄일 때 계산 높이가 41.75px 로 44px 에 모자랐다.
   min-height 대신 세로 패딩을 2px 키운다(45.75px): align-items 가 flex-start 라
   min-height 를 주면 한 줄짜리 보기에서 글자가 위로 붙고 아래만 22px 비게 된다. */
.opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 11px;
  border: 1px solid var(--line);
  border-radius: var(--fb-r-s);
  margin-bottom: 7px;
  font-size: 14.5px;
  line-height: 1.5;
  background: var(--bg);
  cursor: pointer;
}
.opt:has(input:checked) { border-color: var(--mark); background: var(--mark-soft); }
.opt input { margin-top: 5px; flex: none; accent-color: var(--mark); }
.quiz__submit { margin: 26px 0 0; }

/* 결과 */
.res__h {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 44px);
  margin: 8px 0 6px;
  letter-spacing: -0.01em;
}
.res__line { color: var(--dim); margin: 0; }
.res__blurb { margin: 0 0 8px; max-width: 62ch; }
/* 결과 화면의 소제목은 .sec 래퍼(margin-top: 44px) 없이 본문에 바로 놓여 위 여백이 0 이었다 —
   위 8px / 아래 4px 이면 제목이 어느 덩어리의 것인지 안 읽힌다(UIUX.md "Proximity"). */
.res .sec__t { margin-top: 32px; }
.res__note { margin-top: 28px; font-size: 13px; color: var(--dim); max-width: 62ch; }
.bars { list-style: none; margin: 0 0 8px; padding: 0; }
.bar {
  display: grid;
  grid-template-columns: 20px 1fr 20px auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 13px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.bar__track {
  position: relative;
  height: 7px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.bar__track i { display: block; height: 100%; background: var(--mark); }
.bar__v { color: var(--ink); font-weight: 600; }

/* 궁합 — 고르기 */
.picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  background: var(--teal-soft);
  border-radius: var(--fb-r-m);
  padding: 18px;
  margin-top: 24px;
}
.picker__f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; }
.picker__l { font-size: 12px; color: var(--dim); letter-spacing: 0.06em; }
.picker select {
  font-family: var(--f-body);
  font-size: 15px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.picker__x { font-family: var(--f-display); font-size: 20px; color: var(--dim); padding-bottom: 8px; }
.picker .btn { background: var(--teal); border-color: var(--teal); }

/* 궁합 — 전체 목록 */
.plist { list-style: none; margin: 0; padding: 0; }
.plist__i { border-bottom: 1px solid var(--line); }
.plist__i a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  text-decoration: none;
  color: var(--ink);
}
.plist__i a:hover { background: var(--paper); }
/* 읽을거리 목록은 2열(제목·날짜)이다. 궁합 목록(3열)과 같은 .plist 를 쓰되 열만 바꾼다. */
.plist--story .plist__i a { grid-template-columns: 1fr auto; }
.plist--story .plist__s { font-size: 15px; color: var(--ink); font-weight: 600; }
.plist__c { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--mark); }
.plist__s { font-size: 13.5px; color: var(--dim); }
.plist__n {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* 궁합 — 조합 상세 */
.pair__h {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 44px);
  margin: 8px 0 4px;
  letter-spacing: 0.01em;
}
.pair__x { color: var(--dim); }
.pair__names { margin: 0 0 20px; color: var(--dim); font-size: 14.5px; }
.pair__names a { color: var(--ink); }
.pair__note { font-size: 13px; color: var(--dim); max-width: 62ch; margin: 12px 0 0; }
.scorebox {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--ink);
  color: #fff;
  border-radius: var(--fb-r-m);
  padding: 18px 20px;
}
.scorebox__n {
  font-family: var(--f-display);
  font-size: 40px;
  line-height: 1;
  color: var(--sand);
}
.scorebox__n small { font-size: 18px; margin-left: 2px; }
.scorebox__s { font-size: 15px; color: #dfe1e6; }

.scene { margin-top: 38px; }
.scene__t {
  font-size: 17px;
  margin: 0 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.bubbles { display: flex; flex-direction: column; gap: 9px; }
.bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 14.5px;
  line-height: 1.55;
}
.bubble--l { background: var(--teal-soft); border-bottom-left-radius: 3px; align-self: flex-start; }
.bubble--r { background: var(--mark-soft); border-bottom-right-radius: 3px; align-self: flex-end; }
.bubble__w {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--dim);
  margin-bottom: 2px;
}
.bubble__t { display: block; }

/* 꼬리말 — 틀은 fb.css 의 .fb-foot */
.foot__note { margin: 0 0 6px; max-width: 68ch; }

:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

@media (max-width: 520px) {
  .plist__i a { grid-template-columns: 92px 1fr auto; }
  .plist__s { display: none; }
}

/* 쿠팡 파트너스 칸(intype/coupang.py) — 이 사이트 토큰만 쓴다(새 색 없음, 사진 바탕 #fff 만 리터럴). */
.cpn { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.cpn__h { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
/* 대가성 문구는 법적 고지라 --dim(흰 바탕 4.1:1)보다 진하게 — #5f6270 은 흰 바탕 6.2:1 */
.cpn__d { margin: 4px 0 8px; font-size: 12px; color: #5f6270; }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--line); }
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 0; }
.cpn__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: 8px; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: #5f6270; font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--mark); font-size: 14px; font-weight: 700; }
.cpn--top { margin: 12px 0 16px; padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 14px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 48px; height: 48px; }
.cpn--top .cpn__n { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}