@charset "UTF-8";
/* ==========================================================================
   Color Functions
   ========================================================================== */
/*
   EM conversion
   ========================================================================== */
/* ==========================================================================
   Fluid Type
   as seen on https://madebymike.com.au/writing/fluid-type-calc-examples/
   ========================================================================== */
/*
   Compass YIQ Color Contrast
   https://github.com/easy-designs/yiq-color-contrast
   ========================================================================== */
/* ==========================================================================
   Variables
   ========================================================================== */
/* Breakpoint widths */
/* Fluid type */
/* Calculate Modular Scale */
/* small */
/* large */
/* Heading 1 */
/* Heading 2 */
/* Heading 3 */
/* Heading 4 */
/* Heading 5 */
/* Heading 6 */
/* Font Families */
/* YIQ color contrast */
/* Brands */
/* Max-width of the main content */
/* Max-width of the main content + sidebar */
/* Site logo */
/* Border radius */
/* Global transition */
/* ==========================================================================
   NOTICE TEXT BLOCKS
   ========================================================================== */
/**
 *  Default Kramdown usage (no indents!):
 *  <div class="notice" markdown="1">
 *  #### Headline for the Notice
 *  Text for the notice
 *  </div>
 */
/* Colors */
/* Syntax highlighting (base16) — Prism "Tomorrow" (dark) approximation */
/* 코드블록 배경 */
/* 주석 / gutter */
/* 기본 텍스트 */
/* 라인 하이라이트 */
/* 문자열 */
/* 키워드 */
/* ==========================================================================
   Base elements
   ========================================================================== */
body {
  color: #000;
  background: #fff;
  border-top-color: #000;
}

a {
  color: #34374C;
}
a:hover {
  color: rgb(15.2941176471%, 16.1764705882%, 22.3529411765%);
}

blockquote {
  background-color: rgb(92.0392156863%, 92.1568627451%, 92.9803921569%);
  border-left-color: #34374C;
}

/* ==========================================================================
   Site-wide
   ========================================================================== */
.site-title a {
  color: #000;
}

.copyright {
  color: rgb(25%, 25%, 25%);
}
.copyright a {
  color: rgb(25%, 25%, 25%);
}

.taxonomy-title {
  color: #999999;
}

.taxonomy-count {
  color: rgb(50%, 50%, 50%);
}

.taxonomy-index a {
  border-bottom-color: #cccccc;
}
.taxonomy-index a:hover {
  color: #34374C;
}

.taxonomy-section:not(:last-child) {
  border-bottom-color: #cccccc;
}

.back-to-top {
  color: rgb(50%, 50%, 50%);
}

.site-nav ul {
  color: #fff;
  background-color: #000;
}
.site-nav a {
  color: #fff;
  border-color: #000;
}
.site-nav a:hover {
  border-color: #fff;
}

.site-footer {
  border-top-color: #cccccc;
}

.footnotes {
  border-top-color: #cccccc;
}

.site-logo-img {
  border-color: #fff;
}

.toc-wrapper {
  border-color: rgb(85%, 85%, 85%);
}
.toc-wrapper h2 {
  color: #cccccc;
  background-color: #2d2d2d;
}
.toc-wrapper li ol {
  background-color: #fff;
}
.toc-wrapper li a:hover, .toc-wrapper li a:focus {
  border-bottom: 1px dotted #cccccc;
}

#menu-toggle {
  color: #fff;
}

#menu-toggle {
  background-color: #000;
}

#markdown-toc {
  color: #cccccc;
}

.pagination li a {
  color: #666666;
  border-color: #cccccc;
}
.pagination li a.current, .pagination li a.current.disabled {
  background-color: #666666;
  color: #fff;
}
.pagination li a.disabled {
  color: #cccccc;
}

.search-input {
  border-color: #cccccc;
}

/* ==========================================================================
   Page
   ========================================================================== */
.page-previous,
.page-next {
  color: #000;
}

/* ==========================================================================
   Entries (Posts, collection documents, etc.)
   ========================================================================== */
.entry a:hover {
  color: #34374C;
}

/* ==========================================================================
   Tables
   ========================================================================== */
th,
td {
  border-bottom-color: #cccccc;
}

/* ==========================================================================
   NOTICE TEXT BLOCKS
   ========================================================================== */
/* Default notice */
.notice {
  margin: 2em 0 !important; /* override*/
  padding: 1em;
  background-color: rgb(90%, 90%, 90%);
  color: #000;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 1px rgba(90%, 90%, 90%, 0.25);
  box-shadow: 0 1px 1px rgba(90%, 90%, 90%, 0.25);
}
.notice h4 {
  margin-top: 0 !important; /* override*/
  margin-bottom: 0.75em;
}
.page__content .notice h4 {
  /* using at-root to override .page-content h4 font size*/
  margin-bottom: 0;
  font-size: 1rem;
}

.notice p:last-child {
  margin-bottom: 0 !important; /* override*/
}
.notice h4 + p {
  /* remove space above paragraphs that appear directly after notice headline*/
  margin-top: 0;
  padding-top: 0;
}
.notice a {
  color: rgb(22.5%, 22.5%, 22.5%);
}
.notice a:hover {
  color: rgb(36%, 36%, 36%);
}
.notice ul:last-child {
  margin-bottom: 0; /* override*/
}

/* Accent notice */
.notice--accent {
  margin: 2em 0 !important; /* override*/
  padding: 1em;
  background-color: rgb(76.1176470588%, 76.4705882353%, 78.9411764706%);
  color: #000;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 1px rgba(76.1176470588%, 76.4705882353%, 78.9411764706%, 0.25);
  box-shadow: 0 1px 1px rgba(76.1176470588%, 76.4705882353%, 78.9411764706%, 0.25);
}
.notice--accent h4 {
  margin-top: 0 !important; /* override*/
  margin-bottom: 0.75em;
}
.page__content .notice--accent h4 {
  /* using at-root to override .page-content h4 font size*/
  margin-bottom: 0;
  font-size: 1rem;
}

.notice--accent p:last-child {
  margin-bottom: 0 !important; /* override*/
}
.notice--accent h4 + p {
  /* remove space above paragraphs that appear directly after notice headline*/
  margin-top: 0;
  padding-top: 0;
}
.notice--accent a {
  color: rgb(19.0294117647%, 19.1176470588%, 19.7352941176%);
}
.notice--accent a:hover {
  color: rgb(30.4470588235%, 30.5882352941%, 31.5764705882%);
}
.notice--accent ul:last-child {
  margin-bottom: 0; /* override*/
}

/* Primary notice */
.notice--primary {
  margin: 2em 0 !important; /* override*/
  padding: 1em;
  background-color: rgb(70%, 70%, 70%);
  color: #000;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 1px rgba(70%, 70%, 70%, 0.25);
  box-shadow: 0 1px 1px rgba(70%, 70%, 70%, 0.25);
}
.notice--primary h4 {
  margin-top: 0 !important; /* override*/
  margin-bottom: 0.75em;
}
.page__content .notice--primary h4 {
  /* using at-root to override .page-content h4 font size*/
  margin-bottom: 0;
  font-size: 1rem;
}

.notice--primary p:last-child {
  margin-bottom: 0 !important; /* override*/
}
.notice--primary h4 + p {
  /* remove space above paragraphs that appear directly after notice headline*/
  margin-top: 0;
  padding-top: 0;
}
.notice--primary a {
  color: rgb(17.5%, 17.5%, 17.5%);
}
.notice--primary a:hover {
  color: rgb(28%, 28%, 28%);
}
.notice--primary ul:last-child {
  margin-bottom: 0; /* override*/
}

/* Warning notice */
.notice--warning {
  margin: 2em 0 !important; /* override*/
  padding: 1em;
  background-color: rgb(99.1764705882%, 87.4117647059%, 70.7058823529%);
  color: #000;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 1px rgba(99.1764705882%, 87.4117647059%, 70.7058823529%, 0.25);
  box-shadow: 0 1px 1px rgba(99.1764705882%, 87.4117647059%, 70.7058823529%, 0.25);
}
.notice--warning h4 {
  margin-top: 0 !important; /* override*/
  margin-bottom: 0.75em;
}
.page__content .notice--warning h4 {
  /* using at-root to override .page-content h4 font size*/
  margin-bottom: 0;
  font-size: 1rem;
}

.notice--warning p:last-child {
  margin-bottom: 0 !important; /* override*/
}
.notice--warning h4 + p {
  /* remove space above paragraphs that appear directly after notice headline*/
  margin-top: 0;
  padding-top: 0;
}
.notice--warning a {
  color: rgb(24.7941176471%, 21.8529411765%, 17.6764705882%);
}
.notice--warning a:hover {
  color: rgb(39.6705882353%, 34.9647058824%, 28.2823529412%);
}
.notice--warning ul:last-child {
  margin-bottom: 0; /* override*/
}

/* Success notice */
.notice--success {
  margin: 2em 0 !important; /* override*/
  padding: 1em;
  background-color: rgb(81.5294117647%, 93.0588235294%, 81.5294117647%);
  color: #000;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 1px rgba(81.5294117647%, 93.0588235294%, 81.5294117647%, 0.25);
  box-shadow: 0 1px 1px rgba(81.5294117647%, 93.0588235294%, 81.5294117647%, 0.25);
}
.notice--success h4 {
  margin-top: 0 !important; /* override*/
  margin-bottom: 0.75em;
}
.page__content .notice--success h4 {
  /* using at-root to override .page-content h4 font size*/
  margin-bottom: 0;
  font-size: 1rem;
}

.notice--success p:last-child {
  margin-bottom: 0 !important; /* override*/
}
.notice--success h4 + p {
  /* remove space above paragraphs that appear directly after notice headline*/
  margin-top: 0;
  padding-top: 0;
}
.notice--success a {
  color: rgb(20.3823529412%, 23.2647058824%, 20.3823529412%);
}
.notice--success a:hover {
  color: rgb(32.6117647059%, 37.2235294118%, 32.6117647059%);
}
.notice--success ul:last-child {
  margin-bottom: 0; /* override*/
}

/* Danger notice */
.notice--danger {
  margin: 2em 0 !important; /* override*/
  padding: 1em;
  background-color: rgb(98%, 81.1764705882%, 80.7058823529%);
  color: #000;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 1px rgba(98%, 81.1764705882%, 80.7058823529%, 0.25);
  box-shadow: 0 1px 1px rgba(98%, 81.1764705882%, 80.7058823529%, 0.25);
}
.notice--danger h4 {
  margin-top: 0 !important; /* override*/
  margin-bottom: 0.75em;
}
.page__content .notice--danger h4 {
  /* using at-root to override .page-content h4 font size*/
  margin-bottom: 0;
  font-size: 1rem;
}

.notice--danger p:last-child {
  margin-bottom: 0 !important; /* override*/
}
.notice--danger h4 + p {
  /* remove space above paragraphs that appear directly after notice headline*/
  margin-top: 0;
  padding-top: 0;
}
.notice--danger a {
  color: rgb(24.5%, 20.2941176471%, 20.1764705882%);
}
.notice--danger a:hover {
  color: rgb(39.2%, 32.4705882353%, 32.2823529412%);
}
.notice--danger ul:last-child {
  margin-bottom: 0; /* override*/
}

/* Info notice */
.notice--info {
  margin: 2em 0 !important; /* override*/
  padding: 1em;
  background-color: rgb(79.6470588235%, 90.3529411765%, 93.5294117647%);
  color: #000;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 1px rgba(79.6470588235%, 90.3529411765%, 93.5294117647%, 0.25);
  box-shadow: 0 1px 1px rgba(79.6470588235%, 90.3529411765%, 93.5294117647%, 0.25);
}
.notice--info h4 {
  margin-top: 0 !important; /* override*/
  margin-bottom: 0.75em;
}
.page__content .notice--info h4 {
  /* using at-root to override .page-content h4 font size*/
  margin-bottom: 0;
  font-size: 1rem;
}

.notice--info p:last-child {
  margin-bottom: 0 !important; /* override*/
}
.notice--info h4 + p {
  /* remove space above paragraphs that appear directly after notice headline*/
  margin-top: 0;
  padding-top: 0;
}
.notice--info a {
  color: rgb(19.9117647059%, 22.5882352941%, 23.3823529412%);
}
.notice--info a:hover {
  color: rgb(31.8588235294%, 36.1411764706%, 37.4117647059%);
}
.notice--info ul:last-child {
  margin-bottom: 0; /* override*/
}

/* ==========================================================================
   Accessibility Modules
   ========================================================================== */
/* Text meant only for screen readers */
.screen-reader-text,
.screen-reader-text span,
.screen-reader-shortcut {
  background-color: #000;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  /* button colors */
}
.btn--primary {
  background-color: #000;
  color: #fff;
}
.btn--primary:hover {
  background-color: black;
  color: #fff;
}
.btn--primary:visited {
  background-color: #000;
  color: #fff;
}
.btn--accent {
  background-color: #34374C;
  color: #fff;
}
.btn--accent:hover {
  background-color: rgb(16.3137254902%, 17.2549019608%, 23.8431372549%);
  color: #fff;
}
.btn--accent:visited {
  background-color: #34374C;
  color: #fff;
}
.btn--inverse {
  background-color: #fff;
  color: #000;
  border: 1px solid #cccccc;
}
.btn--inverse:hover {
  background-color: #cccccc;
  color: #000;
}
.btn--inverse:visited {
  background-color: #fff;
  color: #000;
}
.btn--light-outline {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.btn--light-outline:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
}
.btn--light-outline:visited {
  background-color: transparent;
  color: #fff;
}
.btn--success {
  background-color: #62c462;
  color: #fff;
}
.btn--success:hover {
  background-color: rgb(30.7450980392%, 61.4901960784%, 30.7450980392%);
  color: #fff;
}
.btn--success:visited {
  background-color: #62c462;
  color: #fff;
}
.btn--warning {
  background-color: #f89406;
  color: #fff;
}
.btn--warning:hover {
  background-color: rgb(77.8039215686%, 46.431372549%, 1.8823529412%);
  color: #fff;
}
.btn--warning:visited {
  background-color: #f89406;
  color: #fff;
}
.btn--danger {
  background-color: #ee5f5b;
  color: #fff;
}
.btn--danger:hover {
  background-color: rgb(74.6666666667%, 29.8039215686%, 28.5490196078%);
  color: #fff;
}
.btn--danger:visited {
  background-color: #ee5f5b;
  color: #fff;
}
.btn--info {
  background-color: #52adc8;
  color: #fff;
}
.btn--info:hover {
  background-color: rgb(25.7254901961%, 54.2745098039%, 62.7450980392%);
  color: #fff;
}
.btn--info:visited {
  background-color: #52adc8;
  color: #fff;
}
.btn--facebook {
  background-color: #3b5998;
  color: #fff;
}
.btn--facebook:hover {
  background-color: rgb(18.5098039216%, 27.9215686275%, 47.6862745098%);
  color: #fff;
}
.btn--facebook:visited {
  background-color: #3b5998;
  color: #fff;
}
.btn--twitter {
  background-color: #55acee;
  color: #fff;
}
.btn--twitter:hover {
  background-color: rgb(26.6666666667%, 53.9607843137%, 74.6666666667%);
  color: #fff;
}
.btn--twitter:visited {
  background-color: #55acee;
  color: #fff;
}
.btn--google-plus {
  background-color: #dd4b39;
  color: #fff;
}
.btn--google-plus:hover {
  background-color: rgb(69.3333333333%, 23.5294117647%, 17.8823529412%);
  color: #fff;
}
.btn--google-plus:visited {
  background-color: #dd4b39;
  color: #fff;
}
.btn--linkedin {
  background-color: #007bb6;
  color: #fff;
}
.btn--linkedin:hover {
  background-color: rgb(0%, 38.5882352941%, 57.0980392157%);
  color: #fff;
}
.btn--linkedin:visited {
  background-color: #007bb6;
  color: #fff;
}
.btn--reddit {
  background-color: #ff4500;
  color: #fff;
}
.btn--reddit:hover {
  background-color: rgb(80%, 21.6470588235%, 0%);
  color: #fff;
}
.btn--reddit:visited {
  background-color: #ff4500;
  color: #fff;
}

/* ==========================================================================
   Syntax highlighting
   ========================================================================== */
code.highlighter-rouge {
  color: #cccccc;
  background-color: #2d2d2d;
}

div.highlighter-rouge,
figure.highlight {
  color: #cccccc;
  background-color: #2d2d2d;
}

.highlight table td.gutter {
  color: #999999;
  border-right-color: #999999;
}

.highlight .hll {
  background-color: #3a3a3a;
}

.highlight .c {
  /* Comment */
  color: #999999;
}
.highlight .err {
  /* Error */
  color: #f2777a;
}
.highlight .k {
  /* Keyword */
  color: #cc99cd;
}
.highlight .l {
  /* Literal */
  color: #f99157;
}
.highlight .n {
  /* Name */
  color: #cccccc;
}
.highlight .o {
  /* Operator */
  color: #66cccc;
}
.highlight .p {
  /* Punctuation */
  color: #cccccc;
}
.highlight .cm {
  /* Comment.Multiline */
  color: #999999;
}
.highlight .cp {
  /* Comment.Preproc */
  color: #999999;
}
.highlight .c1 {
  /* Comment.Single */
  color: #999999;
}
.highlight .cs {
  /* Comment.Special */
  color: #999999;
}
.highlight .gd {
  /* Generic.Deleted */
  color: #f2777a;
}
.highlight .ge {
  /* Generic.Emph */
  font-style: italic;
}
.highlight .gh {
  /* Generic.Heading */
  color: #cccccc;
  font-weight: bold;
}
.highlight .gi {
  /* Generic.Inserted */
  color: #7ec699;
}
.highlight .gp {
  /* Generic.Prompt */
  color: #999999;
  font-weight: bold;
}
.highlight .gs {
  /* Generic.Strong */
  font-weight: bold;
}
.highlight .gu {
  /* Generic.Subheading */
  color: #66cccc;
  font-weight: bold;
}
.highlight .kc {
  /* Keyword.Constant */
  color: #cc99cd;
}
.highlight .kd {
  /* Keyword.Declaration */
  color: #cc99cd;
}
.highlight .kn {
  /* Keyword.Namespace */
  color: #66cccc;
}
.highlight .kp {
  /* Keyword.Pseudo */
  color: #cc99cd;
}
.highlight .kr {
  /* Keyword.Reserved */
  color: #cc99cd;
}
.highlight .kt {
  /* Keyword.Type */
  color: #ffcc66;
}
.highlight .ld {
  /* Literal.Date */
  color: #7ec699;
}
.highlight .m {
  /* Literal.Number */
  color: #f99157;
}
.highlight .s {
  /* Literal.String */
  color: #7ec699;
}
.highlight .na {
  /* Name.Attribute */
  color: #6699cc;
}
.highlight .nb {
  /* Name.Builtin */
  color: #cccccc;
}
.highlight .nc {
  /* Name.Class */
  color: #ffcc66;
}
.highlight .no {
  /* Name.Constant */
  color: #f2777a;
}
.highlight .nd {
  /* Name.Decorator */
  color: #66cccc;
}
.highlight .ni {
  /* Name.Entity */
  color: #cccccc;
}
.highlight .ne {
  /* Name.Exception */
  color: #f2777a;
}
.highlight .nf {
  /* Name.Function */
  color: #6699cc;
}
.highlight .nl {
  /* Name.Label */
  color: #cccccc;
}
.highlight .nn {
  /* Name.Namespace */
  color: #ffcc66;
}
.highlight .nx {
  /* Name.Other */
  color: #6699cc;
}
.highlight .py {
  /* Name.Property */
  color: #cccccc;
}
.highlight .nt {
  /* Name.Tag */
  color: #66cccc;
}
.highlight .nv {
  /* Name.Variable */
  color: #f2777a;
}
.highlight .ow {
  /* Operator.Word */
  color: #66cccc;
}
.highlight .w {
  /* Text.Whitespace */
  color: #cccccc;
}
.highlight .mf {
  /* Literal.Number.Float */
  color: #f99157;
}
.highlight .mh {
  /* Literal.Number.Hex */
  color: #f99157;
}
.highlight .mi {
  /* Literal.Number.Integer */
  color: #f99157;
}
.highlight .mo {
  /* Literal.Number.Oct */
  color: #f99157;
}
.highlight .sb {
  /* Literal.String.Backtick */
  color: #7ec699;
}
.highlight .sc {
  /* Literal.String.Char */
  color: #cccccc;
}
.highlight .sd {
  /* Literal.String.Doc */
  color: #999999;
}
.highlight .s2 {
  /* Literal.String.Double */
  color: #7ec699;
}
.highlight .se {
  /* Literal.String.Escape */
  color: #f99157;
}
.highlight .sh {
  /* Literal.String.Heredoc */
  color: #7ec699;
}
.highlight .si {
  /* Literal.String.Interpol */
  color: #f99157;
}
.highlight .sx {
  /* Literal.String.Other */
  color: #7ec699;
}
.highlight .sr {
  /* Literal.String.Regex */
  color: #7ec699;
}
.highlight .s1 {
  /* Literal.String.Single */
  color: #7ec699;
}
.highlight .ss {
  /* Literal.String.Symbol */
  color: #7ec699;
}
.highlight .bp {
  /* Name.Builtin.Pseudo */
  color: #cccccc;
}
.highlight .vc {
  /* Name.Variable.Class */
  color: #f2777a;
}
.highlight .vg {
  /* Name.Variable.Global */
  color: #f2777a;
}
.highlight .vi {
  /* Name.Variable.Instance */
  color: #f2777a;
}
.highlight .il {
  /* Literal.Number.Integer.Long */
  color: #f99157;
}

/* ==========================================================================
   Custom: author-centric masthead
   ========================================================================== */
.masthead-author .site-title {
  margin-top: 0.5em;
}
.masthead-author {
  /* 사이드바용 author-links 는 large 미만에서 숨겨지므로 masthead 에서는 항상 노출 */
}
.masthead-author .author-links {
  display: block;
  margin: 0.75em 0 0;
}
.masthead-author .author-link {
  display: inline-block;
}
.masthead-author .author-link a {
  color: #34374C;
}

/* ==========================================================================
   Custom: zoomkoding typography port
   ========================================================================== */
body {
  font-size: 16px; /* root 14px 위에서 본문은 16px */
  line-height: 1.5;
  font-weight: 500;
  color: rgb(55, 53, 47);
  letter-spacing: normal;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.e-content {
  /* 본문에만 적용 — masthead / nav 보호 */
}
.e-content h1, .e-content h2, .e-content h3, .e-content h4, .e-content h5, .e-content h6 {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
}
.e-content h1 {
  font-size: 2em;
}
.e-content h2 {
  font-size: 1.5em;
}
.e-content h3 {
  font-size: 1.25em;
}
.e-content h4 {
  font-size: 1em;
}
.e-content h5 {
  font-size: 0.875em;
}
.e-content h6 {
  font-size: 0.85em;
  color: #6a737d;
}
.e-content strong, .e-content b {
  font-weight: 700;
}
.e-content a {
  color: rgba(55, 53, 47, 0.7);
  text-decoration: none;
  border-bottom: 0.05em solid;
}
.e-content a:hover {
  color: rgb(55, 53, 47);
}
.e-content blockquote {
  padding: 0 1em;
  color: #6a737d;
  background-color: transparent;
  border-left: 0.25em solid #dfe2e5;
}
.e-content {
  /* 이미지 캡션 (이미지 바로 뒤 / 단독 em) — 실제 글 HTML 로 검증 후 조정 */
}
.e-content img + em,
.e-content p > img + em,
.e-content p > em:only-child {
  display: block;
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: #6a737d;
}
.e-content hr {
  height: 0.25em;
  padding: 0;
  background-color: #e1e4e8;
  border: 0;
}
.e-content {
  /* 제목 밑줄바 (GitHub markdown 스타일) */
}
.e-content h1, .e-content h2 {
  padding-bottom: 0.3em;
  border-bottom: 3px solid #e1e4e8;
}

/* 인라인 코드: 핑크 on 반투명 (base16 다크 매핑을 인라인만 덮음) */
code.highlighter-rouge {
  color: #EB5757;
  background-color: rgba(135, 131, 120, 0.15);
  font-size: 85%;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

/* So Simple 제목 italic / 음수 자간 리셋 */
.page-title {
  letter-spacing: normal;
  font-style: normal;
}

.entry-title {
  letter-spacing: normal;
  font-style: normal;
}

.taxonomy-title {
  padding-bottom: 0.3em;
  border-bottom: 3px solid #e1e4e8;
}

/* ==========================================================================
   Custom: zoomkoding boxed post cards (list layout only)
   ========================================================================== */
.entries-list {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.entries-list .entry {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 150px;
  margin-bottom: 10px;
  padding: 15px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  box-shadow: none;
}
.entries-list .entry:hover .entry-title a {
  text-decoration: underline;
}
.entries-list {
  /* order: title -> excerpt -> meta(bottom). 크기는 root(14px) 기준 rem 스케일 */
}
.entries-list .entry-title {
  order: 1;
  font-size: 1.15rem; /* ~16.1px */
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 8px;
}
.entries-list .entry-title a {
  text-decoration: none;
}
.entries-list .entry-excerpt {
  order: 2;
  font-size: 0.9rem; /* ~12.6px */
  line-height: 1.45;
  color: rgb(55, 53, 47);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.entries-list .entry-excerpt > * {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}
.entries-list .entry-excerpt p {
  display: inline;
}
.entries-list .entry-excerpt a {
  position: relative;
  z-index: 10;
  color: inherit;
  border-bottom: 0;
  text-decoration: none;
}
.entries-list .entry-meta {
  order: 3;
  margin-top: auto;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem; /* ~14px */
  color: #a8a8a8;
}
.entries-list .entry-meta .entry-date, .entries-list .entry-meta .read-time {
  font-style: normal;
  color: #a8a8a8;
}
.entries-list .entry-meta .entry-date + .read-time::before {
  content: "•";
  padding: 0 0.5em;
}
.entries-list .entry-meta .entry-tags {
  display: inline-flex;
  flex-wrap: wrap;
}
.entries-list .entry-meta .entry-tag {
  position: relative;
  z-index: 10;
  margin-left: 4px;
  color: #a8a8a8;
  text-decoration: none;
}
.entries-list .entry-meta .entry-tag:hover {
  text-decoration: underline;
}
.entries-list .entry-image {
  order: 0;
  margin-bottom: 10px;
}

/* ==========================================================================
   Custom: root 14px 스케일 보정 (fluid/rem 이 root 축소에 안 맞물리는 요소)
   ========================================================================== */
/* 글 제목: _page.scss 하드 fluid(48-60px) → 32px */
.page-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
}

/* masthead 사이트 타이틀: _global.scss fluid(~27.6px) → 24px */
.site-title {
  font-size: 24px;
}

/* nav: 0.75rem 이 root 14px 에서 10.5px 로 작아짐 → 15px 보정 */
.site-nav li {
  font-size: 15px;
}

/* 글 사이드바(작성자/날짜/read-time): 0.75rem → 14px 보정 */
.page-sidebar {
  font-size: 14px;
}

/* 코드블록 */
pre, pre.highlight, div.highlighter-rouge pre.highlight {
  font-size: 14px;
}

/* 글 제목 하단 메타 (날짜 · read-time) — zoomkoding post-header 스타일 */
.page-meta {
  margin: 0.25em 0 2.5em;
  font-size: 14px;
  color: #a8a8a8;
}
.page-meta .page-date, .page-meta .read-time {
  color: #a8a8a8;
}
.page-meta .page-date a, .page-meta .read-time a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}
.page-meta .page-date + .read-time::before {
  content: "•";
  padding: 0 0.5em;
}

/* ==========================================================================
   Custom: post 단일 컬럼 정렬 (So Simple 2단 grid override) + 하단 태그
   _page.scss L221-280 이 grid 175px 1fr 로 제목/본문 좌측을 어긋나게 함 →
   단일 컬럼으로 접어 제목·메타·본문이 한 좌측선/폭 공유.
   ========================================================================== */
.layout--post .page-wrapper {
  display: block;
  max-width: 820px; /* zoomkoding 좁은 본문 */
}
.layout--post .page-header,
.layout--post .page-content {
  grid-column: auto;
  float: none;
  width: auto;
  margin: 0;
  min-width: 0;
}
.layout--post {
  /* 본문 첫 요소의 상단 margin 제거 → .page-meta 아래 여백이 collapse 없이 적용 */
}
.layout--post .e-content > :first-child {
  margin-top: 0;
}
.layout--post {
  /* 하단 가로 태그 리스트 (사이드바에서 이동) */
}
.layout--post .page-footer-tags {
  clear: both;
  margin: 2em 0 0;
  padding-top: 1em;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 14px;
}
.layout--post .page-footer-tags .page-taxonomies-title {
  display: inline-block;
  margin: 0 0.5em 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #a8a8a8;
}
.layout--post .page-footer-tags .page-taxonomies {
  display: inline;
  margin: 0;
  padding: 0;
}
.layout--post .page-footer-tags .page-taxonomy {
  display: inline;
}
.layout--post .page-footer-tags .page-taxonomy a {
  color: #a8a8a8;
  text-decoration: none;
}
.layout--post .page-footer-tags .page-taxonomy a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Custom: 동적 우측 TOC (스크롤 스파이) — 1300px 이상에서만 표시
   ========================================================================== */
.post-toc {
  display: none;
}

@media (min-width: 1300px) {
  .post-toc {
    display: block;
    position: fixed;
    top: 120px;
    right: max(1rem, (100vw - 820px) / 2 - 260px);
    width: 240px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding-left: 1em;
    font-size: 13px;
    line-height: 1.5;
  }
  .post-toc__title {
    margin: 0 0 0.75em;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a8a8a8;
  }
  .post-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .post-toc__item {
    margin: 0;
  }
  .post-toc__item--h3 {
    padding-left: 1em;
  }
  .post-toc__link {
    display: block;
    padding: 0.25em 0 0.25em 0.6em;
    color: #a8a8a8;
    text-decoration: none;
    border-bottom: 0;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .post-toc__link:hover {
    color: rgb(55, 53, 47);
  }
  .post-toc__link.is-active {
    color: rgb(55, 53, 47);
    font-weight: 600;
    border-left-color: rgb(55, 53, 47);
  }
}
/* ==========================================================================
   Custom: /search/ 결과 스타일 (#results — .entries-list 카드 스코프 밖)
   ========================================================================== */
.search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6em 0.2em;
  font-size: 20px;
  border: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  background: transparent;
}
.search-input:focus {
  outline: none;
  border-bottom-color: rgb(55, 53, 47);
}

#results {
  max-width: 720px;
  margin: 1.5em auto 0;
}
#results .results__found {
  font-size: 14px;
  color: #a8a8a8;
  margin: 0 0 1em;
}
#results .results__none {
  font-size: 15px;
  color: #6a737d;
  margin: 1em 0;
}
#results .entry {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#results .entry-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 6px;
}
#results .entry-title a {
  color: rgb(55, 53, 47);
  text-decoration: none;
  border-bottom: 0;
}
#results .entry-title a:hover {
  text-decoration: underline;
}
#results .entry-excerpt {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgb(55, 53, 47);
}
#results .entry-excerpt p {
  margin: 0;
}
#results .entry-excerpt mark {
  background-color: #fff3b0;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ==========================================================================
   Custom: /search/ — 검색창 최상단 + 태그 클라우드 접기(details)
   ========================================================================== */
/* .page-content 순서 재배치: 검색창(form) 위, 태그, 결과 순 */
.layout--search .page-content {
  display: flex;
  flex-direction: column;
}

.layout--search form {
  order: 1;
}

.layout--search .search-tags {
  order: 2;
}

.layout--search #results {
  order: 3;
}

.search-tags {
  max-width: 720px;
  margin: 1em auto 0;
}
.search-tags .search-tags__summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a8a8a8;
  list-style: revert; /* disclosure triangle 유지 */
}
.search-tags .search-tags__summary:hover {
  color: rgb(55, 53, 47);
}
.search-tags .search-tags__count {
  color: #a8a8a8;
  font-weight: 400;
}
.search-tags .search-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0.75em 0 0;
  padding: 0;
  list-style: none;
}
.search-tags .search-tags__list li {
  margin: 0;
}
.search-tags .search-tags__list a {
  display: inline-block;
  padding: 3px 10px;
  font-size: 13px;
  color: rgb(55, 53, 47);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  text-decoration: none;
  border-bottom: 0;
}
.search-tags .search-tags__list a:hover {
  background: rgba(0, 0, 0, 0.09);
}
.search-tags .search-tags__tagcount {
  color: #a8a8a8;
  font-size: 11px;
}

/*# sourceMappingURL=default.css.map */