/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Pretendard 폰트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* 🔴 2026-09-14 — 이 파일 전체를 `@layer components` 로 옮겼다.
 *
 * 왜: Tailwind v4 는 유틸리티를 `@layer utilities` 안에 넣는데 이 파일은 **레이어 밖**이었다.
 *     CSS 에서 **레이어 밖 규칙은 명시도와 무관하게 레이어 안을 이긴다.**
 *     그래서 `peer-checked:border-amber-500/60` 같은 유틸리티가 CSS 에 멀쩡히 있는데도
 *     계산된 테두리는 끝까지 `.glass` 값이었다(2026-09-14 실측). **에러가 안 난다.**
 *     그때는 `.glass` 가 안 건드리는 `outline` 으로 우회했는데, 근본은 여기다.
 *
 * 🔴 **레이어 순서를 먼저 선언하는 것이 핵심이다.**
 *    이 파일이 Tailwind 보다 **먼저** 로드되므로(레이아웃의 stylesheet_link_tag 순서),
 *    순서 선언 없이 `@layer components` 만 쓰면 components 가 **첫 번째 레이어**가 되어
 *    Tailwind 의 `base`(preflight)가 뒤로 가고, preflight 의 `*{border-width:0}` 이
 *    `.glass` 의 테두리를 **지워버린다.** 아래 한 줄이 그걸 막는다.
 */
@layer theme, base, components, utilities;

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@layer components {

/* ═══ 컨테이너 토큰 (리디자인 1단계, 2026-09-15) ═══
 *
 * 🔴 `max-w-2xl`(672px) 하나가 **21곳**에서 글·폼·헤더·그리드를 똑같이 묶고 있었다.
 *    1920 에서 내용이 672px 리본으로 남고 **65%가 빈다.** 헤더까지 같은 제약이라
 *    로고가 화면 33% 지점(x=624)에 떠 있었다.
 *
 * ⚠️ 그런데 **672px 는 본문엔 정답이다** — 한글 적정 줄 길이 35~45자.
 *    ⭕ 고칠 것은 「넓히기」가 아니라 **「용도별로 가르기」**다.
 *    🔑 줄 길이는 **카드 폭이 아니라 텍스트 폭**에 잰다 — 패딩 32px 카드는 744px 까지 넓혀도
 *       텍스트 폭은 680px 그대로다.
 *
 * 🔴🔴 2026-09-15 정정 — **여기 적혀 있던 근거가 틀렸다.**
 *    옛 주석: 「Pretendard 한글 advance 가 1em 이라 17px × 40자 = 680px」
 *    실측   : Pretendard Variable 한글 advance = **0.864em** (`document.fonts.ready` 뒤 측정).
 *             그래서 680px 은 17px 에서 40자가 아니라 **46.3자**다.
 *             40자를 정말 원하면 588px(17px) / 553px(16px) 이다.
 *    🔑 **왜 틀렸나 — 폰트가 붙기 전에 쟀다.** `sans-serif` 폴백의 advance 가 정확히 **1.0** 이라
 *       숫자가 그럴듯해 보였고, 그래서 아무도 의심하지 않았다. 웹폰트 치수는 반드시
 *       `await document.fonts.ready` **뒤에** 재고, 잰 값이 1.0 처럼 딱 떨어지면 폴백을 의심할 것.
 *    ⭕ **결론(680px)은 바꾸지 않는다** — 46자는 35~45 밴드 바로 위이고, 본문에서 그 차이는
 *       실측상 문제가 안 된다. 바꾼 것은 **근거**다. 틀린 근거를 남기면 다음 사람이 그걸로 계산한다.
 *    ⚠️ 그리고 이 자는 **긴 산문에만** 댄다 — 결과 페이지처럼 2줄짜리 문장이 카드에 담기는
 *       화면에서는 복귀 도약이 한 번뿐이라 줄 길이가 레이아웃 결정 변수가 아니다.
 */
:root {
  --w-prose:   680px;   /* 블로그 본문·약관·결과 해설 — 17px 기준 46자(위 정정 참조) */
  --w-form:    760px;   /* 입력 폼 한 칸 · 768~1151 대역의 주력 */
  --w-content: 1040px;  /* 일반 섹션 · 2열 그리드 */
  --w-wide:    1240px;  /* 결과 대시보드 · 3열 */
  --w-shell:   1600px;  /* 헤더 · 푸터 정렬선 */
  --header-h:  57px;
}

.w-prose   { max-width: var(--w-prose);   margin-inline: auto; }
.w-form    { max-width: var(--w-form);    margin-inline: auto; }
.w-content { max-width: var(--w-content); margin-inline: auto; }
.w-wide    { max-width: var(--w-wide);    margin-inline: auto; }
.w-shell   { max-width: var(--w-shell);   margin-inline: auto; }

/* 🔴 2열 진입은 **1152px** 이다. 답톡 데스크톱은 45.6%(Windows 34.3%)이고,
 *    그 사람들은 **카톡 PC 창 옆에** 브라우저를 놓는다 — 1920 반쪽 스냅이 약 960px.
 *    계단식으로 짜면 1440 이 1280 값을 쓰게 되므로 유동(clamp)으로 간다. */
@media (min-width: 1152px) {
  .split {
    display: grid;
    max-width: clamp(940px, 82vw, var(--w-wide));
    grid-template-columns: minmax(0, var(--w-form)) clamp(348px, 26vw, 472px);
    gap: clamp(32px, 3vw, 48px);
    justify-content: center;
    margin-inline: auto;
    align-items: start;
  }
}

/* 768~1151 = 「카톡 옆 브라우저」 대역. 1열이되 넓히고, **페이지를 짧게** 만든다 —
   카톡 창 옆에서 스크롤을 반복시키면 안 된다. */
@media (min-width: 768px) and (max-width: 1151.98px) {
  .split { max-width: var(--w-form); margin-inline: auto; }
}

.font-data {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
}

/* Glass 유틸리티 */
/* 🔴 리디자인 1단계 — **헤어라인을 그림자로 바꾼다.**
 *    어두운 남색 위 6% 흰 테두리는 카드 대비 **1.061:1** 로 사실상 안 보이는데,
 *    그게 화면 전체에 같은 값으로 깔려 있어서 탭·입력창·타일이 **전부 같은 무게**가 됐다.
 *    2018~2020 대시보드 템플릿의 정확한 외형이다.
 * ⚠️ Windows 가 데스크톱의 3/4(34.3%)인데, DirectWrite 는 얇은 선을 더 거칠게 그린다.
 * ⭕ 요즘 다크 UI 가 비싸 보이는 이유는 테두리가 아니라 **채움 차이와 그림자**다.
 *    테두리는 **입력 어포던스**(여기 쓰라는 뜻인 곳)에만 남긴다. */
.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid transparent;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.glass-input {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 🔴 2026-09-14 — `outline: none` 으로 브라우저 기본 표시를 **지워놓고**, 그 자리에 넣은
   대체물이 둘 다 안 보였다: 테두리 2.25:1, 3px 링 **1.14:1**(비텍스트 최소 3:1 미달).
   키보드만 쓰는 사람은 **결제 직전 가입 폼에서 지금 어느 칸인지 알 수 없었다.**
   ⭕ `:focus-visible` 로 걸어 마우스 클릭 때는 안 뜨고 탭으로 올 때만 뜬다.
      amber-400(#fbbf24)은 이 배경에서 9.30:1. */
.glass-input:focus {
  border-color: rgba(245, 158, 11, 0.55);
  outline: none;
}

.glass-input:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

/* Amber 글로우 (점수 전용) */
/* 🔴 2026-09-14 — 후광이 **앰버로 박혀 있었다.** 관심도 램프에서 적색을 빼면서
   점수 색이 청록·금색으로 갈리는데, 후광만 주황이라 **숫자와 후광이 어긋났다**
   (35점 청록 숫자 뒤에 주황 후광). 색채 축이 "glow 를 점수 색에 연동하라"고 짚은 자리다.
   ⭕ `currentColor` 로 바꾸면 글자색이 무엇이든 따라온다 — 값을 옮겨 적을 필요가 없다.
   ⚠️ 이름은 `.glow-amber` 로 둔다 — 뷰 4곳이 쓰고 있고, 이름을 바꾸면 그 자리를
      전부 찾아 고쳐야 하는데 얻는 게 없다. 동작은 이제 앰버 전용이 아니다. */
.glow-amber {
  text-shadow: 0 0 30px color-mix(in srgb, currentColor 40%, transparent),
               0 0 60px color-mix(in srgb, currentColor 15%, transparent);
}

/* Frosted 배경 */
/* 🔴 리디자인 1단계 — 광원을 **실제로 보이게** 한다.
 *    기존 앰버 3% 는 픽셀로 세어 보면 없는 것과 같았다(첫 화면 채도 픽셀 7.28%,
 *    그중 96%가 주황 하나). 다크에서 색 면적이 7%면 "비어 있다"가 아니라
 *    **"덜 만들어졌다"**로 읽힌다.
 * ⭕ 반투명 대신 **불투명 hex** 로 간다 — 반투명은 배경 그라디언트 위치마다
 *    실제 색이 달라져 대비를 보장할 수 없다. 색채 축 확정값. */
.bg-frosted {
  background-color: #1e2338;
  background-image:
    /* ⚠️ 밝기 상한은 **대비가 정한다.** #262a45 로 올렸더니 카드 위 글자가 통째로
       내려가 뽕뽕 화면에서 AA 미달 4건이 났다(확정 4.99 → 4.47). 광원을 밝히면
       그 위 모든 글자의 대비가 같이 내려간다 — 광원은 색만의 결정이 아니다.
       ⭕ #22274a = 광원 티(base 대비 1.080배)는 살리고 확정 4.62 로 AA 유지.
          보라 쪽으로 기울여 색채 축의 잉크-바이올렛 방향과도 맞췄다. */
    radial-gradient(ellipse 90% 55% at 50% 0%, #22274a 0%, #1e2338 62%),
    linear-gradient(180deg, #1e2338 0%, #1a1f30 50%, #161b28 100%);
  background-attachment: fixed;
}

/* 결과 카드 페이드인 */

.result-fade-in {
  animation: fadeInUp 0.4s ease-out both;
}

/* 🔴 2026-09-15 — 두 가지를 한 블록으로 고친다 (구조 축 진단).
 *
 * ① **포커스 링이 300ms 동안 안 보였다.** `transition: all` 은 `outline-width` 와
 *    `outline-color` 까지 애니메이션한다(`outline-style` 만 즉시 바뀐다).
 *    라이브 실측 — `.ppong-cta` 에 Tab 으로 들어갔을 때:
 *        +  0ms  width 0px
 *        + 60ms  width 1px · color rgb(79,69,52)  ← 어두운 갈색
 *        +300ms  width 2px · color #fbbf24        ← 그제서야 도착
 *    Tab 을 빠르게 누르는 사람은 **완성된 링을 한 번도 못 본다** (WCAG 2.4.7).
 *    ⚠️ 나는 이걸 처음에 「측정 오류」로 닫았다 — 0ms 에 재서 0px 이 나온 것이라고.
 *       0ms 측정은 「CSS 가 안 먹었다」와 「아직 도착 안 했다」를 구분하지 못한다.
 *
 * ② **`prefers-reduced-motion` 이 애니메이션 하나만 덮고 있었다.**
 *    전환 26곳(뷰 `transition-all` 20 · CSS `transition: all` 6)과
 *    `hover:scale` 13곳이 그대로 나갔다. 전정기관 문제가 있는 사람에게
 *    `scale-110` 은 실제 유발 요인이다 (WCAG 2.3.3).
 */

/* 포커스 링은 **즉시** 뜬다. 전환 대상에서 뺀다.
   ⚠️ `transition: all` 에서 한 속성만 빼는 문법은 없어서, 포커스 상태의 전환을 끈다.
      포커스가 떠날 때는 원래 전환이 다시 살아나므로 hover 연출은 그대로다. */
:focus-visible {
  transition-property: none !important;
}

@media (prefers-reduced-motion: reduce) {
  /* 🔴 이 블록은 **`@layer components` 안**에 있어야 한다.
     `!important` 는 레이어 순서가 **뒤집힌다** — 레이어 밖 `!important` 가 오히려
     최하위다. components 에 있어야 utilities 의 `transition-all`·`duration-*` 을 덮는다. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 잠금 콘텐츠 (게이팅) */
.locked-content {
  position: relative;
  user-select: none;
  pointer-events: none;
}

.locked-content .locked-blur {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  opacity: 0.5;
}

.unlock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
  pointer-events: auto;
  background: rgba(30, 35, 56, 0.4);
  border-radius: inherit;
}

/* 🔴 2026-09-14 — 흰 글자가 밝은 정지점(#f59e0b)에서 **2.15:1** 이었다(AA 4.5 미달).
   ⚠️ 그라데이션은 **가장 밝은 정지점 기준**으로 재야 한다. 어두운 쪽(#d97706)만 보면
      3.19 로 나와서 "좀 낮네" 정도로 넘어간다.
   짙은 글자로 바꾸면 7.23 / 4.87 → 양 끝 모두 통과. */
.unlock-overlay .unlock-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1e2338;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 12px;
  font-size: 15px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.unlock-overlay .unlock-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* 잠금해제 CTA 카드 */
.unlock-cta {
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(217, 119, 6, 0.04));
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.08);
}

/* 🔴 900원 결제 버튼. 흰 글자 2.15:1 → 짙은 글자 7.23/4.87:1 */
.unlock-cta .unlock-cta-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1e2338;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 14px;
  font-size: 16px;
  text-align: center;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35);
}

.unlock-cta .unlock-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(245, 158, 11, 0.45);
}

.unlock-cta .unlock-cta-btn:active {
  transform: translateY(0);
}

/* 요금제 카드 */
/* ── 요금제 플랜 그리드 ────────────────────────────────────────────────
     🔴 2026-09-15 — 플랜 3개가 세로로 쌓여 1920 에서 **비교가 안 됐다.**
        「추천」이 붙은 Premium 이 첫 화면 밖에 있어 스크롤해야 보였다.
     ⚠️ 3열은 **1024px 이상**에서만. 그 아래로 3열을 만들면 카드가 300px 이하가 되어
        기능 목록이 줄바꿈으로 무너진다(1040 ÷ 3 ≈ 346px 이 하한이다).
     ⚠️ 카드 높이가 서로 다르다 — 「단건 잠금해제」는 버튼 대신 안내 문구다.
        `align-items: stretch` 로 높이를 맞추고 **마지막 자식을 바닥으로 밀어야**
        세 버튼이 한 줄에 선다. 안 그러면 기능 개수에 따라 버튼이 제각각 뜬다. */
  .pricing-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: var(--w-form);
    margin-inline: auto;
  }
  @media (min-width: 1024px) {
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
      gap: 20px;
      max-width: var(--w-content);
    }
    .pricing-grid > .pricing-card {
      display: flex;
      flex-direction: column;
    }
    /* 마지막 자식(CTA 버튼 또는 안내 문구)을 카드 바닥에 붙인다 */
    .pricing-grid > .pricing-card > :last-child {
      margin-top: auto;
    }
  }

  .pricing-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 28px;
  transition: all 0.3s ease;
}

.pricing-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.pricing-card.featured {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.04);
}

.pricing-card.featured:hover {
  border-color: rgba(245, 158, 11, 0.5);
}

/* 채팅 메시지 — AI 응답 내 볼드 강조 */
.chat-message strong {
  color: rgba(245, 158, 11, 0.9);
  font-weight: 600;
}

/* ========================================
   블로그 본문 타이포그래피
   - 기본: 16px, line-height 1.8, 다크 모드 가독성 최적화
   - 타겟: 모바일 우선 (20-30대 한국 남성)
   ======================================== */

/* --- 기본 본문 --- */
.blog-content {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.blog-content p {
  margin-bottom: 1.25rem;
  line-height: 1.85;
}

/* 첫 문단 살짝 강조 (서두 임팩트) */
.blog-content > p:first-child {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

/* --- 제목 (h2, h3) --- */
.blog-content h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 2.5rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  letter-spacing: -0.02em;
  line-height: 1.4;
}

/* 첫 h2는 본문 바로 뒤이므로 상단 여백 줄임 */
.blog-content > h2:first-child,
.blog-content > p:first-child + h2 {
  margin-top: 1.5rem;
}

.blog-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 2rem;
  margin-bottom: 0.625rem;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

/* --- 볼드 강조 --- */
.blog-content strong {
  color: rgba(245, 158, 11, 0.92);
  font-weight: 600;
}

/* --- 리스트 (ul/ol) --- */
.blog-content ul, .blog-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.375rem;
}

.blog-content ul {
  list-style-type: disc;
}

.blog-content ol {
  list-style-type: decimal;
}

.blog-content li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}

.blog-content li strong {
  color: rgba(245, 158, 11, 0.88);
}

/* 중첩 리스트 */
.blog-content li > ul,
.blog-content li > ol {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

/* --- 인용문 (blockquote) --- */
.blog-content blockquote {
  border-left: 3px solid rgba(245, 158, 11, 0.45);
  padding: 0.875rem 1.125rem;
  margin: 1.5rem 0;
  background: rgba(245, 158, 11, 0.04);
  border-radius: 0 8px 8px 0;
  color: rgba(255, 255, 255, 0.75);
  font-style: normal;
  line-height: 1.75;
}

.blog-content blockquote p {
  margin-bottom: 0.5rem;
}

.blog-content blockquote p:last-child {
  margin-bottom: 0;
}

/* --- 구분선 (hr) --- */
.blog-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 2.25rem 0;
}

/* --- 이미지 --- */
.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- 테이블 (모바일 가로 스크롤 대응) --- */
.blog-content .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.blog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 360px;
}

.blog-content thead th {
  background: rgba(245, 158, 11, 0.1);
  color: rgba(245, 158, 11, 0.9);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.blog-content tbody td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}

.blog-content tbody tr:last-child td {
  border-bottom: none;
}

.blog-content tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* --- 링크 --- */
.blog-content a {
  color: rgba(245, 158, 11, 0.85);
  text-decoration: underline;
  text-decoration-color: rgba(245, 158, 11, 0.3);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.blog-content a:hover {
  color: rgba(245, 158, 11, 1);
  text-decoration-color: rgba(245, 158, 11, 0.7);
}

/* --- 코드 (인라인) --- */
.blog-content code {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
  color: rgba(245, 158, 11, 0.8);
}

/* --- 반응형: 데스크톱에서 약간 여유 --- */
@media (min-width: 768px) {
  .blog-content p {
    line-height: 1.9;
  }

  .blog-content h2 {
    font-size: 1.5rem;
    margin-top: 2.75rem;
  }

  .blog-content h3 {
    font-size: 1.1875rem;
  }
}

/* Amber 체크박스 */
input[type="checkbox"][class*="accent-amber"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

input[type="checkbox"][class*="accent-amber"]:hover {
  border-color: rgba(245, 158, 11, 0.7);
  background: rgba(245, 158, 11, 0.06);
}

input[type="checkbox"][class*="accent-amber"]:checked {
  background: rgba(245, 158, 11, 0.9);
  border-color: rgba(245, 158, 11, 0.9);
}

input[type="checkbox"][class*="accent-amber"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"][class*="accent-amber"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* 🔴 2026-09-15 — 위 규칙의 `outline: none` 이 **키보드 포커스 링을 지우고 있었다.**
 *    명시도 계산 (구조 축):
 *      input[type="checkbox"][class*="accent-amber"]:focus  → (0,3,1)  ← 이긴다
 *      input:focus-visible                                   → (0,1,1)
 *    같은 레이어라 명시도로 갈린다. 대체물인 3px 앰버 그림자는 배경 대비 **1.28:1** 로
 *    비텍스트 최소 3:1 의 절반도 안 된다 — 사실상 안 보인다.
 *
 * 🔴 **이건 결제 직전 동의 체크박스다.** 그리고 답톡은 데스크톱이 45.6% 라
 *    Tab 으로 오는 사람이 실제로 많다.
 *
 * ⚠️ 위 `:focus` 규칙을 **지우지 않는다** — 마우스 클릭 때 링이 안 뜨는 현재 동작을 지킨다.
 * 🔑 명시도가 (0,3,1) 로 **동률**이라 **소스 순서로 뒤가 이긴다. 이 규칙이 바로 아래
 *    있어야 한다는 것이 처방의 전부다.** */
input[type="checkbox"][class*="accent-amber"]:focus-visible {
  outline: 2px solid #fbbf24;   /* 배경 위 9.29:1 — 비텍스트 기준의 3배 */
  outline-offset: 2px;
  box-shadow: none;
}

/* 체크박스 nudge 애니메이션 */

.animate-nudge {
  animation: nudge 0.5s ease-in-out;
}

/* 대시보드 차트 */
.chart-container {
  position: relative;
  height: 300px;
  width: 100%;
}


/* ═══ 히어로 데모 대화 (리디자인 2단계, 2026-09-15) ═══
 * 컨셉 = 「형/언니가 네 카톡에 형광펜을 긋는다」.
 * ⚠️ 잉크 색은 `--ink` 로 뷰가 넣는다(상담사별). 여기서 색을 박지 않는다 —
 *    잉크 팔레트가 확정되면 헬퍼 한 곳만 바꾸면 되게. */
.demo-chat__thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
  position: relative;
}
.demo-bubble__at {
  display: block;
  font-size: 11px;
  opacity: 0.55;
  margin-top: 3px;
}
.demo-bubble--them {
  align-self: flex-start;
  background: #2b3050;
  color: rgba(255, 255, 255, 0.92);
  border-bottom-left-radius: 4px;
}
.demo-bubble--me {
  align-self: flex-end;
  background: #f7e04d;
  color: #1a1a1a;
  border-bottom-right-radius: 4px;
}

/* 주석 — 잉크로 그은 자국 */
.demo-note {
  align-self: flex-start;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 6px 8px;
  /* 🔴 형광펜 칠 — 잉크로 그은 자국의 배경.
     ⚠️ 이건 **배경 계층**이지 강조면이 아니다(L* 29, 카드 L* 20.9 위로 +8).
        면적 상한 규율: 채도 50%↑ 이면서 L* 45↑ 인 색만 15% 상한 대상이고,
        L* 35 이하 틴트는 배경 층으로 취급해 제외한다.
     ⚠️ 첫 값은 L* 22 라 **카드 대비 1.04 로 사실상 안 보였다.** 칠 높이를
        미래 팔레트 기준으로 잡았다가 현재 카드와 같은 높이에 앉은 것이다. */
  background: var(--ink-fill, transparent);
  padding: 7px 11px 7px 10px;
  border-radius: 0 8px 8px 0;
  border-left: 3px solid var(--ink, #AEE83C);
  /* ⚠️ 칠 위 글자는 **`text-primary` 만** 쓴다(칠 위 8.7:1).
     잉크색 글자를 칠 위에 얹으면 언니가 4.06 으로 미달한다. */
  color: #f4f2f7;
  font-size: 14px;
  line-height: 1.55;
}

/* ── 입력 형식 판정 배지 ────────────────────────────────────────────────
   붙여넣는 즉시 「읽혔나」를 말한다. 🔴 예전엔 못 읽어도 아무 말도 안 했다.
   ⚠️ 칩은 **작다** — 면적 상한 규율(채도 50%↑ · L* 45↑ 인 색의 15% 상한)의
      대상이 아니지만, 글자 대비는 그것과 무관하게 4.5:1 을 지켜야 한다. */
.input-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.input-badge--ok {
  background: rgba(174, 232, 60, 0.12);
  color: #AEE83C;
}
.input-badge--warn {
  background: rgba(251, 191, 36, 0.12);
  color: #FBBF24;
}
/* 「못 읽겠어」는 말만 하지 않고 다음 길을 준다. */
.input-badge__action {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  font-size: inherit;
  padding: 0;
}

/* ── 복사 방법 접이식 ──────────────────────────────────────────────────
   placeholder 에 박혀 있던 8줄을 여기로 내렸다. 기본은 접혀 있다 —
   형식 견본은 placeholder 가 이미 보여주므로, 방법은 **막힌 사람만** 편다. */
.input-help > summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.input-help > summary::-webkit-details-marker { display: none; }
.input-help > summary:hover { color: rgba(255, 255, 255, 0.85); }
.input-help__body {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}
.input-help__body b { color: #f4f2f7; font-weight: 700; }

.demo-note__badge {
  flex-shrink: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 1px 7px;
  border-radius: 4px;
  color: #1a1a1a;
  background: var(--ink, #f59e0b);
}

/* 🔴 로드 시 **1회만** 들어온다. 루프 금지 — 루프는 싸구려로 보인다.
   ⚠️ `prefers-reduced-motion` 은 위쪽 전역 블록이 이미 덮는다(전환·애니메이션 전부). */
.demo-chat__thread > * {
  animation: demoIn 0.42s ease-out both;
}
.demo-chat__thread > *:nth-child(1) { animation-delay: 0.05s; }
.demo-chat__thread > *:nth-child(2) { animation-delay: 0.16s; }
.demo-chat__thread > *:nth-child(3) { animation-delay: 0.27s; }
.demo-chat__thread > *:nth-child(4) { animation-delay: 0.38s; }
.demo-chat__thread > *:nth-child(5) { animation-delay: 0.49s; }
.demo-chat__thread > *:nth-child(6) { animation-delay: 0.60s; }
.demo-chat__thread > *:nth-child(n+7) { animation-delay: 0.70s; }

@keyframes demoIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

  /* 🔴 마우스가 주 입력인 기기에서만 보인다.
     ⚠️ 화면 폭으로 가르지 않는다 — 창을 줄인 데스크톱은 여전히 PC 카톡을 쓸 수 있다.
        묻는 것은 "화면이 좁은가"가 아니라 **"이 기기에 PC 카톡이 있는가"** 다.
     ⚠️ 2026-09-15 정정 — 처음엔 이 규칙이 **`@layer components` 밖**에 붙어 있었다.
        unlayered 는 layered 를 **이기므로**, 뒤에 Tailwind 유틸리티(`hidden`/`block`)와
        부딪치면 예상과 반대로 동작한다. 이 파일은 전체가 레이어 안에 있어야 한다. */
  .only-fine-pointer { display: none; }
  @media (pointer: fine) {
    .only-fine-pointer { display: block; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     결과 페이지 3단계 리디자인 (2026-09-15)
     ══════════════════════════════════════════════════════════════════════ */

  /* ── 타입 스케일 ───────────────────────────────────────────────────────
     🔴 고치기 전 실측: 쓰이는 크기 6단 [72,24,18,16,14,12], 인접 비율
        [3.00, 1.33, 1.12, 1.14, 1.17] — **뒤 세 단이 서로 구별 불가**였다(1.2 미만).
     🔑 그리고 더 결정적인 것 — **카드 제목(16px/600)과 본문(16px/400)이 크기도 색도 같았다.**
        굵기 200 차이 하나로만 갈렸다. "점수만 크고 나머지가 평평하다"의 정체가 이것이다.
     ⭕ 5단으로 줄이고 최소 1.19배를 확보한다. 제목은 크기·굵기·색 **세 축**을 다 쓴다.
     ⚠️ 한글은 라틴과 달리 어센더/디센더 편차가 없어 같은 line-height 라도 더 빽빽해 보인다
        → 본문만 1.7 로 풀고 제목은 1.35 로 오히려 조인다.
     ⚠️ 캡션 12px→13px: 한글 12px 는 받침 때문에 실효 획 밀도가 라틴보다 높고,
        답톡 데스크톱의 **34.3%가 Windows**라 DirectWrite 힌팅이 이 크기대에서 거칠어진다. */
  :root {
    --fs-display: 72px;  --lh-display: 1.0;
    --fs-metric:  28px;  --lh-metric:  1.05;
    --fs-title:   19px;  --lh-title:   1.35;
    --fs-body:    16px;  --lh-body:    1.7;
    --fs-caption: 13px;  --lh-caption: 1.45;
  }
  @media (min-width: 1152px) {
    :root {
      --fs-display: 96px;
      --fs-metric:  32px;
      --fs-title:   21px;
      --fs-body:    17px;
    }
  }

  /* ── 결과 페이지 레이아웃 ──────────────────────────────────────────────
     🔴 1920 에서 빈 화면이 **65%** 였다(본문 672px 한 줄). 메인은 1단계에 고쳤는데
        결과 페이지만 옛 구조로 남아 있었다. 데스크톱이 45.6% 다.
     🔑 **읽을거리를 두 열로 가르지 않는다.** 읽는 순서는 통째로 왼쪽 한 열에 두고,
        오른쪽에는 **읽는 순서에 속하지 않는 것**만 놓는다:
          · 판정 카드 = 읽을거리가 아니라 **참조물**(문제점을 읽는 내내 "몇 점이었더라"를 되묻는다)
          · 공유 버튼 = 읽을거리가 아니라 **도구**
     ⭕ 그래서 2열인데도 읽는 순서가 깨질 자리가 없다.
     ⚠️ **모바일에서 `order` 를 쓰지 않는다** — DOM 순서 = 시각 순서 = 낭독 순서.
        order 로 뒤집으면 스크린리더가 다른 순서로 읽는다. */
  .result-split {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: var(--w-form);
    margin-inline: auto;
  }
  @media (min-width: 1152px) {
    /* `.split` 의 열·gap 을 물려받되 **폭 제약은 직접 푼다.**
       ⚠️ 2026-09-15 실측으로 잡은 함정 — `.result-split` 의 `max-width: var(--w-form)`(760px)이
          데스크톱에서도 살아남아 **전체가 760px 로 묶이고 그 안에서 2열로 갈렸다**
          (왼쪽 272px · 오른쪽 472px). `.split` 과 `.result-split` 은 특성이 같아(0,1,0)
          **소스 순서**로 결정되는데, `.result-split` 이 뒤에 있어 이긴 것이다.
          → 여기서 같은 clamp 를 명시해 되돌린다. */
    .result-split.split {
      display: grid;
      max-width: clamp(940px, 82vw, var(--w-wide));
    }
    .result-read    { grid-column: 1; grid-row: 1; }
    .result-tail    { grid-column: 1; grid-row: 2; }
    /* ⚠️ `.split` 의 `align-items: start` 를 덮어 1행 높이를 확보해야 sticky 가 움직인다 */
    .result-verdict { grid-column: 2; grid-row: 1; align-self: stretch; }
    .result-share   { grid-column: 2; grid-row: 2; }

    /* 판정은 **결제 판단을 돕는 참조물**이라 딱 그 구간까지만 따라온다.
       1행(문제점→답장→CTA)을 읽는 내내 붙어 있다가 2행에서 물러나고 공유가 자리를 받는다.
       항상 떠 있는 배너와 달리 나그(nag)로 안 읽힌다. */
    .result-verdict > .verdict-card {
      position: sticky;
      top: calc(var(--header-h) + 24px);
    }
  }

  /* ── 판정 카드 (참조물) ────────────────────────────────────────────────
     🔴 이 카드가 비어 보였던 이유는 **크기가 커서가 아니라 증거를 다 떼어냈기** 때문이다.
        점수를 믿게 만들 근거 셋(위험도·주도권·주고받기)이 전부 다른 카드로 흩어져 있었고,
        숫자 칸만 크게 잡았으니 안이 비는 게 당연했다.
     ⭕ 증거를 판정 옆으로 되돌린다. 그러면 점수가 "AI 가 뱉은 숫자"에서
        **"이것들을 재서 나온 값"**이 된다. 900원 값어치 인식은 거기서 시작된다.
     ⚠️ 카드 위계 — 이 카드만 띄운다(그림자·radius·테두리). 나머지는 바닥에 붙인다.
        12장이 전부 같은 높이에 떠 있으면 아무것도 안 뜬 것과 같다. */
  .verdict-card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    padding: 24px 20px 20px;
    text-align: center;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
  }
  .verdict-card__eyebrow {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 4px;
  }
  .verdict-card__label {
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 2px;
  }
  .verdict-card__score {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .verdict-card__stage {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    margin-top: 10px;
    border-radius: 999px;
    font-size: var(--fs-body);
    font-weight: 700;
    /* 🔴 배경을 **어둡게** 깐다(밝게가 아니라). 처음엔 흰색 6% 였는데 바탕이 밝아져
       가장 어두운 램프 색이 **3.88:1 로 AA 미달**이었다(대비 검사가 잡았다).
       ⚠️ 흰 배경을 아예 빼도 「무관심」(#8b95a3)이 **4.44** 로 0.06 모자란다 —
          카드(#282D48)가 원래 배경(#1e2338)보다 밝기 때문이다.
          ScoreRamp 는 배경 기준으로 재서 통과했는데 **카드 위에서는 다르다.**
       ⭕ 검정 25% 를 깔면 램프 6색 전부 5.18 이상이 된다(전수 계산, 테스트가 지킨다). */
    background: rgba(0, 0, 0, 0.25);
    /* 🔑 색 변화는 **최소 두 곳에서 동시에** 일어나야 뜻이 생긴다(Albers).
       숫자 하나만 바뀌면 "왜 오늘은 파랗지?"가 된다 — 배지 테두리가 같이 움직인다. */
    border: 1px solid currentColor;
  }
  .verdict-card__verdict {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.82);
    margin-top: 12px;
  }

  /* 정점의 공유 — 점수를 본 직후 이미 공유하고 싶은 사람은 여기서 끝낸다.
     ⚠️ **세로 예산 0px** 이고 색도 안 먹는다. 본체 3버튼은 잠금 CTA 아래에 따로 있다. */
  .verdict-card__share {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
  }
  .verdict-card__share:hover { color: #f4f2f7; background: rgba(255, 255, 255, 0.12); }

  /* ── 증거띠 ────────────────────────────────────────────────────────────
     🔴 **칸 수를 고정하지 않는다.** 경로마다 받는 증거가 다르다(헬퍼 `evidence_items` 주석 참조).
        3칸 그리드에 하나가 비면 구멍이 보이지만, `auto-fit` 이면 남은 것들이 나눠 갖는다.
     ⚠️ 단 **1칸일 때는 그리드를 쓰지 않는다** — 한 값이 358px 을 가로질러 늘어나면
        구멍보다 이상해 보인다. 뷰에서 인라인 한 줄로 떨어뜨린다(121건 중 3건꼴). */
  .verdict-evidence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .verdict-evidence__k {
    display: block;
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 2px;
  }
  .verdict-evidence__v {
    display: block;
    /* 🔴 **칸 폭에 맞춰 줄인다.** 390px 에서 3칸이면 한 칸이 **97px** 인데
       `--fs-metric`(28px)로 「상대 주도」를 쓰면 **101px 이라 두 줄로 접힌다**
       (가운데 칸만 두 줄이 되어 세 값의 baseline 이 어긋난다 — 모바일 실측으로 잡았다).
       ⚠️ 칸 폭을 108px 로 **추정**했다가 틀렸다. gap 12 + 카드 패딩 20×2 를 빼면 97 이다.
          추정하지 말고 브라우저에서 잰다.
       ⭕ 라벨을 더 줄이는 대신 글자를 줄인다 — 「상대 주도」가 「상대주도」보다 읽기 좋다.
          390px → 24px(약 87px, 여유 10px) · 넓은 화면에서는 토큰값 그대로. */
    font-size: clamp(20px, 6.2vw, var(--fs-metric));
    white-space: nowrap;
    line-height: var(--lh-metric);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .verdict-evidence--inline {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--fs-body);
    color: rgba(255, 255, 255, 0.82);
  }

  /* ── 위험도 계기 ───────────────────────────────────────────────────────
     🔴 **채움 바를 버린다.** 채움 바는 "많을수록 좋다"는 관습이 아주 강하다
        (경험치·배터리·진행률). 위험도 32%를 채움으로 그리면 **"32% 채웠네"**로 읽힌다.
     ⭕ 3구간 눈금 위에 **현재 위치 핀**을 꽂는다. 방향 혼동이 사라진다.
     🔴 색만으로 뜻을 전하지 않는다(WCAG 1.4.1) — 구간 이름을 글자로 항상 함께 낸다.
        적록색맹에서 슬레이트↔코랄 ΔE 가 49.1 → 15.3 으로 얇아지므로 라벨이 더 중요하다. */
  .risk-meter { margin-top: 10px; }
  .risk-meter__track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,
      rgba(154, 165, 196, 0.35) 0%,  rgba(154, 165, 196, 0.35) 30%,
      rgba(245, 158, 11, 0.35)  30%, rgba(245, 158, 11, 0.35)  60%,
      rgba(255, 163, 150, 0.35) 60%, rgba(255, 163, 150, 0.35) 100%);
    /* ⚠️ 눈금 경계(30/60)는 `KatalkAnalysesHelper::RISK_STEPS` 와 **같아야 한다.**
       어긋나면 핀이 앰버 구간에 꽂혀 있는데 글자는 「안전」이라 말하게 된다. */
  }
  .risk-meter__pin {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    border: 2px solid #1e2338;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  }
  .risk-meter__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, 0.55);
  }

  /* ── 목차형 잠금 ───────────────────────────────────────────────────────
     🔴 blur 도 스켈레톤도 아니다. 둘 다 **「무엇이 잠겼는지」를 한 글자도 안 말한다** —
        뿌연 덩어리를 또렷한 회색 덩어리로 바꾸면 화질만 오르고 진단한 문제는 그대로다.
        사람은 "뭔가 더 있다"로 지갑을 열지 않고 **"이 정도면 살 만하다"**로 연다.
     🔴 **회색을 쓰지 않는다.** 회색은 `disabled` 관습이라 "고장"으로 읽힌다.
        브랜드 앰버로 잠그면 **"내가 살 수 있는 것"**이 된다. `grayscale()` 금지.
     ⚠️ 그리고 잠긴 영역은 **카드보다 밝아야** 한다 — 어두우면 죽은 것, 밝으면 살아 있는 것. */
  .locked-toc {
    background: #37374d;                       /* 카드 위 앰버 6% — 카드보다 L* +3 밝다 */
    border: 1px solid rgba(164, 114, 39, 0.9); /* #A47227 — 카드 대비 3.22, 비텍스트 통과 */
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .locked-toc__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--fs-body);
    color: #f4f2f7;
  }
  .locked-toc__lock { color: #f59e0b; flex: none; }
  .locked-toc__peek {
    color: rgba(255, 255, 255, 0.72);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .locked-toc__more { color: #f59e0b; font-weight: 700; flex: none; }

  /* ── 공유 (도구) ───────────────────────────────────────────────────────
     🔴 카카오 노랑 `#FEE500` 은 카드 대비 **9.99**, CTA 앰버는 5.95 — 빛 에너지로 **1.76배**다.
        즉 **돈 버는 버튼보다 공짜 버튼이 밝았다.** 게다가 우리 면적 상한 규율
        (채도 50%↑ & L* 45↑)의 대상이 첫 화면에 카카오·인스타·CTA **3종 동시**였다.
     ⭕ **정체성은 아이콘이 지고 면적은 우리가 정한다** — 심볼은 공식 원색 그대로,
        버튼 면만 중립으로. 노랑 면적이 1/10 이하로 준다.
     ⚠️ 카카오 **로그인** 버튼 가이드는 심볼 색 변경을 금지하지만(심볼+레이블+컨테이너 구조에서
        불변은 **심볼**이고 컨테이너는 고르는 것), **공유** 버튼에 같은 강제가 걸리는지는
        공개 문서에서 확인되지 않았다. 어느 쪽이든 안전한 선을 택했다. */
  .share-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 12px;
    background: #3a3f63;
    border: 1px solid #737ca8;                 /* 카드 대비 3.32 — 비텍스트 통과 */
    color: #f4f2f7;
    font-size: var(--fs-caption);
    font-weight: 600;
    cursor: pointer;
  }
  .share-btn:hover { background: #434874; }

  /* ── 카드 위계 ─────────────────────────────────────────────────────────
     🔴 고치기 전에는 **12장이 전부** `glass rounded-2xl p-6 border-white/[0.08]` 였다.
        전부 같은 높이로 떠 있으면 **아무것도 안 뜬 것과 같다.**
     ⭕ 모양이 아니라 **역할**로 가른다. 그림자 = 층:
          참조물(판정) 띄움 · 읽을거리 평면 · 살 것(잠금·CTA) 앰버 · 나머지 바닥 */
  .read-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  }
  .read-card__title {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #ffffff;          /* 🔑 white/0.85 → white. 크기·굵기·색 **세 축**을 다 쓴다 */
    margin-bottom: 12px;
  }
  .read-card__body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.85);
  }
  /* 꼬리(면책·광고·다시 분석)는 바닥에 붙인다 — 그림자도 테두리도 없다 */
  .flat-block { background: none; border: 0; box-shadow: none; }
}