/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.12.20260902
Updated: 2026-09-02 00:00:00

*/

/* ==========================================================================
   FAZR — 2026-09-02
   여기는 **홈이 아니다.** 홈은 theme/front-page.php 안에 따로 들어 있다.

   ⛔ 되돌리기: 이 주석 아래를 전부 지우고 Version 을 되돌린 뒤 다시 올리면 원래대로다.
      서버에도 deploy.py 가 style.css.bak-날짜 를 남긴다.

   ⚠ 이 파일은 **모든 페이지**에 걸린다. 글 페이지 전용 규칙은 반드시 body.single 로 묶을 것.

   왜 본문은 밝게 두나 — 5,000자짜리 한글 글을 어두운 배경에서 읽으면 눈이 빨리 지친다.
   레퍼런스 6곳은 전부 마케팅 페이지였지 긴 읽을거리가 아니었다.
   그래서 **머리말·꼬리말만 어둡게**(홈과 이어지게), 읽는 영역은 밝게 간다.
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
	--fz-bg:#150f0f;          /* 홈과 같은 값 */
	--fz-line:#2e2020;
	--fz-ink:#f5efec;
	--fz-muted:#a9958f;
	--fz-accent:#ff5a5f;

	/* 읽는 영역 */
	--fz-paper:#fbf9f8;
	--fz-card:#ffffff;
	--fz-text:#1f1a19;
	--fz-text2:#6d615d;
	--fz-rule:#e9e2df;
	--fz-code-bg:#1b1414;
	--fz-font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
		'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
}

/* ==========================================================================
   1) 머리말·꼬리말 — 모든 페이지 공통으로 어둡게 (홈과 이어지게)
   ========================================================================== */
.site-header,
.main-header-bar-wrap,
.main-header-bar,
.ast-primary-header-bar,
.ast-mobile-header-wrap,
.ast-above-header,
.ast-below-header{background:var(--fz-bg) !important;}

.main-header-bar,
.ast-primary-header-bar{border-bottom:1px solid var(--fz-line) !important;}

.site-title,
.site-title a,
.site-title a:visited{color:var(--fz-ink) !important;}

.main-header-menu a,
.site-header .menu-link,
.main-header-menu .menu-item > .menu-link,
.ast-builder-menu .menu-item > .menu-link,
.site-header .sub-menu a,
.ast-masthead-custom-menu-items a{color:var(--fz-muted) !important;}

.main-header-menu a:hover,
.site-header .menu-link:hover,
.main-header-menu .menu-item > .menu-link:hover{color:var(--fz-ink) !important;}

.site-header .sub-menu{background:#1d1414 !important;border-color:var(--fz-line) !important;}

.menu-toggle,
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill{background:transparent !important;color:var(--fz-ink) !important;}
.menu-toggle svg,
.ast-mobile-menu-trigger-minimal svg{fill:var(--fz-ink) !important;}
.ast-mobile-popup-drawer .ast-mobile-popup-inner{background:var(--fz-bg) !important;}
.ast-search-menu-icon a,
.ast-header-search a{color:var(--fz-muted) !important;}
.ast-search-menu-icon svg,
.ast-header-search svg{fill:var(--fz-muted) !important;}

.site-footer,
.ast-small-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap{background:#0f0b0b !important;color:var(--fz-muted) !important;
	border-top:1px solid var(--fz-line) !important;}
.site-footer a{color:var(--fz-muted) !important;}
.site-footer a:hover{color:var(--fz-ink) !important;}

/* ==========================================================================
   1-B) 버튼 hover — 모든 페이지 공통
   ⛔ Astra 버그: 「외곽선」 버튼(.is-style-outline)의 hover 에 배경색만 넣고
      글씨색을 안 넣는다. 그래서 코랄 배경에 코랄 글씨가 되어 안 읽힌다.
      (일반 버튼에는 color:var(--ast-global-color-5) 가 들어 있다)
      2026-09-02 사용자가 잡아줬다.
   ========================================================================== */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover,
.wp-element-button.is-style-outline:hover{
	color:#ffffff !important;
}

/* ==========================================================================
   2) 글 페이지 — 여기부터는 body.single 안에서만
   ========================================================================== */
body.single{background:var(--fz-paper);}
body.single #content{background:var(--fz-paper);}

body.single .ast-article-single,
body.single #primary .ast-article-single{
	background:var(--fz-card);
	border:1px solid var(--fz-rule);
	border-radius:16px;
	box-shadow:none;
	padding:clamp(26px,4vw,58px) clamp(20px,4vw,54px);
}

/* 읽기 좋은 한 줄 길이 — 한글 기준 40~45자 */
body.single .entry-content,
body.single .entry-header{max-width:720px;margin-left:auto;margin-right:auto;}

body.single .entry-content{
	font-family:var(--fz-font);
	font-size:17.5px;
	line-height:1.9;
	color:var(--fz-text);
	letter-spacing:-.003em;
}
body.single .entry-content p{margin:0 0 1.5em;}

/* 제목 */
body.single .entry-title{
	font-family:var(--fz-font);
	font-size:clamp(27px,3.6vw,38px);
	line-height:1.35;
	font-weight:800;
	letter-spacing:-.028em;
	color:var(--fz-text);
	margin:0 0 18px;
}
body.single .entry-header{border-bottom:1px solid var(--fz-rule);padding-bottom:22px;margin-bottom:34px;}
body.single .entry-meta,
body.single .post-meta,
body.single .ast-single-post-meta{color:var(--fz-text2) !important;font-size:14px;}
body.single .entry-meta a{color:var(--fz-text2) !important;}

/* --------------------------------------------------------------------------
   ⛔⛔ 여기부터 !important 가 붙는 이유 — 2026-09-02 실측

   워드프레스 **사용자 정의 CSS**(모양 → 추가 CSS)에 예전 스타일이 7,564자 들어 있다.
   제목이 "fazr.co.kr - Astra 테마 전체 CSS (파란색 계열)" 인, 정부지원금 시절 유물이다.
   그게 소제목·목록·목차를 파란색으로 잡고 있고, **이 파일보다 나중에 실려서 이긴다**
   (워드프레스는 사용자 정의 CSS 를 wp_head 맨 뒤에 찍는다. 순서로는 못 이긴다).

   백업: docs/wp-custom-css-20260902.css
   그쪽 값: h2 배경 #e3f2fd · 파란 막대 #1187CF / h3 배경 #f0f8ff / ul 배경 #f5f9fc + 직접 만든 • 글머리

   ⚠ 언젠가 그 옛 CSS 를 정리하면 여기 !important 는 대부분 뺄 수 있다.
      (거기엔 유가표 `.oil-table` 같은 이 사이트와 무관한 것도 남아 있다)
   -------------------------------------------------------------------------- */

/* 소제목 — 파란 막대·파란 배경을 걷어내고 코랄 선으로
   ⛔ 2026-09-02: 처음엔 body.single 로만 걸었는데, 옛 「추가 CSS」는
      `body.page:not(.home)` 와 `h2.wp-block-heading` 도 잡는다.
      그래서 **고정 페이지의 소제목이 파란 막대로 남아 있었다.**
      전 페이지 종류를 훑어보고 발견했다. 셋 다 덮어야 한다. */
body.single .entry-content h2,
body.page:not(.home) .entry-content h2,
h2.wp-block-heading{
	background:none !important;
	border:0 !important;
	border-left:4px solid var(--fz-accent) !important;
	border-radius:0 !important;
	padding:2px 0 2px 16px !important;
	margin:2.4em 0 .9em !important;
	font-size:clamp(21px,2.6vw,25px) !important;
	line-height:1.45;
	font-weight:800 !important;
	letter-spacing:-.022em;
	color:var(--fz-text) !important;
}
body.single .entry-content h3,
body.page:not(.home) .entry-content h3,
h3.wp-block-heading{
	background:none !important;
	border:0 !important;
	border-radius:0 !important;
	padding:0 !important;
	margin:1.9em 0 .7em !important;
	font-size:19.5px !important;
	font-weight:700 !important;
	letter-spacing:-.018em;
	color:var(--fz-text) !important;
}
body.single .entry-content h4{margin:1.6em 0 .6em;font-size:17.5px;font-weight:700;}

/* 링크
   ⛔ 버튼(.wp-block-button__link)은 반드시 뺄 것.
      안 빼면 이 규칙이 Astra 의 버튼 hover(흰 글씨)를 이겨서
      **코랄 배경에 코랄 글씨**가 된다. 2026-09-02 사용자가 잡아줬다. */
body.single .entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ast-button){
	color:#d1373c;
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:3px;
}
body.single .entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ast-button):hover{
	color:var(--fz-accent);
}

body.single .entry-content strong{font-weight:700;color:#14100f;}

/* 목록 — 옛 CSS 가 회색 상자 + 손으로 만든 "• " 글머리를 넣고 있다. 걷어낸다 */
body.single .entry-content ul:not(.ez-toc-list),
body.page:not(.home) .entry-content ul:not(.ez-toc-list),
body.single .entry-content ol,
body.page:not(.home) .entry-content ol{
	list-style:disc !important;
	background:none !important;
	border:0 !important;
	border-radius:0 !important;
	margin:0 0 1.5em !important;
	padding:0 0 0 1.4em !important;
}
body.single .entry-content ol{list-style:decimal !important;}
body.single .entry-content li:not(.ez-toc-list li)::before,
body.page:not(.home) .entry-content li:not(.ez-toc-list li)::before{content:none !important;}
body.single .entry-content li:not(.ez-toc-list li),
body.page:not(.home) .entry-content li:not(.ez-toc-list li){
	margin:0 0 .55em !important;
	padding-left:0 !important;
	line-height:1.85;
}
body.single .entry-content li::marker{color:var(--fz-accent);}

/* 이미지 */
body.single .entry-content img{border-radius:12px;}
body.single .entry-content figure{margin:2em 0;}
body.single .entry-content figcaption{
	margin-top:10px;text-align:center;font-size:14px;color:var(--fz-text2);
}

/* 인용 */
body.single .entry-content blockquote{
	margin:2em 0;padding:4px 0 4px 20px;
	border-left:3px solid var(--fz-accent);
	background:none;font-style:normal;color:var(--fz-text2);
}

/* 명령어·코드 — 이 사이트 글에는 명령어가 자주 나온다 */
body.single .entry-content code{
	background:#f3eeec;color:#a5262b;
	padding:2px 6px;border-radius:5px;
	font-size:.9em;
	font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',Consolas,monospace;
}
body.single .entry-content pre{
	background:var(--fz-code-bg);color:#f0e9e7;
	padding:20px 22px;border-radius:12px;
	overflow-x:auto;line-height:1.65;font-size:14.5px;
	border:1px solid #2e2020;margin:1.8em 0;
}
body.single .entry-content pre code{background:none;color:inherit;padding:0;font-size:inherit;}

/* 표 */
body.single .entry-content table{
	width:100%;border-collapse:collapse;margin:1.8em 0;font-size:16px;
	display:block;overflow-x:auto;
}
body.single .entry-content th,
body.single .entry-content td{
	border:1px solid var(--fz-rule);padding:11px 14px;text-align:left;
}
body.single .entry-content th{background:#f7f2f0;font-weight:700;}

/* 목차 (간편한 목차 플러그인)
   ⚠ 옛 CSS 가 `.ez-toc-container *{ all: revert !important }` 로 목차 안을 통째로 초기화한다.
      그래서 여기도 전부 !important 가 필요하다. */
body.single #ez-toc-container,
body.single .ez-toc-container{
	background:#faf6f5 !important;
	border:1px solid var(--fz-rule) !important;
	border-radius:12px !important;
	box-shadow:none !important;
	padding:18px 22px !important;
	margin:0 auto 2.2em !important;
	/* ⚠ width:auto 로 두면 상자가 글자 크기만큼 쪼그라든다 (2026-09-02 겪음).
	      옛 CSS 의 width:100% 를 살려두고 max-width 로만 묶는다. */
	width:100% !important;
	max-width:720px !important;
	display:block !important;
}
body.single .ez-toc-list{margin:10px 0 0 !important;padding-left:1.1em !important;}
body.single .ez-toc-title{
	color:var(--fz-text) !important;font-weight:700 !important;font-size:16px !important;
}
body.single .ez-toc-list a,
body.single #ez-toc-container a{
	color:var(--fz-text2) !important;text-decoration:none !important;
	font-size:15.5px !important;line-height:1.9 !important;
}
body.single .ez-toc-list a:hover,
body.single #ez-toc-container a:hover{color:var(--fz-accent) !important;}
body.single .ez-toc-list li{margin:0 !important;}

/* 관련 글 */
body.single .ast-related-posts-title{
	font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--fz-text);
}
body.single .ast-related-post-title a{color:var(--fz-text) !important;}
body.single .ast-related-post-title a:hover{color:var(--fz-accent) !important;}

@media (max-width:782px){
	body.single .entry-content{font-size:16.5px;line-height:1.85;}
}


/* ── 핵심 요약 상자 + 자주 묻는 질문 (2026-09-02) ───────────────────── */
/* 핵심 요약 — 좌측 강조선을 쓰지 않는다. 라벨을 알약 배지로 윗변에 걸친다.
   2026-09-02: 왼쪽 세로선은 사용자가 싫어하는 형태라 쓰지 말 것. */
body.single .fz-quick{
	position:relative;
	background:#faf7f4 !important;
	border:1px solid #e8e0d9 !important;
	border-left:1px solid #e8e0d9 !important;
	border-top:1px solid #e8e0d9 !important;
	border-radius:14px;
	padding:28px 24px 22px !important;
	margin:22px 0 34px !important;
	box-shadow:0 1px 2px rgba(40,30,25,.04);}
body.single .fz-quick__label{
	position:absolute; top:-12px; left:22px;
	display:inline-block;
	background:var(--fz-accent); color:#fff !important;
	font-size:.74rem; font-weight:800; letter-spacing:.05em;
	line-height:1; padding:7px 13px; border-radius:999px;
	box-shadow:0 2px 6px rgba(209,55,60,.22);}
body.single .fz-quick p{margin:0; font-size:1.02rem; line-height:1.8;}
body.single .fz-quick p + p{margin-top:12px;}
@media (max-width:600px){
	body.single .fz-quick{padding:26px 18px 20px !important; border-radius:12px;}
	body.single .fz-quick__label{left:16px;}
}

/* ── 여기서 배운 것 상자 (2026-09-16) ────────────────────────────────── */
/* 핵심 요약과 같은 꼴이되 색만 다르다.
   핵심요약 = 붉은 배지, 글 맨 위 하나 / 배운 것 = 청록 배지, 본문 중간 여럿.
   ⛔ 왼쪽 세로 강조선은 쓰지 않는다. 라벨을 알약 배지로 윗변에 걸친다. */
body.single .fz-learn{
	position:relative;
	background:#f3f8f9 !important;
	border:1px solid #d9e6e9 !important;
	border-left:1px solid #d9e6e9 !important;
	border-top:1px solid #d9e6e9 !important;
	border-radius:14px;
	padding:26px 22px 20px !important;
	margin:30px 0 32px !important;
	box-shadow:0 1px 2px rgba(25,45,50,.04);}
body.single .fz-learn__label{
	position:absolute; top:-12px; left:22px;
	display:inline-block;
	background:#35707f; color:#fff !important;
	font-size:.72rem; font-weight:800; letter-spacing:.05em;
	line-height:1; padding:7px 13px; border-radius:999px;
	box-shadow:0 2px 6px rgba(53,112,127,.22);}
body.single .fz-learn p{margin:0; font-size:1rem; line-height:1.8;}
body.single .fz-learn p + p{margin-top:12px;}
body.single .fz-learn strong{color:#1e4a55;}
@media (max-width:600px){
	body.single .fz-learn{padding:24px 16px 18px !important; border-radius:12px;}
	body.single .fz-learn__label{left:16px;}
}

body.single .fz-faq{margin:44px 0 0;}
body.single .fz-faq h2{margin-bottom:14px;}
body.single .fz-faq__item{
	border:1px solid #e6e2e0; border-radius:10px; padding:0; margin:0 0 10px;
	background:#fff; overflow:hidden;}
body.single .fz-faq__item[open]{border-color:#f3c9cb;}
body.single .fz-faq__item > summary{
	cursor:pointer; list-style:none; padding:15px 44px 15px 18px; position:relative;
	font-weight:700; line-height:1.55;}
body.single .fz-faq__item > summary::-webkit-details-marker{display:none;}
body.single .fz-faq__item > summary::after{
	content:"+"; position:absolute; right:17px; top:50%; transform:translateY(-50%);
	font-size:1.25rem; font-weight:600; color:var(--fz-accent); line-height:1;}
body.single .fz-faq__item[open] > summary::after{content:"\2212";}
body.single .fz-faq__item > summary:hover{background:#fdf7f7;}
body.single .fz-faq__a{padding:0 18px 16px; border-top:1px solid #f0ecea;}
body.single .fz-faq__a p{margin:12px 0 0; line-height:1.75;}


/* ── 본문 광고 자리 (2026-09-02) ─────────────────────────────────────── */
body.single .fz-ad{
	margin:34px 0; min-height:100px; clear:both;
	display:flex; justify-content:center; align-items:center;}
body.single .fz-ad ins{width:100%;}
@media (max-width:600px){ body.single .fz-ad{margin:26px 0;} }

/* 이 사이트는 다크 모드를 쓰지 않는다. 색을 못 박아 둔다.
   2026-09-02: prefers-color-scheme 블록을 넣었다가 글씨가 안 보이는 사고가 났다. */
body.single .fz-quick{color:#2b2523 !important;}
body.single .fz-quick p{color:#2b2523 !important;}
body.single .fz-learn{color:#26383d !important;}
body.single .fz-learn p{color:#26383d !important;}
body.single .fz-faq__item{background:#fff !important;}
body.single .fz-faq__item > summary{color:#2b2523 !important;}
body.single .fz-faq__a,
body.single .fz-faq__a p{color:#3a3330 !important;}