/* Theme Name: 기본파 Theme URI: https://kibonpa.com Description: 가볍게 파보는 기업 이야기 — 기업분석 블로그를 위한 커스텀 WordPress 테마. 에디토리얼 스타일의 단일 컬럼 레이아웃. Version: 1.0.0 Author: AutoCodeSpace Text Domain: gibonpa */ /* ============================================================ 디자인 토큰 (design_mockups에서 추출) ============================================================ */ :root { --bg: #fcfbf8; --surface: #ffffff; --ink: #1c1a17; --ink-head: #161412; --ink-2: #211e19; --ink-3: #3a372f; --ink-4: #46423b; --ink-5: #595549; --muted: #928c80; --muted-2: #9a948a; --muted-3: #8f897f; --lead: #4e4a43; --accent: #b8402a; --line: #e7e2d8; --line-2: #ece7dd; --table-head:#f4f1ea; --table-stripe:#faf8f3; --tag-corp: #b8402a; /* 기업분석 */ --tag-trend: #3f7d6e; /* 산업트렌드 */ --tag-note: #9a6b1f; /* 투자노트 */ --serif: 'Noto Serif KR', serif; --news: 'Newsreader', serif; --sans: 'Pretendard', -apple-system, system-ui, sans-serif; /* 토글 버튼 */ --toggle-bg: #ffffff; --toggle-border: #e7e2d8; --toggle-ink: #46423b; --toggle-bg-hov: #f4f1ea; /* 본문 inline highlight 밑줄 */ --hl-underline: #e7c4bb; /* 액센트 연한 배경 (고지·강조 박스) */ --accent-soft: #f3e2dd; /* 카드/입력 */ --card-shadow: 0 10px 36px -16px rgba(40,28,18,0.22); --input-border: #ddd7cc; --search-icon: #b8b2a8; color-scheme: light; } /* ============================================================ 야간 모드 — 따뜻한 차콜 팔레트 (에디토리얼 톤 유지) data-theme="dark" 가 에 붙으면 토큰만 갈아끼운다. 가이드 함정 #04(FOUC) 대비: 초기값은 header.php에서 결정. ============================================================ */ :root[data-theme="dark"] { --bg: #18120f; --surface: #211a16; --ink: #ece6dc; --ink-head: #f5efe5; --ink-2: #e4ddd1; --ink-3: #d2cabb; --ink-4: #c2b9a8; --ink-5: #a89e8d; --muted: #8d8473; --muted-2: #9a9080; --muted-3: #b3a999; --lead: #cdc5b6; /* 부제 — 다크에서 또렷하게 */ --accent: #e0664a; /* 다크 배경에서 또렷하게 한 톤 밝힌 테라코타 */ --line: #34291f; --line-2: #2c2219; --table-head:#2a211a; --table-stripe:#241d17; --tag-corp: #e0664a; --tag-trend: #5fae9a; --tag-note: #d09a3e; --toggle-bg: #211a16; --toggle-border: #34291f; --toggle-ink: #c2b9a8; --toggle-bg-hov: #2c2219; --hl-underline: #6e3a2e; --accent-soft: #2a1c17; --card-shadow: 0 12px 40px -14px rgba(0,0,0,0.55); --input-border: #3a2e23; --search-icon: #8d8473; color-scheme: dark; } /* 테마 전환 시 색이 톡 끊기지 않고 부드럽게 — 단, 전환 직후 1프레임은 차단(no-transition) */ body, .site, .post-card, .cat-tab, .search__input, .takeaways, .theme-toggle, .pagination .page-numbers { transition: background-color .35s ease, color .25s ease, border-color .25s ease, box-shadow .35s ease; } :root.theme-no-transition, :root.theme-no-transition * { transition: none !important; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; font-size: 15.5px; line-height: 1.7; } ::selection { background: var(--accent); color: #fff; } input::placeholder { color: #b8b2a8; font-weight: 400; } a { color: inherit; } img { max-width: 100%; height: auto; } /* ============================================================ 레이아웃 ============================================================ */ .site { min-height: 100vh; background: var(--bg); } .container { max-width: 720px; margin: 0 auto; padding: 72px 28px 140px; } .container--article { max-width: 680px; padding: 40px 28px 160px; } /* 마스트헤드 컨테이너 + 리스트 컨테이너가 연달아 쌓일 때 패딩이 이중으로 더해져 탭과 첫 글 사이가 크게 벌어지는 문제 방지 (가이드 함정 #06). 마스트헤드는 아래 패딩을 걷어내고, 리스트는 위 패딩을 걷어낸다. */ .container--masthead { padding-bottom: 0; } .container--list { padding-top: 0; } /* ============================================================ 마스트헤드 (메인 헤더) ============================================================ */ .masthead { margin-bottom: 44px; } .masthead__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .masthead__title { font-family: var(--serif); font-weight: 600; font-size: 38px; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 16px; color: var(--ink-head); } .masthead__title a { text-decoration: none; } .masthead__title .hl { color: var(--accent); } .masthead__tagline { font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); margin: -8px 0 16px; } .masthead__tagline strong { color: var(--accent); font-weight: 600; } /* ============================================================ 검색 ============================================================ */ .search { margin-top: 32px; position: relative; max-width: 460px; } .search__icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: stroke .18s ease; pointer-events: none; stroke: var(--search-icon); } .search__input { width: 100%; font: inherit; font-family: inherit; font-size: 15.5px; color: var(--ink); padding: 11px 4px 12px 30px; border-radius: 0; outline: none; background: transparent; border: none; border-bottom: 1.5px solid var(--input-border); transition: border-color .18s ease; } .search__input:focus { border-bottom-color: var(--accent); } .search:focus-within .search__icon { stroke: var(--accent); } /* ============================================================ 카테고리 탭 ============================================================ */ .cat-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 6px; flex-wrap: wrap; } .cat-tab { position: relative; font: inherit; font-family: inherit; font-size: 14.5px; font-weight: 500; padding: 0 0 14px; cursor: pointer; border: none; background: transparent; color: var(--muted-2); text-decoration: none; transition: color .16s ease; } .cat-tab:hover { color: var(--ink-4); } .cat-tab.is-active { font-weight: 600; color: var(--ink-head); } .cat-tab__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .22s cubic-bezier(.4,0,.2,1); } .cat-tab.is-active .cat-tab__bar { transform: scaleX(1); } /* ============================================================ 결과 메타 ============================================================ */ .result-meta { height: 46px; display: flex; align-items: center; } .result-meta__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ============================================================ 포스트 리스트 ============================================================ */ .post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .post-row { border-top: 1px solid var(--line-2); } .post-row:first-child { border-top: none; } .post-card { display: flex; gap: 26px; padding: 32px 22px 34px; margin: 0 -22px; border-radius: 12px; color: inherit; position: relative; background: transparent; box-shadow: none; transition: background .22s ease, box-shadow .22s ease; } .post-card:hover { background: var(--surface); box-shadow: var(--card-shadow); } /* 제목 링크가 카드 전체를 덮게 (stretched link) — heading 밖 중첩 없이 카드 클릭 */ .post-card__link { color: inherit; text-decoration: none; } .post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .post-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .post-card__index { font-family: var(--news); font-size: 16px; font-style: italic; color: #cabfae; padding-top: 2px; width: 24px; flex: 0 0 24px; transition: color .18s ease; } .post-card:hover .post-card__index { color: var(--accent); } .post-card__body { min-width: 0; } .post-card__tagrow { margin-bottom: 12px; } .post-card__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tag-corp); } .post-card__tag--기업분석, .post-card__tag.is-corp { color: var(--tag-corp); } .post-card__tag.is-trend { color: var(--tag-trend); } .post-card__tag.is-note { color: var(--tag-note); } .post-card__title { font-family: var(--serif); font-weight: 600; font-size: 23px; line-height: 1.42; letter-spacing: -0.012em; margin: 0 0 11px; color: var(--ink); transition: color .18s ease; } .post-card:hover .post-card__title { color: var(--accent); } .post-card__arrow { color: var(--accent); opacity: 0; margin-left: -6px; display: inline-block; transition: opacity .2s ease, margin .2s ease; font-family: var(--sans); font-weight: 500; } .post-card:hover .post-card__arrow { opacity: 1; margin-left: 0; } .post-card__summary { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink-5); max-width: 560px; font-weight: 400; } .post-card__meta { display: flex; align-items: center; gap: 11px; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); font-weight: 400; } .dot { width: 2.5px; height: 2.5px; border-radius: 50%; background: #cfc9bd; display: inline-block; } /* ============================================================ 빈 상태 ============================================================ */ .empty { padding: 72px 0; text-align: center; } .empty__title { margin: 0 0 8px; font-family: var(--serif); font-size: 21px; color: var(--ink-4); font-weight: 500; } .empty__sub { margin: 0; font-size: 14px; color: var(--muted); } /* ============================================================ 페이지네이션 ============================================================ */ .pagination { margin-top: 48px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-4); text-decoration: none; border: 1px solid var(--line); background: var(--surface); transition: all .16s ease; } .pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); } .pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; } .pagination .page-numbers.dots { border: none; background: transparent; } /* ============================================================ 읽기 진행 바 ============================================================ */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 50; } .reading-progress__bar { height: 100%; width: 0%; background: var(--accent); transition: width .08s linear; } /* ============================================================ 단일 글 ============================================================ */ .back-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; letter-spacing: 0.04em; color: var(--muted-2); text-decoration: none; font-weight: 500; margin-bottom: 52px; transition: color .16s ease; } .back-link:hover { color: var(--accent); } .back-link__arrow { font-family: var(--news); font-style: italic; font-size: 15px; } .article-header { margin-bottom: 40px; } .article-header__cats { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; flex-wrap: wrap; } .article-header__cat { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-decoration: none; } .article-header__tag { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; } .article-header__title { font-family: var(--serif); font-weight: 700; font-size: 38px; line-height: 1.34; letter-spacing: -0.018em; margin: 0 0 22px; color: var(--ink-head); text-wrap: balance; } .article-header__lead { font-size: 19px; line-height: 1.62; color: var(--lead); margin: 0 0 30px; font-weight: 400; max-width: 600px; } .article-header__meta { display: flex; align-items: center; gap: 13px; font-size: 13px; letter-spacing: 0.04em; color: var(--muted-3); padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; } .article-header__author { font-weight: 500; color: var(--ink-4); } /* 썸네일 (있을 경우) */ .article-thumb { margin: 0 0 40px; border-radius: 12px; overflow: hidden; } .article-thumb img { width: 100%; height: auto; display: block; } /* ============================================================ 본문 콘텐츠 (the_content) ============================================================ */ .article-body { font-size: 17.5px; line-height: 1.85; color: var(--ink-2); font-weight: 400; } .article-body > p { margin: 0 0 26px; } .article-body a { color: var(--accent); text-decoration: none; border-bottom: 1.5px solid var(--hl-underline); } .article-body a:hover { border-bottom-color: var(--accent); } .article-body h2 { font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.4; letter-spacing: -0.01em; margin: 48px 0 18px; color: var(--ink-head); } .article-body h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.4; margin: 38px 0 14px; color: var(--ink-head); } .article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 26px; } .article-body li { margin-bottom: 8px; } .article-body strong { font-weight: 600; color: var(--ink-head); } .article-body img { border-radius: 12px; } /* 데이터 테이블 */ .article-body figure.wp-block-table, .article-body .data-table { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); } .article-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .article-body thead tr { background: var(--table-head); } .article-body th { text-align: left; padding: 14px 20px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.02em; } .article-body th:last-child { color: var(--accent); } .article-body td { padding: 13px 20px; color: var(--ink-5); font-variant-numeric: tabular-nums; border-top: 1px solid var(--line-2); } /* 숫자 컬럼 우측 정렬 (에디터의 정렬 클래스 + 데이터테이블 관례 모두 지원) */ .article-body td.has-text-align-right, .article-body th.has-text-align-right, .article-body .data-table td:not(:first-child), .article-body .data-table th:not(:first-child) { text-align: right; } /* 마지막(증감) 컬럼은 액센트 강조 */ .article-body .data-table td:last-child { color: var(--accent); font-weight: 600; } .article-body tbody tr:nth-child(even) { background: var(--table-stripe); } .article-body figcaption { margin-top: 12px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); text-align: center; } /* 야간 모드에서 표 숫자/항목 대비 보강 — 회색빛으로 흐려지지 않게 */ :root[data-theme="dark"] .article-body td { color: var(--ink-3); } :root[data-theme="dark"] .article-body th { color: var(--ink-2); } :root[data-theme="dark"] .article-body th:last-child { color: var(--accent); } /* 인용 (pull quote) */ .article-body blockquote { margin: 40px 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--accent); } .article-body blockquote p { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.6; letter-spacing: -0.01em; color: var(--ink-2); margin: 0; } /* 인라인 이미지 */ .article-body figure { margin: 38px 0; } /* 한 줄 정리 박스 */ .takeaways { margin: 44px 0 8px; padding: 26px 28px; background: var(--table-head); border-radius: 14px; } .takeaways__title { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .takeaways__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .takeaways__item { display: flex; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--ink-3); } .takeaways__num { font-family: var(--news); font-style: italic; color: var(--accent); flex: 0 0 auto; } /* ============================================================ 다음 글 ============================================================ */ .next-article { display: block; margin-top: 64px; padding: 28px 0 6px; border-top: 1px solid var(--line); text-decoration: none; } .next-article__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .next-article__title { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; margin: 0; color: var(--ink); transition: color .18s ease; } .next-article:hover .next-article__title { color: var(--accent); } .next-article__arrow { color: var(--accent); opacity: 0; margin-left: -6px; display: inline-block; transition: opacity .2s ease, margin .2s ease; } .next-article:hover .next-article__arrow { opacity: 1; margin-left: 0; } /* ============================================================ 페이지 (page.php) ============================================================ */ .page-header { margin-bottom: 40px; } .page-header__title { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1.3; letter-spacing: -0.018em; margin: 0; color: var(--ink-head); } /* ============================================================ 푸터 ============================================================ */ .site-footer { border-top: 1px solid var(--line); margin-top: 80px; background: var(--table-stripe); } .site-footer__inner { max-width: 720px; margin: 0 auto; padding: 48px 28px 56px; display: flex; flex-direction: column; gap: 32px; } /* 상단 링크 열 */ .site-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; } .site-footer__brand { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink-head); margin-bottom: 10px; } .site-footer__brand .hl { color: var(--accent); } .site-footer__desc { margin: 0; font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 30ch; } .footer-col__title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 14px; } .footer-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col__list a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .16s ease; } .footer-col__list a:hover { color: var(--accent); } .footer-col__muted { font-size: 13px; color: var(--muted-2); } /* 신뢰 배지 */ .footer-trust { list-style: none; margin: 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 22px; } .footer-trust li { position: relative; padding-left: 20px; font-size: 12.5px; font-weight: 500; color: var(--ink-5); letter-spacing: 0.02em; } .footer-trust li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 3px; background: var(--accent); opacity: 0.85; } /* 하단 저작권 + 법적 링크 */ .site-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; } .footer-menu a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .16s ease; } .footer-menu a:hover { color: var(--accent); } .site-footer__copy { font-size: 12px; color: var(--muted-2); letter-spacing: 0.02em; } /* ============================================================ 404 ============================================================ */ .notfound { padding: 80px 0; text-align: center; } .notfound__code { font-family: var(--news); font-style: italic; font-size: 64px; color: var(--accent); margin: 0 0 8px; } .notfound__title { font-family: var(--serif); font-size: 24px; color: var(--ink-4); margin: 0 0 8px; font-weight: 600; } .notfound__sub { font-size: 14px; color: var(--muted); margin: 0 0 28px; } .notfound__home { display: inline-block; font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; border-bottom: 1.5px solid var(--hl-underline); } /* ============================================================ 야간 모드 토글 버튼 (우측 상단 고정) ============================================================ */ .theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 60; width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 999px; cursor: pointer; border: 1px solid var(--toggle-border); background: var(--toggle-bg); color: var(--toggle-ink); box-shadow: 0 4px 14px -8px rgba(0,0,0,0.25); -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: var(--toggle-bg-hov); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 19px; height: 19px; display: block; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .25s ease; } /* 해/달 아이콘 교차 페이드 — 한 버튼 안에 둘 다 두고 테마에 따라 토글 */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { grid-area: 1 / 1; } .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.6); } .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.6); } @media (max-width: 480px) { .theme-toggle { top: 14px; right: 14px; width: 38px; height: 38px; } .theme-toggle svg { width: 17px; height: 17px; } } /* ============================================================ 홈 리치 섹션 (Featured + 카테고리 그리드) masthead 아래, 전체 글 리스트 위. 자체 상/하 리듬을 가진다. ============================================================ */ .container--home { max-width: 720px; margin: 0 auto; padding: 40px 28px 8px; } .section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; } .section-head__kicker { font-family: var(--news); font-style: italic; font-size: 14px; color: var(--accent); white-space: nowrap; } .section-head__title { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin: 0; color: var(--ink-head); } /* ── Featured ── */ .featured { margin-bottom: 52px; } .featured__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: start; } .featured__lead { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .featured__thumb { display: block; border-radius: 14px; overflow: hidden; margin-bottom: 18px; aspect-ratio: 16 / 9; background: var(--table-head); } .featured__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.4,0,.2,1); } .featured__lead:hover .featured__thumb img { transform: scale(1.03); } .featured__body { display: flex; flex-direction: column; } .featured__cat { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tag-corp); margin-bottom: 12px; } .featured__cat.is-corp { color: var(--tag-corp); } .featured__cat.is-trend { color: var(--tag-trend); } .featured__cat.is-note { color: var(--tag-note); } .featured__title { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.34; letter-spacing: -0.015em; color: var(--ink-head); margin-bottom: 12px; transition: color .18s ease; } .featured__lead:hover .featured__title { color: var(--accent); } .featured__summary { font-size: 15px; line-height: 1.62; color: var(--ink-5); margin-bottom: 16px; } .featured__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.05em; color: var(--muted); } .featured__side { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .featured__side li { border-top: 1px solid var(--line-2); } .featured__side li:first-child { border-top: none; } .featured__side-item { display: flex; flex-direction: column; gap: 7px; padding: 18px 0; text-decoration: none; color: inherit; } .featured__side li:first-child .featured__side-item { padding-top: 0; } .featured__side-cat { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tag-corp); } .featured__side-cat.is-corp { color: var(--tag-corp); } .featured__side-cat.is-trend { color: var(--tag-trend); } .featured__side-cat.is-note { color: var(--tag-note); } .featured__side-title { font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.44; letter-spacing: -0.01em; color: var(--ink); transition: color .18s ease; } .featured__side-item:hover .featured__side-title { color: var(--accent); } .featured__side-meta { font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; } /* ── 카테고리 그리드 ── */ .cat-grid-sec { margin-bottom: 44px; } .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .cat-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; color: inherit; overflow: hidden; transition: border-color .18s ease, box-shadow .22s ease, transform .18s ease; } .cat-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tag-corp); transform: scaleY(0); transform-origin: top; transition: transform .2s ease; } .cat-tile.is-corp::before { background: var(--tag-corp); } .cat-tile.is-trend::before { background: var(--tag-trend); } .cat-tile.is-note::before { background: var(--tag-note); } .cat-tile:hover { border-color: var(--accent); box-shadow: var(--card-shadow); transform: translateY(-2px); } .cat-tile:hover::before { transform: scaleY(1); } .cat-tile__name { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink-head); } .cat-tile__count { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; } .cat-tile__arrow { position: absolute; right: 16px; bottom: 14px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; } .cat-tile:hover .cat-tile__arrow { opacity: 1; transform: translateX(0); } /* ============================================================ 아카이브 / 허브 헤더 ============================================================ */ .archive-header { margin: 6px 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); } .archive-header__kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .archive-header__title { font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.24; letter-spacing: -0.018em; margin: 0; color: var(--ink-head); text-wrap: balance; } .archive-header__desc { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-5); max-width: 600px; } .archive-header__desc p { margin: 0 0 12px; } .archive-header__desc p:last-child { margin-bottom: 0; } .archive-header__count { display: inline-block; margin-top: 16px; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; } /* ── 허브 카테고리 필터 ── */ .hub-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; } .hub-filter__item { font-size: 13px; font-weight: 500; color: var(--ink-5); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; text-decoration: none; transition: all .16s ease; } .hub-filter__item:hover { border-color: var(--accent); color: var(--accent); } .hub-filter__item.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } /* ============================================================ 브레드크럼 ============================================================ */ .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin: -34px 0 34px; /* back-link(margin-bottom:52px) 바로 아래에 붙도록 당김 */ } .crumbs a { color: var(--muted-2); text-decoration: none; transition: color .16s ease; } .crumbs a:hover { color: var(--accent); } .crumbs__sep { color: #cfc9bd; } .crumbs__current { color: var(--ink-4); font-weight: 500; } :root[data-theme="dark"] .crumbs__sep { color: var(--muted); } /* ============================================================ 투자 유의 고지 (금융 YMYL) ============================================================ */ .disclaimer { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 40px; padding: 16px 20px; background: var(--accent-soft); border: 1px solid var(--hl-underline); border-radius: 12px; } .disclaimer__label { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 4px 9px; border-radius: 6px; margin-top: 2px; } .disclaimer__text { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-4); } :root[data-theme="dark"] .disclaimer__text { color: var(--ink-3); } /* ============================================================ 본문 하단 태그 ============================================================ */ .article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--line); } .article-tags__item { font-size: 12.5px; font-weight: 500; color: var(--ink-5); background: var(--table-head); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 13px; text-decoration: none; transition: color .16s ease, border-color .16s ease; } .article-tags__item:hover { color: var(--accent); border-color: var(--accent); } /* ============================================================ 운영자 소개 (author bio) ============================================================ */ .author-bio { display: flex; gap: 22px; align-items: flex-start; margin: 56px 0 0; padding: 30px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--card-shadow); } .author-bio__avatar { flex: 0 0 auto; } .author-bio__avatar img, .author-bio__img { width: 64px; height: 64px; border-radius: 50%; display: block; object-fit: cover; border: 1px solid var(--line); } .author-bio__body { min-width: 0; } .author-bio__kicker { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; } .author-bio__name { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.3; margin: 0 0 10px; color: var(--ink-head); } .author-bio__desc { margin: 0 0 14px; font-size: 14px; line-height: 1.68; color: var(--ink-4); } .author-bio__link { font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; border-bottom: 1.5px solid var(--hl-underline); transition: border-color .16s ease; } .author-bio__link:hover { border-bottom-color: var(--accent); } /* ============================================================ 함께 보면 좋은 글 (related) ============================================================ */ .related { margin: 56px 0 0; } .related__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; } .related__kicker { font-family: var(--news); font-style: italic; font-size: 14px; color: var(--accent); } .related__title { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin: 0; color: var(--ink-head); } .related__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .related__grid--4 { grid-template-columns: repeat(4, 1fr); } .notfound__search { margin: 0 auto 24px; text-align: left; } .related__card { display: flex; flex-direction: column; height: 100%; padding: 20px 20px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .18s ease, box-shadow .22s ease, transform .18s ease; } .related__card:hover { border-color: var(--accent); box-shadow: var(--card-shadow); transform: translateY(-2px); } .related__cat { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tag-corp); margin-bottom: 11px; } .related__cat.is-corp { color: var(--tag-corp); } .related__cat.is-trend { color: var(--tag-trend); } .related__cat.is-note { color: var(--tag-note); } .related__card-title { font-family: var(--serif); font-weight: 600; font-size: 16.5px; line-height: 1.45; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--ink); transition: color .18s ease; flex: 1 1 auto; } .related__card:hover .related__card-title { color: var(--accent); } .related__meta { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; } /* ============================================================ 이전 / 다음 글 ============================================================ */ .prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 44px 0 0; padding-top: 34px; border-top: 1px solid var(--line); } .prevnext__link { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .18s ease, box-shadow .22s ease; } .prevnext__link--next { text-align: right; align-items: flex-end; } .prevnext__link--empty { background: transparent; border: none; } a.prevnext__link:hover { border-color: var(--accent); box-shadow: var(--card-shadow); } .prevnext__dir { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .prevnext__ttl { font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.42; color: var(--ink); transition: color .18s ease; } a.prevnext__link:hover .prevnext__ttl { color: var(--accent); } /* ============================================================ 반응형 ============================================================ */ @media (max-width: 768px) { .container { padding: 56px 22px 110px; } .container--article { padding: 32px 22px 120px; } .masthead__title { font-size: 31px; } .article-header__title { font-size: 30px; } .article-header__lead { font-size: 17px; } .article-body { font-size: 16.5px; } .article-body h2 { font-size: 22px; } .post-card__title { font-size: 20px; } .related__grid { grid-template-columns: 1fr; } .featured__grid { grid-template-columns: 1fr; gap: 26px; } .featured__title { font-size: 23px; } .cat-grid { grid-template-columns: repeat(2, 1fr); } .container--home { padding: 32px 22px 4px; } .related__grid--4 { grid-template-columns: repeat(2, 1fr); } .archive-header__title { font-size: 27px; } .site-footer__top { grid-template-columns: 1fr 1fr; gap: 28px 24px; } .site-footer__brandcol { grid-column: 1 / -1; } } @media (max-width: 480px) { .container { padding: 44px 18px 90px; } .masthead__title { font-size: 27px; } .article-header__title { font-size: 26px; } .cat-tabs { gap: 18px; } .post-card { gap: 16px; padding: 26px 16px 28px; margin: 0 -16px; } .post-card__index { width: 18px; flex: 0 0 18px; } .article-body table { font-size: 13px; } .article-body th, .article-body td { padding: 11px 12px; } .prevnext { grid-template-columns: 1fr; } .prevnext__link--next { text-align: left; align-items: flex-start; } .prevnext__link--empty { display: none; } .author-bio { flex-direction: column; gap: 16px; padding: 24px 20px; } .cat-grid { grid-template-columns: 1fr; } .section-head { flex-direction: column; gap: 4px; } .site-footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; } }