/* ============================================================ 인플레하우스 · 학습하기 (Learn) — 아티클 "콘텐츠" 스타일 정적 HTML 아티클과 SPA 인라인 뷰어(LearnArticlePage)가 "함께" 로드한다. 여기에는 전역 요소 규칙(html/body/a/img base·사이트 헤더/푸터 등 셸)을 두지 않는다 — 그런 규칙은 SPA 앱 셸로 번져(스타일 누출) 안 된다. 셸/전역 규칙은 정적 HTML 전용 `article-shell.css`에 있다. 모든 콘텐츠 규칙은 `.article`(주입 루트) 하위로 스코핑되어 있어 SPA 에 로드해도 앱 UI 를 건드리지 않는다. 지향점: Toss Tech 블로그 같은 "책" 느낌의 긴 글 읽기 경험. 디자인 토큰은 DESIGN.md(Coinbase-editorial)와 정렬한다. ============================================================ */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); :root { --ink: #17181a; /* 본문 잉크 */ --ink-strong: #0a0b0d; /* 제목 */ --body: #40454c; /* 러닝 텍스트(살짝 옅은) */ --muted: #6b7280; /* 캡션·메타 */ --muted-soft: #9aa0a8; --line: #e7e9ec; --line-soft: #f0f1f3; --canvas: #ffffff; --surface-soft: #f8f9fa; --surface-tint: #f4f6fb; /* 브랜드 옅은 틴트 */ --brand: #0052ff; --brand-strong: #003ecc; --brand-tint: #eaf0ff; --up: #05934f; --up-tint: #e8f6ee; --down: #cf202f; --down-tint: #fdecec; --amber: #b5730b; --amber-tint: #fdf3e2; --measure: 720px; --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif; --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; } /* box-sizing 은 정적 페이지·SPA 모두 이미 border-box 이므로 무해하게 재확인만 한다. */ * { box-sizing: border-box; } /* ---------- 아티클 컨테이너 (콘텐츠 스타일 루트) ---------- 정적 HTML 에서는 안, SPA 에서는 주입 컨테이너 안의 이 요소가 본문 타이포의 기준이 된다. 이전엔 body 에 있던 폰트/색/줄바꿈 기본값을 여기로 옮겨, 셸 CSS 없이도 콘텐츠가 올바르게 렌더되도록 한다. */ .article { display: block; font-family: var(--font); color: var(--body); line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .article img { max-width: 100%; height: auto; display: block; } .article a { color: var(--brand); text-decoration: none; } .article a:hover { text-decoration: underline; text-underline-offset: 3px; } .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; } /* ---------- 히어로 ---------- */ .article-hero { border-bottom: 1px solid var(--line-soft); background: radial-gradient(1200px 380px at 50% -140px, rgba(0, 82, 255, 0.06), transparent 70%); } .article-hero .wrap { padding-top: 72px; padding-bottom: 48px; } .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--brand); letter-spacing: 0.01em; margin-bottom: 20px; } .eyebrow .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-soft); } .eyebrow .muted { color: var(--muted); font-weight: 600; } .eyebrow .star { color: var(--amber); } .article-hero h1 { margin: 0; color: var(--ink-strong); font-size: clamp(30px, 5.2vw, 46px); font-weight: 800; line-height: 1.18; letter-spacing: -0.028em; } .article-hero .lede { margin: 22px 0 0; color: var(--muted); font-size: clamp(17px, 2.2vw, 20px); font-weight: 500; line-height: 1.6; letter-spacing: -0.01em; } .hero-meta { margin-top: 28px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted-soft); } .hero-meta .chip { padding: 5px 11px; border-radius: 999px; background: var(--surface-soft); color: var(--body); font-weight: 600; font-size: 12.5px; border: 1px solid var(--line-soft); } /* ---------- 본문 타이포 ---------- */ .article-body { padding-top: 8px; padding-bottom: 40px; } .article-body .wrap { padding-top: 40px; } .article-body p, .article-body ul, .article-body ol, .article-body figure, .article-body blockquote, .article-body .callout, .article-body .key-summary, .article-body .table-wrap, .article-body .steps, .article-body .term-list, .article-body .stat-row { margin: 0 0 26px; } .article-body p { font-size: 18px; line-height: 1.9; color: var(--ink); letter-spacing: -0.003em; word-break: keep-all; } .article-body p b, .article-body p strong { color: var(--ink-strong); font-weight: 700; } .article-body .lead { font-size: 20px; line-height: 1.8; color: var(--body); font-weight: 500; } .article-body h2 { margin: 64px 0 20px; color: var(--ink-strong); font-size: 27px; font-weight: 800; line-height: 1.3; letter-spacing: -0.025em; scroll-margin-top: 84px; } .article-body h2::before { content: ""; display: block; width: 34px; height: 4px; border-radius: 4px; background: var(--brand); margin-bottom: 18px; } .article-body h3 { margin: 44px 0 14px; color: var(--ink-strong); font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; scroll-margin-top: 84px; } .article-body h4 { margin: 30px 0 10px; color: var(--ink-strong); font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; } .article-body ul, .article-body ol { padding-left: 4px; } .article-body li { font-size: 18px; line-height: 1.85; color: var(--ink); margin: 0 0 10px; padding-left: 26px; position: relative; list-style: none; word-break: keep-all; } .article-body ul > li::before { content: ""; position: absolute; left: 6px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } .article-body ol { counter-reset: li; } .article-body ol > li { counter-increment: li; } .article-body ol > li::before { content: counter(li); position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .article-body li b, .article-body li strong { color: var(--ink-strong); font-weight: 700; } .article-body a { font-weight: 600; border-bottom: 1px solid rgba(0, 82, 255, 0.25); } .article-body a:hover { border-bottom-color: var(--brand); text-decoration: none; } /* ---------- 인용 ---------- */ .article-body blockquote { border-left: 3px solid var(--brand); padding: 4px 0 4px 22px; color: var(--body); font-size: 19px; line-height: 1.75; font-style: normal; } .article-body blockquote p { font-size: inherit; color: inherit; margin: 0; } .article-body blockquote cite { display: block; margin-top: 10px; font-size: 14px; color: var(--muted-soft); font-style: normal; } /* ---------- 콜아웃 ---------- */ .callout { border-radius: 16px; padding: 20px 22px 20px 54px; position: relative; background: var(--surface-tint); border: 1px solid var(--line-soft); font-size: 16.5px; line-height: 1.72; color: var(--ink); } .callout::before { content: ""; position: absolute; left: 20px; top: 19px; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } .callout .callout-title { display: block; font-weight: 800; color: var(--ink-strong); margin-bottom: 6px; font-size: 15.5px; } .callout p { font-size: inherit; line-height: inherit; margin: 0 0 8px; color: inherit; } .callout p:last-child, .callout ul:last-child, .callout li:last-child { margin-bottom: 0; } .callout ul li { font-size: 16px; } .callout-info { background: var(--brand-tint); border-color: #d5e2ff; } .callout-info::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27%230052ff%27%3E%3Cpath%20d%3D%27M2%206a6%206%200%201%201%2010.174%204.31c-.203.196-.359.4-.453.619l-.762%201.769A.5.5%200%200%201%2010.5%2013a.5.5%200%200%201%200%201%20.5.5%200%200%201%200%201l-.224.447a1%201%200%200%201-.894.553H6.618a1%201%200%200%201-.894-.553L5.5%2015a.5.5%200%200%201%200-1%20.5.5%200%200%201%200-1%20.5.5%200%200%201-.46-.302l-.761-1.77a2%202%200%200%200-.453-.618A5.98%205.98%200%200%201%202%206%27%2F%3E%3C%2Fsvg%3E"); } .callout-tip { background: var(--up-tint); border-color: #cdeedd; } .callout-tip::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27%2305934f%27%3E%3Cpath%20d%3D%27M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200m-3.97-3.03a.75.75%200%200%200-1.08.022L7.477%209.417%205.384%207.323a.75.75%200%200%200-1.06%201.06L6.97%2011.03a.75.75%200%200%200%201.079-.02l3.992-4.99a.75.75%200%200%200-.01-1.05z%27%2F%3E%3C%2Fsvg%3E"); } .callout-warn { background: var(--down-tint); border-color: #f7d4d4; } .callout-warn::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27%23cf202f%27%3E%3Cpath%20d%3D%27M8.982%201.566a1.13%201.13%200%200%200-1.96%200L.165%2013.233c-.457.778.091%201.767.98%201.767h13.713c.889%200%201.438-.99.98-1.767zM8%205c.535%200%20.954.462.9.995l-.35%203.507a.552.552%200%200%201-1.1%200L7.1%205.995A.905.905%200%200%201%208%205m.002%206a1%201%200%201%201%200%202%201%201%200%200%201%200-2%27%2F%3E%3C%2Fsvg%3E"); } .callout-note { background: var(--amber-tint); border-color: #f2e0c0; } .callout-note::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27%23b5730b%27%3E%3Cpath%20d%3D%27M9.828.722a.5.5%200%200%201%20.354.146l4.95%204.95a.5.5%200%200%201%200%20.707c-.48.48-1.072.588-1.503.588-.177%200-.335-.018-.46-.039l-3.134%203.134a6%206%200%200%201%20.16%201.013c.046.702-.032%201.687-.72%202.375a.5.5%200%200%201-.707%200l-2.829-2.828-3.182%203.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5%200%200%201%200-.707c.688-.688%201.673-.766%202.375-.72a6%206%200%200%201%201.013.16l3.134-3.133a3%203%200%200%201-.04-.461c0-.43.108-1.022.589-1.503a.5.5%200%200%201%20.353-.146%27%2F%3E%3C%2Fsvg%3E"); } .callout-quote { background: var(--surface-soft); border-color: var(--line); } .callout-quote::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27%236b7280%27%3E%3Cpath%20d%3D%27M12%2012a1%201%200%200%200%201-1V8.558a1%201%200%200%200-1-1h-1.388q0-.527.062-1.054.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868%200-1.52.372a3.3%203.3%200%200%200-1.085.992%204.9%204.9%200%200%200-.62%201.458A7.7%207.7%200%200%200%209%207.558V11a1%201%200%200%200%201%201zm-6%200a1%201%200%200%200%201-1V8.558a1%201%200%200%200-1-1H4.612q0-.527.062-1.054.094-.558.31-.992.217-.434.559-.683.34-.279.868-.279V3q-.868%200-1.52.372a3.3%203.3%200%200%200-1.085.992%204.9%204.9%200%200%200-.62%201.458A7.7%207.7%200%200%200%203%207.558V11a1%201%200%200%200%201%201z%27%2F%3E%3C%2Fsvg%3E"); } /* ---------- 핵심 요약 박스 ---------- */ .key-summary { border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #fbfcfe, #f6f8fc); padding: 26px 28px; } .key-summary .ks-head { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--brand); text-transform: uppercase; margin-bottom: 16px; } .key-summary .ks-head::before { content: ""; width: 16px; height: 16px; flex: none; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27%230052ff%27%3E%3Cpath%20d%3D%27M8%2016.016a7.5%207.5%200%200%200%201.962-14.74A1%201%200%200%200%209%200H7a1%201%200%200%200-.962%201.276A7.5%207.5%200%200%200%208%2016.016m6.5-7.5a6.5%206.5%200%201%201-13%200%206.5%206.5%200%200%201%2013%200%27%2F%3E%3Cpath%20d%3D%27m6.94%207.44%204.95-2.83-2.83%204.95-4.949%202.83%202.828-4.95z%27%2F%3E%3C%2Fsvg%3E"); } .key-summary ul { margin: 0; } .key-summary li { font-size: 16.5px; line-height: 1.7; color: var(--ink); margin-bottom: 12px; } .key-summary li:last-child { margin-bottom: 0; } .key-summary ul > li::before { top: 12px; } /* ---------- 통계/수치 강조 행 ---------- */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .stat { border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; background: var(--canvas); } .stat .stat-num { font-size: 26px; font-weight: 800; color: var(--ink-strong); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat .stat-label { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; } /* ---------- 용어 카드 리스트 ---------- */ .term-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-soft); } .term { padding: 22px 4px; border-bottom: 1px solid var(--line-soft); } .term dt { font-size: 18px; font-weight: 800; color: var(--ink-strong); letter-spacing: -0.015em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .term dt .en { font-size: 13px; font-weight: 600; color: var(--muted-soft); letter-spacing: 0; } .term dd { margin: 10px 0 0; font-size: 16.5px; line-height: 1.75; color: var(--body); } .term dd .ex { display: block; margin-top: 10px; padding: 12px 15px; border-radius: 11px; background: var(--surface-soft); border: 1px solid var(--line-soft); font-size: 15px; color: var(--ink); line-height: 1.65; } .term dd .ex b { color: var(--brand-strong); } /* ---------- 단계(steps) ---------- */ .steps { display: flex; flex-direction: column; gap: 0; } .steps .step { position: relative; padding: 0 0 26px 46px; border-left: 2px solid var(--line); margin-left: 14px; } .steps .step:last-child { border-left-color: transparent; padding-bottom: 0; } .steps .step .num { position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff; } .steps .step .step-title { font-size: 17px; font-weight: 700; color: var(--ink-strong); margin-bottom: 5px; } .steps .step .step-desc { font-size: 15.5px; line-height: 1.7; color: var(--body); } .steps .step .step-meta { font-size: 13px; color: var(--muted-soft); margin-top: 4px; } /* ---------- 표 ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; } .article-body table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 460px; } .article-body thead th { background: var(--surface-soft); color: var(--ink-strong); font-weight: 700; text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; } .article-body tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); line-height: 1.6; } .article-body tbody tr:last-child td { border-bottom: none; } .article-body tbody tr:nth-child(even) { background: #fcfcfd; } .article-body td b, .article-body th b { color: var(--ink-strong); } /* ---------- 그림/캡션 ---------- */ /* 도식(SVG)은 대부분 본문 폭(720px)보다 좁게 `style="max-width: …"` 를 걸어 쓴다. 그런데 위 공통 규칙이 `margin: 0 0 26px` 라 좌우 마진이 0 이라서, 좁힌 그림이 본문 왼쪽에 붙어 버렸다. 좌우 auto 로 가운데에 세운다(아래 img 의 margin:0 auto 는 figure **안에서**의 정렬이라 figure 자체가 왼쪽에 붙는 것은 못 막는다). */ .article-body figure { text-align: center; margin-inline: auto; } .article-body figure img { border-radius: 16px; border: 1px solid var(--line-soft); margin: 0 auto; } .article-body figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted-soft); line-height: 1.55; } /* ---------- 코드 ---------- */ .article-body :not(pre) > code { font-family: var(--mono); font-size: 0.86em; padding: 2px 6px; border-radius: 6px; background: var(--surface-soft); border: 1px solid var(--line-soft); color: var(--down); } .article-body pre { overflow-x: auto; background: #0f1115; color: #e6e9ef; border-radius: 14px; padding: 18px 20px; font-size: 14px; line-height: 1.65; margin: 0 0 26px; } .article-body pre code { font-family: var(--mono); } /* ---------- 구분선 ---------- */ .article-body hr { border: none; border-top: 1px solid var(--line); margin: 48px 0; } /* ---------- 하단 글 내비게이션 ---------- */ .article-footer-nav { border-top: 1px solid var(--line-soft); margin-top: 24px; padding-bottom: 32px; } .article-footer-nav .wrap { padding-top: 40px; padding-bottom: 8px; } .afn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .afn-card { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); transition: all 0.15s; } .afn-card:hover { border-color: var(--brand); background: var(--surface-tint); text-decoration: none; } .afn-card .afn-dir { font-size: 12.5px; font-weight: 700; color: var(--muted-soft); margin-bottom: 6px; } .afn-card .afn-title { font-size: 16px; font-weight: 700; color: var(--ink-strong); letter-spacing: -0.015em; line-height: 1.4; } .afn-card.next { text-align: right; } .afn-card.disabled { opacity: 0.4; pointer-events: none; } .afn-list-link { display: flex; justify-content: center; margin: 26px 0 0; } .afn-list-link a { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--brand); padding: 11px 22px; border-radius: 999px; border: 1px solid var(--line); background: #fff; } .afn-list-link a:hover { background: var(--brand-tint); text-decoration: none; border-color: #d5e2ff; } /* ---------- 반응형 ---------- */ @media (max-width: 640px) { .wrap { padding: 0 20px; } .article-hero .wrap { padding-top: 44px; padding-bottom: 34px; } .article-body .wrap { padding-top: 30px; } .article-body p, .article-body li { font-size: 17px; line-height: 1.82; } .article-body h2 { font-size: 23px; margin-top: 48px; } .article-body h3 { font-size: 18.5px; margin-top: 34px; } .afn-grid { grid-template-columns: 1fr; } .callout { padding: 18px 18px 18px 48px; } } /* 인아티클 광고 — 본문 h2 섹션 사이에 삽입한다(정적: in-article-ad.js / SPA: learn-in-article-ads.ts). 본문과 시각적으로 구분(라벨 + 옅은 구분선)하고, 로드 전 레이아웃 흔들림(CLS)을 줄이려 최소 높이를 예약한다. 광고는 정적 페이지·SPA 모두 "최상위 문서"에 놓인다(iframe 안 배치 금지 — AdSense 정책). */ .in-article-ad { margin: 2.4rem 0; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); min-height: 140px; } .in-article-ad__label { margin-bottom: 0.5rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); } .in-article-ad .adsbygoogle { margin: 0 auto; } /* 광고가 채워지지 않으면(빈 슬롯) 예약 공간을 숨겨 빈 박스가 남지 않게 한다. */ .in-article-ad ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; } /* [폴백 체인] 한 지면을 애드센스 → 카카오 애드핏 → 자체 광고 안내 순으로 시도한다. 현재 단계는 삽입 스크립트가 .in-article-ad 의 data-ad-stage 로 알려 주고(adsense|adfit|house), 여기서는 그 단계에 해당하는 것만 보인다. 라벨("광고")은 실제 광고가 나가는 1·2단계에만 붙인다 — 3단계는 광고가 아니라 광고 자리 안내이기 때문이다. */ .in-article-ad__adfit { display: none; } .in-article-ad[data-ad-stage="adfit"] ins.adsbygoogle { display: none !important; } .in-article-ad[data-ad-stage="adfit"] .in-article-ad__adfit { display: flex; justify-content: center; } /* 자체 광고(하우스 광고, 이미지). needrun-admin 에 등록된 소재가 있으면 `fallback:false` 는 애드센스보다 **먼저**, `fallback:true` 는 애드핏 실패 후에 나간다. 삽입 스크립트가 data-ad-stage="house-image" 로 알려 준다. 이미지는 본문 폭에 맞춰 줄이기만 하고(늘리지 않는다) 가운데 정렬한다 — 규격보다 큰 소재가 올라와도 본문을 뚫지 않고, 작은 소재는 확대되어 흐려지지 않는다. */ .in-article-ad__house { display: none; } .in-article-ad[data-ad-stage="house-image"] ins.adsbygoogle, .in-article-ad[data-ad-stage="house-image"] .in-article-ad__adfit { display: none !important; } .in-article-ad[data-ad-stage="house-image"] .in-article-ad__house { display: block; text-decoration: none; } .in-article-ad__house picture { display: block; } .in-article-ad__house img { display: block; margin: 0 auto; max-width: 100%; height: auto; } /* 마지막 단계(광고 자리 안내). 접지 않고 같은 크기의 "광고 자리" 안내로 바꾼다. 나중에 광고가 붙는 순간 "없던 광고가 갑자기 생겼다"는 인상을 주지 않으려면, 처음부터 그 자리가 광고 자리임을 밝혀 두는 편이 낫다. 자기 지면에 자기 안내를 채우는 것이라 정책상 문제되지 않는다. 회색 본문 위 회색 박스는 묻히고, 브랜드 색을 꽉 채우면 본문보다 광고 자리가 더 튄다. 옅은 브랜드 틴트 + 브랜드 색 글씨로 눈에는 띄되 본문을 누르지 않는 선을 잡는다. */ .in-article-ad__promo { display: none; } .in-article-ad[data-ad-stage="house"] ins.adsbygoogle, .in-article-ad[data-ad-stage="house"] .in-article-ad__adfit, .in-article-ad[data-ad-stage="house"] .in-article-ad__label { display: none !important; } .in-article-ad[data-ad-stage="house"] .in-article-ad__promo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 320px; padding: 26px 16px; border: 1px solid rgba(0, 82, 255, 0.2); border-radius: 0; /* 광고 지면은 콘텐츠 카드와 달라 보여야 한다 */ background: rgba(0, 82, 255, 0.07); color: var(--brand); text-align: center; text-decoration: none; transition: background-color 0.15s ease; } .in-article-ad__promo:hover { border-color: rgba(0, 82, 255, 0.35); background: rgba(0, 82, 255, 0.12); text-decoration: none; } .in-article-ad__promo-title { font-size: 15px; font-weight: 700; color: var(--brand); } .in-article-ad__promo-meta { font-size: 11px; font-weight: 500; color: rgba(0, 82, 255, 0.6); font-variant-numeric: tabular-nums; } .in-article-ad__promo-cta { font-size: 13px; font-weight: 500; color: rgba(0, 82, 255, 0.7); } @media print { .in-article-ad { display: none; } }