/*
Theme Name: Codingnuri
Description: 블록 에디터로 작성한 글의 블록을 golang-book 스타일에 맞춘다.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 공통
2.0 텍스트 블록
3.0 미디어 블록
4.0 레이아웃 블록
5.0 위젯 블록
6.0 색상
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 공통
--------------------------------------------------------------*/

[class^="wp-block-"] figcaption,
.wp-element-caption {
	color: #777;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
	margin-top: 5px;
}

[class^="wp-block-"].alignleft,
[class^="wp-block-"] .alignleft {
	margin-right: 20px;
}

[class^="wp-block-"].alignright,
[class^="wp-block-"] .alignright {
	margin-left: 20px;
}

/*--------------------------------------------------------------
2.0 텍스트 블록
--------------------------------------------------------------*/

p.has-drop-cap:not(:focus)::first-letter {
	font-size: 4em;
	margin-top: 0.1em;
}

.wp-block-quote {
	border-left: 4px solid #ddd;
	padding: 0 15px;
	color: #777;
	margin: 15px 0;
}

.wp-block-quote.has-text-align-right {
	border-left: none;
	border-right: 4px solid #ddd;
}

.wp-block-quote cite {
	display: block;
	font-size: 13px;
	font-style: normal;
	margin-top: 5px;
}

.wp-block-quote.is-style-large p,
.wp-block-quote.is-large p {
	font-size: 20px;
	line-height: 1.5;
}

.wp-block-pullquote {
	border-top: 4px solid #ddd;
	border-bottom: 4px solid #ddd;
	color: #333;
	padding: 20px 0;
	margin: 20px 0;
}

.wp-block-pullquote blockquote {
	border: none;
	padding: 0;
	color: inherit;
}

.wp-block-pullquote p {
	font-size: 20px;
	line-height: 1.5;
}

.wp-block-pullquote cite {
	color: #777;
	font-size: 13px;
	font-style: normal;
}

/* 코드 블록: 상자 모양은 style.css의 pre를 그대로 따른다. */
pre.wp-block-code,
pre.wp-block-preformatted,
pre.wp-block-verse {
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 6px 10px;
	color: #333;
}

pre.wp-block-code code {
	font-size: inherit;
}

pre.wp-block-verse {
	font-family: inherit;
	white-space: pre-wrap;
}

.wp-block-table {
	margin: 15px 0;
	overflow-x: auto;
}

.wp-block-table table {
	margin: 0;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid #ccc;
	padding: 6px 13px;
}

.wp-block-table thead {
	border-bottom: none;
}

.wp-block-table.is-style-stripes {
	border-bottom: none;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) {
	background-color: #f8f8f8;
}

/*--------------------------------------------------------------
3.0 미디어 블록
--------------------------------------------------------------*/

.wp-block-image {
	margin: 15px 0;
}

.wp-block-image img {
	display: block;
}

.wp-block-image.aligncenter img,
.wp-block-image .aligncenter img {
	margin: 0 auto;
}

.wp-block-image .is-style-rounded img,
.wp-block-image.is-style-rounded img {
	border-radius: 9999px;
}

.wp-block-gallery {
	margin: 15px 0;
}

.wp-block-audio audio {
	width: 100%;
}

.wp-block-video video {
	width: 100%;
}

.wp-block-file {
	margin: 15px 0;
}

.wp-block-file .wp-block-file__button {
	background: #4183c4;
	border-radius: 3px;
	color: #fff;
	font-size: 13px;
	padding: 4px 12px;
}

.wp-block-file .wp-block-file__button:hover {
	text-decoration: none;
	background: #3570aa;
}

/*--------------------------------------------------------------
4.0 레이아웃 블록
--------------------------------------------------------------*/

.wp-block-button__link {
	border-radius: 3px;
	font-size: 14px;
	padding: 6px 16px;
	text-decoration: none;
}

.wp-block-button__link:hover {
	text-decoration: none;
	opacity: 0.9;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
	background-color: #4183c4;
}

.wp-block-button__link:not(.has-text-color),
.wp-block-button__link:not(.has-text-color):visited {
	color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: #4183c4;
}

.wp-block-separator,
hr.wp-block-separator {
	border: none;
	border-bottom: 4px solid #ddd;
	margin: 15px 0;
	opacity: 1;
}

.wp-block-separator.is-style-dots {
	border: none;
}

.wp-block-separator.is-style-dots::before {
	color: #aaa;
}

.wp-block-media-text {
	margin: 15px 0;
}

.wp-block-media-text *:last-child {
	margin-bottom: 0;
}

.wp-block-cover {
	margin: 15px 0;
}

.wp-block-group.has-background {
	padding: 15px 20px;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: bold;
}

/*--------------------------------------------------------------
5.0 위젯 블록
--------------------------------------------------------------*/

.wp-block-latest-posts,
.wp-block-archives,
.wp-block-categories {
	padding-left: 30px;
}

.wp-block-latest-posts.is-grid {
	padding-left: 0;
}

.wp-block-latest-posts__post-date,
.wp-block-latest-comments__comment-date {
	color: #777;
	font-size: 13px;
}

.wp-block-latest-comments {
	padding-left: 0;
}

.wp-block-latest-comments__comment {
	border-top: 1px solid #eee;
	padding-top: 10px;
	margin-bottom: 10px;
}

.wp-block-latest-comments__comment-excerpt p {
	margin: 5px 0 0;
}

.wp-block-search__button {
	margin-left: 6px;
}

/*--------------------------------------------------------------
6.0 색상 (functions.php의 editor-color-palette와 짝)
--------------------------------------------------------------*/

.has-blue-color,
.has-blue-color:visited {
	color: #4183c4;
}

.has-blue-background-color {
	background-color: #4183c4;
}

.has-dark-gray-color,
.has-dark-gray-color:visited {
	color: #333;
}

.has-dark-gray-background-color {
	background-color: #333;
}

.has-medium-gray-color,
.has-medium-gray-color:visited {
	color: #777;
}

.has-medium-gray-background-color {
	background-color: #777;
}

.has-light-gray-color,
.has-light-gray-color:visited {
	color: #f8f8f8;
}

.has-light-gray-background-color {
	background-color: #f8f8f8;
}

.has-sky-color,
.has-sky-color:visited {
	color: #e0ebf5;
}

.has-sky-background-color {
	background-color: #e0ebf5;
}

.has-white-color,
.has-white-color:visited {
	color: #fff;
}

.has-white-background-color {
	background-color: #fff;
}