/* ============================================================ mopicoat 신뢰저널형 스킨 CSS - 배경: #f9f9f9 (off-white) - 본문: #333 (대비 7:1) - Noto Sans KR 16-18px, line-height 1.7 - Noto Serif KR (h1/h2만, accent) + font-display:swap - 광고: CLS예약, 회색경계, 무애니, 라벨표시 - 반응형: 2컬럼(데스크톱 >1024) → 1컬럼(모바일) ============================================================ */ /* Fonts preloaded in HTML to avoid render-blocking @import */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 디자인 토큰 (신뢰저널형) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { --bg: #f9f9f9; --bg-white: #ffffff; --text: #333333; --text-sub: #666666; --accent: #0066cc; --line: #e5e5e5; --ad-border: #999999; --text-base: clamp(16px, 1vw, 18px); --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --duration-fast: 200ms; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 글로벌 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { font-family: 'Noto Sans KR', sans-serif; font-size: var(--text-base); background-color: var(--bg); color: var(--text); line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 스킨 래퍼 & 레이아웃 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .wrap_skin { min-height: 100vh; display: flex; flex-direction: column; } .cont_skin { flex: 1; display: flex; flex-direction: column; } .main-wrapper { max-width: 1200px; width: 100%; margin: 0 auto; padding: var(--space-l) var(--space-m); display: grid; grid-template-columns: 1fr 280px; gap: var(--space-l); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 헤더 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .site-header { background: var(--bg-white); border-bottom: 1px solid var(--line); padding: var(--space-m) 0; position: sticky; top: 0; z-index: 100; } .header-content { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-m); display: flex; justify-content: space-between; align-items: center; gap: var(--space-l); } .logo { font-family: 'Noto Serif KR', serif; font-size: 24px; font-weight: 700; color: var(--accent); text-decoration: none; flex-shrink: 0; } .site-header nav { display: flex; gap: var(--space-l); flex: 1; } .site-header nav a { color: var(--text-sub); text-decoration: none; font-size: 14px; transition: color var(--duration-fast); padding: 4px 0; } .site-header nav a:hover, .site-header nav a:focus { color: var(--accent); outline: none; border-bottom: 2px solid var(--accent); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 아티클 컨테이너 (skin_view) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #mArticle { background: var(--bg-white); border-radius: 4px; overflow: hidden; display: contents; } .article_skin { background: var(--bg-white); } /* 글 목록을 감싸는 컨테이너 — 동적 그리드 (s_index_article_rep repeater) */ #mArticle > s_index_article_rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-m); padding: var(--space-l); } .skin_view { display: flex; flex-direction: column; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 아티클 헤더 & 메타 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .article-header { padding: var(--space-l); border-bottom: 1px solid var(--line); } .category-badge { display: inline-block; background-color: var(--accent); color: var(--bg-white); padding: 4px 12px; border-radius: 3px; font-size: 12px; font-weight: 600; margin-bottom: var(--space-s); } .tit_post { font-family: 'Noto Serif KR', serif; font-size: clamp(32px, 4vw, 44px); line-height: 1.3; margin-bottom: var(--space-m); color: var(--text); font-weight: 700; } .meta { display: flex; align-items: center; gap: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--line); font-size: 13px; color: var(--text-sub); } .author-info h3 { font-size: 14px; color: var(--text); margin-bottom: 2px; font-weight: 600; } .publish-date { color: var(--text-sub); font-size: 12px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 아티클 본문 (area_view) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .area_view, .article-content { padding: var(--space-l); } .area_view h2, .article-content h2 { font-family: 'Noto Serif KR', serif; font-size: 28px; font-weight: 700; color: var(--text); margin: var(--space-l) 0 var(--space-m) 0; padding-bottom: var(--space-s); border-bottom: 2px solid var(--line); line-height: 1.4; } .area_view h2:first-child, .article-content h2:first-child { margin-top: 0; } /* 본문 소제목 h3/h4 — 목차(h2~h4)가 끌어오므로 시각 위계 명시 */ .area_view h3, .article-content h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: var(--space-m) 0 var(--space-s) 0; line-height: 1.4; } .area_view h4, .article-content h4 { font-size: 17px; font-weight: 600; color: var(--text); margin: var(--space-m) 0 var(--space-s) 0; line-height: 1.4; } .area_view p, .article-content p { margin-bottom: var(--space-m); font-size: var(--text-base); line-height: 1.7; } .area_view a, .article-content a { color: var(--accent); text-decoration: underline; transition: color var(--duration-fast); } .area_view a:hover, .article-content a:hover { color: #005399; } .area_view a:focus, .article-content a:focus { outline: 2px solid var(--accent); outline-offset: 2px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 테이블 (compare-table) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ table { width: 100%; border-collapse: collapse; margin: var(--space-l) 0; font-size: 14px; } table thead { background-color: var(--accent); color: var(--bg-white); } table th, table td { padding: 12px; text-align: left; border: 1px solid var(--line); } table tbody tr:nth-child(odd) { background-color: #f9f9f9; } table tbody tr:hover { background-color: #f0f5ff; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PASONA: 요약박스 (summary-box) 좌측 accent 보더 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .summary-box { background: #f5f9ff; border-left: 4px solid var(--accent); padding: var(--space-m); margin: var(--space-l) 0; border-radius: 4px; } .summary-box h3 { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: var(--space-s); } .summary-box p { font-size: 15px; line-height: 1.6; color: var(--text); margin-bottom: var(--space-s); } .summary-box ul { list-style: none; margin-left: var(--space-m); } .summary-box li { font-size: 14px; color: var(--text-sub); margin-bottom: 6px; position: relative; padding-left: 16px; } .summary-box li:before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: bold; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PASONA: 목차박스 (toc-box) — 접이식 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .toc-box { margin: var(--space-l) 0; } .toc { background: #fafafa; border: 1px solid var(--line); border-radius: 4px; padding: var(--space-m); } .toc summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text); user-select: none; transition: color var(--duration-fast); } .toc summary:hover { color: var(--accent); } .toc[open] summary { color: var(--accent); } .toc ul { list-style: none; margin-top: var(--space-s); margin-left: var(--space-m); } .toc li { font-size: 13px; margin-bottom: 6px; } .toc a { color: var(--accent); text-decoration: none; transition: text-decoration var(--duration-fast); } .toc a:hover { text-decoration: underline; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PASONA: Q&A (qna) — details 요소 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .qa-section { margin: var(--space-l) 0; } .qa-section summary { cursor: pointer; padding: var(--space-s); background: #f9f9f9; border: 1px solid var(--line); border-radius: 4px; font-weight: 600; color: var(--text); user-select: none; transition: background var(--duration-fast), color var(--duration-fast); } .qa-section summary:hover { background: #f0f5ff; color: var(--accent); } .qa-section[open] summary { background: #f0f5ff; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; color: var(--accent); } .qa-content { background: #fafafa; border: 1px solid var(--line); border-top: none; padding: var(--space-m); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; font-size: 14px; line-height: 1.7; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PASONA: 체크리스트 (action-checklist) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .checklist-box { background: #fffbf0; border: 1px solid #e8d4b0; border-radius: 4px; padding: var(--space-m); margin: var(--space-l) 0; } .checklist-box h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: var(--space-m); } .checklist-box label { display: block; margin-bottom: 12px; font-size: 14px; cursor: pointer; user-select: none; } .checklist-box input[type="checkbox"] { margin-right: 8px; cursor: pointer; accent-color: var(--accent); } .checklist-box input[type="checkbox"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .time-hint { font-size: 12px; color: var(--text-sub); margin-left: 24px; } .checklist-guide { font-size: 13px; color: var(--text-sub); margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid #e8d4b0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 광고 블록 — CLS예약 + 회색경계 + 라벨 + 무애니 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ ins.adsbygoogle { min-height: 250px !important; } /* 빈 광고(미충전) 자동 접힘 — 무용지물 회색박스 제거. 광고 채워질 때만 표시(수익 유지) */ ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; } .ad-wrapper:has(ins.adsbygoogle[data-ad-status="unfilled"]), .bottom-article-ad-wrapper:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; } /* 사이드 광고 컨테이너 — DEPRECATED (제거됨) [이전 데스크톱(1410px 초과): 좌우 fixed 사이드 광고 → 제거] [현재 모든 광고는 본문 영역(#middle-article-ad-1, #bottom-article-ad)으로 재배치] */ .aros-sidead { display: none !important; } /* 본문 내 광고 컨테이너 — CLS예약 + 회색경계 + Advertisement 라벨 */ .ad-wrapper { position: relative; background: var(--bg-white); border: 1px solid var(--ad-border); border-radius: 4px; padding: var(--space-m); margin: var(--space-l) 0; min-height: 300px; display: flex; align-items: center; justify-content: center; } /* 모바일에서 광고 예약높이 축소 — 빈 광고 시 과도한 여백/CLS 완화 */ @media (max-width: 767px) { .ad-wrapper { min-height: 250px; } } .ad-wrapper::before { content: "Advertisement"; position: absolute; top: 6px; right: 6px; background: var(--bg-white); color: var(--text-sub); font-size: 7px; font-weight: 700; padding: 2px 6px; border-radius: 2px; z-index: 1; } /* 본문 내 광고 플레이스홀더 (레거시) */ .ad-placeholder { position: relative; background: var(--bg-white); border: 1px solid var(--ad-border); border-radius: 4px; padding: var(--space-m); margin: var(--space-l) 0; min-height: 250px; display: flex; align-items: center; justify-content: center; color: var(--ad-border); font-size: 14px; } .ad-label { position: absolute; top: 6px; right: 6px; background: var(--bg-white); color: var(--text-sub); font-size: 7px; font-weight: 700; padding: 2px 6px; border-radius: 2px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 기타 아티클 요소 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .area_etc { padding: var(--space-m) var(--space-l); border-top: 1px solid var(--line); } .list_tag { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .list_tag dt { font-weight: 600; color: var(--text); margin-right: 8px; } .list_tag dd { display: flex; flex-wrap: wrap; gap: 8px; } .list_tag a { background: #f0f0f0; color: var(--accent); padding: 4px 10px; border-radius: 3px; font-size: 12px; text-decoration: none; transition: background var(--duration-fast); } .list_tag a:hover { background: #e8e8e8; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PASONA: 관련글 카드 (related-cards) — hover 상승 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .related-section { padding: var(--space-l); border-top: 1px solid var(--line); } .related-section h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--space-m); color: var(--text); } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } .card { background: var(--bg-white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: transform var(--duration-fast), box-shadow var(--duration-fast); text-decoration: none; color: inherit; } .card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* 카드 리스트 아이템용 변형 */ .card-list-item { display: flex; flex-direction: column; height: 100%; } .card-image { width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #e8e8e8, #f5f5f5); display: flex; align-items: center; justify-content: center; color: var(--ad-border); font-size: 12px; overflow: hidden; flex-shrink: 0; } .card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .card-body { padding: var(--space-m); display: flex; flex-direction: column; flex-grow: 1; } .card-category { display: inline-block; background: #f0f0f0; color: var(--accent); padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-bottom: 8px; align-self: flex-start; } .card-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; } .card-summary { font-size: 13px; line-height: 1.5; color: var(--text-sub); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { display: flex; align-items: center; gap: var(--space-s); padding-top: var(--space-s); border-top: 1px solid var(--line); margin-top: auto; } .card-date { font-size: 11px; color: var(--text-sub); } /* 본문 하단 광고 래퍼 — 마진 여유 추가 */ .bottom-article-ad-wrapper { margin: 2rem 0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 페이징 (area_paging) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .area_paging { padding: var(--space-l) var(--space-m); text-align: center; border-top: 1px solid var(--line); } .inner_paging { display: flex; justify-content: center; gap: var(--space-s); align-items: center; } .link_prev, .link_next, .link_page { padding: 8px 12px; border: 1px solid var(--line); border-radius: 3px; text-decoration: none; color: var(--text); transition: color var(--duration-fast), border-color var(--duration-fast); font-size: 13px; } .link_prev:hover, .link_next:hover, .link_page:hover { color: var(--accent); border-color: var(--accent); } .link_page { min-width: 32px; text-align: center; } .no_more_prev, .no_more_next { opacity: 0.5; cursor: not-allowed; } .no_more_prev:hover, .no_more_next:hover { color: var(--text); border-color: var(--line); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 사이드바 — sticky 우측 광고 + 위젯 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ aside { display: flex; flex-direction: column; gap: var(--space-l); } .sidebar-widget { background: var(--bg-white); border-radius: 4px; padding: var(--space-m); border: 1px solid var(--line); } .sidebar-widget h3 { font-size: 14px; font-weight: 600; margin-bottom: var(--space-m); color: var(--text); } .widget-item { padding-bottom: var(--space-s); margin-bottom: var(--space-s); border-bottom: 1px solid var(--line); font-size: 12px; } .widget-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .widget-item a { color: var(--accent); text-decoration: none; transition: text-decoration var(--duration-fast); } .widget-item a:hover { text-decoration: underline; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 기타 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .disclaimer { font-size: 11px; color: var(--ad-border); margin: var(--space-l) 0; padding: var(--space-s); border-left: 2px solid var(--line); } .screen_out { display: none; } /* 접근성 건너뛰기 링크(#dkIndex) — 평소 화면 밖으로 숨기고 키보드 포커스 시에만 노출 */ #dkIndex a { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 8px 16px; background: var(--accent); color: #fff; text-decoration: none; border-radius: 0 0 4px 0; } #dkIndex a:focus { left: 0; } .hide { display: none; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 반응형: 1024px (타블릿 → 1컬럼, 사이드바 숨김) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 1024px) { .main-wrapper { grid-template-columns: 1fr; padding: var(--space-m); } aside { display: none; } .card-grid { grid-template-columns: repeat(2, 1fr); } #mArticle > s_index_article_rep { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .site-header nav { gap: var(--space-m); font-size: 13px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 반응형: 767px (모바일) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 767px) { .header-content { flex-direction: column; gap: var(--space-s); padding: 0 var(--space-m); } .site-header nav { flex-wrap: wrap; width: 100%; justify-content: center; gap: var(--space-m); } .logo { font-size: 20px; } .tit_post { font-size: 24px; } .article-header, .article-content, .related-section { padding: var(--space-m); } .main-wrapper { padding: var(--space-m) var(--space-s); } .meta { flex-wrap: wrap; } .card-grid { grid-template-columns: 1fr; } #mArticle > s_index_article_rep { grid-template-columns: 1fr; padding: var(--space-m); gap: var(--space-m); } .card-list-item:hover { transform: none; } .card-list-item .card-image { aspect-ratio: 16 / 9; } .card-list-item .card-title { font-size: 14px; } .card-list-item .card-summary { font-size: 12px; -webkit-line-clamp: 2; } table { font-size: 12px; } table th, table td { padding: 8px; } h2 { font-size: 20px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 반응형: 320px (초소형 모바일) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 320px) { :root { --text-base: 14px; --space-s: 0.75rem; --space-m: 1rem; --space-l: 1.5rem; } .tit_post { font-size: 18px; } h2 { font-size: 16px; } .card-grid { gap: var(--space-s); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PASONA 글쓰기 컴포넌트: 비교표 (compare-table) thead: accent 배경+흰글씨 / tbody 줄무늬 / 반응형 스크롤 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .compare-table { width: 100%; border-collapse: collapse; margin: var(--space-l) 0; font-size: 14px; background: var(--bg-white); } .compare-table thead { background-color: var(--accent); color: var(--bg-white); } .compare-table th, .compare-table td { padding: 12px; text-align: left; border: 1px solid var(--line); } .compare-table tbody tr:nth-child(even) { background-color: #f9f9f9; } .compare-table tbody tr:hover { background-color: #f0f5ff; } /* 모바일 가로 스크롤 래퍼 */ @media (max-width: 767px) { .compare-table-wrapper { overflow-x: auto; margin: var(--space-l) 0; } .compare-table { font-size: 12px; margin: 0; } .compare-table th, .compare-table td { padding: 8px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PASONA 글쓰기 컴포넌트: Q&A (qna) — details 기반 아코디언 좌측 accent 보더 + summary ▼ 표식(::after) + hover 배경 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .qna { margin: var(--space-l) 0; } .qna summary { cursor: pointer; padding: var(--space-s); background: #f9f9f9; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 4px; font-weight: 600; font-size: 15px; color: var(--text); user-select: none; transition: background var(--duration-fast), color var(--duration-fast); display: flex; align-items: center; justify-content: space-between; } .qna summary::after { content: "▼"; font-size: 10px; color: var(--accent); transition: transform var(--duration-fast); margin-left: var(--space-s); flex-shrink: 0; } .qna summary:hover { background: #f0f5ff; color: var(--accent); } .qna[open] summary { background: #f0f5ff; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; color: var(--accent); } .qna[open] summary::after { transform: rotate(-180deg); } .qna-content { background: #fafafa; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-top: none; padding: var(--space-m); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; font-size: 14px; line-height: 1.7; color: var(--text); } .qna-content p { margin-bottom: var(--space-s); } .qna-content p:last-child { margin-bottom: 0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PASONA 글쓰기 컴포넌트: 액션 체크리스트 (action-checklist) accent 좌측 보더 + ✓ 체크 표식 + 시간 힌트 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .action-checklist { background: #f5f9ff; border: 1px solid #c2d9f0; border-left: 4px solid var(--accent); border-radius: 4px; padding: var(--space-m); margin: var(--space-l) 0; } .action-checklist h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: var(--space-m); } .action-checklist ul { list-style: none; margin: 0; padding: 0; } .action-checklist li { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; font-size: 14px; color: var(--text); padding-left: 0; } .action-checklist li:last-child { margin-bottom: 0; } .action-checklist li::before { content: "✓"; font-weight: bold; color: var(--accent); flex-shrink: 0; font-size: 16px; } .checklist-time { display: inline-block; margin-left: auto; font-size: 12px; color: var(--text-sub); flex-shrink: 0; } .action-checklist-guide { font-size: 13px; color: var(--text-sub); margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid #c2d9f0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PASONA 글쓰기 컴포넌트: 관련글 카드 그리드 (related-cards) 3열(데스크톱) → 2열(태블릿) → 1열(모바일) 카드 hover: translateY + box-shadow (compositor 친화) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .related-cards-section { padding: var(--space-l); border-top: 1px solid var(--line); } .related-cards-section h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--space-m); color: var(--text); } .related-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } .related-card { background: var(--bg-white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--duration-fast), box-shadow var(--duration-fast); display: flex; flex-direction: column; } .related-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .related-card-image { width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #e8e8e8, #f5f5f5); display: flex; align-items: center; justify-content: center; color: var(--ad-border); font-size: 12px; flex-shrink: 0; } .related-card-body { padding: var(--space-m); display: flex; flex-direction: column; flex-grow: 1; } .related-card-category { display: inline-block; background: #f0f0f0; color: var(--accent); padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-bottom: 8px; align-self: flex-start; } .related-card-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; } .related-card-date { font-size: 11px; color: var(--text-sub); margin-top: auto; } /* 반응형: 1024px 이하 (태블릿 → 2열) */ @media (max-width: 1024px) { .related-cards { grid-template-columns: repeat(2, 1fr); } } /* 반응형: 767px 이하 (모바일 → 1열) */ @media (max-width: 767px) { .related-cards { grid-template-columns: 1fr; } .related-cards-section { padding: var(--space-m); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ mopicoat 프리미엄 포스팅 본문 가독성 & 레이아웃 튜닝 (2026-06-17) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* 1. 타이포그래피 계층화 */ .contents_style h2 { font-size: 1.45rem !important; font-weight: 700 !important; color: #1a202c !important; margin: 45px 0 20px 0 !important; line-height: 1.4 !important; border-left: 5px solid #0052ff !important; padding-left: 12px !important; } .contents_style h3 { font-size: 1.25rem !important; font-weight: 700 !important; color: #1a202c !important; margin: 35px 0 15px 0 !important; } .contents_style p, .contents_style li { font-size: 1.05rem !important; line-height: 1.85 !important; color: #2d3748 !important; letter-spacing: -0.015em !important; } /* 2. 뚜렷한 격자형 테이블 스타일 (티스토리 기본 테이블 덮어쓰기) */ .contents_style .table-container, .contents_style table { border-collapse: collapse !important; width: 100% !important; margin: 24px 0 !important; } .contents_style table th { background-color: #f1f5f9 !important; color: #1a202c !important; font-weight: 800 !important; border: 1px solid #cbd5e1 !important; padding: 12px 16px !important; font-size: 0.92rem !important; } .contents_style table td { border: 1px solid #cbd5e1 !important; padding: 12px 16px !important; color: #2d3748 !important; font-size: 0.95rem !important; background-color: #ffffff !important; } .contents_style table tr:hover td { background-color: #f8fafc !important; } /* 3. 모바일 뷰포트 반응형 패딩 확보 */ @media (max-width: 768px) { .area_view, .contents_style { padding-left: 16px !important; padding-right: 16px !important; } }