/* 파일 이름에 번호가 붙은 자산은 1년 동안 캐시됩니다. 이 파일을 고치면 번호를 올리고 lib/reader.mjs 의 참조도 바꿉니다(v522 → v523 → v524 → v525 → v526 → v527, 2026-10-27 → v528 → v529 → v530, 2026-11-02 → v531, 2026-11-03). */
/* 처음 방문자 눈으로 본 디자인 점검(2026-10-27, 운영자 지시 "싹 수정").
   큰 스타일시트(cq-reader-v520.css)를 이름 바꿔 다시 내보내는 대신, 고친 규칙만 이 파일에 모읍니다.
   unifyShell() 이 reader 스타일시트 바로 뒤에 붙이므로 같은 우선순위에서 뒤에 오는 이 규칙이 이깁니다. */

/* 1. 홈의 계산기 6개: 4칸 격자에서는 둘째 줄에 2개만 남아 빈칸이 컸습니다. 3칸으로 두 줄을 꽉 채웁니다. */
@media (min-width: 900px) {
  .cq-home .cq-home-tools .cq-editorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 2. 계산기 페이지 아래쪽(용어·자주 묻는 질문·함께 쓰는 계산기·배우기 글)이 위의 계산기 상자보다 넓게 퍼져
      왼쪽 끝이 맞지 않았습니다. 계산기 두 칸 배치와 같은 폭(68rem)으로 맞춰 가운데에 둡니다. */
.cq-v512[data-page="tool"] main .cq-related {
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 3. 긴 글 줄 길이. 넓은 화면에서 답 한 줄이 100자를 넘어 읽기 힘들었습니다(한글 기준 한 줄 45~50자). */
.cq-faq dd,
.cq-faq-tool dd,
.cq-faq-intro { max-width: 46rem; }
.cq-faq-tool { max-width: 56rem; }

/* 4. 휴대폰에서 계산기 첫 화면의 절반을 머리말이 차지해 입력 칸이 늦게 보였습니다. 머리말을 줄입니다. */
@media (max-width: 600px) {
  .cq-v512[data-page="tool"] .page-hero { padding-top: 20px; padding-bottom: 16px; }
  .cq-v512[data-page="tool"] .page-hero h1 { font-size: 26px; margin-bottom: 8px; }
  .cq-v512[data-page="tool"] .page-hero p { font-size: 16px; line-height: 1.6; }
}

/* 5. 아주 긴 페이지(용어 분야, 자주 묻는 질문, 배우기)에서 위로 돌아가는 단추. 스크롤을 내려야 나타납니다. */
.cq-to-top {
  position: fixed; right: 16px; bottom: 20px; z-index: 40;
  min-width: 48px; min-height: 48px; padding: 0 14px;
  border: 1px solid #c9d2e0; border-radius: 999px;
  background: #fff; color: #0b1c33; font: 700 16px/48px var(--cq-body-font, sans-serif);
  box-shadow: 0 4px 14px rgba(11, 28, 51, .15); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.cq-to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.cq-to-top:focus-visible { outline: 3px solid #1f4fd8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cq-to-top { transition: none; } }
@media print { .cq-to-top { display: none; } }

/* ---- 2차(2026-10-27) ---- */

/* 6. 휴대폰 메뉴: 3칸 2줄 격자가 첫 화면을 많이 차지하고 선택 밑줄이 격자 중간에 떠 보였습니다. 한 줄로 폅니다.
      6개가 360px 안에 들어갑니다(16px 글씨). 머리 높이가 144px → 약 104px 로 줄어 앵커 여백도 맞춥니다. */
@media (max-width: 480px) {
  html { scroll-padding-top: 116px; }
  .cq-nav { display: flex; justify-content: space-between; gap: 0; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
  .cq-nav::-webkit-scrollbar { display: none; }
  .cq-nav a { min-height: 44px; padding: 6px 7px; flex: 0 0 auto; }
}

/* 7. 계산 결과 막대(cq-resultbar-v522.js). 화면 아래에 고정, 누르면 결과로 내려갑니다. */
.cq-resultbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45;
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px;
  border: 0; border-radius: 14px; background: #0b1c33; color: #fff; text-align: left;
  font: 16px/1.3 var(--cq-body-font, sans-serif); box-shadow: 0 8px 24px rgba(11, 28, 51, .28); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s, transform .2s, visibility .2s;
}
.cq-resultbar.is-shown { opacity: 1; visibility: visible; transform: none; }
.cq-resultbar-label { color: #c3d1e3; white-space: nowrap; }
.cq-resultbar-figure { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cq-resultbar-go { margin-left: auto; color: #9ec1ff; font-weight: 700; white-space: nowrap; }
@media (max-width: 359px) { .cq-resultbar-label { display: none; } }
.cq-v512.has-resultbar .cq-to-top { bottom: 84px; }
@media (prefers-reduced-motion: reduce) { .cq-resultbar { transition: none; } }
@media print { .cq-resultbar { display: none; } }

/* 8. 홈 히어로의 인기 계산기 바로가기. */
.cq-hero-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.cq-hero-quick a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
.cq-hero-quick a:hover, .cq-hero-quick a:focus-visible { background: rgba(255, 255, 255, .22); }
.cq-hero-quick-label { width: 100%; margin: 0 0 2px; color: #c3d1e3; font-size: 16px; }

/* 9. 학습 글: 저장 단추와 「왜 중요한가」 상자가 붙어 있었고, 상자 글자가 연회색이라 읽기 힘들었습니다. */
.lesson .trust-callout, #lesson .trust-callout { margin-top: 24px; }
.trust-callout p { color: #374151; }

/* 10. 안내 페이지(소개·원칙·방침) 문단이 넓은 화면에서 한 줄 120자를 넘었습니다. */
.trust-main p, .trust-main li { max-width: 46rem; }

/* ---- 3차(2026-10-27) ---- */

/* 11. 계산기 머리 영역이 높아 입력 칸이 늦게 보였습니다. */
.cq-v512[data-page="tool"] .page-hero { padding-top: 24px; padding-bottom: 20px; }
.cq-v512[data-page="tool"] .page-hero h1 { margin: 6px 0 8px; }

/* 12. 카드 설명이 두 줄에서 단어 중간에 잘렸습니다. 세 줄까지 보입니다. */
.cq-editorial-card p { -webkit-line-clamp: 3; }

/* 13. 「로그인은 필요 없습니다」인데 흰 로그인 단추가 가장 눈에 띄었습니다. 테두리 단추로 낮춥니다. */
.cq-tools .cq-login { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.cq-tools .cq-login:hover, .cq-tools .cq-login:focus-visible { background: rgba(255, 255, 255, .12); }

/* 14. 바닥글 링크를 누르기 쉽게(줄 간격만 넓혀 44px 가깝게). */
.cq-v512 .site-footer .footer-links a { display: block; padding: 8px 0; }

/* ---- 4차(2026-10-27) ---- */

/* 15. 카드가 6개·9개인 묶음(게임 6종, 매매 계산기 9개 등)이 4칸 격자에서 마지막 줄에 1~2개만 남았습니다.
       3의 배수면 3칸으로 꽉 채웁니다. */
@media (min-width: 900px) {
  .cq-editorial-grid:has(> :nth-child(6):last-child),
  .cq-editorial-grid:has(> :nth-child(9):last-child),
  .cq-editorial-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 16. 그림 없이 밋밋하던 머리 영역(자주 묻는 질문·주제 분석·소개)에 그림(제미나이로 만든 사진풍, 글자 없음). */
.cq-v512[data-route="/faq"] .page-hero,
.cq-v512[data-route="/analysis"] .page-hero,
.cq-v512[data-route="/about"] .page-hero {
  background-repeat: no-repeat; background-size: cover; background-position: right center;
}
.cq-v512[data-route="/faq"] .page-hero {
  background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.95) 50%, rgba(238,242,248,.5) 70%, rgba(238,242,248,.05) 100%), url("/assets/img/band-faq-v530-1300.webp");
}
.cq-v512[data-route="/analysis"] .page-hero {
  background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.95) 50%, rgba(238,242,248,.5) 70%, rgba(238,242,248,.05) 100%), url("/assets/img/band-analysis-v522-1300.webp");
}
.cq-v512[data-route="/about"] .page-hero {
  background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.95) 50%, rgba(238,242,248,.5) 70%, rgba(238,242,248,.05) 100%), url("/assets/img/band-about-v530-1300.webp");
}
@media (min-width: 1400px), (min-resolution: 2dppx) and (min-width: 700px) {
  .cq-v512[data-route="/faq"] .page-hero { background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.95) 50%, rgba(238,242,248,.5) 70%, rgba(238,242,248,.05) 100%), url("/assets/img/band-faq-v530-2100.webp"); }
  .cq-v512[data-route="/analysis"] .page-hero { background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.95) 50%, rgba(238,242,248,.5) 70%, rgba(238,242,248,.05) 100%), url("/assets/img/band-analysis-v522-2100.webp"); }
  .cq-v512[data-route="/about"] .page-hero { background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.95) 50%, rgba(238,242,248,.5) 70%, rgba(238,242,248,.05) 100%), url("/assets/img/band-about-v530-2100.webp"); }
}
/* 휴대폰에서는 글자가 그림 위에 겹치므로 위에서 아래로 덮어 글자 쪽을 밝게 둡니다. */
@media (max-width: 700px) {
  .cq-v512[data-route="/faq"] .page-hero, .cq-v512[data-route="/analysis"] .page-hero { background-image: linear-gradient(180deg, rgba(238,242,248,.97) 0%, rgba(238,242,248,.9) 60%, rgba(238,242,248,.6) 100%), url("/assets/img/band-faq-v530-1300.webp"); }
  .cq-v512[data-route="/analysis"] .page-hero { background-image: linear-gradient(180deg, rgba(238,242,248,.97) 0%, rgba(238,242,248,.9) 60%, rgba(238,242,248,.6) 100%), url("/assets/img/band-analysis-v522-1300.webp"); }
  .cq-v512[data-route="/about"] .page-hero { background-image: linear-gradient(180deg, rgba(238,242,248,.97) 0%, rgba(238,242,248,.9) 60%, rgba(238,242,248,.6) 100%), url("/assets/img/band-about-v530-1300.webp"); }
}

/* 17. 작은 제목을 지운 페이지(자주 묻는 질문·주제 분석 등)는 제목이 메뉴 바로 밑에 붙었습니다. 위 여백을 줍니다. */
.cq-v512 .page-hero > div > h1:first-child,
.cq-v512 .page-hero > h1:first-child { margin-top: 44px; }
@media (max-width: 600px) {
  .cq-v512 .page-hero > div > h1:first-child,
  .cq-v512 .page-hero > h1:first-child { margin-top: 24px; }
}

/* ---- 5차(2026-10-27) ---- */

/* 18. 휴대폰 분석 글의 표: 표 제목이 잘리고, 옆으로 밀 수 있다는 표시가 없어 결론 열이 안 보이는 줄 알았습니다.
       제목은 화면 폭 안에서 줄을 바꾸고, 첫 열은 고정, 밀 수 있는 쪽에 그림자를 둡니다. */
.cq-v512 .issue-html caption { position: sticky; left: 0; max-width: calc(100vw - 48px); white-space: normal; }
.cq-v512 .issue-html table {
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11,28,51,.18), rgba(11,28,51,0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11,28,51,.18), rgba(11,28,51,0)) right center / 12px 100% no-repeat scroll;
}
@media (max-width: 700px) {
  .cq-v512 .issue-html th:first-child, .cq-v512 .issue-html td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
}

/* 19. 넓은 화면에서 분석 글 한 줄이 65자 안팎이라 길었습니다. 글은 46rem, 표는 넓게 둡니다. */
.cq-v512 .issue-html > p, .cq-v512 .issue-html > ul, .cq-v512 .issue-html > ol,
.cq-v512 .issue-html > h2, .cq-v512 .issue-html > h3 { max-width: 46rem; }

/* 20. 학습 글 소제목이 굵은 고딕 40px라 제목(h1)과 크기 차이가 거의 없고, 다른 제목(명조)과도 달랐습니다. */
.cq-v512 #lesson h2 { font-family: var(--cq-editorial-font, "Noto Serif KR", serif); font-weight: 700; font-size: 30px; line-height: 1.4; letter-spacing: -.01em; }
@media (max-width: 600px) { .cq-v512 #lesson h2 { font-size: 24px; } }

/* 21. 홈 숫자 칸 높이가 칸마다 달랐습니다. */
.cq-quickstrip ul { grid-auto-rows: 1fr; }

/* 22. 상자 맨 아래 여백이 위보다 커 보였습니다. */
.cq-v512 .trust-callout > :last-child { margin-bottom: 0; }


/* 24. 바닥글: 「이용약관」 바로 밑에 붙어 있던 툴팁 줄과 띄웁니다. */
.cq-family { margin-top: 24px !important; }

/* 25. 폭을 넘는 표(스크립트가 is-scrollable 을 붙임)에는 밀어 볼 수 있다는 안내를 표 제목 끝에 붙입니다. */
.cq-v512 .issue-html table.is-scrollable caption::after { content: " · 옆으로 밀어 보기 →"; font-weight: 400; color: #58697b; white-space: nowrap; }

/* ---- 6차(2026-10-27) ---- */

/* 26. 배우기 카드: 격자 칸이 늘어나면서 남는 높이를 줄 사이에 나눠, 같은 줄 카드끼리 제목 위치가 어긋났습니다.
       내용을 위에서부터 쌓습니다. */
.cq-v512 .lesson-card, .cq-v512 #start a { align-content: start; }

/* 27. 소개 페이지: 카드 3장이 2칸 격자라 셋째가 혼자 남았고, 소제목 몇 개만 고딕이었습니다. */
@media (min-width: 900px) { .cq-v512 .trust-main .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cq-v512 .trust-main h2 { font-family: var(--cq-editorial-font, "Noto Serif KR", serif); }

/* 28. 용어 사전의 「관련 용어」: 「·」로 이어 붙인 링크가 줄 끝에서 「·」만 남고, 누르는 높이가 낮았습니다. 칩으로 바꿉니다. */
.cq-v512 .gl-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0; }
.cq-v512 .gl-links > * { font-size: 16px; }
.cq-v512 .gl-links > b { margin-right: 4px; }
.cq-v512 .gl-links > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #d5dbe6; border-radius: 22px; background: #fff; text-decoration: none; }
.cq-v512 .gl-links > a:hover, .cq-v512 .gl-links > a:focus-visible { border-color: #275acb; }

/* 29. 계산기 목록: 갈래마다 4칸·3칸이 섞여 카드 폭이 달랐습니다. 모두 3칸으로 맞춥니다. */
@media (min-width: 900px) { .cq-v512 .cq-tool-group .cq-editorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- 7차(2026-10-27, 휴대폰 위주) ---- */

/* 30. 용어 사전 검색창을 머리 바로 아래로 옮겼습니다. 검색어를 넣는 동안에는 분야 카드를 숨겨 결과가 바로 보이게 합니다. */
.cq-v512 .gl-top-search { margin: 0 0 24px; }
.cq-v512 .gl-top-search .gl-search input { min-height: 52px; font-size: 17px; }
.cq-v512 main:has(#gl-q:not(:placeholder-shown)) .gl-cats { display: none; }

/* 31. 계산 결과 막대가 맨 아래 입력 칸을 가리지 않게 아래 여백을 둡니다. */
.cq-v512.has-resultbar main { padding-bottom: 88px; }
.cq-v512.has-resultbar input, .cq-v512.has-resultbar select { scroll-margin-bottom: 96px; }

/* 32. 휴대폰에서 홈 게임 구역만 상자 안에 상자가 있어 좌우 여백이 두 배였습니다. 바깥 상자의 안쪽 여백을 줄입니다. */
@media (max-width: 600px) { .cq-v512 .cq-home-games { padding: 18px 12px 14px; } }

/* ---- 8차(2026-10-27) ---- */

/* 33. 404 안내 페이지 */
.cq-404 { max-width: 46rem; }
.cq-404-go { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cq-404-go a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid #d5dbe6; border-radius: 14px; background: #fff; color: #132339; text-decoration: none; }
.cq-404-go a:hover, .cq-404-go a:focus-visible { border-color: #2457d6; }
.cq-404-go b { font-size: 18px; }
.cq-404-go span { font-size: 16px; color: #58697b; }
.cq-404-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.cq-404-quick span { font-weight: 700; margin-right: 4px; }
.cq-404-quick a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #c9d3e2; border-radius: 999px; background: #fff; text-decoration: none; }
.cq-404-home a { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 700; }
@media (max-width: 600px) { .cq-404-go { grid-template-columns: 1fr; } }

/* 34. 휴대폰 결과 막대: 금액은 자르지 않고, 길면 이름표 쪽을 줄입니다. */
.cq-resultbar-figure { flex: 0 0 auto; overflow: visible; text-overflow: clip; }
.cq-resultbar-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 35. 카드 이름이 두 줄로 넘어갈 때 안쪽 글자가 한 줄로 버티다 양옆이 잘렸습니다. */
.cq-card-name.is-wrapped > .cq-card-fit { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; }

/* 36. 게시판 목록이 화면 가장자리에 붙어 있었습니다. */
.cq-v512 main > .board-layout { padding: 34px 28px 48px; }
@media (max-width: 600px) { .cq-v512 main > .board-layout { padding: 26px 17px 40px; } }

/* 37. 배우기 글 본문의 계산기 링크가 본문 글자와 구분되지 않았습니다. */
.cq-v512 .education-article p a { color: #2457d6; text-decoration: underline; text-underline-offset: 3px; }

/* 38. 배우기 코스 카드: 제목을 위로 맞추고, 넓은 화면에선 5개를 한 줄에. 분야 칩 아래 여백, 휴대폰에선 옆으로 더 있다는 흐림. */
.cq-v512 .track { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
@media (min-width: 1100px) { .cq-v512 .tracks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cq-v512 .chips { margin-bottom: 18px; }
@media (max-width: 680px) { .cq-v512 .chips { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* 39. 용어 분야 페이지 목차: 휴대폰에서 46개가 한 줄로 길게 늘어졌습니다. 두 단으로. */
@media (max-width: 600px) { .cq-v512 .gl-toc ol { columns: 2; column-gap: 12px; } }

/* 40. 약관: 조항 제목이 페이지 제목보다 컸습니다. */
.cq-v512 .legal-copy h2 { font-size: 26px; }
@media (max-width: 600px) { .cq-v512 .legal-copy h2 { font-size: 22px; } }

/* ---- 9차(2026-11-02) ---- */

/* 41. 계산기 카드 설명이 2줄에서 "…"로 잘렸습니다(홈 6개 중 6개, 계산기 목록 26개 모두. 실제 설명은 3~5줄).
   옛 규칙(.cq-home-tools … line-clamp:2)이 12번보다 세서 12번이 먹지 않았습니다. 계산기 카드는 자르지 않고 다 보여 주고,
   「계산하기 →」는 카드 바닥에 맞춥니다(카드가 이미 세로 flex, b 에 margin-top:auto). */
.cq-v512 .cq-editorial-card.cq-tool-card p { display: block; -webkit-line-clamp: unset; overflow: visible; margin-bottom: 16px; }

/* 42. 1단 계산기(PC 1000px 이상)의 입력 칸이 줄마다 다른 자리에서 시작했습니다(대출: 460·474·794px).
   단위 글자(만원·%·년·만원/년) 너비와 빠른 단추 줄 유무에 따라 칸이 밀렸기 때문입니다.
   이름 | 입력 칸 | 단추 세 칸 격자로 고정하고, 단위 칸 너비를 가장 긴 「만원/년」에 맞춥니다. 2단(.is-split)과 휴대폰은 그대로.
   줄마다 격자가 따로 계산되므로 가운데 칸은 고정 너비(입력 11rem + 간격 + 단위 3.5rem)로 둡니다. 단위가 없는 선택 칸 줄도 같은 자리에서 시작합니다.
   격자 때문에 이름 칸이 좁아져(「가입 기간 평균 소득」이 꺾임) 1단 계산기 폭을 46rem → 52rem 으로 넓힙니다. */
@media (min-width: 1000px) {
  .cq-calc:not(.is-split) { max-width: 52rem; }
  .cq-calc:not(.is-split) .calc-row { display: grid; grid-template-columns: minmax(0, 1fr) 15rem 19rem; column-gap: .75rem; align-items: center; }
  .cq-calc:not(.is-split) .calc-row[hidden] { display: none; }
  .cq-calc:not(.is-split) .calc-row > label { grid-column: 1; }
  .cq-calc:not(.is-split) .calc-row > .calc-entry { grid-column: 2; justify-content: flex-start; }
  .cq-calc:not(.is-split) .calc-row > .calc-steps { grid-column: 3; }
  .cq-calc:not(.is-split) .calc-entry > .calc-unit { min-width: 3.5rem; }
}

/* ---- 10차(2026-11-02, 운영자 지시 "한번에 쭉 다 진행") ---- */

/* 43. 용어 사전 페이지: 머리 글자(왼쪽 28px)와 본문(.gl-page, 가운데 832px)의 왼쪽 끝이 달랐습니다. 넓은 화면에서 머리도 같은 폭에 맞춥니다. */
@media (min-width: 900px) {
  .cq-v512[data-route^="/glossary"] .page-hero > * { max-width: none; padding-left: calc((100% - 832px) / 2); padding-right: calc((100% - 832px) / 2); }
}

/* 44. 게임 목록 「오늘의 게임」의 「시작하기」 누를 곳이 55×27px 였습니다. 44px 높이로. */
.cq-v512 .gt-list .gt-go { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; padding: 0 4px 0 12px; }

/* 45. 게시판 검색창과 글 목록 상자가 붙어 있었습니다(간격 0). */
.cq-v512 #boardList { margin-top: 16px; }

/* 46. 개인정보처리방침 조항 목차(14개). 넓은 화면에선 두 단. */
.cq-v512 .policy-toc { max-width: 46rem; margin: 0 0 32px; padding: 20px 24px; border: 1px solid var(--cq-line, #dbe3ee); border-radius: 14px; background: #fff; }
.cq-v512 .policy-toc > b { display: block; font-size: 18px; margin-bottom: 8px; }
.cq-v512 .policy-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 24px; }
@media (min-width: 720px) { .cq-v512 .policy-toc ol { grid-template-columns: 1fr 1fr; } }
.cq-v512 .policy-toc a { display: block; padding: 8px 0; font-size: 16px; line-height: 1.5; color: #1f4fbf; text-decoration: none; }
.cq-v512 .policy-toc a:hover, .cq-v512 .policy-toc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* 47. 학습 글 끝 「다음 글」 카드(같은 코스의 다음 긴 글). 카드 하나라 너무 넓지 않게. */
.cq-v512 .cq-lesson-next .cq-editorial-grid { grid-template-columns: minmax(0, 32rem); }

/* 48. 홈 히어로: 세전 월급을 넣으면 월급 실수령액 계산기가 그 숫자로 열립니다(공유 링크와 같은 ?c=1&amount=). */
.cq-hero-try { margin-top: 20px; max-width: 30rem; }
.cq-hero-try > label { display: block; margin-bottom: 8px; color: #c3d1e3; font-size: 16px; }
.cq-hero-try-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cq-hero-try-field { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 9rem; min-height: 48px; padding: 0 14px; border-radius: 10px; background: #fff; }
.cq-hero-try-field input { flex: 1 1 auto; min-width: 0; width: 6rem; min-height: 44px; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 18px; font-weight: 700; color: #0b1c33; text-align: right; font-variant-numeric: tabular-nums; }
.cq-hero-try-field span { color: #3d4f73; font-size: 16px; }
.cq-hero-try-field:focus-within { box-shadow: 0 0 0 3px #9cc2ff; }
.cq-hero-try button { min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px; background: #2f6fe4; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.cq-hero-try button:hover { filter: brightness(1.08); }
.cq-hero-try button:focus-visible { outline: 3px solid #9cc2ff; outline-offset: 3px; }

/* 49. 홈 「용어와 기초 다지기」 카드의 단추가 진한 남색으로 화면에서 가장 무거웠습니다. 테두리 단추로 낮춥니다.
       맨 아래 「한 주제를 깊게」는 흰 띠를 깔아 위 구역들과 번갈아 보이게 합니다(게임 구역이 이미 옅은 파랑 띠). */
.cq-v512 .cq-home .cq-editorial-card.has-img > b { background: transparent; color: #1f4fbf; border: 1.5px solid #b8c9e6; }
.cq-v512 .cq-home .cq-editorial-card.has-img:hover > b { background: #eef3fc; color: #173f99; }
.cq-v512 .cq-home > .cq-learn-preview:last-child { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); border-top-color: transparent; margin-top: 64px; padding-bottom: 48px; }

/* 50. 주제 분석·주간 리뷰 글: 맨 위 「핵심 요약」을 상자로(서버가 section.analysis-summary 로 묶음).
       공식·요점·출처 상자가 본문(736px)보다 넓은 1,034px 이라 폭이 들쭉날쭉했습니다. 본문 폭에 맞춥니다.
       표는 줄무늬와 고정폭 숫자로 읽기 쉽게. */
.cq-v512 .issue-html .analysis-summary { max-width: 46rem; margin: 0 0 32px; padding: 20px 24px 6px; border-radius: 14px; background: #f1f6ff; border: 1px solid #cfdcf3; border-left: 4px solid #2f6fe4; }
.cq-v512 .issue-html .analysis-summary > h2 { margin-top: 0; font-size: 20px; color: #173f99; }
.cq-v512 .issue-html .analysis-summary > p { color: #1d2b44; }
.cq-v512 .issue-html > .analysis-formula, .cq-v512 .issue-html > .article-takeaway, .cq-v512 .issue-html > .analysis-sources, .cq-v512 .issue-html > .notice-box { max-width: 46rem; box-sizing: border-box; }
.cq-v512 .issue-html table { font-variant-numeric: tabular-nums; }
.cq-v512 .issue-html tbody tr:nth-child(even) td { background: #f7f9fc; }

/* 51. 머리 그림 갈래 맞추기(2026-11-02, 운영자 지시 "한번에 쭉"). 사이트 머리 그림이 흰 책상·남색 포인트 사진(계산기·분석·용어)과
       따뜻한 나무·크림색(질문 모음·소개·배우기·학습 글)으로 갈려 있었습니다. 뒤의 셋을 흰·남색 사진으로 다시 그리고(Cloudflare FLUX,
       정사각 사진을 오른쪽에 두고 왼쪽은 밝은 단색으로 이어 붙인 3.2:1 띠) 덮개 색도 크림색 → 옅은 파랑으로 바꿉니다.
       홈·게임의 어두운 남색 그림은 글자가 흰 어두운 머리라 그대로 둡니다. 옛 규칙(cq-reader-v520.css 455~490, 558~572)과 같은 폭 조건으로 덮어씁니다. */
.cq-v512[data-page="learn"] .page-hero { background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.95) 54%, rgba(238,242,248,.58) 72%, rgba(238,242,248,.12) 100%), url("/assets/img/band-lesson-v530-1300.webp"); }
.cq-v512[data-page="lesson"] .page-hero { background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.94) 56%, rgba(238,242,248,.45) 76%, rgba(238,242,248,.1) 100%), url("/assets/img/band-lesson-v530-1300.webp"); }
.cq-v512 .cq-page-band { background-color: #eef2f8; background-image: linear-gradient(94deg, rgba(238,242,248,.98) 0%, rgba(238,242,248,.9) 40%, rgba(238,242,248,.42) 68%, rgba(238,242,248,.08) 100%), url("/assets/img/band-lesson-v530-1300.webp"); }
@media (min-width: 1200px) {
  .cq-v512[data-page="learn"] .page-hero { background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.95) 54%, rgba(238,242,248,.58) 72%, rgba(238,242,248,.12) 100%), url("/assets/img/band-lesson-v530-2100.webp"); }
  .cq-v512[data-page="lesson"] .page-hero { background-image: linear-gradient(94deg, rgba(238,242,248,.985) 0%, rgba(238,242,248,.94) 56%, rgba(238,242,248,.45) 76%, rgba(238,242,248,.1) 100%), url("/assets/img/band-lesson-v530-2100.webp"); }
  .cq-v512 .cq-page-band { background-image: linear-gradient(94deg, rgba(238,242,248,.98) 0%, rgba(238,242,248,.9) 40%, rgba(238,242,248,.42) 68%, rgba(238,242,248,.08) 100%), url("/assets/img/band-lesson-v530-2100.webp"); }
}
@media (max-width: 700px) {
  .cq-v512[data-page="learn"] .page-hero { background-image: linear-gradient(180deg, rgba(238,242,248,.97) 0%, rgba(238,242,248,.9) 55%, rgba(238,242,248,.55) 100%), url("/assets/img/band-lesson-v530-1300.webp"); }
  .cq-v512 .cq-page-band { background-image: linear-gradient(180deg, rgba(238,242,248,.88) 0%, rgba(238,242,248,.6) 60%, rgba(238,242,248,.32) 100%), url("/assets/img/band-lesson-v530-1300.webp"); }
}

/* 52. 계산기 갈래 아이콘(2026-11-02): 세금 영수증, 매매 화살표, 노후·목돈 새싹, 생활 집. 갈래 글자색으로 그린 선 아이콘이며,
   글자(갈래 이름) 옆에만 붙고 색·모양만으로 뜻을 전하지 않습니다. 제목 상자 안에는 넣지 않습니다(cardfit 이 폭을 잽니다). */
.cq-v512 .cq-g-tax{--cq-g-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a4a06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9.5 14.5l5-5'/%3E%3Ccircle cx='9.6' cy='9.6' r='1'/%3E%3Ccircle cx='14.4' cy='14.4' r='1'/%3E%3C/svg%3E")}
.cq-v512 .cq-g-trade{--cq-g-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b4bc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 19V5M3.5 8.5L7 5l3.5 3.5'/%3E%3Cpath d='M17 5v14M13.5 15.5L17 19l3.5-3.5'/%3E%3C/svg%3E")}
.cq-v512 .cq-g-later{--cq-g-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d6047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13c0-4.2 2.8-6.5 7-6.5 0 4.2-2.8 6.5-7 6.5z'/%3E%3Cpath d='M12 15.5c0-3.2-2.3-5.2-5.8-5.2 0 3.2 2.3 5.2 5.8 5.2z'/%3E%3C/svg%3E")}
.cq-v512 .cq-g-living{--cq-g-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b2f96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6.5 9.5V20h11V9.5'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E")}
.cq-v512 .cq-tool-jump a[class*="cq-g-"]>i{width:20px;height:20px;border-radius:0;background:var(--cq-g-icon) center/contain no-repeat}
.cq-v512 .cq-tool-group[class*="cq-g-"] .cq-section-heading h2{display:flex;align-items:center;gap:12px}
.cq-v512 .cq-tool-group[class*="cq-g-"] .cq-section-heading h2::before{content:"";flex:none;width:44px;height:44px;border-radius:var(--cq-radius-sm,8px);background:var(--cq-chip-bg) var(--cq-g-icon) center/26px no-repeat}
.cq-v512 .page-hero .kicker[class*="cq-g-"]::before,.cq-v512 .cq-tool-card[class*="cq-g-"]>span:first-child::before{content:"";display:inline-block;width:1.25em;height:1.25em;margin-right:6px;vertical-align:-.28em;background:var(--cq-g-icon) center/contain no-repeat}

/* 53. 주제 분석 사진(2026-11-02). 카드 위에 글이 다룬 계산기 갈래의 사진 띠(16:7)를, 글 머리 오른쪽에 같은 갈래 사진을 깝니다.
   사진은 Cloudflare FLUX 로 그린 흰 책상·남색 물건 사진이고 글자가 없습니다. 갈래는 글자(이름)와 아이콘으로도 적습니다. */
.cq-v512 .cq-analysis-card.has-photo{padding-top:0;overflow:hidden}
.cq-v512 .cq-analysis-card.has-photo>.cq-card-photo{display:block;width:calc(100% + 48px);max-width:none;margin:0 -24px 18px;aspect-ratio:16/7;height:auto;object-fit:cover;border-bottom:1px solid var(--cq-line)}
.cq-v512 .cq-analysis-card[class*="cq-g-"]>span{color:var(--cq-chip-fg);font-weight:650}
.cq-v512 .cq-analysis-card[class*="cq-g-"]>span::before{content:"";display:inline-block;width:1.2em;height:1.2em;margin-right:6px;vertical-align:-.26em;background:var(--cq-g-icon) center/contain no-repeat}
.cq-v512 .issue-mast.cq-an-band{background-color:#fff;background-repeat:no-repeat;background-size:cover;background-position:right center}
.cq-v512 .issue-mast.cq-an-tax{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-tax-v530-1300.webp")}
.cq-v512 .issue-mast.cq-an-trade{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-trade-v530-1300.webp")}
.cq-v512 .issue-mast.cq-an-later{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-later-v530-1300.webp")}
.cq-v512 .issue-mast.cq-an-living{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-living-v530-1300.webp")}
@media (min-width:1400px),(min-resolution:2dppx) and (min-width:700px){
  .cq-v512 .issue-mast.cq-an-tax{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-tax-v530-2100.webp")}
  .cq-v512 .issue-mast.cq-an-trade{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-trade-v530-2100.webp")}
  .cq-v512 .issue-mast.cq-an-later{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-later-v530-2100.webp")}
  .cq-v512 .issue-mast.cq-an-living{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-living-v530-2100.webp")}
}
/* 넓은 화면: 제목과 요약은 왼쪽 64% 안에서 끝나 사진 위로 넘어가지 않습니다. */
@media (min-width:901px){.cq-v512 .issue-mast.cq-an-band h1,.cq-v512 .issue-mast.cq-an-band .deck{max-width:64%}}
/* 좁은 화면: 글이 폭을 다 쓰므로 사진은 위에서 아래로 덮어 아주 옅게만 비칩니다. */
@media (max-width:900px){.cq-v512 .issue-mast.cq-an-band{background-image:none}}

/* 54. 계산기 갈래 둘 추가(2026-11-03): 직장(work, 주황 · 서류 가방)과 주거(home, 청록 · 집). 생활(living)은 집 대신 지갑 아이콘으로 바꿉니다.
   색 변수는 cq-reader-v520.css 의 다른 갈래와 같은 방식(.cq-g-*, 계산기 페이지 [data-group])이고, 글자색은 바탕과의 대비 4.5 이상입니다. */
.cq-g-work{--cq-chip-bg:#fde8df;--cq-chip-fg:#a33a12}
.cq-v512[data-page="tool"][data-group="work"]{--cq-chip-bg:#fde8df;--cq-chip-fg:#a33a12}
.cq-g-home{--cq-chip-bg:#dff0f5;--cq-chip-fg:#0b5368}
.cq-v512[data-page="tool"][data-group="home"]{--cq-chip-bg:#dff0f5;--cq-chip-fg:#0b5368}
.cq-v512 .cq-g-work{--cq-g-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a33a12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E")}
.cq-v512 .cq-g-home{--cq-g-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6.5 9.5V20h11V9.5'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E")}
.cq-v512 .cq-g-living{--cq-g-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b2f96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11'/%3E%3Ccircle cx='16' cy='13.5' r='1'/%3E%3C/svg%3E")}
.cq-v512 .issue-mast.cq-an-work{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-work-v531-1300.webp")}
.cq-v512 .issue-mast.cq-an-home{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-home-v531-1300.webp")}
.cq-v512 .issue-mast.cq-an-living{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-living-v531-1300.webp")}
@media (min-width:1400px),(min-resolution:2dppx) and (min-width:700px){
  .cq-v512 .issue-mast.cq-an-work{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-work-v531-2100.webp")}
  .cq-v512 .issue-mast.cq-an-home{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-home-v531-2100.webp")}
  .cq-v512 .issue-mast.cq-an-living{background-image:linear-gradient(94deg,#fff 0%,rgba(255,255,255,.97) 52%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.06) 100%),url("/assets/img/band-an-living-v531-2100.webp")}
}
@media (max-width:900px){.cq-v512 .issue-mast.cq-an-band{background-image:none}}