/* 3분 성향 체크 — 새 옷 (2026-09-07 대표 확정, /lab/type-saju-sian/ 의 세 화면)
   문항·채점·결제 흐름은 그대로고 옷만 갈아입는다. 색은 theme.css 토큰만 참조한다.
   기존 규칙(pages.css)을 덮으므로 선택자를 같은 깊이 이상으로 둔다. */

/* ── 문항 화면 ───────────────────────────────────────────────────────── */
.test-shell { padding: 22px 0 80px; }
.test-top .progress-meta { font: 700 11.5px/1.6 "Noto Sans KR", sans-serif; letter-spacing: .08em; color: var(--jb-ink-faint); }
.test-top .progress-track { height: 6px; border-radius: 3px; background: var(--jb-paper-3); }
.test-top .progress-track span { background: var(--jb-brick); }

/* 상자 — 선 한 겹, 음영 없음(2026-09-11 대표 확정). 이 두 칸만 흰 카드에
   그림자(0 8px 28px)를 지고 있어 사이트에서 혼자 떠 보였다. */
.intro-card, .question-card {
    background: var(--jb-card-warm);
    border: 1.5px solid var(--jb-line-3);
    border-radius: 20px;
    padding: 26px 20px 28px;
    box-shadow: none;
    text-align: center;
}

/* 머리 — 그림과 제목을 나란히. 안내 화면 넷(평생사주·연도별·궁합·대운)과 같은
   짜임이다. 옛 규칙(webtoon.css)이 높이 360px 에 음수 여백으로 화면 폭을 채운
   그림 띠를 만들므로 그 셋을 먼저 푼다. */
.intro-card .wt-type-intro-art {
    position: static;
    height: auto;
    overflow: visible;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 14px;
}
/* 카드 만들기(2026-09-16) — 가로 그림을 제목 위에 넓게, 제목 아래 「카드 만들기」 작게 */
.intro-card .wt-type-intro-art { flex-direction: column; gap: 6px; }
.intro-card .wt-type-intro-art img { width: clamp(200px, 56vw, 280px); height: auto; flex: 0 0 auto; object-fit: contain; mix-blend-mode: multiply; }
.intro-card .wt-type-intro-art h1 { text-align: center; }
.intro-card .wt-type-intro-art h1 small { display: block; font-size: .58em; color: var(--jb-brick); -webkit-text-stroke: .3px currentColor; margin-top: 2px; }
.intro-card .wt-type-intro-art .wt-bubble { display: none; }
.intro-card .wt-type-intro-art h1 {
    margin: 0;
    font: 400 clamp(28px, 7vw, 36px)/1.25 "Gowun Dodum", serif;
    letter-spacing: -.01em;
    /* 고운돋움에는 굵은 획이 없다. 획을 한 겹 더 그려 굵기를 낸다. */
    -webkit-text-stroke: .4px currentColor;
}

.intro-card .type-lead {
    max-width: 26em;
    margin: 0 auto 12px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--jb-ink-soft);
    text-wrap: balance;
}

/* 「무료」 — 단추를 누르기 전에 값이 없다는 것을 알린다. 안내 화면의
   「여기까지는 무료예요」와 같은 옷이고, 제 줄에 선다. */
.intro-card .type-free {
    display: block;
    width: fit-content;
    margin: 0 auto 18px;
    padding: 4px 13px;
    border: 1.5px solid var(--jb-line-2);
    border-radius: 999px;
    background: var(--jb-paper-2);
    color: var(--jb-wood-deep);
    font-size: 13px;
    font-weight: 700;
}

.intro-card .type-note {
    max-width: 27em;
    margin: 12px auto 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--jb-ink-faint);
}
.intro-card .wt-cta-button, .type-result-cta {
    display: inline-block; width: auto; min-width: 164px;
    /* 톤 정돈 3차(2026-09-10) — 검정 단추를 벽돌빛으로. 누르는 것은 한 색이다 */
    background: var(--jb-brick); color: var(--c-white); border: 1.5px solid var(--jb-brick-deep); border-radius: 99px;
    padding: 11px 22px; font: 700 14px/1.4 "Noto Sans KR", sans-serif; margin-top: 18px;
}

.question-card .question-number {
    font: 700 11.5px/1.6 "Noto Sans KR", sans-serif; letter-spacing: .08em; color: var(--jb-ink-faint);
    text-transform: uppercase; margin: 0 0 10px;
}
.question-card h2 {
    font: 400 clamp(21px, 5vw, 26px)/1.5 "Gowun Dodum", serif;
    min-height: 0; max-width: 520px; margin: 0 auto 22px; letter-spacing: 0;
}
.question-card .scale-labels { font: 400 12px/1.6 "Noto Sans KR", sans-serif; color: var(--jb-ink-faint); margin: 0 auto 6px; max-width: 360px; }
.answer-scale { max-width: 360px; margin: 0 auto 6px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 6px; }
.answer-choice {
    --choice-color: var(--c-ink);
    width: var(--choice-size, 40px); height: var(--choice-size, 40px);
    margin: 0 auto; display: block;
    border: 2px solid var(--jb-ink-faint); border-radius: 50%; background: var(--c-white);
    color: transparent; font-size: 0; box-shadow: none; transition: transform 120ms ease, background 120ms ease;
}
.answer-choice[data-value="-2"], .answer-choice[data-value="2"] { --choice-size: 42px; }
.answer-choice[data-value="-1"], .answer-choice[data-value="1"] { --choice-size: 34px; }
.answer-choice.neutral { --choice-size: 26px; }
.answer-choice:hover, .answer-choice:focus-visible { transform: scale(1.08); border-color: var(--c-ink); background: var(--c-white); }
.answer-choice.is-selected, .answer-choice.neutral.is-selected { background: var(--jb-brick); border-color: var(--jb-brick); color: transparent; }
.question-card .test-controls { margin-top: 18px; }
.question-card .test-controls .text-button { color: var(--c-ink-soft); font-weight: 700; }



/* ══ 무료 성향 결과 (2026-09-10 대표 확정 시안 c1d813cc) ═══════════════════
   옛 상담문(`wt-`)의 옷을 한 겹도 물려받지 않는다. 덧칠로 덮으면 안 덮은 자리로
   옛 것이 새어 나온다 — 먹빛 판, 검정 2px 테두리, 흰 글자가 그렇게 새어 나왔다.
   이 절 하나가 무료 화면의 옷 전부다. */
.tr-free { display: grid; gap: 14px; }

.tr-head {
    padding: 26px 20px 22px;
    border: 1.5px solid var(--jb-line-3);
    border-radius: 20px;
    background: var(--jb-card-warm);
    text-align: center;
}
.tr-when { margin: 0 0 6px; color: var(--jb-ink-faint); font: 700 12px/1.5 "Noto Sans KR", sans-serif; letter-spacing: .06em; }
.tr-code { margin: 0; color: var(--jb-brick); font: 400 52px/1 "Gowun Dodum", serif; letter-spacing: .04em; }
.tr-type { margin: 8px 0 0; color: var(--jb-ink); font: 700 16px/1.4 "Noto Sans KR", sans-serif; }
.tr-line { max-width: 22em; margin: 8px auto 0; color: var(--jb-ink-soft); font-size: 13.5px; line-height: 1.75; }
.tr-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
/* 공유하기 — 시안 화면 3 에는 없지만 무료 화면이 이 사이트의 바이럴 입구다.
   옛 머리를 걷으면서 같이 사라지게 두지 않았다. 무게는 글자 단추로 낮춘다. */
.tr-share {
    margin: 16px auto 0;
    padding: 8px 4px;
    border: 0;
    border-bottom: 2px solid var(--jb-line-2);
    background: none;
    color: var(--jb-wood-deep);
    cursor: pointer;
    font: 700 13px/1.4 "Noto Sans KR", sans-serif;
}
.tr-share:focus-visible { outline: 3px solid var(--jb-brick); outline-offset: 3px; }
.tr-share-status { margin: 10px 0 0; color: var(--jb-ink-faint); font-size: 12px; line-height: 1.7; }

.tr-keywords span {
    padding: 4px 11px;
    border: 1.5px solid var(--jb-line-2);
    border-radius: 999px;
    background: var(--jb-paper-2);
    color: var(--jb-wood-deep);
    font: 700 12px/1.4 "Noto Sans KR", sans-serif;
}

.tr-card {
    padding: 20px 18px;
    border: 1.5px solid var(--jb-line-3);
    border-radius: 20px;
    background: var(--jb-card-warm);
    text-align: left;
}
.tr-card h2 {
    margin: 0 0 16px;
    color: var(--jb-ink);
    font: 400 19px/1.4 "Gowun Dodum", serif;
    -webkit-text-stroke: .4px currentColor;
}

/* 막대 넷 — 고른 쪽으로 찬다. 두 끝에 반대편과 고른 쪽 이름을 적는다. */
.tr-bars { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tr-bars > li { display: grid; gap: 5px; }
.tr-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tr-bar-head b { color: var(--jb-ink); font-size: 14.5px; font-weight: 700; }
.tr-bar-head i {
    flex: 0 0 auto;
    color: var(--jb-wood-deep);
    font-size: 13px; font-style: normal; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tr-bar { display: block; overflow: hidden; height: 7px; border-radius: 999px; background: var(--jb-paper-3); }
.tr-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--jb-wood); }
.tr-bar-ends { display: flex; justify-content: space-between; gap: 10px; }
.tr-bar-ends em { color: var(--jb-ink-faint); font-size: 11.5px; font-style: normal; }

/* 「이런 순간」 셋 — 고르는 칸이 아니라 읽는 줄이다. */
.tr-moments { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tr-moments > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.tr-moments i {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--jb-chip);
    color: var(--jb-wood-deep);
    font: 700 12px/1 "Noto Sans KR", sans-serif; font-style: normal;
}
.tr-moments span { color: var(--jb-ink); font-size: 13.5px; line-height: 1.7; }

.tr-strengths { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tr-strengths > li {
    display: grid; gap: 4px;
    padding: 13px 14px;
    border: 1.5px solid var(--jb-line-3);
    border-radius: 14px;
    background: var(--jb-paper-2);
}
.tr-strengths b { color: var(--jb-ink); font-size: 13px; font-weight: 700; }
.tr-strengths span { color: var(--jb-ink-soft); font-size: 13px; line-height: 1.7; }

.tr-edge { margin: 4px 0 0; text-align: center; color: var(--jb-ink-faint); font-size: 13px; }
.tr-edge b { color: var(--jb-brick); font-weight: 700; }

/* 사주로 잇는 칸 — 이 화면이 파는 자리다. */
.tr-join {
    padding: 20px 18px;
    border: 1.5px solid var(--jb-line-2);
    border-radius: 20px;
    background: var(--jb-paper-2);
    text-align: left;
}
.tr-join-eyebrow { margin: 0 0 6px; color: var(--jb-brick); font: 700 12px/1.4 "Noto Sans KR", sans-serif; letter-spacing: .04em; }
.tr-join h2 { margin: 0 0 10px; color: var(--jb-ink); font: 400 20px/1.4 "Gowun Dodum", serif; -webkit-text-stroke: .4px currentColor; }
.tr-join-copy { margin: 0 0 16px; color: var(--jb-ink-soft); font-size: 13.5px; line-height: 1.8; }
.tr-join-pair { display: grid; grid-template-columns: 1fr 20px 1fr; gap: 8px; align-items: center; margin-bottom: 16px; }
.tr-join-pair span {
    display: grid; gap: 2px;
    padding: 12px 10px;
    border: 1.5px solid var(--jb-line-3);
    border-radius: 14px;
    background: var(--jb-card-warm);
    text-align: center;
}
.tr-join-pair b { color: var(--jb-ink); font-size: 13.5px; font-weight: 700; }
.tr-join-pair small { color: var(--jb-ink-faint); font-size: 11.5px; }
.tr-join-pair i { color: var(--jb-ink-faint); font-size: 15px; font-style: normal; text-align: center; }
.tr-join-cta {
    display: block;
    padding: 14px 18px;
    border: 1.5px solid var(--jb-brick-deep);
    border-radius: 999px;
    background: var(--jb-brick);
    color: var(--c-white);
    font: 700 15px/1.4 "Noto Sans KR", sans-serif;
    text-align: center;
    text-decoration: none;
}
.tr-join-cta:focus-visible { outline: 3px solid var(--jb-brick-deep); outline-offset: 3px; }
.tr-join-note { margin: 10px 0 0; text-align: center; color: var(--jb-ink-faint); font-size: 12px; }

/* 답변 바꾸기 — 무료·유료가 함께 쓴다. 카드 옷은 위와 같고 안쪽은 `pages.css`. */
.tr-card.answer-review { margin-top: 14px; }
.tr-edit-note { margin: -8px 0 12px; color: var(--jb-ink-soft); font-size: 12.5px; line-height: 1.75; }

/* 3분 성향 체크의 프로필 칸 — 칩과 시작 단추 사이에서 제 숨통을 갖는다. */
.intro-card .wallet-profile-picker { margin: 4px 0 0; text-align: left; }

/* 「프로필 추가하기」는 곁길이다 — 폭을 가득 채우지 않고 글자만큼만 잡는다.
   가득 차 있으면 바로 아래 「무료로 시작하기」와 두 덩이가 맞붙어 보인다. */
.intro-card .profile-add-button {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 10px 0 0;
    padding: 9px 22px;
    font-size: 12.5px;
}


/* ── 마지막 확인 자리 (2026-09-11 대표 확정 ④) ─────────────────────────────
   스물네 개를 다 넣은 뒤, 결과를 만들기 전에 한눈에 보고 고치는 유일한 자리다. */
.tq-review {
    padding: 24px 18px 22px;
    border: 1.5px solid var(--jb-line-3);
    border-radius: 20px;
    background: var(--jb-card-warm);
    text-align: left;
    box-shadow: none;
}

.tq-review h2 {
    margin: 0 0 6px;
    color: var(--jb-ink);
    font: 400 24px/1.3 "Gowun Dodum", serif;
    -webkit-text-stroke: .4px currentColor;
    text-align: center;
}

.tq-review-note {
    margin: 0 0 18px;
    color: var(--jb-ink-soft);
    font-size: 13px;
    line-height: 1.75;
    text-align: center;
}

.tq-review-list { display: grid; gap: 0; margin: 0 0 18px; padding: 0; list-style: none; }

.tq-review-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    width: 100%;
    gap: 4px 10px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--jb-line-3);
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.tq-review-list li:last-child .tq-review-row { border-bottom: 0; }

.tq-review-row i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--jb-chip);
    color: var(--jb-wood-deep);
    font: 700 11.5px/1 "Noto Sans KR", sans-serif;
    font-style: normal;
}

.tq-review-row span { color: var(--jb-ink); font-size: 13.5px; line-height: 1.6; }

.tq-review-row b {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    color: var(--jb-wood-deep);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.tq-review-row:hover span, .tq-review-row:focus-visible span { color: var(--jb-brick); }
.tq-review-row:focus-visible { outline: 3px solid var(--jb-brick); outline-offset: 2px; }
.tq-review .wt-cta-button { display: block; width: 100%; min-width: 0; margin-top: 0; }

/* ── 성향 카드(2026-09-16) — 결과 첫 줄이 카드다. 검사 끝나는 순간 카드가 먼저 크게 뜨고 「사진에 저장」이 바로 붙는다 ── */
.tr-typecard {
    display: grid; justify-items: center; gap: 12px; text-align: center;
    margin: 0 auto 18px; padding: 0 0 18px;
    border-bottom: 1px dashed rgba(94, 66, 39, .3);
}
.tr-typecard-img {
    width: min(210px, 62vw); height: auto; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: 12px; box-shadow: 0 10px 22px rgba(94, 66, 39, .32), 0 2px 4px rgba(94, 66, 39, .18); background: #FBEBD2;
}
.tr-typecard-side { min-width: 0; width: 100%; }
.tr-typecard-side > b { display: block; font: 700 15px/1.4 "Noto Sans KR", sans-serif; color: var(--jb-ink); }
.tr-typecard-side > small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--jb-ink-soft); }
.tr-typecard-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.tr-typecard-save, .tr-typecard-send, .tr-typecard-cta {
    padding: 10px 18px; border-radius: 999px; font: 700 14px/1.2 "Noto Sans KR", sans-serif; cursor: pointer; text-decoration: none;
}
.tr-typecard-save, .tr-typecard-cta { border: 0; background: var(--jb-brick); color: #fff; }
.tr-typecard-send { border: 1.5px solid var(--jb-brick); background: #fff; color: var(--jb-brick); }
.tr-typecard-minor { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 6px; }
.tr-typecard-variant, .tr-typecard-story {
    padding: 2px 0; border: 0; background: none;
    font-size: 12px; color: var(--jb-ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tr-typecard-cta { display: inline-block; margin-top: 8px; }
/* 카드 저장 안내 — 공유창이 없는 폰에서 그림을 크게 띄우고 길게 눌러 저장하게 */
.typecard-sheet {
    position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
    padding: 20px; background: rgba(46, 40, 34, .72);
}
.typecard-sheet-card {
    width: min(360px, 100%); max-height: 100%; overflow: auto;
    padding: 14px; border-radius: 16px; background: var(--jb-paper, #FFF7E9); text-align: center;
}
.typecard-sheet-tip { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--jb-ink); }
.typecard-sheet-tip b { color: var(--jb-brick); }
.typecard-sheet-card img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 12px rgba(94, 66, 39, .3); -webkit-touch-callout: default; }
/* 공유창이 되는 폰이면 한 번 더 — 이 단추의 손짓은 fetch 를 기다리지 않아 iOS 도 연다(2026-09-16). */
.typecard-sheet-share { display: block; width: 100%; margin-top: 12px; }
.typecard-sheet-share[hidden] { display: none; }
.typecard-sheet-close {
    margin-top: 12px; padding: 8px 18px; border: 1.5px solid var(--jb-brick); border-radius: 999px;
    background: #fff; color: var(--jb-brick); font: 700 13px/1.2 "Noto Sans KR", sans-serif; cursor: pointer;
}

/* ── /type/ 머리를 다른 무료 화면(오늘·운이 좋은 날·조심할 날)과 같은 꼴로(2026-09-16) ──
   물건 상자 + 제목 + 한 줄 + 생년월일 카드(저장 프로필 고르개 포함) + 단추. */
.type-intro { padding: 24px 20px 22px; }
.type-intro > h1 { margin: 0; font: 400 clamp(28px, 7vw, 36px)/1.25 "Gowun Dodum", serif; letter-spacing: -.01em; -webkit-text-stroke: .4px currentColor; }
.type-intro > h1 small { display: block; font-size: .58em; color: var(--jb-brick); -webkit-text-stroke: .3px currentColor; margin-top: 2px; }
.type-intro .type-lead { margin: 0; max-width: 24em; }
.type-intro .type-lead b { color: var(--jb-ink); }
.type-intro .account-benefit { width: 100%; margin: 0; }
.type-intro .type-birth-host { width: 100%; margin: 0; }
.type-intro .type-free { margin: 0; }
.type-intro .type-note, .type-intro .text-button, .type-intro .type-resume { margin: 0; }