안에 있으면 문단 기본 여백이 카드 패딩에 더해져 상하가 어긋난다 */ .lq-chart p { margin: 0; } .lq-mini-grid { display: grid; grid-template-columns: 0.9fr 0.9fr 1.2fr; gap: 12px; margin: 0 0 1rem; } .lq-mini { padding: 16px; min-width: 0; } .lq-mini h4 { margin: 0 0 10px; font-size: 0.8rem; } .lq-mini .r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.8rem; color: var(--wp--preset--color--text-2); } .lq-opinion { padding: 20px; margin: 0 0 1rem; } .lq-opinion > h3 { margin: 0 0 13px; font-size: 1rem; } .lq-opinion p { margin: 14px 0 0; color: var(--wp--preset--color--text-2); font-size: 0.875rem; } .lq-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .lq-status .s { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; font-size: 0.75rem; font-weight: 700; background: var(--wp--preset--color--surface-soft); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; } .lq-details { overflow: hidden; margin: 0 0 1rem; } .lq-details summary { cursor: pointer; list-style: none; padding: 15px 18px; font-weight: 720; font-size: 0.875rem; } .lq-details summary::-webkit-details-marker { display: none; } .lq-details[open] summary { border-bottom: 1px solid var(--wp--preset--color--line); } .lq-details .body { padding: 18px; font-size: 0.84rem; color: var(--wp--preset--color--text-2); } .lq-footnotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1rem; } /* 각주는 참고 등급이다 — 카드에서 빼 면책이 데이터만큼 중요해 보이지 않게 한다. 마크업에서 .lq-card를 떼고 이 배경 한 덩어리로 받는다 */ .lq-footnotes .f { padding: 18px 20px; background: var(--wp--preset--color--surface-soft); border-radius: var(--lq-radius-sm); } .lq-footnotes h4 { margin: 0 0 8px; font-size: 0.8rem; } .lq-footnotes p, .lq-footnotes ul { margin: 0; color: var(--wp--preset--color--text-3); font-size: 0.69rem; line-height: 1.7; } .lq-footnotes ul { padding-left: 16px; } .lq-note { margin: 0.6rem 0 1rem; font-size: 0.72rem; color: var(--wp--preset--color--text-3); line-height: 1.6; } .lq-sig { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--wp--preset--color--line); font-size: 0.75rem; line-height: 1.7; color: var(--wp--preset--color--text-3); } .lq-sig .stamp { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; margin-bottom: 6px; font-variant-numeric: tabular-nums; } /* ---------- 홈 ---------- */ .lq-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0.7rem; color: var(--wp--preset--color--brand); font-size: 0.81rem; font-weight: 750; } .lq-hero-title { margin: 0; max-width: 620px; font-size: clamp(2.9rem, 5vw, 4.6rem); line-height: 1.08; font-weight: 830; letter-spacing: -0.055em; } .lq-hero-copy { max-width: 570px; margin: 1.5rem 0 0; font-size: 1.125rem; line-height: 1.85; letter-spacing: -0.015em; } .lq-hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 64px; align-items: center; } .lq-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .lq-principles .p { display: flex; gap: 16px; padding: 22px; } .lq-principles h3 { margin: 1px 0 5px; font-size: 1rem; letter-spacing: -0.02em; } .lq-principles p { margin: 0; color: var(--wp--preset--color--text-2); font-size: 0.875rem; line-height: 1.6; } .lq-featured { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 26px; padding: 26px; align-items: stretch; } .lq-featured .meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .lq-featured h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.25; letter-spacing: -0.045em; } .lq-featured ul { margin: 20px 0 26px; padding-left: 19px; color: var(--wp--preset--color--text-2); font-size: 0.94rem; } .lq-featured li + li { margin-top: 8px; } /* 대기 표시 — 지난 시황은 흐리고 그 위에 안내를 얹는다 (D-BP79). 테마 PHP가 요청 시각을 보고 .lq-stale로 감쌀 때만 켜진다. .lq-featured 안쪽은 건드리지 않는다 — 그 2열 grid가 계약이다 */ .lq-featured-wrap { position: relative; } .lq-veil { display: none; } .lq-stale .lq-featured { filter: blur(7px); pointer-events: none; user-select: none; } .lq-stale .lq-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; } .lq-stale .lq-veil .t { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.03em; } .lq-stale .lq-veil .g { margin: 0; font-size: 0.9rem; color: var(--wp--preset--color--text-2); } /* 한 번도 발행되지 않은 상태 — 흐릴 내용이 없어도 카드 높이는 있어야 한다 */ .lq-placeholder { min-height: 240px; } .lq-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 999px; background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); font-size: 0.75rem; font-weight: 750; } .lq-pill a { text-decoration: none; color: inherit; } .lq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--lq-radius-sm); background: var(--wp--preset--color--brand); color: #fff; font-size: 0.9rem; font-weight: 750; text-decoration: none; box-shadow: 0 10px 24px rgba(18, 86, 94, .18); } .lq-btn:hover { background: color-mix(in srgb, var(--wp--preset--color--brand) 86%, #000); text-decoration: none; } .lq-timeline { overflow: hidden; } .lq-timeline .wp-block-post-template { margin: 0; padding: 0; list-style: none; } .lq-timeline .lq-tl-row { display: grid !important; /* 날짜·분류·제목·시각 네 칸. 제목이 남는 폭을 전부 가져간다 */ grid-template-columns: 88px 108px minmax(0, 1fr) 60px; gap: 12px; align-items: center; min-height: 54px; padding: 8px 18px; border-bottom: 1px solid var(--wp--preset--color--line); } .lq-timeline .wp-block-post-template > li:last-child .lq-tl-row { border-bottom: 0; } .lq-timeline .lq-tl-row:hover { background: var(--wp--preset--color--surface-soft); } .lq-timeline .lq-tl-date { font-weight: 800; font-variant-numeric: tabular-nums; } .lq-timeline .lq-tl-title { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -0.02em; } .lq-timeline .lq-tl-title a { text-decoration: none; } .lq-timeline .lq-tl-title a:hover { text-decoration: underline; } /* 칸(108px)을 꽉 채우는 칩이라 글자가 왼쪽에 붙는다 — 격자 항목은 inline-flex도 블록으로 바뀌어 칸 너비만큼 늘어나기 때문이다. 글자를 가운데로 모은다. */ .lq-timeline .lq-pill { justify-content: center; } .lq-timeline .lq-tl-time { text-align: right; font-variant-numeric: tabular-nums; } .lq-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .lq-cats .c { display: flex; flex-direction: column; min-height: 190px; padding: 24px; color: inherit; text-decoration: none; } .lq-cats .lq-ico { margin-bottom: 30px; } .lq-cats h3 { margin: 0 0 8px; font-size: 1.125rem; letter-spacing: -0.025em; } .lq-cats h3 em { font-style: normal; font-size: 0.66rem; font-weight: 600; color: var(--wp--preset--color--text-3); border: 1px solid var(--wp--preset--color--line-strong); border-radius: 999px; padding: 2px 7px; vertical-align: 3px; margin-left: 4px; } .lq-cats p { margin: 0; color: var(--wp--preset--color--text-2); font-size: 0.875rem; line-height: 1.6; } .lq-cats .go { margin-top: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--wp--preset--color--line-strong); color: var(--wp--preset--color--brand); } /* ---------- 본문 지면 ---------- */ .lq-lead { margin: 0 0 1.8rem; font-size: 1.06rem; line-height: 1.8; color: var(--wp--preset--color--text-2); } .lq-data-shell { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; } .lq-data-main { min-width: 0; } .lq-grid { display: grid; gap: 12px; margin: 0 0 1.4rem; } .lq-grid.g2 { grid-template-columns: 1fr 1fr; } .lq-grid.g3 { grid-template-columns: repeat(3, 1fr); } .lq-grid.g4 { grid-template-columns: repeat(4, 1fr); } .lq-grid.g5 { grid-template-columns: repeat(5, 1fr); } .lq-grid .box { padding: 18px; display: flex; flex-direction: column; } .lq-grid .box.tall { min-height: 190px; } .lq-grid .box .lq-ico { margin-bottom: 15px; } .lq-grid .box h3 { margin: 0 0 7px; font-size: 0.94rem; letter-spacing: -0.02em; } .lq-grid .box p { margin: 0; color: var(--wp--preset--color--text-2); font-size: 0.78rem; line-height: 1.6; } .lq-grid .box .go { margin-top: auto; padding-top: 14px; color: var(--wp--preset--color--brand); font-weight: 700; font-size: 0.9rem; } .lq-src .tag { min-height: 34px; display: flex; align-items: center; font-family: var(--wp--preset--font-family--mono); font-size: 0.86rem; font-weight: 800; letter-spacing: -0.02em; color: var(--wp--preset--color--brand); margin-bottom: 14px; } .lq-src h3 { font-size: 0.86rem; } .lq-ai { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 24px; } .lq-ai h3 { margin: 0 0 7px; font-size: 1.125rem; } .lq-ai p { margin: 0 0 12px; color: var(--wp--preset--color--text-2); font-size: 0.82rem; } .lq-ai ul { margin: 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--wp--preset--color--text-2); } .lq-ai li { padding-left: 16px; position: relative; } .lq-ai li + li { margin-top: 6px; } .lq-ai li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--brand); font-weight: 700; } .lq-lock { display: flex; gap: 18px; align-items: center; padding: 20px 22px; margin: 0 0 1.4rem; background: linear-gradient(90deg, #FDF6F3, #FFFCFB); border: 1px solid #F6DCD2; border-radius: 16px; } .lq-lock h3 { margin: 0 0 5px; font-size: 0.94rem; } .lq-lock p { margin: 0; color: var(--wp--preset--color--text-2); font-size: 0.78rem; line-height: 1.7; } /* 면책은 문장마다 끊어 목록으로 둔다 — 한 문단으로 흘리면 네 가지 약속이 한 덩어리로 읽혀 무엇을 안 한다는 것인지 눈에 안 들어온다. 표식 색은 이 배너의 아이콘색(#C0392B)을 그대로 쓴다 */ .lq-lock ul { margin: 0; padding: 0; list-style: none; } .lq-lock li { position: relative; padding-left: 15px; color: var(--wp--preset--color--text-2); font-size: 0.78rem; line-height: 1.7; word-break: keep-all; } .lq-lock li + li { margin-top: 5px; } .lq-lock li::before { content: "\2022"; position: absolute; left: 0; color: #C0392B; font-weight: 700; } /* 지면 마지막 배너의 아래 여백은 죽은 공간이다 — 뒤에 올 블록이 없다 */ .lq-data-main > .lq-lock:last-child { margin-bottom: 0; } /* ---------- 처리 흐름 (가로 5단계) ---------- */ /* ---------- 반응형 ---------- */ @media (max-width: 1024px) { /* 5칸이 다 안 들어가면 가로로 민다 — 줄여서 뭉개는 것보다 낫다 */ .lq-strip-row { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; } .lq-strip-row::-webkit-scrollbar { display: none; } .lq-hero-grid { grid-template-columns: 1fr; } .lq-grid.g5 { grid-template-columns: repeat(3, 1fr); } .lq-grid.g4 { grid-template-columns: repeat(2, 1fr); } .lq-mini-grid { grid-template-columns: 1fr 1fr; } .lq-mini-grid > :last-child { grid-column: 1 / -1; } } @media (max-width: 820px) { .lq-hero-title { font-size: clamp(2.6rem, 10vw, 3.6rem); } .lq-principles, .lq-cats { grid-template-columns: repeat(2, 1fr); } .lq-featured, .lq-duo, .lq-ai { grid-template-columns: 1fr; } .lq-metrics { grid-template-columns: repeat(5, minmax(130px, 1fr)); overflow-x: auto; } .lq-status { grid-template-columns: repeat(2, 1fr); } .lq-footnotes { grid-template-columns: 1fr; } .lq-grid.g3, .lq-grid.g5 { grid-template-columns: repeat(2, 1fr); } .lq-grid.g2 { grid-template-columns: 1fr; } } @media (max-width: 580px) { .lq-hero-title { font-size: 2.7rem; } /* 두 칸으로 버틸 수 있는 것은 두 칸으로 둔다 — 전부 1열로 떨어뜨리면 About이 11화면이 된다 (실측 2026-08-22). 글이 긴 g2만 1열. */ .lq-grid.g2 { grid-template-columns: 1fr; } .lq-principles, .lq-cats, .lq-grid.g3, .lq-grid.g4, .lq-grid.g5 { grid-template-columns: repeat(2, 1fr); } .lq-cats .c, .lq-grid .box.tall { min-height: 0; } .lq-grid .box { padding: 14px; } .lq-grid .box h3 { font-size: 0.86rem; } .lq-grid .box p { font-size: 0.72rem; line-height: 1.55; } .lq-grid .box .lq-ico { margin-bottom: 10px; } .lq-cats .lq-ico { margin-bottom: 14px; } /* 아이콘 옆 배치는 폭이 모자란다 — 위아래로 세운다 */ .lq-principles .p { flex-direction: column; gap: 10px; padding: 16px; } .lq-principles h3 { font-size: 0.88rem; } .lq-principles p { font-size: 0.76rem; } .lq-ico { width: 38px; height: 38px; border-radius: 12px; } .lq-ico svg { width: 19px; height: 19px; } .lq-mini-grid { grid-template-columns: 1fr; } .lq-mini-grid > :last-child { grid-column: auto; } .lq-timeline .lq-tl-row { grid-template-columns: 66px minmax(0, 1fr) 46px; padding: 9px 13px; gap: 9px; } .lq-timeline .lq-pill { display: none; } .lq-featured { padding: 18px; } .lq-lock { align-items: flex-start; } /* 숫자 표에서 12.5px는 작다. 6행이라 13px로 올려도 높이는 ~40px만 는다 (실측) */ .lq-table { font-size: 0.82rem; } .lq-table th, .lq-table td { padding: 9px 6px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* 브랜드 마크는 달 — 궤도 중심에서는 잉크색으로 크게 */ .lq-brand .lq-mark { color: var(--wp--preset--color--text); } /* 브랜드 잠금 — 심볼과 워드마크는 같은 잉크색, 금색 점만 강조 */ .lq-brand, .lq-brand a { color: var(--wp--preset--color--text); } .lq-brand .lq-mark { width: 34px; height: 34px; color: var(--wp--preset--color--text); } .lq-header .lq-brand { gap: 12px; } footer .lq-brand .lq-mark { width: 28px; height: 28px; } /* 2단 레이아웃은 본문 폭이 아니라 컨테이너 폭을 쓴다 — constrained 제약을 넘어선다 */ .wp-block-post-content > .lq-data-shell, .wp-block-post-content > .lq-shell { max-width: var(--lq-container) !important; } /* 그리드 칸 안에서 좌우 패딩이 또 붙으면 본문이 좁아진다 */ .lq-shell > .lq-main.has-global-padding { padding-left: 0; padding-right: 0; } .lq-shell > .lq-main > .wp-block-post-content { max-width: none; } /* ---------- 숫자 요약 ---------- */ .lq-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0 0 0.6rem; overflow: hidden; background: var(--wp--preset--color--line); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; } .lq-stats .s { padding: 20px 18px; background: var(--wp--preset--color--surface); } .lq-stats strong { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--brand); } .lq-stats span { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--wp--preset--color--text-2); } @media (max-width: 820px) { .lq-stats { grid-template-columns: repeat(2, 1fr); } } /* 숫자 4개는 좁아도 2×2가 낫다 — 1열이면 4행이 된다 */ @media (max-width: 580px) { .lq-stats { grid-template-columns: repeat(2, 1fr); } } /* 데이터 페이지 사이드바는 보조 정보다 — 본문과 함께 흐르게 둔다 */ /* 전용 템플릿이 폭을 정하므로 본문 안에서 다시 제한하지 않는다 */ .lq-data-shell { max-width: none; width: 100%; } /* ---------- 넓은 페이지 ---------- */ /* 카드·표는 컨테이너 폭을 다 쓰고, 읽는 글만 좁힌다 — 한글은 한 줄이 길면 안 읽힌다 */ .lq-wide .wp-block-post-content > p, .lq-wide .wp-block-post-content > h2, .lq-wide .wp-block-post-content > h3, .lq-wide .wp-block-post-content > ul, .lq-wide .wp-block-post-content > ol { max-width: 820px; } .lq-wide .wp-block-post-content > h2 { margin-top: 2.6rem; } .lq-wide .wp-block-post-content > .lq-data-shell > .lq-data-main > h2:first-child { margin-top: 0; } /* ---------- 히어로 비주얼 ---------- */ .lq-hero-visual { display: grid; place-items: center; } .lq-hero-visual img { width: 100%; height: auto; max-width: 560px; } @media (max-width: 1024px) { .lq-hero-visual { display: none; } } /* ---------- 히어로 비율 재조정 ---------- */ /* 글 칸은 제목 한 줄에 필요한 만큼만 주고 나머지를 이미지에 몰아준다 */ .lq-hero-grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; } .lq-hero-visual img { max-width: none; width: 100%; } /* 화면이 넓으면 컨테이너 바깥 여백까지 이미지가 쓰게 한다 — 1300px에서 정확히 화면 끝에 닿으므로 가로 스크롤이 생기지 않는다 */ @media (min-width: 1300px) { .lq-hero-visual { margin-right: -60px; } } /* 사이드 제거 — 본문 단일 칸 가운데 정렬 */ .lq-data-shell.solo { grid-template-columns: minmax(0, 1fr); max-width: 940px; margin-inline: auto; } .lq-say { margin: 0 0 1.35rem; font-size: 0.9rem; line-height: 1.85; color: var(--wp--preset--color--text-2); } /* 데이터 출처 구조도 — 본문보다 좁게, 좁은 화면은 카드로 교체 */ /* 구조도·운영 화면은 780px 그대로 두고 지면 한가운데 세운다 — 본문이 1180px를 다 쓰므로 그림을 왼쪽에 붙이면 오른쪽이 통째로 빈다 (사용자 결정 2026-08-28) */ .lq-sources { max-width: 780px; margin: 0 auto 1rem; padding: 0; } .lq-sources img { display: block; width: 100%; height: auto; } .lq-src-cards { display: none; } @media (max-width: 700px) { .lq-sources { display: none; } .lq-src-cards { display: grid; } } /* 처리 순서 8단계 — 가로 타임라인. 번호 원을 관통하는 진행선이 순서를 만든다 */ .lq-flow8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 10px; padding: 32px 20px 26px; margin: 0 0 1rem; background: var(--wp--preset--color--surface-soft); border: 1px solid var(--wp--preset--color--line); border-radius: var(--lq-radius); } .lq-flow8 .s { position: relative; min-width: 0; text-align: center; } /* 이 단계 번호 중심에서 다음 단계 번호 중심까지 잇는다 (칸 폭 + gap) */ .lq-flow8 .s::before { content: ""; position: absolute; top: 13px; left: 50%; width: calc(100% + 10px); height: 2px; background: var(--wp--preset--color--brand); } /* 4번부터는 아직 만들지 않은 구간 — 점선으로 넘어간다 */ .lq-flow8 .s:nth-child(n+4)::before { background: none; height: 0; border-top: 2px dashed var(--wp--preset--color--line-strong); } .lq-flow8 .s:last-child::before { content: none; } .lq-flow8 .n { position: relative; z-index: 1; width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--brand); color: #fff; font-size: 0.74rem; font-weight: 760; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px var(--wp--preset--color--surface-soft); } .lq-flow8 .ic { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); } .lq-flow8 .ic svg { width: 20px; height: 20px; } .lq-flow8 h4 { margin: 0 0 5px; font-size: 0.775rem; letter-spacing: -0.03em; word-break: keep-all; } .lq-flow8 p { margin: 0; font-size: 0.66rem; line-height: 1.5; color: var(--wp--preset--color--text-3); word-break: keep-all; } .lq-flow8 .badge { display: inline-block; margin-top: 7px; padding: 2px 7px; border-radius: 999px; background: var(--wp--preset--color--line); color: var(--wp--preset--color--text-3); font-size: 0.58rem; font-weight: 700; } /* 아직 만들지 않은 단계 */ .lq-flow8 .s.soon .n { background: var(--wp--preset--color--line-strong); color: var(--wp--preset--color--text-2); } .lq-flow8 .s.soon .ic { background: var(--wp--preset--color--surface); border: 1px dashed var(--wp--preset--color--line-strong); color: var(--wp--preset--color--text-3); } .lq-flow8 .s.soon h4 { color: var(--wp--preset--color--text-2); } /* 한 줄에 8개가 안 들어가면 4개씩 접는다 — 행 끝 진행선은 끊는다 */ @media (max-width: 1000px) { .lq-flow8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 10px; } .lq-flow8 .s:nth-child(4n)::before { content: none; } .lq-flow8 .s:nth-child(n+4)::before { content: ""; } .lq-flow8 .s:nth-child(4)::before, .lq-flow8 .s:last-child::before { content: none; } } @media (max-width: 720px) { .lq-flow8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lq-flow8 .s::before, .lq-flow8 .s:nth-child(n+4)::before { content: none; } .lq-flow8 .s:nth-child(odd)::before { content: ""; } } /* 460px 아래에서도 두 칸을 유지한다 — 1열이면 8행이 되어 절 하나가 1,700px가 된다. 다만 글씨를 10px까지 줄이면 읽을 수 없다. 11.5px 아래로 내리지 않는다. */ @media (max-width: 460px) { .lq-flow8 { padding: 26px 12px 20px; gap: 26px 8px; } .lq-flow8 .ic { width: 36px; height: 36px; margin-bottom: 8px; } .lq-flow8 .ic svg { width: 18px; height: 18px; } .lq-flow8 h4 { font-size: 0.8rem; } .lq-flow8 p { font-size: 0.72rem; line-height: 1.5; } .lq-flow8 .badge { font-size: 0.66rem; padding: 2px 8px; } } /* 사이드 없는 단일 칸. 940px에서는 2열 카드가 각 421px밖에 못 받아 세 축 표의 머리글이 두 줄로 접히고 옆 차트 카드와 아랫변이 50px 어긋났다. 1040px에서 머리글이 한 줄로 들어가며 차이가 5px로 줄어든다 (실측 2026-08-24). 더 넓히면 차트만 커져 다시 벌어진다. */ .lq-shell.solo { grid-template-columns: minmax(0, 1fr); max-width: 1040px; } /* 글 제목 — 본문 h2보다 확실히 앞서게 크기·굵기를 올리고 줄간격·자간을 조인다 */ .wp-block-post-title { font-size: clamp(2.2rem, 4.6vw, 3.15rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.045em; /* 한글은 음절 사이 어디서나 끊긴다 — 띄어쓰기에서만 줄을 바꾼다 */ word-break: keep-all; /* balance는 줄 길이를 맞추느라 첫 줄을 덜 채운다. 폭을 다 쓰되 마지막 줄에 한 단어만 남는 것만 막는다 */ text-wrap: pretty; } /* 이름 풀이 — 낱말을 크게 세우고 아래에 요소별 뜻을 붙인다 */ .lq-name { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 1rem; } .lq-name .w { padding: 26px 24px; } .lq-name .big { font-size: 2rem; font-weight: 820; letter-spacing: -0.05em; line-height: 1.05; } .lq-name .sub { margin-top: 6px; font-size: 0.74rem; font-weight: 750; letter-spacing: -0.01em; color: var(--wp--preset--color--brand); } .lq-name .rows { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--wp--preset--color--line); } .lq-name .r { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: baseline; } .lq-name .r b { font-size: 0.8rem; font-weight: 780; letter-spacing: -0.02em; } .lq-name .r span { font-size: 0.765rem; line-height: 1.65; color: var(--wp--preset--color--text-2); word-break: keep-all; } /* 원칙이 넷일 때는 2열로 접는다 */ .lq-principles.four { grid-template-columns: repeat(2, 1fr); } /* 지금 도는 것 / 준비 중인 것 대비 */ @media (max-width: 700px) { /* 이름 풀이는 낱말별 뜻이 붙어 폭이 필요하다 — 1열로 둔다. 원칙 4개는 짧아서 2열로 버틴다 (1열이면 절 하나가 720px) */ .lq-name { grid-template-columns: minmax(0, 1fr); } .lq-name .r { grid-template-columns: 84px minmax(0, 1fr); } } /* 상태값 색 — 등락(적/청)과 겹치면 'risk_off'가 상승으로 읽힌다 */ .lq-alert { color: #B45309; } .lq-calm { color: var(--wp--preset--color--brand); } /* 목록 요약은 두 줄로 잘라 카드 높이를 맞춘다 */ .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; } /* 지금 동작 / 준비 중 압축 요약 — 8단계 타임라인 아래 한 덩어리 */ .lq-nowsoon { display: grid; gap: 11px; margin: 0 0 1rem; padding: 20px 22px; background: var(--wp--preset--color--surface-soft); border: 1px solid var(--wp--preset--color--line); border-radius: var(--lq-radius-sm); } .lq-nowsoon .r { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: baseline; } .lq-nowsoon .k { padding: 3px 0; border-radius: 999px; text-align: center; font-size: 0.665rem; font-weight: 760; letter-spacing: -0.01em; } .lq-nowsoon .k.on { background: var(--wp--preset--color--brand); color: #fff; } .lq-nowsoon .k.off { border: 1px dashed var(--wp--preset--color--line-strong); color: var(--wp--preset--color--text-3); } .lq-nowsoon .v { font-size: 0.785rem; line-height: 1.7; color: var(--wp--preset--color--text-2); word-break: keep-all; } @media (max-width: 560px) { .lq-nowsoon .r { grid-template-columns: minmax(0, 1fr); gap: 5px; } .lq-nowsoon .k { justify-self: start; padding: 3px 11px; } } /* 절 이동 막대 — 긴 페이지 상단에 붙는다. 헤더 아래 sticky */ .lq-jump { /* 고정하면 스크롤 내내 카드 위를 덮는다 — 맨 위에서 한 번 쓰고 흘려보낸다 */ display: flex; gap: 7px; margin: 0 0 1.8rem; padding: 0 0 16px; overflow-x: auto; scrollbar-width: none; background: var(--wp--preset--color--ground); border-bottom: 1px solid var(--wp--preset--color--line); } .lq-jump::-webkit-scrollbar { display: none; } .lq-jump a { flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--text-2); font-size: 0.74rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .lq-jump a:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); } /* 앵커로 뛰었을 때 제목이 sticky 막대 뒤에 숨지 않게 */ .lq-data-main h2 { scroll-margin-top: 120px; } /* 문단에 폭 제한을 두지 않는다 — 780px로 좁혔더니 제목·목록·표·카드만 지면 폭을 다 쓰고 문단은 혼자 좁아, 오른쪽 끝이 어긋나고 한 줄짜리 문장이 두 줄로 접혔다 (실측 2026-08-28 공지 3편·About) */ /* 오늘 판정 한 줄 — 요점 3줄 바로 뒤. 상세 서술은 글 끝에 그대로 둔다 */ .lq-verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 1.5rem; padding: 14px 18px; border: 1px solid var(--wp--preset--color--line); border-left: 3px solid var(--wp--preset--color--brand); border-radius: var(--lq-radius-sm); background: var(--wp--preset--color--surface); } .lq-verdict .k { padding: 3px 10px; border-radius: 999px; background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); font-size: 0.68rem; font-weight: 760; white-space: nowrap; } .lq-verdict .v { font-size: 0.85rem; color: var(--wp--preset--color--text-2); word-break: keep-all; } .lq-verdict .v b { font-weight: 780; } .lq-verdict .go { margin-left: auto; font-size: 0.74rem; font-weight: 700; white-space: nowrap; color: var(--wp--preset--color--text-3); text-decoration: none; } .lq-verdict .go:hover { color: var(--wp--preset--color--brand); } @media (max-width: 560px) { .lq-verdict .go { margin-left: 0; } } /* 홈 하단 통합 패널 — 발행 지면 3 + 원칙 3을 한 카드 안 6칸으로 묶는다 */ .lq-about { padding: 26px 26px 24px; } .lq-about-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--wp--preset--color--line); } .lq-about-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.035em; } .lq-about-head .more { font-size: 0.8rem; font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--wp--preset--color--brand); } .lq-about-head .more:hover { text-decoration: underline; } .lq-about-group + .lq-about-group { margin-top: 26px; } .lq-about-group .lbl { margin: 0 0 12px; font-size: 0.7rem; font-weight: 760; letter-spacing: 0.02em; color: var(--wp--preset--color--text-3); } .lq-about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } /* min-height를 두지 않는다 — 설명이 한두 줄이라 바닥이 통째로 빈다 */ .lq-about-grid .c { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px 18px; background: var(--wp--preset--color--surface-soft); border: 1px solid var(--wp--preset--color--line); border-radius: var(--lq-radius-sm); color: inherit; text-decoration: none; } /* 링크인 칸만 반응한다 — 원칙 칸은 누를 데가 없으니 그대로 둔다 */ .lq-about-grid a.c:hover { border-color: var(--wp--preset--color--brand); background: var(--wp--preset--color--surface); } /* 아이콘은 왼쪽 열에 걸쳐 세우고, 오른쪽 열에 제목·설명을 쌓는다 */ .lq-about-grid .lq-ico { grid-row: 1 / 3; align-self: start; margin: 2px 0 0; width: 38px; height: 38px; border-radius: 12px; } .lq-about-grid .lq-ico svg { width: 19px; height: 19px; } .lq-about-grid h3 { margin: 0; font-size: 0.94rem; letter-spacing: -0.025em; word-break: keep-all; } .lq-about-grid h3 em { margin-left: 6px; padding: 2px 7px; border-radius: 999px; vertical-align: 2px; background: var(--wp--preset--color--line); color: var(--wp--preset--color--text-3); font-size: 0.58rem; font-style: normal; font-weight: 700; } .lq-about-grid p { margin: 0; font-size: 0.79rem; line-height: 1.6; color: var(--wp--preset--color--text-2); word-break: keep-all; } /* 화살표는 제목 옆에 — 바닥으로 밀면 카드에 빈 공간이 생긴다 */ .lq-about-grid .go { grid-column: 2; justify-self: end; margin-top: -22px; color: var(--wp--preset--color--brand); font-weight: 700; font-size: 0.85rem; } @media (max-width: 820px) { .lq-about { padding: 24px 22px 22px; } .lq-about-grid { grid-template-columns: repeat(2, 1fr); } .lq-about-grid .c { min-height: 0; } } @media (max-width: 560px) { .lq-about-head { flex-direction: column; gap: 8px; } .lq-about-grid { grid-template-columns: 1fr; } } /* ---------- 좁은 화면에서 지표는 감싼다 ---------- 5칸을 가로로 밀면 오른쪽이 잘린 것처럼 보인다. 스크롤 대신 두 줄로 접는다. */ @media (max-width: 580px) { .lq-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; } .lq-strip-row .cell:last-child { grid-column: 1 / -1; } .lq-strip-top { flex-direction: column; align-items: flex-start; gap: 2px; } .lq-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; } .lq-metrics .m { border-right: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); } .lq-metrics .m:nth-child(2n) { border-right: 0; } .lq-metrics .m:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; } } /* ---------- 손가락으로 누를 크기 ---------- 실측에서 햄버거 24x24, 푸터 링크 높이 15~17px이 나왔다. 권장은 44px다. */ /* display는 건드리지 않는다 — 코어가 600px 이상에서 이 버튼을 숨기고 목록을 대신 보이는데, display를 !important로 덮으면 그 숨김이 무력화돼 넓은 화면에서 햄버거와 메뉴 목록이 함께 뜨고 헤더가 83->137px로 부푼다 (실측 2026-08-22). 코어의 flex 위에 크기만 얹는다. */ .wp-block-navigation__responsive-container-open { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-right: -10px; /* 늘린 만큼 오른쪽 정렬이 밀리지 않게 */ } footer .wp-block-group a, footer p a { display: inline-block; padding: 6px 2px; } /* 8단계 준비중 배지가 9px까지 작아지지 않게 */ .lq-flow8 .badge { font-size: 0.63rem; } /* ---------- AI 분석 펼치기 ---------- 웹 UI의 모달 연출(3단계 x 1초 → 라인당 130ms 순차 등장)을 지면에 옮긴 것. 워드프레스 본문에는 자바스크립트를 두지 않는다 — 저장 시 벗겨질 수 있고, 본문에 스크립트를 심으면 RSS·검색 크롤러가 빈 껍데기를 가져간다. details가 열리는 순간 자식이 렌더되면서 CSS 애니메이션이 시작되므로 연출은 CSS만으로 충분하다. */ .lq-ai-reveal { margin: 0 0 1.4rem; overflow: hidden; } .lq-ai-reveal > summary { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; font-size: 0.875rem; font-weight: 740; color: var(--wp--preset--color--brand); background: var(--wp--preset--color--brand-soft); } .lq-ai-reveal > summary::-webkit-details-marker { display: none; } .lq-ai-reveal > summary { position: relative; } .lq-ai-reveal > summary::after { content: "▾"; position: absolute; right: 18px; font-size: 0.8rem; color: var(--wp--preset--color--text-3); transition: transform .2s ease; } .lq-ai-reveal[open] > summary::after { transform: rotate(180deg); } .lq-ai-reveal .spark { font-size: 0.95rem; } .lq-ai-reveal .meta { font-weight: 600; color: var(--wp--preset--color--text-3); font-size: 0.75rem; } /* 본문과 연출 층을 같은 상자에 겹쳐 둔다. 분석 중에는 상자를 접어 둔다 — 안 접으면 최종 높이(모바일에서 1,300px 넘는다)가 처음부터 벌어져 스피너가 화면 한참 아래에 뜬다. 3초 뒤 본문 높이로 펴진다. */ .lq-ai-panel { position: relative; padding: 20px 18px; overflow: hidden; max-height: 190px; animation: lq-ai-grow .4s ease 1.2s forwards; } @keyframes lq-ai-grow { to { max-height: 4000px; } } .lq-ai-run { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 13px; background: var(--wp--preset--color--surface); animation: lq-ai-veil .4s ease 1.2s forwards; } @keyframes lq-ai-veil { to { opacity: 0; visibility: hidden; } } .lq-ai-spin { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--wp--preset--color--brand-soft); border-top-color: var(--wp--preset--color--brand); animation: lq-ai-spin 1s linear infinite; } @keyframes lq-ai-spin { to { transform: rotate(360deg); } } /* 단계 문구 세 개를 같은 자리에 포개고 1초씩 넘긴다 */ .lq-ai-say { position: relative; height: 1.3em; min-width: 200px; text-align: center; } .lq-ai-say span { position: absolute; inset: 0; opacity: 0; font-size: 0.82rem; font-weight: 720; color: var(--wp--preset--color--text-2); animation: lq-ai-say .4s ease both; } .lq-ai-say span:nth-child(2) { animation-delay: .4s; } .lq-ai-say span:nth-child(3) { animation-delay: .8s; } @keyframes lq-ai-say { 0% { opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { opacity: 0 } } .lq-ai-bars { display: flex; gap: 6px; } .lq-ai-bars i { width: 34px; height: 3px; border-radius: 2px; background: var(--wp--preset--color--line-strong); animation: lq-ai-fill .3s ease both; } .lq-ai-bars i:nth-child(2) { animation-delay: .4s; } .lq-ai-bars i:nth-child(3) { animation-delay: .8s; } @keyframes lq-ai-fill { to { background: var(--wp--preset--color--brand); } } /* 연출이 걷힌 뒤 줄이 하나씩 올라온다 — 글자 단위 타이핑은 624자에 너무 오래 걸린다 */ .lq-ai-line { opacity: 0; transform: translateY(6px); animation: lq-ai-in .34s ease both; } @keyframes lq-ai-in { to { opacity: 1; transform: none; } } .lq-ai-out h4 { margin: 0 0 10px; font-size: 0.8rem; color: var(--wp--preset--color--text-3); } .lq-ai-out h4 + * { margin-top: 0; } .lq-ai-out ol { margin: 0 0 18px; padding-left: 20px; } .lq-ai-out li { margin-bottom: 8px; font-size: 0.84rem; line-height: 1.7; color: var(--wp--preset--color--text-2); word-break: keep-all; } .lq-ai-out p { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.85; color: var(--wp--preset--color--text-2); word-break: keep-all; } /* 등장 순서 — 1.25초부터 70ms 간격. 매일 오는 독자에게 3초는 길다 */ .lq-d1 { animation-delay: 1.25s } .lq-d2 { animation-delay: 1.32s } .lq-d3 { animation-delay: 1.39s } .lq-d4 { animation-delay: 1.46s } .lq-d5 { animation-delay: 1.53s } .lq-d6 { animation-delay: 1.60s } .lq-d7 { animation-delay: 1.67s } .lq-d8 { animation-delay: 1.74s } .lq-d9 { animation-delay: 1.81s } .lq-d10 { animation-delay: 1.88s } .lq-d11 { animation-delay: 1.95s } .lq-d12 { animation-delay: 2.02s } .lq-d13 { animation-delay: 2.09s } .lq-d14 { animation-delay: 2.16s } .lq-d15 { animation-delay: 2.23s } .lq-d16 { animation-delay: 2.30s } .lq-d17 { animation-delay: 2.37s } .lq-d18 { animation-delay: 2.44s } .lq-d19 { animation-delay: 2.51s } .lq-d20 { animation-delay: 2.58s } /* 움직임을 줄이라는 설정이면 연출을 건너뛴다. 위쪽 전역 규칙이 animation을 통째로 끄므로, 여기서 보이는 상태를 되돌려주지 않으면 줄이 opacity 0인 채로 남아 본문이 통째로 사라진다. */ @media (prefers-reduced-motion: reduce) { .lq-ai-run { display: none; } .lq-ai-panel { max-height: none; overflow: visible; } .lq-ai-line { opacity: 1; transform: none; } } /* ========================================================================== 시황 지면 재구성 (2026-08-23 외부 디자인 반영) 블록 순서·시각 언어를 디자인 인계본대로 옮긴 것. 값은 디자인 파일의 계산값을 실측해 그대로 쓴다(눈대중 아님). 위계 세 등급 1 판정 — 카드 없음. 배경 위 큰 글자. 이 지면에서 유일하게 28px 이상 2 근거 — 흰 카드 + 1px 선. 그림자 없음 3 참고 — 카드 없음. surface-soft 한 덩어리. 12px 흐린 글씨 글자는 12 / 14 / 16 / 20 / 28 / 38px 여섯 단계만 쓴다. ========================================================================== */ /* ---------- 등급 3: 기준일 한 줄 ---------- */ .lq-asof { margin: 0 0 1.2rem; font-size: 12px; font-weight: 700; color: var(--wp--preset--color--text-3); font-variant-numeric: tabular-nums; } /* ---------- 등급 1: 판정 블록 ---------- 기존 .lq-verdict(작은 카드 한 줄)를 대체한다. 이 지면에서 가장 중요한 요소라 카드에서 꺼내 배경 위에 직접 세운다. */ .lq-call { margin: 0 0 1.8rem; padding: 26px 0 26px 20px; border-left: 4px solid #B45309; } .lq-call .regime { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.25; letter-spacing: -.04em; color: #B45309; } /* 제목("6813 회복")과 판정("위험 회피")이 충돌하는 것을 잇는 문장. AI 원문에서 절만 그대로 잘라 온다 — 고쳐 쓰면 무가공 원칙 위반이다 */ .lq-call .bridge { margin: 14px 0 0; font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: -.025em; word-break: keep-all; } .lq-call .why { margin: 16px 0 0; font-size: 16px; line-height: 1.8; color: var(--wp--preset--color--text-2); word-break: keep-all; } /* ---------- 등급 1+2: 대표 수치 (코스피 전폭 + 보조) ---------- 5칸 균등이면 코스피가 원/달러와 같은 크기가 된다. 하나를 키운다. */ .lq-kpi { margin: 0 0 1.4rem; } .lq-kpi .lead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 20px 22px; margin-bottom: 10px; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--lq-radius); } .lq-kpi .lead .n { font-size: 14px; font-weight: 750; color: var(--wp--preset--color--text-2); } /* 값과 등락률은 붙인다 — 벌리면 무관한 두 숫자로 읽힌다 */ .lq-kpi .lead .row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; } .lq-kpi .lead .v { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .lq-kpi .lead .c { font-size: 20px; font-weight: 800; } .lq-kpi .lead .side { font-size: 12px; line-height: 1.6; text-align: right; color: var(--wp--preset--color--text-3); } /* 좁은 화면에서 아래로 내려가면 오른쪽 정렬이 어색하다 — 값과 같은 쪽에 붙인다 */ .lq-kpi .lead > div:first-child { min-width: 0; } /* 미디어 쿼리 없이 칸 폭만으로 접힌다 */ .lq-kpi .sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .lq-kpi .sub .m { padding: 16px 18px; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--lq-radius-sm); } .lq-kpi .sub .n { font-size: 12px; font-weight: 750; color: var(--wp--preset--color--text-2); } .lq-kpi .sub .n em { font-style: normal; font-weight: 600; color: var(--wp--preset--color--text-3); } .lq-kpi .sub .row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; } .lq-kpi .sub .v { font-size: 20px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .lq-kpi .sub .c { font-size: 14px; font-weight: 800; } /* ---------- 등급 2: 카드 공통 ---------- */ .lq-box { padding: 20px 22px; margin: 0 0 1.4rem; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--lq-radius); } .lq-box > h3 { margin: 0 0 12px; font-size: 14px; font-weight: 780; letter-spacing: -.02em; } .lq-box > .cap { margin: 0 0 12px; font-size: 14px; line-height: 1.75; color: var(--wp--preset--color--text-2); } .lq-box > .foot { margin: 12px 0 0; font-size: 12px; line-height: 1.7; color: var(--wp--preset--color--text-3); } /* 2열 — 칸이 좁아지면 알아서 1열이 된다 */ /* align-items: start — 기본값(stretch)이면 짧은 쪽 카드가 긴 쪽 높이에 맞춰 늘어나 아래가 빈 채로 남는다(차트 카드에서 실측). 카드는 제 내용만큼만 차지한다. */ .lq-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; gap: 10px; margin: 0 0 1.4rem; } .lq-pair > .lq-box { margin: 0; } .lq-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 1.4rem; } .lq-trio > .lq-box { margin: 0; padding: 18px 20px; border-radius: var(--lq-radius-sm); } /* ---------- 등급 2: 표 ---------- */ .lq-grid-table { width: 100%; border-collapse: collapse; font-size: 13px; } /* 칸 정렬은 가운데다 — 이 기본형을 쓰는 곳은 공지의 글자 표뿐이고, 숫자 표는 .lq-axis·.lq-period가 자기 정렬을 따로 갖는다 */ .lq-grid-table th, .lq-grid-table td { padding: 10px 4px; text-align: center; } .lq-grid-table thead th { font-size: 12px; font-weight: 700; color: var(--wp--preset--color--text-3); border-bottom: 1px solid var(--wp--preset--color--line); } .lq-grid-table tbody td { border-bottom: 1px solid #EFF2F7; } .lq-grid-table tbody tr:last-child td { border-bottom: 0; } .lq-grid-table .j { font-weight: 800; } .lq-grid-table .j.risk { color: #B45309; } .lq-grid-table .j.calm { color: var(--wp--preset--color--brand); } /* 세 축 표 — 관측 칸이 두 줄이라 칸마다 세로 기준이 어긋난다. 위를 기준으로 맞추고, 판정 배지가 관측 첫 줄과 같은 높이에 서게 한다. */ /* 세 축 표 — 판정을 별도 열에 두면 관측 칸이 좁아져 두 줄로 접히고, 그만큼 패널이 길어져 옆 차트 카드와 아랫변이 어긋난다. 판정을 근거 이름 옆 배지로 붙이고 관측에 폭을 몰아 한 줄로 끝낸다. */ .lq-axis { table-layout: fixed; } .lq-axis th, .lq-axis td { vertical-align: top; padding: 11px 4px; } .lq-axis th:nth-child(1), .lq-axis td:nth-child(1) { width: 38%; text-align: left; padding-right: 10px; word-break: keep-all; } .lq-axis th:nth-child(2), .lq-axis td:nth-child(2) { width: 62%; text-align: left; line-height: 1.55; } /* 판정 배지 — 근거 이름과 같은 줄에 서되 눈에는 따로 읽히게 */ .lq-axis .j { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; font-style: normal; white-space: nowrap; } .lq-axis .j.risk { background: #FDF1E3; color: #B45309; } .lq-axis .j.calm { background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); } /* ---------- 등급 2: 요점 목차 ---------- 브랜드 그라디언트를 뺐다 — 가장 덜 급한 블록이 가장 강한 강조를 받고 있었다 */ .lq-toc { margin: 0 0 1.4rem; } .lq-toc .head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .lq-toc .head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em; } .lq-toc .head .cnt { font-size: 12px; font-weight: 700; color: var(--wp--preset--color--text-3); } .lq-toc .hint { margin: 0 0 12px; font-size: 12px; color: var(--wp--preset--color--text-3); } .lq-toc ol { margin: 0; padding: 4px 0; list-style: none; display: grid; overflow: hidden; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--lq-radius); } .lq-toc li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 10px 18px; } .lq-toc li b { padding-top: 2px; font-size: 12px; font-weight: 800; color: var(--wp--preset--color--text-3); font-variant-numeric: tabular-nums; } .lq-toc li a, .lq-toc li span { font-size: 14px; line-height: 1.65; word-break: keep-all; } .lq-toc li a { color: var(--wp--preset--color--text); text-decoration: none; } .lq-toc li a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; } .lq-toc li span { color: var(--wp--preset--color--text-2); } /* ---------- 본문 5절 ---------- */ .lq-body h2 { margin: 2.75rem 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em; word-break: keep-all; scroll-margin-top: 24px; } /* 측정 폭을 두지 않는다 — 절 제목·카드가 모두 컨테이너 폭이라 문단만 좁으면 오른쪽 끝이 320px 어긋나 보인다 (사용자 결정 2026-08-24). */ .lq-body p { margin: 12px 0 0; font-size: 16px; line-height: 1.85; color: var(--wp--preset--color--text-2); word-break: keep-all; } /* ---------- 등급 2: 근거 카드 3장 ---------- */ .lq-trio .r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--wp--preset--color--text-2); } .lq-trio .r b { font-variant-numeric: tabular-nums; } .lq-trio .sum { margin-top: 8px; padding-top: 8px; border-top: 1px solid #EFF2F7; font-size: 12px; font-weight: 700; color: #B45309; } /* ---------- 등급 3: 데이터 기준·면책 한 덩어리 ---------- */ .lq-fine { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; padding: 20px 22px; margin: 0 0 1.4rem; background: var(--wp--preset--color--surface-soft); border-radius: var(--lq-radius-sm); } .lq-fine h4 { margin: 0 0 6px; font-size: 12px; font-weight: 780; color: var(--wp--preset--color--text-2); } .lq-fine p { margin: 0; font-size: 12px; line-height: 1.8; color: var(--wp--preset--color--text-3); word-break: keep-all; } /* ---------- 등급 2: 이전/다음 동선 ---------- 매일 아침 반복 방문이 전제라면 재방문을 만드는 유일한 지점이다 */ .lq-nav3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 2rem 0 1.4rem; } /* 두 장을 같은 크기로 고정한다 — 폭 164px는 390px 화면에서 한 줄에 들어가는 상한(간격 10px 포함) */ .lq-nav3 .c { flex: 0 0 164px; box-sizing: border-box; display: block; padding: 11px 14px; border-radius: var(--lq-radius-sm); text-align: center; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); color: inherit; text-decoration: none; } .lq-nav3 .c .k { display: block; font-size: 11.5px; color: var(--wp--preset--color--text-3); } .lq-nav3 .c .v { display: block; margin-top: 2px; font-size: 13px; font-weight: 750; } /* 아직 오지 않은 것 — 누를 수 없다는 것이 보이게 파선으로 */ .lq-nav3 .c.soon { border-style: dashed; border-color: var(--wp--preset--color--line-strong); } .lq-nav3 .c.soon .v { color: var(--wp--preset--color--text-3); } .lq-nav3 a.c:hover { border-color: var(--wp--preset--color--brand); } /* 앵커 대상 — 화면 맨 위에 딱 붙으면 넘어간 것처럼 보인다 */ .lq-body h2[id] { scroll-margin-top: 24px; } /* ---------- 숫자 절 — 아이콘·행 구분선·배지 ---------- 카드 다섯 장이 같은 흰 상자라 제목만으로는 무엇이 무엇인지 한눈에 안 들어온다. 아이콘으로 종류를 구분하고, 행 사이에 얇은 선을 둬 값을 짚기 쉽게 한다. */ /* 절 제목 앞 강조 막대 */ /* 큰 절 — 브랜드 막대가 이 층을 표시한다. 절 이름이 아니라 id로 건다 — 이름을 바꿔도 규칙이 따라오게. About의 절 제목(.lq-data-main h2)도 여기에 얹었다 — 값을 베껴 두면 한쪽만 바뀌어 두 지면의 제목이 갈라진다 */ .lq-toc .head h2, h2#flows, h2#sectors, h2#overseas, h2#opinion, .lq-data-main h2 { position: relative; padding-left: 14px; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em; } .lq-toc .head h2::before, h2#flows::before, h2#sectors::before, h2#overseas::before, h2#opinion::before, .lq-data-main h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 2px; background: var(--wp--preset--color--brand); } /* 큰 절은 앞 블록과 거리를 둔다 */ h2#flows, h2#sectors, h2#overseas, h2#opinion, .lq-data-main h2 { margin: 2.4rem 0 1rem; } /* 카드 제목 = 아이콘 + 이름 + 단위(+배지) */ .lq-box > h3 { display: flex; align-items: center; gap: 10px; } .lq-box > h3 .lq-muted { font-weight: 600; } .lq-ico.sm { width: 34px; height: 34px; border-radius: 11px; } .lq-ico.sm svg { width: 17px; height: 17px; } .lq-ico.violet { background: #F1ECFD; color: #6D46C8; } .lq-ico.sky { background: #E8F1FE; color: #2B5FD9; } /* 제목 옆 시점 배지 */ .lq-box > h3 .pill { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--wp--preset--color--surface-soft); color: var(--wp--preset--color--text-3); font-size: 11.5px; font-weight: 700; white-space: nowrap; } /* 값 행 — 카드 종류를 가리지 않는다. lq-trio에만 걸어두면 2열 묶음의 카드(수출·미국 섹터)에서 구분선이 빠지고 이름과 값이 붙는다 */ .lq-box .r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #EFF2F7; font-size: 14px; color: var(--wp--preset--color--text-2); } .lq-box .r:last-of-type { border-bottom: 0; } .lq-box .r b, .lq-box .r strong { font-variant-numeric: tabular-nums; } /* 이름 · 금액 · 증감 세 칸 — 금액이 이름에 붙어 한 덩어리로 읽히지 않게 */ .lq-box .r3 { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 9px 0; border-bottom: 1px solid #EFF2F7; font-size: 14px; color: var(--wp--preset--color--text-2); } .lq-box .r3:last-of-type { border-bottom: 0; } .lq-box .r3 em { font-style: normal; color: var(--wp--preset--color--text-3); font-variant-numeric: tabular-nums; } .lq-box .r3 strong { min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; } /* 간밤 해외 표도 같은 선 두께로 */ .lq-pair .lq-table th, .lq-pair .lq-table td { border-bottom: 1px solid #EFF2F7; padding: 9px 4px; } .lq-pair .lq-table thead th { border-bottom: 1px solid var(--wp--preset--color--line); } /* 표를 옅은 상자에 담아 카드 안에서 한 덩어리로 보이게 */ .lq-inset { padding: 4px 14px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--lq-radius-sm); } /* 각주형 한 줄 — 아이콘 + 문장 */ .lq-cite { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 11px 14px; background: var(--wp--preset--color--surface-soft); border-radius: var(--lq-radius-sm); font-size: 12px; line-height: 1.6; color: var(--wp--preset--color--text-3); } .lq-cite .lq-ico.sm { width: 28px; height: 28px; border-radius: 9px; } .lq-cite .lq-ico.sm svg { width: 14px; height: 14px; } .lq-cite b { font-weight: 750; color: var(--wp--preset--color--text-2); } /* 기간별 등락 — 이 지면의 핵심 수치라 다른 표보다 크게 세우고, 행 높이를 옆 카드(3행 목록)와 맞춘다 */ .lq-period { font-size: 17px; } .lq-period th { font-size: 12px; padding: 10px 4px; } .lq-period td { padding: 17px 4px; font-weight: 800; font-variant-numeric: tabular-nums; } .lq-period td:first-child { font-weight: 750; font-size: 15px; } /* 면책 — 별도 상자를 두지 않고 서명과 한 덩어리로 둔다. 발행 이력과 같은 무게다. 폭은 서명 블록을 그대로 따른다 — 면책에만 780px를 두었더니 이 줄만 좁아져 가운데서 줄바꿈이 났다 (실측 2026-08-28: 고유 폭 865px, 서명 블록 1040px) */ .lq-sig .disc { display: block; margin-top: 8px; } /* ---------- 블로그 현황 ---------- */ /* 헤더 방문 정보 — 메뉴 왼쪽에 붙인다. 헤더가 space-between 묶음이라 그냥 두면 로고·방문·메뉴 셋이 균등 분배돼 한가운데 떠 보인다 (실측 2026-08-26). margin-left auto로 오른쪽 무리에 합류시킨다. 워드프레스가 .is-layout-flex > :is(*, div) { margin: 0 } 을 넣어 클래스 하나로는 여백이 먹지 않는다 — 선택자를 한 단계 올려 이긴다 (!important 대신). 좁은 화면에서는 숨긴다 — 메뉴만으로 가로가 꽉 찬다 */ .lq-header .lq-visitors { display: flex; gap: 14px; margin-left: auto; margin-right: 26px; font-size: 0.78rem; color: var(--wp--preset--color--text-3); font-variant-numeric: tabular-nums; } .lq-visitors .v { white-space: nowrap; font-weight: 700; } .lq-visitors em { font-style: normal; font-weight: 500; margin-right: 4px; } .lq-blogstats .lq-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .lq-blogstats .s { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--lq-radius-sm); background: var(--wp--preset--color--surface-soft); } .lq-blogstats .s .n { font-size: 0.78rem; color: var(--wp--preset--color--text-2); } /* 숫자는 오른쪽 맞춤 — 자릿수가 달라도 끝이 가지런하다. 칸 안쪽 여백(18px)이 있어 상자 선에 붙지 않는다 */ .lq-blogstats .s strong { align-self: flex-end; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .lq-blogstats .s strong em { font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--wp--preset--color--text-3); margin-left: 3px; } .lq-blogstats .foot { margin: 12px 0 0; text-align: right; font-size: 0.8rem; color: var(--wp--preset--color--text-3); } .lq-blogstats .foot a { color: inherit; } @media (max-width: 860px) { .lq-visitors { display: none; } .lq-blogstats .lq-stat-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- 공지 게시판 ---------- */ /* 표처럼 보이되 실제