[hidden] { display: none !important; } /* 블로그 스킨 공통 안전장치 */ .pl-content, .wt-content, .bd-content, .bd-content-col, .bz-content, .pp-content, .bx-content, .news-content, .home-content { min-width: 0; } .pl-blocks table, .pl-prose table { display: block; max-width: 100%; overflow-x: auto; } /* 정적 페이지·도구 화면 */ [class*="-static-header"] { margin: 0 0 24px; } [class*="-static-title"] { margin: 0; } [class*="-static-footer"] { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.08); } [class*="-static-meta"] { font-size: 12px; opacity: .6; } /* 목차(TOC) */ .pl-toc { margin: 24px 0; padding: 16px 20px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; font-size: .93rem; } .pl-toc-title { font-weight: 700; margin-bottom: 8px; font-size: .95rem; } .pl-toc-list { list-style: none; margin: 0; padding: 0; } .pl-toc-item { margin: 4px 0; line-height: 1.5; } .pl-toc-item a { color: #555; text-decoration: none; } .pl-toc-item a:hover { color: #222; text-decoration: underline; text-underline-offset: 3px; } /* 단계별 들여쓰기 */ .pl-toc-h3 { padding-left: 14px; } .pl-toc-h4 { padding-left: 28px; font-size: .9em; } /* 키워드 자동링크 */ /* 본문 링크와 구분되되 튀지 않게. 밑줄만으로 링크임을 알린다 */ .pl-kwlink { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .pl-kwlink:hover { text-decoration-style: solid; } /* 글 아래 버튼(고정 CTA + 자동 관련글) */ .pl-relbtns { margin: 32px 0 8px; } .pl-relbtns-title { font-size: .95rem; font-weight: 700; margin-bottom: 10px; } .pl-relbtns-list { display: flex; flex-direction: column; gap: 8px; } .pl-relbtn { display: block; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; padding: 13px 16px; color: #222; text-decoration: none; font-size: .95rem; /* grid/flex 자식 기본 min-width:auto 해제 */ min-width: 0; } .pl-relbtn:hover { background: #fafafa; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); } /* 고정 버튼(관리자가 지정한 것)은 한 톤 강하게 */ .pl-relbtn.is-cta { border-color: #2c3e50; font-weight: 600; } /* 블로그 로고 이미지 */ [class$="-logo-img"] { display: block; height: 32px; width: auto; max-width: 220px; object-fit: contain; } @media (max-width: 640px) { [class$="-logo-img"] { height: 26px; max-width: 160px; } } /* '분류의 다른 글' 줄 정렬 */ .pl-cat-others-link { align-items: baseline; } /* 광고 슬롯 래퍼 */ .blog-w-ad { margin: 24px 0; text-align: center; } .blog-w-ad:empty { display: none; margin: 0; } /* 댓글 자동등록방지 레이어 */ .pl-captcha-actions { display: flex; align-items: center; gap: 6px; } .pl-captcha-overlay .pl-captcha-img { display: block; height: 44px; width: auto; border-radius: 4px; margin: 0 auto 12px; } .pl-captcha-overlay .pl-captcha-reload { flex: 0 0 auto; width: 38px; height: 38px; line-height: 1; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; background: #fff; cursor: pointer; font-size: 16px; } .pl-captcha-overlay .pl-captcha-input { flex: 1 1 auto; min-width: 0; text-align: left; } /* 이전/다음 글 카드 */ .pl-post-nav .pl-post-nav-links .pl-post-nav-item:only-child { flex: 0 1 calc(50% - 8px); } .pl-post-nav .pl-post-nav-links .pl-post-nav-prev:only-child { grid-column: 1; margin-right: auto; } .pl-post-nav .pl-post-nav-links .pl-post-nav-next:only-child { grid-column: 2; margin-left: auto; } /* 제목이 길면 두 줄까지만 */ .pl-post-nav .pl-post-nav-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; } .pl-post-nav .pl-post-nav-prev .pl-post-nav-body { margin-right: auto; text-align: left; } .pl-post-nav .pl-post-nav-next .pl-post-nav-body { margin-left: auto; text-align: right; } /* 작성자 프로필 머리글 */ .pl-author-profile { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; } .pl-author-avatar { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.05); } .pl-author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .pl-author-avatar-letter { font-size: 24px; font-weight: 700; opacity: .55; } .pl-author-info { min-width: 0; } .pl-author-name { margin: 0; font-size: 1.35rem; } .pl-author-position { margin-left: 8px; font-size: .82rem; font-weight: 400; opacity: .6; } .pl-author-intro { margin: 6px 0 0; font-size: .95rem; line-height: 1.6; opacity: .8; } .pl-author-posts-count { margin: 4px 0 0; font-size: .85rem; opacity: .6; } /* 소개 본문이 있으면 머리글이 길어진다 */ .pl-author-profile:has(.pl-author-bio) { align-items: flex-start; } .pl-author-bio { margin: 10px 0 0; font-size: .92rem; line-height: 1.7; opacity: .85; } .pl-author-bio p:first-child { margin-top: 0; } .pl-author-bio p:last-child { margin-bottom: 0; } .pl-author-links { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; } .pl-author-links a { display: inline-block; padding: 2px 9px; font-size: .78rem; border: 1px solid var(--pl-line, rgba(0,0,0,.12)); border-radius: 999px; text-decoration: none; opacity: .8; } .pl-author-links a:hover { text-decoration: underline; text-underline-offset: 2px; } /* 목록 제목 옆 글 수 배지 */ [class$="-archive-title"][class$="-archive-title"] { align-items: center; } /* 작성자 프로필 카드(글 본문 아래) */ .pl-authorcard { display: flex; gap: 16px; align-items: flex-start; margin: 28px 0; padding: 18px 20px; border: 1px solid var(--pl-line, #eee); border-radius: 10px; background: var(--pl-paper, #fff); } .pl-authorcard-avatar { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--pl-paper-soft, #f4f4f4); border: 1px solid var(--pl-line, #eee); text-decoration: none; } .pl-authorcard-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .pl-authorcard-letter { font-size: 1.6rem; font-weight: 700; color: var(--pl-ink-faded, #999); line-height: 1; } .pl-authorcard-body { flex: 1 1 auto; min-width: 0; } .pl-authorcard-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pl-authorcard-name { font-size: 1.05rem; font-weight: 700; color: var(--pl-ink, #333); text-decoration: none; } .pl-authorcard-name:hover { text-decoration: underline; text-underline-offset: 3px; } .pl-authorcard-position { font-size: .82rem; color: var(--pl-ink-faded, #999); } .pl-authorcard-more { margin-left: auto; font-size: .8rem; color: var(--pl-ink-faded, #999); text-decoration: none; } .pl-authorcard-more:hover { text-decoration: underline; text-underline-offset: 2px; } .pl-authorcard-intro { margin: 6px 0 0; font-size: .92rem; line-height: 1.6; color: var(--pl-ink-soft, #555); } .pl-authorcard-bio { margin-top: 6px; font-size: .92rem; line-height: 1.6; color: var(--pl-ink-soft, #555); } .pl-authorcard-bio p:first-child { margin-top: 0; } .pl-authorcard-bio p:last-child { margin-bottom: 0; } .pl-authorcard-bio a { color: var(--pl-accent, #4a6da7); } .pl-authorcard-links { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; } .pl-authorcard-links a { display: inline-block; padding: 2px 9px; font-size: .78rem; color: var(--pl-ink-soft, #666); border: 1px solid var(--pl-line, #eee); border-radius: 999px; text-decoration: none; background: var(--pl-paper-soft, #fafafa); } .pl-authorcard-links a:hover { text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 520px) { .pl-authorcard { gap: 12px; padding: 14px 16px; } .pl-authorcard-avatar { width: 52px; height: 52px; } .pl-authorcard-letter { font-size: 1.3rem; } } /* 언어 전환 */ .pl-lang { position: relative; display: inline-flex; align-items: center; } .pl-lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; background: none; border: 0; color: inherit; opacity: .7; } .pl-lang-btn:hover, .pl-lang-btn[aria-expanded="true"] { opacity: 1; } .pl-lang-btn svg { width: 19px; height: 19px; } .pl-lang-menu { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 116px; margin: 4px 0 0; padding: 5px 0; list-style: none; background: #fff; color: #222; border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); } .pl-lang-item { display: block; padding: 7px 14px; font-size: 13px; line-height: 1.2; color: inherit; text-decoration: none; white-space: nowrap; } .pl-lang-item:hover { background: rgba(0, 0, 0, .05); } .pl-lang-item.is-on { font-weight: 700; } /* 블로그 위젯 공통 스타일 */ .blog-w-list { list-style: none; margin: 0; padding: 0; } .blog-w-list li + li { margin-top: 8px; } .blog-w-list a { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.5; color: inherit; text-decoration: none; } .blog-w-list a:hover { text-decoration: underline; } /* 개수·날짜는 오른쪽 끝으로 */ .blog-w-count, .blog-w-date { margin-left: auto; flex: 0 0 auto; padding-left: 8px; font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; white-space: nowrap; } /* 최근 댓글 */ .blog-w-comment a { display: block; } .blog-w-name { display: block; font-size: 13px; font-weight: 600; } .blog-w-excerpt, .blog-w-secret { display: block; margin-top: 2px; font-size: 13px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 검색 폼 */ .blog-w-search { display: flex; gap: 6px; } .blog-w-search input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-size: 14px; border: 1px solid currentColor; border-color: rgba(0,0,0,.14); border-radius: 6px; background: transparent; color: inherit; } .blog-w-search button { flex: 0 0 auto; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; border-radius: 6px; background: #1a1a1a; color: #fff; white-space: nowrap; } .blog-w-search button:hover { opacity: .85; } /* 방문자 통계 */ .blog-w-visitors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; } .blog-w-visitor-label { font-size: 11px; opacity: .6; } .blog-w-visitor-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } /* 태그 클라우드 */ .blog-w-tags { display: flex; flex-wrap: wrap; gap: 6px; } .blog-w-tags a { text-decoration: none; color: inherit; } .pl-tag-w1 { font-size: 12px; } .pl-tag-w2 { font-size: 13px; } .pl-tag-w3 { font-size: 14px; } .pl-tag-w4 { font-size: 15px; } .pl-tag-w5 { font-size: 17px; font-weight: 600; } /* 구독·카카오 배너 */ .blog-w-form { display: flex; gap: 6px; margin-top: 8px; } .blog-w-form input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-size: 14px; border: 1px solid rgba(0,0,0,.14); border-radius: 6px; background: transparent; color: inherit; } .blog-w-form button, .blog-w-btn { display: inline-block; padding: 8px 14px; font-size: 14px; font-weight: 600; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none; background: #fee500; color: #191600; } .blog-w-desc { margin: 4px 0 0; font-size: 13px; opacity: .7; line-height: 1.5; } .blog-w-handle { display: inline-block; margin-left: 8px; font-size: 12px; opacity: .6; } /* 광고 슬롯 */ .blog-w-ad { max-width: 100%; overflow: hidden; margin: 16px 0; } .blog-w-ad img, .blog-w-ad iframe { max-width: 100%; } /* 광고 슬롯(pl-w-ad) */ .pl-w-ad-list-middle { grid-column: 1 / -1; width: 100%; } .pl-w-ad-post-top::before, .pl-w-ad-post-bottom::before { content: "AD"; display: block; font-size: .62rem; letter-spacing: .08em; color: #bbb; text-align: center; margin-bottom: .35rem; } /* 웹푸시 구독 버튼 */ .blog-w-push { margin-top: 8px; } .blog-push-btn { padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid rgba(0,0,0,.16); border-radius: 6px; background: transparent; color: inherit; } .blog-push-btn[data-state="on"] { background: rgba(0,0,0,.06); } .blog-push-btn:disabled { opacity: .5; cursor: default; } .pl-w-sub-desc { color: #888; font-size: .86rem; margin: .2rem 0 .8rem; line-height: 1.5; } .pl-sub-form { display: flex; gap: 6px; flex-wrap: wrap; } .pl-sub-email { flex: 1 1 140px; min-width: 0; border: 1px solid #ddd; border-radius: 6px; padding: 9px 11px; font-size: .9rem; } .pl-sub-email:focus { outline: none; border-color: #888; } .pl-sub-btn { border: none; background: #222; color: #fff; border-radius: 6px; padding: 9px 16px; font-size: .9rem; cursor: pointer; white-space: nowrap; } .pl-sub-btn:hover { background: #000; } .pl-w-kakao .pl-kko-card { position: relative; overflow: hidden; border: 1px solid #f0e08b; border-radius: 16px; padding: 22px 16px 16px; text-align: center; background: linear-gradient(180deg, #fffef7 0%, #fff8d2 100%); box-shadow: 0 8px 22px rgba(60,30,30,.06); } .pl-w-kakao .pl-kko-card::before { content: ""; position: absolute; top: -30px; right: -30px; width: 92px; height: 92px; border-radius: 50%; background: rgba(254,229,0,.38); } .pl-w-kakao .pl-kko-card::after { content: ""; position: absolute; left: -42px; bottom: -48px; width: 116px; height: 116px; border-radius: 50%; background: rgba(254,229,0,.14); } .pl-w-kakao .pl-kko-badge { position: relative; display: inline-flex; width: 56px; height: 56px; border-radius: 18px; background: #FEE500; align-items: center; justify-content: center; margin: 0 auto 13px; box-shadow: 0 8px 18px rgba(247,206,0,.36), inset 0 -2px 0 rgba(60,30,30,.08); } .pl-w-kakao .pl-kko-badge svg { display: block; width: 34px; height: 34px; color: #3C1E1E; flex: 0 0 auto; } .pl-w-kakao .pl-kko-name { position: relative; font-size: 1.03rem; font-weight: 800; color: #3C1E1E; margin: 0 0 3px; } .pl-w-kakao .pl-kko-handle { position: relative; font-size: .76rem; color: #a88735; margin: 0 0 8px; } .pl-w-kakao .pl-kko-desc { position: relative; font-size: .86rem; color: #827149; line-height: 1.55; margin: 0 0 15px; } .pl-w-kakao .pl-kko-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; background: #FEE500; color: #3C1E1E; font-weight: 800; font-size: .95rem; padding: 12px 14px; border-radius: 12px; text-decoration: none; box-shadow: 0 5px 13px rgba(247,206,0,.26); transition: transform .12s ease, filter .15s ease, box-shadow .15s ease; } .pl-w-kakao .pl-kko-btn:hover { filter: brightness(.98); transform: translateY(-1px); box-shadow: 0 7px 16px rgba(247,206,0,.32); } .pl-w-kakao .pl-kko-btn:active { transform: translateY(0); } .pl-w-kakao .pl-kko-btn svg { display: block; width: 18px; height: 18px; color: #3C1E1E; flex: 0 0 auto; } .pl-w-push-desc { color: #888; font-size: .86rem; margin: .2rem 0 .8rem; line-height: 1.5; } .pl-w-push-box button { width: 100%; border: 1px solid #ddd; background: #fff; border-radius: 6px; padding: 9px 14px; font-size: .9rem; cursor: pointer; } .pl-w-push-box button:hover { border-color: #888; } /* 분류 위젯 하위 뎁스 들여쓰기: 한 단 5px. 스킨마다 따로 두지 않는다. 트리는 최대 5단이다. */ /* 목록 클래스를 한 단 더 얹어 스킨보다 구체적으로 만든다. 같은 구체도면 나중에 실리는 스킨이 이겨 들여쓰기가 사라진다. */ .pl-w-cat-list .pl-w-cat-item.pl-depth-1 { padding-left: 5px; } .pl-w-cat-list .pl-w-cat-item.pl-depth-2 { padding-left: 10px; } .pl-w-cat-list .pl-w-cat-item.pl-depth-3 { padding-left: 15px; } .pl-w-cat-list .pl-w-cat-item.pl-depth-4 { padding-left: 20px; } .pl-w-cat-list .pl-w-cat-item.pl-depth-5 { padding-left: 25px; } /* 블로그 댓글 공통 스타일 */ .pl-comments { margin: 48px 0 0; } .pl-comments-title { margin: 0 0 16px; font-size: 18px; font-weight: 700; } .pl-comments-count { margin-left: 4px; font-size: 14px; opacity: .55; font-variant-numeric: tabular-nums; } .pl-comment-list { list-style: none; margin: 0; padding: 0; } .pl-comment { padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.07); } .pl-comment.pl-comment-reply { padding-left: 24px; background: rgba(0,0,0,.02); border-left: 2px solid rgba(0,0,0,.12); } .pl-comment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .pl-comment-name { font-size: 14px; font-weight: 600; } .pl-comment-name a { color: inherit; } .pl-comment-badge { margin-left: 4px; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; background: rgba(0,0,0,.8); color: #fff; } .pl-comment-date { margin-left: auto; font-size: 12px; opacity: .5; } .pl-comment-body { font-size: 14px; line-height: 1.7; word-break: break-word; } .pl-comment-body-secret { opacity: .5; font-style: italic; } .pl-comment-actions, .pl-comment-secret-actions { display: flex; gap: 6px; margin-top: 8px; } .pl-btn-line { padding: 3px 9px; font-size: 12px; line-height: 1.6; cursor: pointer; border: 1px solid rgba(0,0,0,.16); border-radius: 4px; background: transparent; color: inherit; } .pl-btn-line:hover { background: rgba(0,0,0,.05); } .pl-btn-del { opacity: .55; } /* 작성 폼 */ .pl-comment-respond { margin-top: 28px; } .pl-comment-form-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; } .pl-form-row { margin-bottom: 10px; } .pl-form-row textarea, .pl-form-row input { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 14px; font-family: inherit; line-height: 1.6; color: inherit; background: transparent; border: 1px solid rgba(0,0,0,.16); border-radius: 6px; } .pl-form-row textarea { resize: vertical; min-height: 96px; } .pl-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pl-form-check { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; cursor: pointer; } .pl-form-check input { margin: 0; } .pl-form-hint { margin: 4px 0 0; font-size: 12px; opacity: .6; } .pl-submit-btn { padding: 9px 20px; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; border-radius: 6px; background: #111; color: #fff; } .pl-submit-btn:hover { opacity: .85; } .pl-empty { padding: 24px 0; font-size: 14px; opacity: .55; text-align: center; } /* 답글 대상 표시 */ .pl-replying-to { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 12px; font-size: 13px; border-radius: 6px; background: rgba(0,0,0,.05); } .pl-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* 비밀번호 모달 */ /* [hidden] 이 display 를 이기게 */ .pl-pw-overlay[hidden], .pl-replying-to[hidden], [data-blog-comment-password][hidden] { display: none !important; } .pl-pw-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.45); } .pl-pw-modal { width: 100%; max-width: 320px; padding: 20px; border-radius: 10px; background: #fff; color: #111; box-shadow: 0 12px 40px rgba(0,0,0,.25); } .pl-pw-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; } .pl-pw-input { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 14px; border: 1px solid rgba(0,0,0,.18); border-radius: 6px; } .pl-pw-error { margin: 8px 0 0; font-size: 12px; color: #d63939; } .pl-pw-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } @media (max-width: 640px) { .pl-form-grid { grid-template-columns: 1fr; } .pl-comment.pl-comment-reply { padding-left: 14px; } } /* 비밀댓글 비밀번호 입력칸 */ /* 비밀 댓글 줄 */ .pl-comment-secret-row { display: block; margin-bottom: 10px; } .pl-comment-secret-row > .pl-form-check { display: flex; margin: 0; } .pl-comment-secret-pw { margin-top: 5px; } /* 비밀번호 칸 */ .pl-form-secret-pw-input { max-width: 320px; } .pl-comments.pl-comments { background: transparent; border: 0; border-radius: 0; padding-left: 0; padding-right: 0; } /* 레이어 버튼(취소·확인) 크기 통일 */ .pl-captcha-buttons.pl-captcha-buttons, .pl-secret-buttons.pl-secret-buttons, .pl-pw-buttons.pl-pw-buttons { display: flex; gap: 8px; justify-content: flex-end; align-items: center; } .pl-captcha-buttons.pl-captcha-buttons > *, .pl-secret-buttons.pl-secret-buttons > *, .pl-pw-buttons.pl-pw-buttons > * { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 84px; padding-top: 0; padding-bottom: 0; font-size: .9rem; line-height: 1; box-sizing: border-box; margin: 0; vertical-align: middle; } /* white theme */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.75; color: #1a1a1a; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; transition: color .15s; } a:hover { color: #1a1a1a; } img { max-width: 100%; height: auto; display: block; } img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } :root { --wt-text: #1a1a1a; --wt-text-soft: #555; --wt-text-faded: #999; --wt-line: #e8e8e8; --wt-line-soft: #f0f0f0; --wt-bg: #fff; --wt-bg-soft: #fafafa; --wt-accent: #1a1a1a; --wt-accent-bright: #0066ff; --wt-content-font-size: 16px; --wt-content-line-height: 1.85; --wt-content-font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; --wt-wrap: 1200px; --wt-content-w: 100%; --wt-gap: 60px; --wt-sidebar-w: 280px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* Header */ .wt-header { background: #fff; border-bottom: 1px solid var(--wt-line); padding: 40px 0 0; } .wt-header-inner { max-width: var(--wt-wrap); margin: 0 auto; padding: 0 24px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .wt-brand { margin: 0; font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; flex: 1; text-align: center; } .wt-brand a { color: var(--wt-text); } .wt-brand a:hover { color: var(--wt-text); opacity: .7; } .wt-header-actions { display: flex; gap: 4px; position: absolute; right: 24px; } .wt-header-inner { position: relative; } .wt-icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--wt-text-soft); border-radius: 50%; transition: background .15s, color .15s; background: transparent; border: 0; cursor: pointer; } .wt-icon-btn:hover { background: var(--wt-bg-soft); color: var(--wt-text); } /* 펼쳐지는 검색 박스 */ .wt-search { display: inline-flex; align-items: center; position: relative; } .wt-search-input { width: 0; padding: 0; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 0.9375rem; color: var(--wt-text); border-radius: 999px; transition: width .25s ease, padding .25s ease, background .25s ease, border-color .25s ease, margin .25s ease; outline: none; opacity: 0; pointer-events: none; order: 1; } .wt-search.is-open .wt-search-input { width: 220px; padding: 6px 18px; background: var(--wt-bg-soft); border-color: var(--wt-line); margin-right: 4px; opacity: 1; pointer-events: auto; } .wt-search.is-open .wt-search-input:focus { border-color: #ccc; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, .04); } .wt-search-toggle { order: 2; position: relative; z-index: 2; } .wt-search.is-open .wt-search-toggle { background: #1a1a1a; color: #fff; } .wt-search.is-open .wt-search-toggle:hover { background: #555; } @media (max-width: 600px) { .wt-search.is-open .wt-search-input { width: 160px; padding: 6px 14px; } } .wt-nav { max-width: var(--wt-wrap); margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; justify-content: center; /* 구형 브라우저 폴백 */ justify-content: safe center; /* 모던: 넘치면 자동으로 start 정렬 → 왼쪽 안 잘림 */ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; /* 스크롤바 숨김 (Firefox) */ } .wt-nav::-webkit-scrollbar { display: none; } /* 스크롤바 숨김 (Chrome/Safari) */ .wt-nav::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; } .wt-nav::-webkit-scrollbar-track { background: transparent; } .wt-nav a { display: inline-block; padding: 14px 18px; font-size: 0.9375rem; font-weight: 500; color: var(--wt-text-soft); position: relative; transition: color .15s; /* 한 줄 유지 + 축소 금지 + 스냅 */ flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; } .wt-nav a:hover { color: var(--wt-text); } .wt-nav a.is-active { color: var(--wt-text); font-weight: 700; } .wt-nav a.is-active::after { content: ''; position: absolute; bottom: 0; left: 18px; right: 18px; height: 2px; background: var(--wt-text); } @media (max-width: 600px) { .wt-nav { flex-wrap: wrap; /* 한 줄 고집 안 하고 여러 줄로 */ overflow-x: visible; /* 스크롤 자체를 없앰 */ justify-content: center; padding: 4px 16px 0; row-gap: 0; } .wt-nav a { padding: 10px 13px; } } /* Main / Layout */ .wt-main { padding: 0 0 0px; min-height: 60vh; } .wt-main > .wt-layout:first-child { padding-top: 48px; } .wt-main > .wt-single-hero + .wt-layout { padding-top: 48px; } .wt-layout { max-width: var(--wt-wrap); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) var(--wt-sidebar-w); gap: var(--wt-gap); align-items: start; } .wt-content { min-width: 0; } .wt-content-col { min-width: 0; } @media (max-width: 980px) { .wt-layout { grid-template-columns: 1fr; gap: 40px; } } .wt-archive-head { margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--wt-line); } .wt-archive-title { margin: 0; font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: -.01em; color: var(--wt-text); display: flex; align-items: baseline; gap: 10px; } .wt-archive-count { font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: .875rem; font-weight: 500; color: #555; background: #f5f5f5; padding: 2px 8px; border-radius: 6px; } .wt-archive-desc { margin: 8px 0 0; color: var(--wt-text-soft); font-size: 0.9375rem; } .wt-empty { text-align: center; padding: 80px 20px; color: var(--wt-text-faded); } .wt-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } .wt-card { background: #fff; } .wt-card-link { display: flex; flex-direction: column; color: #555; text-decoration: none; } .wt-card-link:hover { color: #555; text-decoration: none; } .wt-card-link > * { text-decoration: none; } .wt-card-link:hover .wt-card-title { text-decoration: underline; text-underline-offset: 3px; } .wt-card-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--wt-bg-soft); margin-bottom: 14px; border-radius: 2px; transition: opacity .15s; } .wt-card:hover .wt-card-thumb { opacity: .88; } .wt-card-noimg .wt-card-thumb { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f5f5 0%, #ececec 100%); } .wt-card-thumb-letter { font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 3.5rem; font-weight: 700; color: #d8d8d8; letter-spacing: -.02em; } .wt-card-body { display: flex; flex-direction: column; gap: 8px; } .wt-card-title { margin: 0; font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.40; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wt-card-excerpt { margin: 0; font-size: 0.875rem; color: var(--wt-text-soft); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wt-card-meta { font-size: 0.8125rem; color: var(--wt-text-faded); margin-top: 4px; } @media (max-width: 900px) { .wt-card-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } } @media (max-width: 520px) { .wt-card-grid { grid-template-columns: 1fr; } .wt-card-thumb { aspect-ratio: 16 / 10; } } /* Single (글 상세 스타일) */ .wt-single { max-width: 100%; } /* 기본 table 형태 */ .wt-single table { width: 100%; max-width: 800px; border-collapse: collapse; } .wt-single table strong { font-weight: 500; } /* Hero */ .wt-single-hero { position: relative; width: 100%; background-size: cover; background-position: center; background-color: #2a2a2a; min-height: 300px; display: flex; align-items: flex-end; margin-bottom: 48px; } .wt-single-hero-mask { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.78) 100%); } /* hero 안의 텍스트 영역 */ .wt-single-hero-inner { position: relative; width: 100%; max-width: var(--wt-wrap); margin: 0 auto; padding: 40px 24px 40px; color: #fff; } .wt-single-hero-inner > * { max-width: var(--wt-content-w); } .wt-single-cat { display: inline-block; font-size: 0.875rem; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.9); margin-bottom: 12px; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.4); } .wt-single-cat:hover { color: #fff; border-bottom-color: #fff; } .wt-single-title { margin: 0; font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: #fff; } .wt-single-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.875rem; color: rgba(255,255,255,.85); } /* 대표이미지 없는 경우 */ .wt-single-header { margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--wt-line); } .wt-single-cat-plain { color: #1a1a1a; border-bottom-color: #1a1a1a; } .wt-single-cat-plain:hover { color: #555; border-bottom-color: #555; } .wt-single-title-plain { margin: 12px 0 14px; font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 1.35; color: var(--wt-text); } .wt-single-meta-plain { color: var(--wt-text-faded); } .wt-private-notice { padding: 12px 16px; background: #fff8e1; color: #5d4e00; border-radius: 4px; margin: 0 0 24px; font-size: 0.875rem; } /* 본문 */ .wt-prose { max-width: var(--wt-content-w); margin: 0 auto; font-size: var(--wt-content-font-size); line-height: var(--wt-content-line-height); color: var(--wt-text); } .wt-prose > * { margin-top: 0; margin-bottom: 1.3em; } .wt-prose h2, .wt-prose h3, .wt-prose h4 { font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-weight: 700; margin: 1.8em 0 .7em; letter-spacing: -.01em; } .wt-prose h2 { font-size: 1.55rem; padding-bottom: .3em; border-bottom: 1px solid var(--wt-line); } .wt-prose h3 { font-size: 1.28rem; } .wt-prose h4 { font-size: 1.08rem; } .wt-prose p { margin: 0 0 1.75em; } .wt-prose img { border-radius: 2px; } .wt-prose blockquote { margin: 1.5em 0; padding: 16px 20px; border-left: 3px solid var(--wt-text); background: var(--wt-bg-soft); color: var(--wt-text-soft); font-style: italic; } .wt-prose code { background: var(--wt-bg-soft); padding: 2px 6px; border-radius: 3px; font-family: 'IBM Plex Mono', monospace; font-size: .92em; } .wt-prose pre { background: #fafaf7; padding: 14px 18px; border-radius: 4px; overflow-x: auto; border: 1px solid var(--wt-line-soft); } .wt-prose pre code { background: none; padding: 0; } .wt-prose a { color: var(--wt-accent-bright); border-bottom: 1px solid currentColor; } .wt-prose a:hover { opacity: .7; } .wt-prose ul, .wt-prose ol { padding-left: 1.5em; } /* FAQ 전체 */ div[itemtype="https://schema.org/FAQPage"] { font-size: 0.95em; line-height: 1.85; } /* FAQ 안에 blockquote가 있을 경우 상단 여백 제거 */ div[itemtype="https://schema.org/FAQPage"] blockquote { margin-top: 0; padding-top: 10px; } /* FAQ 질문 */ div[itemtype="https://schema.org/FAQPage"] h3, div[itemtype="https://schema.org/FAQPage"] h4 { font-size: 1.1em; line-height: 1.6; margin: 1.4em 0 0.6em; } /* FAQ 답변 */ div[itemtype="https://schema.org/FAQPage"] div[itemprop="acceptedAnswer"] { font-size: 1em; line-height: 1.85; } /* FAQ 답변 문단 */ div[itemtype="https://schema.org/FAQPage"] p { font-size: 1em; line-height: 1.85; margin: 0 0 0.9em; } /* 태그 */ .wt-single-tags { max-width: var(--wt-content-w); margin: 40px auto 0; padding: 18px 20px; background: #fff; border: 1px solid #eee; border-radius: 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .wt-single-tags-label { font-weight: 400; font-size: .875rem; color: #a3a3a3; margin-right: 6px; } .wt-tag { display: inline-block; padding: 4px 10px; background: transparent; border-radius: 999px; font-size: .875rem; color: #555; text-decoration: none; transition: border-color .12s; } .wt-tag:hover { border-color: #555; color: #555; text-decoration: none; } @media (max-width: 700px) { .wt-single-hero { min-height: 0; margin-bottom: 20px; background-image: none !important; background-color: #2a2a2a; } .wt-single-hero-mask { display: none; } .wt-single-hero-inner { padding: 16px 16px; } .wt-single-title { font-size: 1.25rem; line-height: 1.35; } .wt-single-title-plain { font-size: 1.4rem; } .wt-single-meta { font-size: .78rem; margin-top: 6px; } .wt-prose { font-size: 15px; line-height: 1.75; } } .pl-cat-others { max-width: var(--wt-content-w); margin: 50px auto 24px; background: #fff; border: 1px solid #eee; padding: 18px 20px; border-radius: 4px; } .pl-cat-others-title { font-size: 0.9375rem; font-weight: 400; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #eee; color: #1a1a1a; } .pl-cat-others-title a { color: #1a1a1a; text-decoration: none; } .pl-cat-others-title a:hover { text-decoration: underline; color: #1a1a1a; } .pl-cat-others-list { list-style: none; margin: 0; padding: 0; } .pl-cat-others-list li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 0.9375rem; } .pl-cat-others-link { flex: 1; min-width: 0; color: #555; text-decoration: none; display: flex; gap: 6px; overflow: hidden; transition: color .12s; } .pl-cat-others-link:hover { color: #555; text-decoration: none; } .pl-cat-others-link:hover .pl-cat-others-text { text-decoration: underline; text-underline-offset: 3px; } .pl-cat-others-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-cat-others-count { color: #999; font-size: .82rem; } .pl-cat-others-date { flex-shrink: 0; font-size: .8125rem; color: #999; } /* prev/next 네비 */ .pl-post-nav { max-width: var(--wt-content-w); margin: 30px auto 20px; padding: 0; } .pl-post-nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pl-post-nav-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid #eee; border-radius: 4px; text-decoration: none; color: #555; transition: border-color .15s; min-height: 70px; } .pl-post-nav-item:hover { border-color: #555; color: #555; text-decoration: none; } .pl-post-nav-item:hover .pl-post-nav-title { text-decoration: underline; } .pl-post-nav-next { text-align: right; flex-direction: row; } .pl-post-nav-next .pl-post-nav-body { text-align: right; } .pl-post-nav-prev:only-child { grid-column: 1; } .pl-post-nav-next:only-child { grid-column: 2; } .pl-post-nav-thumb { flex-shrink: 0; width: 50px; height: 50px; border-radius: 4px; background-size: cover; background-position: center; } .pl-post-nav-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .pl-post-nav-dir { font-size: 0.8125em; color: #999; text-transform: uppercase; letter-spacing: .04em; } .pl-post-nav-title { font-size: 0.9375rem; font-weight: 400; color: #1a1a1a; line-height:1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 600px) { .pl-post-nav-links { grid-template-columns: 1fr; } .pl-post-nav-next { text-align: left; } .pl-post-nav-next .pl-post-nav-body { text-align: left; } } /* Sidebar Widgets */ .wt-sidebar { font-size: 0.9375rem; } /* 위젯 박스 통일 */ .pl-w { margin-bottom: 26px; padding: 0px; border-radius: 4px; font-size: 0.9375rem; } .pl-w-title { font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #1a1a1a; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .pl-w-title-link { color: #1a1a1a !important; display: inline; line-height: 1; text-decoration: none; } .pl-w-title-link::after { content: ' ›'; display: inline-block; /* 자체 박스 → 부모 underline 안 받음 */ text-decoration: none; opacity: .35; transition: opacity .15s, transform .15s; margin-left: 2px; } .pl-w-title-link:hover { color: #1a1a1a !important; text-decoration: underline; text-underline-offset: 3px; } .pl-w-title-link:hover::after { opacity: 1; text-decoration: none; } /* 모든 위젯 안 링크 공통 */ .pl-w a { color: #555; text-decoration: none; transition: color .12s; } .pl-w a:hover { color: #555; text-decoration: none; } /* 카테고리 위젯 */ .pl-w-cat-list { list-style: none; margin: 0; padding: 0; } .pl-w-cat-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 0.9375rem; } .pl-w-cat-item > a { flex: 1; min-width: 0; display: inline; } /* 이름만 underline (호버 시) */ .pl-w-cat-item > a > .pl-w-cat-name { text-decoration: none; } .pl-w-cat-item > a:hover .pl-w-cat-name { text-decoration: underline; text-underline-offset: 3px; } .pl-w-cat-prefix { display: inline-block; color: #999; margin-right: 4px; text-decoration: none !important; } .pl-w-cat-count { color: #999; font-size: .82rem; } .pl-w-cat-new { display: inline-block; margin-left: 5px; padding: 0 5px; background: #555; color: #fff !important; font-size: .58rem; font-weight: 700; line-height: 1.4; border-radius: 6px; vertical-align: middle; text-decoration: none !important; transform: translateY(-1px); } /* widget_posts list */ .pl-w-recent-list { list-style: none; margin: 0; padding: 0; } .pl-w-recent-item { padding: 5px 0; } .pl-w-recent-link { display: flex; flex-direction: column; gap: 3px; text-decoration: none; } .pl-w-recent-link:hover { text-decoration: none; } .pl-w-recent-link > * { text-decoration: none; } .pl-w-recent-link:hover .pl-w-recent-title { text-decoration: underline; text-underline-offset: 3px; } .pl-w-recent-title { font-size: 0.9375rem; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pl-w-recent-meta { font-size: 0.8125rem; color: #999; } /* widget_posts large (사이드바 썸네일 글) */ .pl-w-posts-large .pl-w-posts-large-item { display: flex; gap: 12px; padding: 8px 0; text-decoration: none; } .pl-w-posts-large .pl-w-posts-large-item:hover { text-decoration: none; } .pl-w-posts-large .pl-w-posts-large-item > * { text-decoration: none; } .pl-w-posts-large .pl-w-posts-large-item:hover .pl-w-posts-large-title { text-decoration: underline; text-underline-offset: 3px; } .pl-w-posts-large-thumb { flex-shrink: 0; width: 70px; height: 52px; background-size: cover; background-position: center; border-radius: 3px; background-color: #fafafa; } .pl-w-posts-large-body { flex: 1; min-width: 0; } .pl-w-posts-large-title { font-size: 0.875rem; font-weight: 400; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; text-decoration: none; } .pl-w-posts-large-meta { margin: 0; font-size: .72rem; color: #999; text-decoration: none; } .pl-w-posts-large-excerpt { margin: 0 0 6px; font-size: .82rem; color: #555; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; } /* 최근 댓글 위젯 */ .pl-w-rc-list { list-style: none; margin: 0; padding: 0; } .pl-w-rc-item { padding: 7px 0; } .pl-w-rc-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; } .pl-w-rc-link:hover { text-decoration: none; } .pl-w-rc-link > * { text-decoration: none; } .pl-w-rc-link:hover .pl-w-rc-snippet { text-decoration: underline; text-underline-offset: 3px; } .pl-w-rc-author { font-size: .82rem; font-weight: 200; color: #1a1a1a; } .pl-w-rc-snippet { font-size: .82rem; color: #555; overflow: hidden; text-overflow: ellipsis; } .pl-w-rc-on { font-size: .72rem; color: #999; } .pl-w-empty { margin: 0; color: #999; font-size: .82rem; text-align: left; padding: 8px 0; } /* 태그 클라우드 위젯 */ .pl-w-tag-cloud .pl-w-tag-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pl-w-tag { display: inline-block; padding: 4px 10px; margin: 2px; background: transparent; color: #555 !important; font-size: .8rem; border-radius: 999px; text-decoration: none !important; transition: border-color .12s; } .pl-w-tag:hover { border-color: #555; color: #555 !important; text-decoration: none !important; } /* 방문자 통계 */ .pl-w-visitors { margin-top: 20px; } .pl-w-visitors .pl-w-visitor-grid { display: flex; flex-direction: column; gap: 0; } .pl-w-visitors .pl-w-title { display: none; } .pl-w-visitors .pl-w-visitor-item { text-align: left; padding: 0; background: transparent; } /* 총 방문자 (3번째) 가 위로 + 큰 숫자 */ .pl-w-visitors .pl-w-visitor-item:nth-child(3) { order: 1; margin-bottom: 10px; } .pl-w-visitors .pl-w-visitor-item:nth-child(3) .pl-w-visitor-label { font-size: .85rem; color: #555; margin-bottom: 4px; font-weight: 400; } .pl-w-visitors .pl-w-visitor-item:nth-child(3) .pl-w-visitor-value { font-size: 1.8rem; font-weight: 700; color: #1a1a1a; font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; line-height: 1.1; } /* 오늘 (1번째) / 어제 (2번째) */ .pl-w-visitors .pl-w-visitor-item:nth-child(1), .pl-w-visitors .pl-w-visitor-item:nth-child(2) { display: flex; align-items: baseline; gap: 4px; font-size: .8125rem; color: #555; padding: 2px 0; } .pl-w-visitors .pl-w-visitor-item:nth-child(1) { order: 2; } .pl-w-visitors .pl-w-visitor-item:nth-child(2) { order: 3; } .pl-w-visitors .pl-w-visitor-item:nth-child(1) .pl-w-visitor-label, .pl-w-visitors .pl-w-visitor-item:nth-child(2) .pl-w-visitor-label { font-size: .82rem; color: #555; margin: 0; } .pl-w-visitors .pl-w-visitor-item:nth-child(1) .pl-w-visitor-value, .pl-w-visitors .pl-w-visitor-item:nth-child(2) .pl-w-visitor-value { font-size: .82rem; font-weight: 400; color: #555; font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; } /* widget_posts */ .wt-content > .pl-w { margin-bottom: 48px; } .wt-content > .pl-w > .pl-w-title { font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 1.3rem; font-weight: 400; letter-spacing: -.01em; text-transform: none; border-bottom: 1px solid var(--wt-line); padding-bottom: 12px; margin-bottom: 20px; } /* gallery 레이아웃 */ .wt-content > .pl-w-posts-gallery .pl-w-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; } .wt-content > .pl-w-posts-gallery .pl-w-posts-card { background: transparent; border: 0; display: flex; flex-direction: column; color: #555; text-decoration: none; } .wt-content > .pl-w-posts-gallery .pl-w-posts-card:hover { transform: none; color: #555; text-decoration: none; } .wt-content > .pl-w-posts-gallery .pl-w-posts-card > * { text-decoration: none; } .wt-content > .pl-w-posts-gallery .pl-w-posts-card:hover .pl-w-posts-title { text-decoration: underline; text-underline-offset: 3px; } .wt-content > .pl-w-posts-gallery .pl-w-posts-thumb { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--wt-bg-soft); margin-bottom: 10px; border-radius: 2px; } .wt-content > .pl-w-posts-gallery .pl-w-posts-body { padding: 0; display: flex; flex-direction: column; gap: 6px; } .wt-content > .pl-w-posts-gallery .pl-w-posts-title { font-size: .975rem; font-weight: 400; line-height: 1.4; color: #555; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wt-content > .pl-w-posts-gallery .pl-w-posts-meta { font-size: .8125rem; color: #999; margin: 0; } /* large 레이아웃 */ .wt-content > .pl-w-posts-large .pl-w-posts-large-item { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--wt-line-soft); } .wt-content > .pl-w-posts-large .pl-w-posts-large-item:first-child { padding-top: 0; } .wt-content > .pl-w-posts-large .pl-w-posts-large-item:last-child { border-bottom: 0; } .wt-content > .pl-w-posts-large .pl-w-posts-large-thumb { flex-shrink: 0; width: 200px; height: 130px; border-radius: 3px; } .wt-content > .pl-w-posts-large .pl-w-posts-large-title { font-size: 1.05rem; font-weight: 400; margin: 0 0 8px; line-height: 1.4; } .wt-content > .pl-w-posts-large .pl-w-posts-large-excerpt { font-size: 0.9375rem; color: var(--wt-text-soft); margin: 0 0 8px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wt-content > .pl-w-posts-large .pl-w-posts-large-meta { font-size: .78rem; color: var(--wt-text-faded); } @media (max-width: 900px) { .wt-content > .pl-w-posts-gallery .pl-w-posts-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wt-content > .pl-w-posts-gallery .pl-w-posts-grid { grid-template-columns: 1fr; } .wt-content > .pl-w-posts-large .pl-w-posts-large-item { flex-direction: column; gap: 12px; } .wt-content > .pl-w-posts-large .pl-w-posts-large-thumb { width: 100%; aspect-ratio: 16 / 10; height: auto; } } /* Pagination */ .pl-pagination { display: flex; justify-content: center; gap: 4px; margin: 40px 0 0; } .pl-pagination a, .pl-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; font-size: 0.875rem; color: var(--wt-text-soft); border-radius: 3px; transition: background .12s; } .pl-pagination a:hover { background: var(--wt-bg-soft); color: var(--wt-text); } .pl-pagination .is-current, .pl-pagination .is-active { background: var(--wt-text); color: #fff; font-weight: 700; } /* tags/ 태그 클라우드 페이지 */ .wt-tag-cloud-page { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 30px 0; line-height: 2; } .wt-tag-cloud-item { display: inline-flex; align-items: center; gap: 4px; color: var(--wt-text); padding: 4px 12px; border: 1px solid var(--wt-line); border-radius: 4px; transition: background .12s, color .12s; } .wt-tag-cloud-item:hover { border: 1px solid var(--wt-text); } .wt-tag-cloud-count { font-size: .65em; color: var(--wt-text-faded); font-weight: 500; } /* 404 */ .wt-404 { text-align: center; padding: 60px 20px; border-bottom: 1px solid var(--wt-line); margin-bottom: 40px; } .wt-404-code { font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 4rem; font-weight: 700; color: #1a1a1a; margin: 0; letter-spacing: -.02em; } .wt-404-title { font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 1.5rem; margin: 8px 0 12px; } .wt-404-desc { color: var(--wt-text-soft); margin: 0 0 20px; } .wt-404-what { display: inline-block; font-family: 'IBM Plex Mono', monospace; background: var(--wt-bg-soft); padding: 2px 8px; border-radius: 3px; font-size: .85rem; color: var(--wt-text-soft); margin-bottom: 16px; } .wt-404-actions { margin-top: 16px; } /* Footer */ .wt-footer { background: #fff; border-top: 1px solid var(--wt-line); padding: 30px 0; margin-top: 60px; } .wt-footer-inner { max-width: var(--wt-wrap); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: .8125rem; color: var(--wt-text-faded); } .wt-footer-meta { font-family: 'IBM Plex Mono', monospace; } .wt-sig { opacity: .0; } @media (max-width: 600px) { .wt-footer-inner { flex-direction: column; text-align: center; } } /* Top 버튼 */ .wt-top-btn { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--wt-line); color: var(--wt-text-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); transition: transform .15s, color .15s; z-index: 90; } .wt-top-btn:hover { color: var(--wt-text); transform: translateY(-3px); } /* 댓글 영역 (single 안) */ .pl-comments { max-width: var(--wt-content-w); margin: 60px auto 0; background: #fff; border: 1px solid #eee; border-radius: 4px; padding: 24px 28px; } .pl-comments-title { font-family: "Pretendard Variable", "Pretendard", 'Noto Sans KR', sans-serif; font-size: 1rem; font-weight: 400; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #eee; color: #1a1a1a; } .pl-comment-list { list-style: none; margin: 0; padding: 0; } .pl-comment { padding: 16px 0; border-bottom: 1px dotted #eee; } .pl-comment:last-child { border-bottom: 0; } .pl-comment-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; } .pl-comment-author { font-size: 0.875rem; color: #1a1a1a; } .pl-comment-date { font-size: 0.8125rem; color: #888; } .pl-comment-body { font-size: 0.9375rem; line-height: 1.7; color: #1a1a1a; white-space: pre-wrap; word-break: break-word; } .pl-comment-loadmore-wrap { text-align: center; margin-top: 16px; } .pl-comment-loadmore { background: #fff; border: 1px solid #eee; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-size: 0.875rem; color: #555; transition: border-color .12s, background .12s; font-family: inherit; } .pl-comment-loadmore:hover { border-color: #ccc; background: #fafafa; color: #1a1a1a; } .pl-comment-loadmore-remain { color: #999; font-size: .82rem; margin-left: 4px; } .pl-comment-respond { margin-top: 24px; padding-top: 20px; } .pl-comment-form-title { font-size: 1rem; font-weight: 400; margin: 0 0 6px; color: #1a1a1a; } .pl-comment-form-notice { font-size: .82rem; font-weight: 100; color: #999; margin: 0 0 18px; } .pl-req { color: #d6336c; } .pl-form-row { margin-bottom: 14px; } .pl-form-row label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; color: #555; } .pl-form-row input, .pl-form-row textarea { width: 100%; padding: 10px 14px; border: 1px solid #eee; border-radius: 4px; font-family: inherit; font-size: .95rem; background: #fff; color: #1a1a1a; transition: border-color .15s, box-shadow .15s; } .pl-form-row input:focus, .pl-form-row textarea:focus { outline: none; border-color: #ccc; box-shadow: 0 0 0 3px rgba(0, 0, 0, .04); } .pl-form-row textarea { resize: vertical; min-height: 120px; } .pl-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 600px) { .pl-form-grid { grid-template-columns: 1fr; } } .pl-form-check { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; font-size: .85rem; color: #555; line-height: 1.5; } .pl-form-check input { margin: 0; flex-shrink: 0; width: 16px; height: 16px; } .pl-form-check > span { flex: 1; } /* 공통 버튼 스타일 */ .pl-submit-btn, .wt-btn, .pl-btn-cancel { display: inline-block; border: 1px solid #1a1a1a; padding: 8px 18px; border-radius: 4px; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s; text-decoration: none; line-height: 1.4; } .pl-submit-btn { background: #1a1a1a; color: #fff !important; } .pl-submit-btn:hover { background: #555; border-color: #555; color: #fff !important; } .wt-btn { background: #1a1a1a; color: #fff !important; } .wt-btn:hover { background: #555; border-color: #555; color: #fff !important; } .pl-btn-cancel { background: #fff; border: 1px solid #eee; color: #555; padding: 9px 18px; } .pl-btn-cancel:hover { border-color: #ccc; background: #fafafa; color: #1a1a1a; } .pl-honeypot { position: absolute; left: -10000px; } .pl-alert { padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; font-size: 0.875rem; } .pl-alert-success { background: #f0f6f0; color: #155724; border: 1px solid #d4e8d4; } .pl-alert-error { background: #fbf0f0; color: #721c24; border: 1px solid #f0d6d6; } .pl-captcha-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: wtFade .2s ease; } @keyframes wtFade { from { opacity: 0; } to { opacity: 1; } } .pl-captcha-modal { background: #fff; border-radius: 6px; padding: 28px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); } .pl-captcha-title { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; } .pl-captcha-desc { margin: 0 0 18px; font-size: 0.875rem; color: var(--wt-text-soft); } .pl-captcha-img { width: 100%; border: 1px solid var(--wt-line); border-radius: 4px; } .pl-captcha-actions { display: flex; gap: 6px; margin: 12px 0; } .pl-captcha-input { flex: 1; padding: 10px 14px; border: 1px solid var(--wt-line); border-radius: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 1.1rem; letter-spacing: .15em; text-align: center; } .pl-captcha-reload { width: 40px; background: var(--wt-bg-soft); border: 1px solid var(--wt-line); border-radius: 4px; cursor: pointer; font-size: 1.1rem; } .pl-captcha-buttons { display: flex; gap: 8px; justify-content: flex-end; } .pl-btn-cancel { background: transparent; border: 1px solid var(--wt-line); padding: 8px 16px; border-radius: 4px; cursor: pointer; color: var(--wt-text-soft); } .pl-btn-cancel:hover { background: var(--wt-bg-soft); } .pl-prose { max-width: var(--wt-content-w); margin: 0 auto; } /* 글 메타 */ .wt-single-author, .pl-single-author { font-family: var(--pl-font-sans); color: var(--pl-ink-soft); } /* 글 제목 옆 수정 아이콘 (관리자/소유자 전용) */ .pl-edit-post-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 8px; vertical-align: middle; color: var(--pl-ink-faded); border: 1px solid var(--wt-line); border-radius: 50%; background: rgba(255,255,255,.85); transition: color .15s, border-color .15s, background .15s; text-decoration: none !important; } .pl-edit-post-icon:hover { color: var(--pl-accent); border-color: var(--pl-accent); background: var(--pl-paper); } .wt-single-hero .pl-edit-post-icon { /* hero(대표이미지 배경) 위에 있을 땐 흰색 톤으로 */ color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.5); background: rgba(0,0,0,.25); } .wt-single-hero .pl-edit-post-icon:hover { color: #fff; border-color: #fff; background: rgba(0,0,0,.45); } /* 대댓글 */ .pl-comment-children { margin-top: 16px; margin-left: 32px; padding-left: 16px; border-left: 2px solid var(--wt-line); list-style: none; } .pl-comment-children .pl-comment { margin-bottom: 16px; } .pl-comment-children .pl-comment:last-child { margin-bottom: 0; } @media (max-width: 600px) { .pl-comment-children { margin-left: 16px; padding-left: 12px; } } /* 답글 버튼 */ .pl-comment-reply-btn { background: none; border: 0; padding: 0; margin-top: 6px; font-size: .8125rem; color: var(--pl-ink-faded); cursor: pointer; font-family: var(--pl-font-sans); } .pl-comment-reply-btn:hover { color: var(--pl-accent); text-decoration: underline; } /* 인라인 답글 폼 표시 영역 */ .pl-comment-reply-form-slot { margin-top: 12px; } .pl-comment-reply-form-slot:empty { margin: 0; } /* 답글 작성 중 알림 (이 댓글에 답글) */ .pl-comment-replying-to { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 12px; background: var(--pl-paper-soft); border-left: 3px solid var(--wt-line); border-radius: 4px; font-size: 0.875rem; color: var(--pl-ink-soft); } .pl-replying-to-label { color: var(--pl-ink-soft); } .pl-replying-to-cancel { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--pl-ink-faded); font-size: .8rem; text-decoration: underline; } .pl-replying-to-cancel:hover { color: var(--pl-danger); } /* 관리자/팀원 배지 (댓글 작성자 옆) */ .pl-comment-admin-badge { display: inline-block; font-family: var(--pl-font-sans); font-size: .66rem; font-weight: 600; letter-spacing: .02em; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; background: transparent; color: var(--pl-ink-soft); border: 1px solid var(--wt-line); border-radius: 3px; } /* 비공개 댓글 표시 */ .pl-comment-secret-badge { margin-left: 4px; font-size: .85em; vertical-align: 0; } .pl-comment-body-secret { color: var(--pl-ink-faded); font-style: italic; background: var(--pl-paper-soft); padding: 10px 14px; border-radius: 4px; border-left: 3px solid #f59e0b; } .pl-comment-secret-actions { margin-top: 8px; } .pl-comment-secret-view-btn { background: none; border: 1px solid var(--wt-line); padding: 4px 12px; border-radius: 4px; font-size: .82rem; color: var(--pl-ink-soft); cursor: pointer; font-family: var(--pl-font-sans); } .pl-comment-secret-view-btn:hover { border-color: var(--pl-accent); color: var(--pl-accent); } /* 비공개 댓글 비밀번호 입력 모달 */ .pl-secret-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; align-items: center; justify-content: center; } .pl-secret-overlay.is-open { display: flex; } .pl-secret-modal { background: #fff; padding: 24px 28px; border-radius: 8px; max-width: 360px; width: calc(100% - 32px); box-shadow: 0 8px 32px rgba(0,0,0,.18); } .pl-secret-title { font-family: var(--pl-font-sans); font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; color: var(--pl-ink); } .pl-secret-desc { font-size: .86rem; color: var(--pl-ink-faded); margin: 0 0 18px; line-height: 1.6; } .pl-secret-input { width: 100%; font-family: var(--pl-font-sans); font-size: 1rem; padding: 10px 14px; border: 1px solid var(--wt-line); border-radius: 4px; margin-bottom: 12px; } .pl-secret-input:focus { outline: 0; border-color: var(--pl-accent); } .pl-secret-error { background: #fef2f2; color: #991b1b; border-left: 3px solid #dc2626; padding: 8px 12px; border-radius: 4px; font-size: .85rem; margin-bottom: 12px; } .pl-secret-buttons { display: flex; gap: 8px; justify-content: flex-end; } /* 댓글 폼 */ .pl-comment-secret-row { display: block; background: var(--pl-paper-soft); border-radius: 4px; margin: 12px 0 18px; } .pl-form-secret-pw-input { width: auto !important; height: auto !important; font-family: var(--pl-font-serif); padding: 10px 14px; background: #fff; border: 1px solid var(--wt-line); border-radius: 4px; color: var(--pl-ink); transition: border-color .15s, box-shadow .15s; } .pl-form-secret-pw-input:focus { outline: 0; border-color: var(--pl-accent); box-shadow: 0 0 0 3px var(--pl-accent-soft); } .pl-form-hint { font-size: .78rem; color: var(--pl-ink-faded); margin-top: 4px; } /* 관리자 댓글 작성 안내 */ .pl-comment-form-admin-notice { background: var(--pl-paper-soft); border-left: 3px solid var(--wt-line); padding: 10px 14px; border-radius: 4px; color: var(--pl-ink-soft); font-size: 0.875rem; } .pl-comment-form-admin-notice strong { color: var(--pl-ink); } /* 날짜 아카이브 위젯 (V1.1) */ .pl-w-date-archive .pl-w-date-list { list-style: none; padding: 0; margin: 0; } .pl-w-date-archive .pl-w-date-item { padding: 4px 0; } .pl-w-date-archive .pl-w-date-link { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: #555; font-size: 0.9375rem; text-decoration: none; } /* hover 시 라벨 텍스트에만 underline (카운트 제외) */ .pl-w-date-archive .pl-w-date-link:hover .pl-w-date-label { text-decoration: underline; text-underline-offset: 3px; } .pl-w-date-archive .pl-w-date-count { font-size: .82rem; color: #999; font-variant-numeric: tabular-nums; } /* 페이지 전용 보강 스타일 (테마 style.css 에 통합해도 됨) */ .pl-page-main { max-width: 880px; margin: 0 auto; padding: 40px 20px 80px; } .pl-page-header { border-bottom: 1px solid #eee; padding-bottom: 24px; margin-bottom: 32px; } .pl-page-title { font-size: 2rem; font-weight: 700; color: #222; line-height: 1.3; margin: 0; } .pl-page-content { font-size: 1rem; line-height: 1.75; color: #333; } .pl-page-content h2 { font-size: 1.4rem; margin-top: 2em; margin-bottom: 0.6em; padding-bottom: 0.3em; border-bottom: 1px solid #eee; color: #222; } .pl-page-content h3 { font-size: 1.15rem; margin-top: 1.5em; margin-bottom: 0.5em; color: #333; } .pl-page-content p { margin: 0 0 0.5em 0; } .pl-page-content p.empty-line { margin: 0 0 0.35em 0; line-height: 0.35; min-height: 0; } .pl-page-content div[contenteditable="false"]:has(> hr:only-child) { display: none; } .pl-page-content ul, .pl-page-content ol { padding-left: 1.5em; margin: 0 0 1em 0; } .pl-page-content li { margin: 0.3em 0; } .pl-page-content blockquote { border-left: 3px solid #ddd; padding-left: 1em; margin: 1em 0; color: #666; font-style: italic; } .pl-page-content code { background: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; font-family: 'D2Coding', 'Consolas', monospace; } .pl-page-content pre { background: #f5f5f5; padding: 16px; border-radius: 6px; overflow-x: auto; margin: 1em 0; } .pl-page-content pre code { background: transparent; padding: 0; } .pl-page-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1em 0; } .pl-page-content table { width: 100%; border-collapse: collapse; margin: 1em 0; } .pl-page-content table th, .pl-page-content table td { border: 1px solid #eee; padding: 8px 12px; text-align: left; } .pl-page-content table th { background: #f9f9f9; font-weight: 600; } .pl-page-content a { color: #1a7ad9; text-decoration: none; border-bottom: 1px solid transparent; } .pl-page-content a:hover { border-bottom-color: #1a7ad9; } .pl-page-footer { display:none; margin-top: 48px; padding-top: 20px; border-top: 1px solid #eee; } @media (max-width: 768px) { .pl-page-main { padding: 24px 16px 48px; } .pl-page-title { font-size: 1.5rem; } .pl-page-content { font-size: 0.95rem; } } /* [AdSense] 광고 박스 스타일 */ /* 공통 광고 컨테이너 (슬롯 widget_ad + 본문중간 자동삽입 공통) */ .pl-w-ad, .pl-ad { margin: 2rem 0; text-align: center; overflow: hidden; /* 광고가 컨테이너 밖으로 안 넘치게 */ min-height: 1px; } /* 본문 중간 자동 삽입 광고 */ .pl-ad-in-article { margin: 2.4rem 0; clear: both; } /* 광고임을 작게 표기하고 싶으면 (선택, 정책상 권장) */ .pl-ad-in-article::before, .pl-w-ad-single_top::before, .pl-w-ad-single_bottom::before { content: "AD"; display: block; font-size: .62rem; letter-spacing: .08em; color: #bbb; text-align: center; margin-bottom: .35rem; } /* adsbygoogle ins 기본 보정 */ .pl-w-ad .adsbygoogle, .pl-ad .adsbygoogle { display: block; margin: 0 auto; } /* 모바일 여백 축소 */ @media (max-width: 700px) { .pl-w-ad, .pl-ad { margin: 1.4rem 0; } .pl-ad-in-article { margin: 1.8rem 0; } } /* 목차(TOC) */ .pl-toc{border:1px solid var(--wt-line,#e8e8e8);background:var(--wt-bg,#fff);padding:18px 20px 16px;margin:0 0 26px;border-radius:10px;font-size:0.9375rem;box-shadow:0 1px 2px rgba(0,0,0,.03)} .pl-toc-title{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--wt-text,#222);margin-bottom:14px;font-size: 0.9375rem;letter-spacing:.01em} .pl-toc-title::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--wt-accent,#1a1a1a);display:inline-block} .pl-toc .pl-toc-list{list-style:none;margin:0;padding:0;counter-reset:toc} .pl-toc-item{margin:1px 0;line-height:1.5} .pl-toc-item a{display:block;color:var(--wt-text-soft,#555);text-decoration:none;border-bottom:0;padding:6px 10px;border-radius:7px;transition:background .15s,color .15s} .pl-toc-item a:hover{background:var(--wt-bg-soft,#fafafa);color:var(--wt-text,#111)} .pl-toc-h2{counter-increment:toc} .pl-toc-h2>a{font-weight:600;color:var(--wt-text,#333);padding-left:38px;position:relative} .pl-toc-h2>a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:.72rem;font-weight:700;color:var(--wt-accent,#1a1a1a);font-variant-numeric:tabular-nums} .pl-toc-h3>a{padding-left:38px;position:relative;color:var(--wt-text-soft,#666);font-size:0.875rem} .pl-toc-h3>a::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:6px;height:1px;background:var(--wt-text-faded,#ccc);transition:background .15s,width .15s,left .15s} .pl-toc-h3>a:hover::before{background:var(--wt-accent,#1a1a1a);width:9px;left:17px} .pl-toc-h4>a{padding-left:52px;font-size:.85rem;color:var(--wt-text-faded,#888)} .pl-block-heading h2,.pl-block-heading h3,.pl-block-heading h4{scroll-margin-top:80px} html{scroll-behavior:smooth} .pl-blocks { margin: 0; } .pl-block { margin: 0 0 1.5em; } /* heading */ .pl-block-heading h2, .pl-block-heading h3, .pl-block-heading h4 { font-family: var(--pl-font-sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.35; color: var(--pl-ink); } .pl-block-heading h2 { font-size: 1.6rem; padding-bottom: 0.25em; border-bottom: 2px solid var(--pl-line); margin-top: 2.4em; margin-bottom: 0.6em; } .pl-block-heading h3 { font-size: 1.32rem; margin-top: 2.2em; margin-bottom: 0.5em; } .pl-block-heading h4 { font-size: 1.12rem; margin-top: 2em; margin-bottom: 0.4em; } /* paragraph */ .pl-block-paragraph { font-family: var(--pl-content-font-family); font-size: var(--pl-content-font-size); line-height: var(--pl-content-line-height); color: var(--pl-ink); } .pl-block-paragraph p { margin: 0 0 1em; min-height: calc(var(--pl-content-line-height) * 1em); } .pl-block-paragraph p:last-child { margin-bottom: 0; } .pl-block-paragraph strong { font-weight: 700; color: var(--pl-ink); } .pl-block-paragraph em { font-style: italic; } .pl-block-paragraph a { color: var(--pl-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-bottom: 0; /* 스킨 본문 링크의 border-bottom 밑줄과 겹쳐 두 줄이 되지 않게 */ } /* ul / ol */ .pl-block-paragraph ul, .pl-block-paragraph ol { margin-top: 0; margin-bottom: 1em; padding-left: 1.8em; } .pl-block-paragraph ul { list-style: disc outside; } .pl-block-paragraph ol { list-style: decimal outside; } .pl-block-paragraph li { margin: 0 0 .3em; padding-left: .2em; line-height: var(--pl-content-line-height); } .pl-block-paragraph li:last-child { margin-bottom: 0; } .pl-block-paragraph li > p { margin: 0; } .pl-block-paragraph ul ul, .pl-block-paragraph ul ol, .pl-block-paragraph ol ul, .pl-block-paragraph ol ol { margin: .3em 0 .3em; } /* divider */ .pl-block-divider { margin: 2em 0; } .pl-block-divider .pl-divider-line { border: 0; height: 1px; background: var(--pl-line); width: 100%; margin: 0; } .pl-block-divider[data-style="dotted"] .pl-divider-line { background: transparent; border-top: 2px dotted var(--pl-line); height: 0; } .pl-block-divider[data-style="thick"] .pl-divider-line { height: 2px; background: var(--pl-ink); width: 60px; margin: 0 auto; } .pl-block-divider[data-style="gradient"] .pl-divider-line { height: 2px; background: linear-gradient(90deg, transparent, var(--pl-accent), transparent); } /* image */ .pl-block-image { text-align: center; } .pl-block-image[data-align="left"] { text-align: left; } .pl-block-image[data-align="right"] { text-align: right; } .pl-block-image[data-align="center"] { text-align: center; } .pl-block-image img { max-width: 100%; height: auto; border-radius: 4px; display: inline-block; } /* 이미지 링크(누르면 상품 상세로): 본문 링크 밑줄·테두리가 이미지 아래에 비치지 않게 */ .pl-block-image .pl-image-link { display: inline-block; max-width: 100%; text-decoration: none; border: 0; box-shadow: none; background: none; } .pl-block-image figcaption { font-family: var(--pl-font-sans); font-size: 0.84rem; color: var(--pl-ink-faded); margin-top: 8px; text-align: center; } /* oglink card */ .pl-block-oglink { margin: 1.8em 0; } .pl-block-oglink a.pl-oglink-card { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--pl-line); border-radius: 8px; overflow: hidden; background: #fff; text-decoration: none; color: var(--pl-ink); transition: border-color .15s, box-shadow .15s, transform .15s; } .pl-block-oglink a.pl-oglink-card:hover { border-color: var(--pl-accent); box-shadow: 0 4px 16px rgba(0, 64, 179, 0.08); text-decoration: none; color: var(--pl-ink); } .pl-oglink-thumb { flex-shrink: 0; width: 180px; background-size: cover; background-position: center; background-color: var(--pl-paper-soft); } .pl-oglink-thumb-empty { background: var(--pl-paper-soft); } .pl-oglink-body { flex: 1; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .pl-oglink-title { font-family: var(--pl-font-sans); font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--pl-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pl-oglink-desc { font-size: 0.86rem; color: var(--pl-ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pl-oglink-host { font-family: var(--pl-font-mono); font-size: 0.72rem; color: var(--pl-ink-faded); letter-spacing: 0.02em; margin-top: 4px; } @media (max-width: 560px) { .pl-block-oglink a.pl-oglink-card { flex-direction: column; } .pl-oglink-thumb { width: 100%; height: 140px; } } /* quote */ .pl-block-quote { margin: 1.6em 0; } .pl-block-quote blockquote { margin: 0; padding: 8px 22px; border-left: 3px solid var(--pl-accent); color: var(--pl-ink-soft); font-style: italic; background: var(--pl-paper-soft); font-size: 1.02rem; line-height: 1.7; } .pl-block-quote cite { display: block; margin-top: 8px; font-family: var(--pl-font-sans); font-size: 0.84rem; color: var(--pl-ink-faded); font-style: normal; } .pl-block-quote cite::before { content: '— '; opacity: .7; } /* gallery */ .pl-block-gallery { margin: 1.8em 0; } .pl-gallery-grid { display: grid; gap: 8px; } .pl-block-gallery[data-cols="2"] .pl-gallery-grid { grid-template-columns: repeat(2, 1fr); } .pl-block-gallery[data-cols="3"] .pl-gallery-grid { grid-template-columns: repeat(3, 1fr); } .pl-block-gallery[data-cols="4"] .pl-gallery-grid { grid-template-columns: repeat(4, 1fr); } .pl-gallery-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; display: block; } @media (max-width: 560px) { .pl-block-gallery[data-cols="3"] .pl-gallery-grid, .pl-block-gallery[data-cols="4"] .pl-gallery-grid { grid-template-columns: repeat(2, 1fr); } } /* spacer */ .pl-block-spacer { margin: 0; } /* html (raw) */ .pl-block-html { margin: 1.5em 0; } /* Gutenberg 호환 (기존 유지) */ .pl-prose .alignleft { float: left; margin: 0 1.5em 1em 0; } .pl-prose .alignright { float: right; margin: 0 0 1em 1.5em; } .pl-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; } .pl-prose .alignwide { margin-left: -8%; margin-right: -8%; max-width: 116%; } .pl-prose .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; } .pl-prose figure { margin: 1.5em 0; } .pl-prose figcaption { font-family: var(--pl-font-sans); font-size: .82rem; color: var(--pl-ink-faded); text-align: center; margin-top: 8px; } .pl-prose .wp-block-image { margin: 1.5em 0; } .pl-prose .wp-block-image img { display: block; max-width: 100%; height: auto; border-radius: 4px; } .pl-prose .wp-block-quote, .pl-prose .wp-block-pullquote { margin: 1.5em 0; padding: 4px 22px; border-left: 3px solid var(--pl-accent); color: var(--pl-ink-soft); font-style: italic; } .pl-prose .wp-block-pullquote { text-align: center; border-left: 0; border-top: 2px solid var(--pl-ink); border-bottom: 2px solid var(--pl-ink); padding: 20px 0; font-size: 1.2em; } .pl-prose .wp-block-code { font-family: var(--pl-font-mono); background: #1e1e2e; color: #f1f1f5; padding: 18px 22px; border-radius: 6px; overflow-x: auto; } .pl-prose .wp-block-button { margin: 1.5em 0; } .pl-prose .wp-block-button__link, .pl-prose .wp-block-button a { display: inline-block; padding: 12px 28px; background: var(--pl-ink); color: #fff; text-decoration: none; border-radius: 4px; font-family: var(--pl-font-sans); font-weight: 600; } .pl-prose .wp-block-button__link:hover { background: var(--pl-accent-bright); } .pl-prose .wp-block-separator { border: 0; border-top: 1px solid var(--pl-line); margin: 2.5em auto; width: 100px; } .pl-prose .wp-block-table table { width: 100%; border-collapse: collapse; } .pl-prose .wp-block-embed { margin: 1.5em 0; } /* Coupang disclosure */ .pl-prose img[src*="coupang"] { max-width: 320px; margin: 0 auto; display: block; } /* page 블록 */ .pl-block-page { margin: 1.8em 0; } .pl-block-button { margin: 1.8em 0; } .pl-block-button .pl-btn { display: inline-block; text-decoration: none; font-weight: 700; line-height: 1.2; border: 0; cursor: pointer; transition: opacity .15s, transform .15s, box-shadow .15s; } .pl-block-button .pl-btn:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); text-decoration: none; } .pl-block-button .pl-btn:active { transform: translateY(0); } .pl-block-button .pl-btn-full { display: block; width: 100%; text-align: center; box-sizing: border-box; } /* 이미지(PNG) 버튼 */ .pl-block-button .pl-btn-img { display: inline-block; line-height: 0; border-bottom: 0 !important;} .pl-block-button .pl-btn-img img { transition: opacity .15s, transform .15s; border: 0; } .pl-block-button .pl-btn-img:hover img { opacity: .92; transform: translateY(-1px); } /* richtext */ .pl-block-richtext p { margin-bottom: 0px; } .pl-block-richtext table { border: 1px solid rgba(0,0,0,.1); border-collapse: collapse; box-sizing: border-box; color: #222; margin: 12px 0 14px; width: auto } .pl-block-richtext table td,.pl-block-richtext table th { border: 1px solid rgba(0,0,0,.1); height: 32px; padding: 5px 14px 5px 12px } .pl-block-richtext table th { background-color: #555; color: #fff; font-weight: 300; padding-top: 6px } .pl-block-richtext th p { color: #fff; margin: 0 } .pl-block-richtext td p { margin: 0; padding: 0 2px } .pl-block-richtext hr { border-top: 1px solid #eee; margin: 16px 0 }