@charset "utf-8";

/* ================================================
   record my life — Dark Mode
   원본 스킨 기반 다크모드 변환
   ================================================ */

/* ── 다크모드 컬러 변수 ── */
:root {
  --bg:         #0f0f11;
  --bg2:        #161619;
  --surface:    #1e1e24;
  --surface2:   #26262e;
  --border:     #2e2e38;
  --accent:     #00e5a0;
  --accent-dim: rgba(0, 229, 160, 0.12);
  --text:       #e2e2ea;
  --text-sub:   #a0a0b8;
  --text-muted: #606078;
  --link:       #5aabff;
  --code-bg:    #0d0d10;
}

html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  overflow-x: hidden;
  color: var(--text);
}

body,
input,
textarea {
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  color: var(--text);
}

img {
  border: 0;
  max-width: 100%;
}

fieldset {
  border: 1px solid var(--border);
  padding: 2%;
}

sup, sub {
  height: 0;
  line-height: 0;
  font-size: 10px;
}

iframe, video, embed, object {
  max-width: 100%;
}

abbr, acronym {
  border-bottom: 1px dotted var(--text-muted);
  cursor: help;
}

cite, em { font-style: italic; }

hr {
  margin: 0;
  padding: 0;
  border: none;
  border-top: 1px solid var(--border);
  height: 0;
  overflow: hidden;
}

code.red {
  border: 1px solid #5a1a1a;
  background-color: #2a1010;
  color: #ff7070;
}

code.blue {
  border: 1px solid #1a3a5a;
  background-color: #101828;
  color: #5aabff;
}

code.green {
  border: 1px solid #1a4a2a;
  background-color: #101e14;
  color: #4ade80;
}

input, textarea {
  outline: none;
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

::selection {
  background: var(--accent);
  color: #000;
}

div, span, input, textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

#tistoryProfileLayer div {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

a, input, textarea, li {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover { color: var(--accent); }

.clear { clear: both; width: 100%; }
.text-center { text-align: center; }

.mCSB_inside>.mCSB_container {
  margin-right: 0 !important;
}

/* ================================================
   Sidebar
   ================================================ */

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  width: 300px;
  height: 100%;
  background-color: var(--bg2);
  border-right: 1px solid var(--border);
  cursor: default;
}

#sidebar a {
  color: var(--text-sub);
  text-decoration: none;
}

#sidebar a:hover { color: var(--accent); }

#sidebar .blank {
  clear: both;
  width: 100%;
  height: 100px;
}

#sidebar h1 {
  margin: 0;
  padding: 0 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 200%;
  color: var(--text);
}

#sidebar .widget {
  margin-top: 30px;
  padding: 0;
  line-height: 200%;
}

#sidebar .widget li {
  list-style: none;
  padding-right: 30px;
  word-break: break-word;
}

#sidebar .category>ul { margin: 0; padding: 0; }
#sidebar .category ul li { list-style: none; }
#sidebar .category>ul>li>a { display: none; }

#sidebar .category ul li ul li ul {
  margin: 0 0 0 15px;
  padding: 0;
}

#sidebar .category ul li ul li ul li:before {
  content: "\F0DA";
  font-family: "FontAwesome";
  font-size: 10px;
  padding-right: 5px;
}

#sidebar .counter { font-size: 13px; }
#sidebar .counter .yesterday { color: #4ade80; }
#sidebar .counter .today     { color: var(--accent); }
#sidebar .counter .total     { color: #f87171; }

#sidebar .search input {
  padding: 10px;
  width: 60%;
  border: none;
  border-bottom: 1px dashed var(--border);
  background: transparent;
  color: var(--text);
}

#sidebar .search input:focus { border-color: var(--accent); }

#sidebar .blogger {
  line-height: 100%;
  color: var(--text-sub);
}

/* ================================================
   Content
   ================================================ */

#content {
  margin: 0 0 0 330px;
  padding: 0;
}

#content-inner {
  max-width: 1030px;
  width: 100%;
  padding-right: 30px;
}

#head {
  position: relative;
  padding-top: 100px;
  width: 100%;
  text-align: center;
}

#head h2 {
  display: inline-block;
  margin: 0 0 50px;
  padding: 0 5px 3px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  line-height: 200%;
  border-bottom: 1px dashed var(--border);
  text-shadow: none;
  word-break: break-word;
}

#head h2 a { color: var(--text); }
#head h2 a:hover { color: var(--accent); }

#head .date {
  position: absolute;
  bottom: -44px;
  left: -10px;
  padding: 10px;
  font-size: 13px;
  color: #fff;
  background-color: #2a2a36;
  cursor: default;
}

#head .date:before {
  position: absolute;
  top: 0; left: -6px;
  width: 0; height: 0;
  content: " ";
  border-top: 20px solid #2a2a36;
  border-left: 6px solid transparent;
}

#head .date:after {
  position: absolute;
  bottom: 0; left: -6px;
  width: 0; height: 0;
  content: " ";
  border-bottom: 20px solid #2a2a36;
  border-left: 6px solid transparent;
}

#body {
  padding: 20px 15px 18px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  word-break: break-all;
}

/* ================================================
   Tag 페이지
   ================================================ */

.tag { word-break: break-word; }

.tag a {
  display: inline-block;
  margin-right: 10px;
  padding: 0 3px;
  color: var(--text-sub);
}

.tag a:hover {
  background-color: var(--surface2);
  color: var(--accent);
}

.tag .cloud5 { color: var(--text-muted) !important; font-size: 13px !important; }
.tag .cloud5:hover { color: var(--text) !important; }
.tag .cloud4 { color: #38bdf8 !important; font-size: 15px !important; }
.tag .cloud3 { color: var(--text-sub) !important; font-size: 18px !important; }
.tag .cloud2 { color: var(--link) !important; font-size: 20px !important; line-height: 150%; }
.tag .cloud1 { color: #f87171 !important; font-size: 22px !important; line-height: 200%; }

/* ================================================
   List
   ================================================ */

.list ul {
  margin: 0; padding: 0;
  border-top: 1px dotted var(--border);
}

.list ul li {
  padding: 12px 10px 9px;
  list-style: none;
  font-size: 14px;
  border-bottom: 1px dotted var(--border);
  color: var(--text);
}

.list span { float: right; font-size: 13px; }
.list span.cnt  { margin-right: 11px; color: var(--accent); }
.list span.date { color: var(--text-muted); }

/* ================================================
   Protected (비밀글)
   ================================================ */

.protected p { text-align: center; }
.protected i { font-size: 20px; color: var(--text-sub); }

.protected input[type="password"] {
  margin-top: 10px;
  padding: 20px 10px;
  width: 300px;
  font-size: 13px;
  border: none;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  background: var(--surface2);
  color: var(--text);
}

.protected input[type="button"] {
  margin-top: 20px;
  font-size: 15px;
  border: none;
  background-color: transparent;
  color: var(--text-sub);
  cursor: pointer;
}

/* ================================================
   Entry (본문)
   ================================================ */

.entry { font-size: 16px; color: var(--text); }
.entry table { max-width: 100% !important; width: 100% !important; }

.entry table.dual td { width: 50% !important; vertical-align: top; }
.entry table.dual td .imageblock { width: 100% !important; }
.entry table.dual td .imageblock span img { width: 100% !important; }
.entry table.triple td { width: 33% !important; vertical-align: top; }
.entry table.triple td .imageblock { width: 100% !important; }
.entry table.triple td .imageblock span img { width: 100% !important; }

.entry .imageblock { max-width: 100% !important; height: auto; }
.entry .imageblock img { max-width: 100% !important; height: auto; vertical-align: middle; }
.entry .imageblock span { max-width: 100% !important; width: 100% !important; }
.entry table td .imageblock { width: 100% !important; }
.entry .galleryControl { font-family: inherit !important; }
.entry .tt-gallery-box { margin-bottom: 10px; }
.entry .tt-gallery-box img { max-width: 100%; height: auto !important; }

.entry .txc-info-wrap { overflow-x: auto; overflow-y: hidden; max-width: 500px; width: 100%; clear: both; }
.entry .txc-info { font-size: 13px !important; width: 500px !important; }
.entry .txc-info hr { max-width: 100%; width: 100% !important; }
.entry .txc-info h3 { border-left: none; background-color: transparent; color: inherit; }
.entry .txc-info img { padding: 0; box-shadow: none; border: none; }

.entry .moreless_fold,
.entry .moreless_top {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background-color: var(--surface2);
}

.entry .moreless_fold span:before {
  padding: 0 10px 0 5px;
  content: "\f107";
  font-family: "FontAwesome";
  color: var(--text-muted);
}

.entry .moreless_fold span,
.entry .moreless_top span {
  display: block;
  padding: 10px 10px 8px;
  color: var(--text-sub);
}

.entry .moreless_top span:before {
  padding: 0 10px 0 5px;
  content: "\f106";
  font-family: "FontAwesome";
  color: var(--text-muted);
}

.entry .moreless_content { padding: 10px; border-bottom: 1px solid var(--border); }
.entry .moreless_bottom { display: none; }
.entry a.tx-link, .entry a.key1 { font-weight: 600; cursor: pointer; }

.entry .cap1,
.entry .galleryCaption {
  margin: 0 !important; padding: 0;
  max-width: 100%;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  word-break: break-all;
}

.entry div.footnotes { margin-top: 30px; font-size: 12px; border-top: 1px solid var(--border); }
.entry div.footnotes ol { padding: 0; margin: 10px 0 0 30px; list-style: decimal-leading-zero; }
.entry div.footnotes ol li a { color: var(--text-muted); font-weight: 400; }
.entry .entry-ccl { margin-top: 15px; margin-bottom: 0 !important; line-height: 0; }

.entry a[href*="attachment/cfile"] {
  display: inline-block;
  position: relative;
  padding: 6px 10px 3px;
  font-size: 13px;
  color: var(--text);
  background-color: var(--surface2);
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.entry a[href*="attachment/cfile"]:hover { background-color: var(--surface); text-decoration: none; }
.entry a[href*="attachment/cfile"]>img { display: none; }
.entry .another_category h4 { font-size: 14px !important; }
.entry .another_category table th, .entry .another_category table td { font-size: 13px !important; }

/* ================================================
   Tag Label
   ================================================ */

.tag_label {
  padding: 0 0 10px 70px;
  min-height: 31px;
  line-height: 100%;
  text-align: right;
  word-break: break-word;
}

.tag_label span { font-size: 0; }

.tag_label a {
  margin: 0 0 0 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.tag_label a:before { content: "#"; }
.tag_label a:hover { color: var(--accent); }
.tag_label .locationTag { font-size: 13px; }

/* ================================================
   Admin (수정/삭제)
   ================================================ */

.admin { margin-bottom: 10px; font-size: 11px; text-align: center; letter-spacing: 2px; }
.admin a { color: var(--text-muted); }
.admin a:hover { color: #f87171; }
.admin .line { padding: 0 5px; font-size: 9px; color: var(--border); }

/* ================================================
   Communicate (댓글/방명록)
   ================================================ */

#communicate { margin: 0; padding: 0; clear: both; }
#communicate .communicateWrite { margin: 0; padding: 0; }
#communicate .communicateWrite .name { margin-top: 20px; }
#communicate .communicateWrite .no-margin { margin: 0; }
#communicate .communicateWrite .guest { margin-bottom: 20px; }

#communicate .communicateWrite .guest label {
  display: block; padding-top: 6.5px;
  float: left; width: 100px;
  color: var(--text-sub);
}

#communicate .communicateWrite .guest input {
  padding: 10px; width: 300px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text); cursor: pointer;
}

#communicate .communicateWrite .textarea { margin-bottom: 0; line-height: 0; }

#communicate .communicateWrite .textarea textarea {
  padding: 10px; width: 100%; height: 200px;
  line-height: 160%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}

#communicate .communicateWrite .submit { margin: 0; float: right; }

#communicate .communicateWrite .submit input {
  margin: 0; padding: 20px 10px 15px;
  color: var(--text-sub); line-height: 15px;
  letter-spacing: 4px; background: none; border: none;
  border-bottom: 1px solid var(--border); cursor: pointer;
}

#communicate .communicateWrite .secret {
  position: relative; float: right;
  margin: 0 5px 0 0; padding: 20px 25px 15px 10px;
  line-height: 15px; letter-spacing: 2px;
  border-bottom: 1px solid var(--border);
  color: var(--text-sub);
}

#communicate .communicateWrite .secret label { cursor: pointer; }

#communicate .communicateWrite .secret input {
  position: absolute; top: 5px; bottom: 0;
  left: 65px; margin: auto 0; cursor: pointer;
}

#communicate .communicateWrite .secret input:focus { border: none; outline: none; }

#communicate .communicateWrite .guest input:focus,
#communicate .communicateWrite .textarea textarea:focus,
#communicate .communicateWrite .submit input:hover,
#communicate .communicateWrite .submit input:focus { border-color: var(--accent); }

#communicate .communicateList { margin: 0; padding: 0; }
#communicate .communicateList ol { list-style: none; padding: 0; margin: 0; }

#communicate .communicateList ol>li {
  border-top: 2px solid var(--border);
  padding: 15px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-top: 20px;
}

#communicate .communicateList ol li>div { position: relative; }
#communicate .communicateList ol li { background-color: var(--surface); }
#communicate .communicateList ul { margin: 0; padding: 0; }

#communicate .communicateList ul li {
  list-style: none; padding: 15px 0 0;
  margin-top: 10px; border-top: 1px dotted var(--border);
}

#communicate .communicateList li>div { padding: 0 10px; }
#communicate .communicateList li .rp_secret p,
#communicate .communicateList li .guest_secret p { color: #7b93ff; }

#communicate .communicateList div img[src*="index"] {
  border-radius: 10px; width: 30px; height: 30px;
  z-index: 2; background-color: var(--surface2); vertical-align: middle;
}

#communicate .communicateList div img[src*="favicon"] { vertical-align: middle; margin-top: -2px; }

#communicate .communicateList .name { font-weight: 400; float: left; color: var(--text); }
#communicate .communicateList .date { font-size: 13px; float: right; font-style: italic; color: var(--text-muted); }
#communicate .communicateList p { margin: 10px 0; padding: 0; line-height: 180%; color: var(--text-sub); }

#communicate .communicateList .control { width: 100%; text-align: right; font-style: italic; font-size: 13px; line-height: 100%; }
#communicate .communicateList .control a { margin: 0 0 0 5px; color: var(--text-muted); display: inline-block; padding: 10px 5px; }

#communicate .communicateList .tt_more_preview_comments_wrap {
  text-align: center; cursor: pointer;
  padding: 17px 0 15px; font-weight: 400;
  color: var(--text-sub);
}

/* ================================================
   Paging
   ================================================ */

#paging {
  padding: 30px 0 20px;
  line-height: 200%;
  text-align: center;
  cursor: default;
}

#paging a { display: inline-block; margin: 0 5px 10px; padding: 0 5px; color: var(--text-sub); }
#paging a:hover { color: var(--accent); }
#paging .no-more-prev, #paging .no-more-next { color: var(--text-muted); cursor: default; }
#paging .selected { cursor: default; color: var(--accent); }

/* ================================================
   Recent Posts
   ================================================ */

#recent-post { padding: 70px 0 30px; }

#recent-post h4 {
  margin: 0 1% 10px; padding: 0;
  font-size: 16px; font-weight: 400;
  color: var(--text-sub);
}

#recent-post ul { margin: 0; padding: 0; list-style: none; }

#recent-post ul li {
  position: relative; float: left;
  margin: 0; width: 25%; height: 150px;
  overflow: hidden;
  background-color: var(--surface2);
}

#recent-post ul li img {
  max-width: 100%; width: 100%;
  min-height: 100%; vertical-align: middle;
  opacity: 0.6;
}

#recent-post ul li img[src*="common_icon"] {
  position: absolute; top: 0; bottom: 0;
  margin: auto 0; opacity: 0.2;
  filter: grayscale(1);
}

#recent-post ul li .title {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  text-align: center; line-height: 155px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff; opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

#recent-post ul li:hover .title { opacity: 1; }

/* ================================================
   Footer
   ================================================ */

#foot {
  position: relative;
  width: 100%; height: 100px;
  cursor: default;
}

#foot a { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border); }
#foot a:hover { color: var(--accent); }
#foot .powered, #foot .social { position: absolute; bottom: 20px; font-size: 12px; color: var(--text-muted); }
#foot .powered { right: 1%; }
#foot .social  { left: 1%; }

/* ================================================
   Responsive Video
   ================================================ */

.responsive-video { position: relative; padding-bottom: 56.25%; width: 100%; }
.responsive-video iframe,
.responsive-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#sidebar-toggle { display: none; }

/* ================================================
   반응형
   ================================================ */

@media all and (max-width: 959px) {
  #sidebar {
    z-index: 100;
    -webkit-transform: translate3d(-300px, 0, 0);
    -moz-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  #recent-post ul li .title {
    opacity: 0.9;
    top: inherit; bottom: 0;
    height: 50px; line-height: 53px;
  }

  #recent-post ul li:nth-child(2n+0) .title { background-color: rgba(0,0,0,0.85); }

  #sidebar-toggle {
    display: block;
    position: fixed;
    left: 10px; bottom: 10px;
    width: 50px; height: 50px;
    line-height: 55px; text-align: center;
    color: var(--text);
    background-color: var(--surface);
    border-radius: 10px;
    opacity: 0.9;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    z-index: 101;
  }

  html.open #sidebar {
    overflow-y: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: all 0.2s;
  }

  html.open, html.open body { overflow: hidden; }

  #content { margin: 0 auto; padding: 0 10px; }
  #content-inner { padding: 0; }

  #head .date { bottom: -10px; right: 0; left: inherit; padding: 8px 5px 6px; font-size: 11px; }

  .tag_label { padding: 0 0 10px 0; }
}

@media all and (max-width: 639px) {
  .list ul li a { display: block; }

  #communicate .communicateWrite .guest label { padding: 0 0 5px 0; float: none; width: 100%; }
  #communicate .communicateWrite .guest input { width: 100%; }
  #communicate .communicateList .control { font-size: 12px; }

  #recent-post ul li { width: 100%; height: 200px; }

  #foot .powered { position: absolute; right: 0; bottom: 45px; width: 100%; text-align: center; }
  #foot .social  { position: absolute; left: 0; bottom: 20px; width: 100%; text-align: center; }
}

@media all and (min-width: 960px) {
  #sidebar-toggle { display: none; }
}

/* ================================================
   Tistory 기본 댓글 UI
   ================================================ */

.tt-comment-cont .tt-box-total .tt_txt_g { font-size: 14px; color: var(--text-muted); }
.tt-comment-cont .tt-box-total .tt_num_g { font-size: 14px; color: var(--text); }
.tt-comment-cont .tt-wrap-cmt .tt-link-user { font-size: 14px; color: var(--link); }
.tt-comment-cont .tt-wrap-cmt .tt_desc { font-size: 14px; color: var(--text); }
.tt-comment-cont .tt-txt-mention { color: var(--text); }

.tt-comment-cont .tt-btn_register {
  width: 100px; height: 36px;
  background-color: var(--surface2);
  font-size: 14px; color: var(--text);
  border-radius: 0; border-color: var(--border);
}

.tt-comment-cont .tt-btn_register:hover { background-color: var(--surface); border-color: var(--accent); }
.tt-comment-cont .tt-btn_register:focus { background-color: var(--surface); border-color: var(--accent); }

#article-view p a { color: var(--link); text-decoration: underline; }

/* ================================================
   Article View (티스토리 에디터 본문)
   ================================================ */

#article-view {
  margin: 0;
  padding: 20px 20px 50px;
  word-wrap: break-word;
  color: var(--text);
  min-height: 370px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  background-color: var(--surface);
}

.contents_style>* { margin: 20px 0 0 0; }

#article-view h2[data-ke-size] { font-size: 1.62em; line-height: 1.46; }
#article-view h3[data-ke-size] { font-size: 1.44em; line-height: 1.48; }
#article-view h4[data-ke-size] { font-size: 1.25em; line-height: 1.55; }
#article-view p[data-ke-size='size18'] { font-size: 1.12em; line-height: 1.67; }
#article-view p[data-ke-size='size16'] { line-height: 1.75; }
#article-view p[data-ke-size='size14'] { font-size: 0.87em; line-height: 1.71; }

#article-view h2,
#article-view h3,
#article-view h4 {
  font-weight: normal;
  letter-spacing: -1px;
  color: var(--text);
  margin: 1em 0 20px;
}

#article-view p+p, #article-view p { margin-bottom: 30px; }
#article-view h2+h2, #article-view h3+h3, #article-view h4+h4 { margin: 0; }
#article-view h2+h3, #article-view h2+h4, #article-view h3+h4 { margin-top: 10px; }
#article-view h2+p, #article-view h3+p, #article-view h4+p,
#article-view h5+p, #article-view h6+p { margin-top: 10px; }

#article-view div[data-ke-type='moreLess'] {
  caret-color: auto;
  background-color: var(--surface2);
  padding: 20px 20px 22px; margin: 20px 0;
  border: 1px dashed var(--border);
  color: var(--text-sub);
}

#article-view a { color: var(--link); text-decoration: underline; }
#article-view figure[data-ke-type='contentSearch'] a { text-decoration: none; }

/* 인용문 */
#article-view blockquote[data-ke-style='style1'] {
  text-align: center;
  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/blockquote-style1.svg) no-repeat 50% 0;
  padding: 34px 0 0 0;
  font-size: 1.12em; color: var(--text-sub);
  line-height: 1.67; border: 0 none;
  font-family: "Noto Serif KR";
}

#article-view blockquote[data-ke-style='style2'] {
  border-color: var(--accent);
  border-width: 0 0 0 4px; border-style: solid;
  padding: 1px 0 0 12px;
  color: var(--text-sub); line-height: 1.75;
  font-size: 1em; text-align: left;
}

#article-view blockquote[data-ke-style='style3'] {
  border: 1px solid var(--border);
  background-color: var(--surface2);
  text-align: left; padding: 21px 25px 20px 25px;
  color: var(--text-sub); font-size: 1em; line-height: 1.75;
}

#article-view blockquote { display: block; margin: 20px auto 0; letter-spacing: 0px; }

/* 파일 첨부 */
#article-view figure.fileblock {
  width: 470px; height: 73px;
  box-sizing: border-box; position: relative;
  border-radius: 1px; margin-top: 20px; margin-bottom: 0px;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
  border: solid 1px var(--border);
  background: var(--surface2);
}

#article-view figure.fileblock a { display: block; }
#article-view figure.fileblock .image {
  float: left; width: 30px; height: 30px;
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  margin: 22px 17px 21px 22px; background-position: 0 0; opacity: 0.6;
}
#article-view figure.fileblock .desc { position: absolute; left: 70px; right: 60px; top: 4px; bottom: 0; }
#article-view figure.fileblock .filename { color: var(--text); font-size: 14px; text-overflow: ellipsis; width: 100%; height: 20px; margin: 16px 0 0; }
#article-view figure.fileblock .size { font-size: 12px; color: var(--text-muted); height: 16px; }
#article-view figure[data-ke-align=alignCenter].fileblock { margin-left: auto; margin-right: auto; }
#article-view figure[data-ke-align=alignRight].fileblock { margin-left: auto; }
#article-view figure.fileblock .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 272px; height: 20px; display: block; color: var(--text); }
#article-view figure.fileblock a::after {
  content: '';
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  background-position: -40px 0; width: 30px; height: 30px;
  position: absolute; right: 24px; top: 19px; opacity: 0.6;
}

/* 이미지 */
#article-view figure.imageblock { display: table; position: relative; }
#article-view figure.imageblock.alignLeft { text-align: left; }
#article-view figure.imageblock.alignCenter { margin: 20px auto 0; text-align: center; }
#article-view figure.imageblock.alignRight { text-align: right; margin-left: auto; }
#article-view figure.imageblock.floatLeft { float: left; margin-right: 20px; }
#article-view figure.imageblock.floatRight { float: right; margin-left: 20px; }
#article-view figure.imageblock.widthContent { display: block; }
#article-view figure.imageblock.widthContent img { width: 100%; }
#article-view figure.imageblock img { display: inline-block; max-width: 100%; margin: 0; height: auto; }
#article-view iframe, #article-view figure img, #article-view figure iframe { max-width: 100%; }
#article-view figure img:not([width]), #article-view figure iframe:not([width]) { width: 100%; }
#article-view figure { max-width: 100%; clear: both; }

/* 캡션 */
#article-view figure figcaption {
  font-size: 13px; color: var(--text-muted);
  word-break: break-word; padding-top: 10px;
  min-height: 20px; caption-side: bottom;
  text-align: center; width: 100%; box-sizing: content-box;
}

/* 이미지 그리드 */
#article-view figure.imagegridblock {
  position: relative; caret-color: transparent;
  background-color: transparent; width: 100%; height: auto; margin: 20px 0 0 0;
}
#article-view figure.imagegridblock .image-container { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
#article-view figure.imagegridblock .image-container>span { margin-right: 0; margin-top: 2px; }
#article-view figure.imagegridblock img { margin: 0; height: inherit; }
#article-view figure.imagegridblock span img { width: 100%; }

/* 오픈그래프 */
#article-view figure[data-ke-type='opengraph'] { margin: 10px 0; }
#article-view figure[data-ke-type='opengraph'] a {
  box-sizing: initial; width: 100%;
  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
  border: solid 1px var(--border);
  text-decoration: none; color: var(--text);
  background: var(--surface2);
}
#article-view figure[data-ke-type='opengraph'] a:hover { opacity: 1; }
#article-view figure[data-ke-type='opengraph'] div.og-image { border-right: solid 1px var(--border); width: 200px; height: 200px; background-size: cover; background-position: center; }
#article-view figure[data-ke-type='opengraph'] div.og-image button { display: none; }
#article-view figure[data-ke-type='opengraph'] p.og-title { color: var(--text); font-size: 22px; padding-bottom: 10px; max-width: 467px; text-overflow: ellipsis; white-space: nowrap; margin: 0px; overflow: hidden; }
#article-view figure[data-ke-type='opengraph'] .og-desc { margin: 0px; max-width: 467px; text-overflow: ellipsis; overflow: hidden; font-size: 14px; font-weight: 300; color: var(--text-muted); max-height: 42px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; }

/* 코드 블럭 */
#article-view pre code.hljs {
  font-size: 14px; padding: 20px;
  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
  border: solid 1px var(--border);
  line-height: 1.71; overflow: auto;
  background: var(--code-bg) !important;
  color: #c9d1d9 !important;
}

/* 테이블 */
#article-view table { margin-bottom: 0px; border-color: var(--border); }
#article-view table tbody tr { box-sizing: content-box; }
#article-view table td { word-break: break-word; padding: 8px; font-size: 15px; color: var(--text); }

#article-view table[data-ke-style='style1'] tr:first-child td { border-bottom: 1px solid #00c47a; }
#article-view table[data-ke-style='style2'] tr:first-child td { border-bottom: 1px solid #00a000; }
#article-view table[data-ke-style='style3'] tr:first-child td { border-bottom: 1px solid #1a7acc; }

#article-view table[data-ke-style='style4'] tr:nth-child(2n) td,
#article-view table[data-ke-style='style5'] tr:nth-child(2n) td,
#article-view table[data-ke-style='style6'] tr:nth-child(2n) td,
#article-view table[data-ke-style='style7'] tr:nth-child(2n) td,
#article-view table[data-ke-style='style12'] tr:nth-child(odd) td,
#article-view table[data-ke-style='style13'] tr:nth-child(odd) td,
#article-view table[data-ke-style='style14'] tr:nth-child(odd) td,
#article-view table[data-ke-style='style15'] tr:nth-child(odd) td { background-color: var(--surface2); }

#article-view table[data-ke-style='style12'] tr td:first-child,
#article-view table[data-ke-style='style13'] tr td:first-child,
#article-view table[data-ke-style='style14'] tr td:first-child,
#article-view table[data-ke-style='style15'] tr td:first-child { background-color: var(--surface); }

#article-view table[data-ke-style='style12'] tr:first-child td { background-color: #3a3a46; border: 1px solid var(--border); color: var(--text); }
#article-view table[data-ke-style='style13'] tr:first-child td { background-color: #0a3a3a; border: 1px solid #1a6060; color: var(--text); }
#article-view table[data-ke-style='style14'] tr:first-child td { background-color: #0a2e0a; border: 1px solid #1a5c1a; color: var(--text); }
#article-view table[data-ke-style='style15'] tr:first-child td { background-color: #0a2040; border: 1px solid #1a4a7a; color: var(--text); }

#article-view table[data-ke-style='style8'] tr:first-child td { border-bottom: 2px solid var(--text-sub); }
#article-view table[data-ke-style='style8'] { border-left: 0 none; border-right: 0 none; }
#article-view table[data-ke-style='style8'] td { border-right-color: transparent; border-left-color: transparent; }

#article-view table[data-ke-style='style9'] tr:first-child td { border-bottom: 2px solid var(--accent); }
#article-view table[data-ke-style='style9'] { border-left: 0 none; border-right: 0 none; }
#article-view table[data-ke-style='style9'] td { border-right-color: transparent; border-left-color: transparent; }

#article-view table[data-ke-style='style10'],
#article-view table[data-ke-style='style11'] { border-left: 0 none; border-right: 0 none; }
#article-view table[data-ke-style='style10'] td,
#article-view table[data-ke-style='style11'] td { border-right-color: transparent; border-left-color: transparent; }

#article-view table[data-ke-style='style16'],
#article-view table[data-ke-style='style16'] tr,
#article-view table[data-ke-style='style16'] tr td { border-color: transparent; }

/* 리스트 */
#article-view ul li, #article-view ol li { margin: 0 0 3px 22px; line-height: 1.7; color: var(--text); }
#article-view ul, #article-view ol { margin: 14px auto 24px; padding: 0 0 0 10px; }

/* 접은 글 */
#article-view .moreless-content :first-child { margin-top: 0; margin-bottom: 0; }
#article-view div[data-ke-type='moreLess'] .moreless-content { display: none; }
#article-view div[data-ke-type='moreLess'].open .moreless-content { display: block; }
#article-view div[data-ke-type='moreLess'] .btn-toggle-moreless {
  color: var(--text-muted); font-size: 16px; line-height: 26px; cursor: pointer; text-decoration: none;
}

/* 타임라인 */
.box-timeline-content { word-break: break-all; color: var(--text); }

/* 구 에디터 */
.btn_more, .btn_less {
  border: 0; background: transparent; display: block;
  height: 21px; margin: 20px 0; font-size: 14px;
  line-height: 14px; color: var(--text-muted);
  position: relative; width: 100%; text-align: left;
}

.btn_less::before, .btn_more::before {
  content: "..."; display: inline-block;
  padding-right: 5px; font-size: 14px;
  line-height: 6px; vertical-align: top;
}

/* 이미지 슬라이드 */
#article-view figure.imageslideblock { clear: both; position: relative; font-size: 0; outline: 0 none; }
#article-view figure.imageslideblock .btn { display: none; outline: none; }
#article-view figure.imageslideblock.ready .btn { display: inline-block; }
#article-view figure.imageslideblock.ready .mark { opacity: 1; }

#article-view figure.imageslideblock div.image-container {
  position: relative; min-width: 480px; max-width: 100%;
  min-height: 300px; max-height: 860px;
  background-color: #000; display: flex;
  align-items: center; justify-content: center;
  overflow: hidden; margin: 0 auto;
}

#article-view figure.imageslideblock div.image-container span.image-wrap { display: none; }
#article-view figure.imageslideblock div.image-container span.image-wrap.selected { display: inline; }
#article-view figure.imageslideblock div.image-container img { max-width: 100%; max-height: 100%; }

#article-view figure.imageslideblock div.image-container .btn { position: absolute; border: 0; background: transparent; width: 60px; height: 60px; top: 50%; margin-top: -20px; }
#article-view figure.imageslideblock div.image-container .btn-prev { left: 0; }
#article-view figure.imageslideblock div.image-container .btn-next { right: 0; }
#article-view figure.imageslideblock div.image-container:hover .btn span { opacity: 0.3; }
#article-view figure.imageslideblock div.image-container .btn span {
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  text-indent: -10000px; overflow: hidden; width: 40px; height: 40px;
  opacity: 0; transition: opacity ease-in-out 0.2s; display: inline-block;
}
#article-view figure.imageslideblock div.image-container .btn:hover span { opacity: 1; }
#article-view figure.imageslideblock div.image-container .btn .ico-prev { background-position: -220px 0; }
#article-view figure.imageslideblock div.image-container .btn .ico-next { background-position: -260px 0; }

#article-view figure.imageslideblock div.mark { display: block; height: 44px; text-align: center; opacity: 0; transition: opacity ease-in-out 0.2s; }
#article-view figure.imageslideblock div.mark span { width: 30px; height: 4px; display: inline-block; margin: 20px 1px; background-color: var(--border); text-indent: -10000px; overflow: hidden; cursor: pointer; }
#article-view figure.imageslideblock div.mark span:first-child { background-color: var(--accent); margin-left: 0; }
#article-view figure.imageslideblock div.mark span:last-child { margin-right: 0; }
#article-view figure.imageslideblock figcaption { text-align: center; color: var(--text-muted); font-size: 14px; }

#article-view figure.imageslideblock.alignLeft { text-align: left; }
#article-view figure.imageslideblock.alignCenter { margin: 0 auto 20px; text-align: center; }
#article-view figure.imageslideblock.alignRight { text-align: right; margin-left: auto; }

@media (max-width: 600px) {
  #article-view figure[data-ke-type='opengraph'] a { height: 90px; }
  #article-view figure[data-ke-type='opengraph'] div.og-image { width: 90px; height: 90px; }
  #article-view figure[data-ke-type='opengraph'] div.og-text { padding: 13px 12px 0 20px; height: 90px; }
  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-title { font-size: 16px; -webkit-line-clamp: 1; }
  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-desc { display: none; }
  #article-view figure.imageslideblock div.image-container { min-width: 100%; width: 100%; max-height: 100%; }
  #article-view figure.imageslideblock div.image-container .btn span { opacity: 0.3; }
}