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

/* ============================================================
   MODERN RESKIN for Tistory "Poster" skin
   - HTML/템플릿 태그 무변경 전제, CSS만 전면 교체
   - 디자인 토큰(CSS 변수) 기반: 색·간격을 :root에서 일괄 관리
   - 스프라이트 이미지(ico_package.png) 의존 제거 → CSS 아이콘
   - 하단에 .ai-post 카테고리 테마 포함 (n8n 자동 발행용)
   ============================================================ */

/* ── 디자인 토큰 ── */
:root {
  --bg: #faf9f7;            /* 페이지 배경: 아주 옅은 웜그레이 */
  --surface: #ffffff;       /* 카드/입력 표면 */
  --ink: #1a1815;           /* 본문 잉크 */
  --sub: #6f6a63;           /* 보조 텍스트 */
  --faint: #a8a29a;         /* 흐린 텍스트(날짜 등) */
  --line: #e9e5df;          /* 헤어라인 */
  --brand: #7a583a;         /* 브랜드 액센트(기존 브라운 유지·정제) */
  --brand-ink: #5d4028;     /* 브랜드 진한 톤(호버) */
  --brand-soft: #f3ece4;    /* 브랜드 연한 배경 */
  --radius: 14px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(26, 24, 21, .05), 0 8px 24px rgba(26, 24, 21, .06);
  --shadow-hover: 0 2px 4px rgba(26, 24, 21, .06), 0 14px 32px rgba(26, 24, 21, .10);
  --content: 760px;         /* 본문 최대 폭 */
  --wide: 1200px;           /* 리스트/커버 최대 폭 */
}

/* ── 리셋 ── */
html, body { width: 100%; margin: 0; padding: 0; font-size: 100%; }
body {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.6;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,
input, textarea, p, blockquote, th, td, figure { margin: 0; padding: 0; }
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block; }
button, input[type=submit], input[type=reset], input[type=button] { overflow: visible; cursor: pointer; }
input[type=text], input[type=email], input[type=password], input[type=submit], textarea { -webkit-appearance: none; }
input, select, textarea, button { font-family: inherit; font-size: 100%; border-radius: 0; }
button { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; }
ul li { list-style: none; }
img, fieldset { border: none; vertical-align: top; }
hr { display: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-soft); }
.screen_out {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── 접근성 내비 ── */
#acc-nav { position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 0; }
#acc-nav a {
  display: block; position: absolute; left: 0; top: 0; overflow: hidden;
  width: 1px; height: 1px; margin: 0 0 -1px -1px; text-align: center;
  font-weight: 700; font-size: .875em; color: #fff; white-space: nowrap;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
  width: 100%; height: auto; padding: 12px 0; background: var(--ink); z-index: 1000;
}

/* ── 헤더: 반투명 고정 ── */
#header {
  position: sticky; top: 0; z-index: 300;
  background: rgba(250, 249, 247, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
#header .inner { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
#header .inner:after { content: ""; clear: both; display: block; height: 0; visibility: hidden; }
#header h1 {
  float: left; max-width: 500px; overflow: hidden; padding: 18px 0;
  font-size: 1.125em; font-weight: 800; letter-spacing: -.01em;
  line-height: 28px; text-overflow: ellipsis; white-space: nowrap;
}
#header h1 a { display: inline-block; vertical-align: top; text-decoration: none; color: var(--ink); }
#header h1 a:hover { color: var(--brand); }
#header h1 img { width: auto; height: 26px; }
#header .mobile-menu { display: none; }

#gnb { position: relative; float: right; }
#gnb ul li { float: left; padding: 18px 6px; font-size: .875em; }
#gnb ul li a {
  display: block; position: relative; padding: 4px 10px; border-radius: 999px;
  text-decoration: none; line-height: 20px; color: var(--sub);
  transition: color .18s, background-color .18s;
}
#gnb ul li a:hover { color: var(--brand-ink); background: var(--brand-soft); }
#gnb ul li a:hover:after { content: none; }

/* ── 레이아웃 ── */
#wrap { position: relative; }
#content .inner { overflow: hidden; max-width: var(--content); margin: 0 auto; padding: 0 24px; }

/* ── 공통 버튼 ── */
.btn, a.btn {
  display: inline-block; position: relative; width: auto; min-width: 120px;
  padding: 0 22px; border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; text-decoration: none; text-align: center;
  font-size: 13px; font-weight: 600; line-height: 40px; color: var(--ink);
  transition: color .18s, background-color .18s, border-color .18s;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── 커버: 슬라이더 ── */
.cover-slider { position: relative; overflow: hidden; height: 0; padding-bottom: 42%; margin: 0 0 72px; width: 100%; }
.cover-slider ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cover-slider ul li { display: table; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; }
.cover-slider.slide-on ul li { position: absolute; top: 0; left: 0; z-index: 0; }
.cover-slider ul li .text-box {
  display: table-cell; vertical-align: middle; text-align: center; text-decoration: none;
  background: linear-gradient(180deg, rgba(12, 10, 8, .18), rgba(12, 10, 8, .5));
}
.cover-slider ul li .text-box .title {
  display: block; margin: 0 auto 32px; max-width: 800px; padding: 0 24px;
  font-weight: 800; letter-spacing: -.02em; font-size: 3em; line-height: 1.2; color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.cover-slider ul li .text-box .title em {
  display: block; margin-bottom: 14px; font-style: normal; font-weight: 600;
  font-size: .3em; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.cover-slider ul li .text-box strong { font-weight: 800; }
.cover-slider ul li .text-box .btn { border-color: rgba(255, 255, 255, .8); color: #fff; background: rgba(255, 255, 255, .08); }
.cover-slider ul li .text-box .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.cover-slider .prev, .cover-slider .next {
  position: absolute; top: 50%; z-index: 20; width: 44px; height: 44px; margin-top: -22px;
  border-radius: 50%; background: rgba(255, 255, 255, .85); text-indent: -999em; overflow: hidden;
  transition: background-color .18s;
}
.cover-slider .prev { left: 20px; }
.cover-slider .next { right: 20px; }
.cover-slider .prev:hover, .cover-slider .next:hover { background: #fff; }
.cover-slider .prev::before, .cover-slider .next::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
  border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); text-indent: 0;
}
.cover-slider .prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.cover-slider .next::before { transform: translate(-70%, -50%) rotate(135deg); }
.cover-slider .paging { position: absolute; left: 0; bottom: 24px; z-index: 20; width: 100%; text-align: center; }
.cover-slider .paging button {
  display: inline-block; overflow: hidden; width: 22px; height: 3px; margin: 0 4px;
  border-radius: 3px; background: rgba(255, 255, 255, .45); text-indent: -999em; vertical-align: middle;
}
.cover-slider .paging .current { background: #fff; }

/* ── 커버: 썸네일 리스트 1 ── */
.cover-thumbnail-list-1 { overflow: hidden; max-width: var(--wide); margin: 72px auto; padding: 0 24px; box-sizing: border-box; }
.cover-thumbnail-list-1 h2 { float: left; width: 24%; font-weight: 800; letter-spacing: -.02em; font-size: 1.75em; line-height: 1.3; color: var(--ink); }
.cover-thumbnail-list-1 h2:after { content: ""; display: block; width: 34px; height: 3px; margin-top: 22px; border-radius: 3px; background: var(--brand); }
.cover-thumbnail-list-1 h2 em { display: block; margin-bottom: 10px; font-style: normal; font-weight: 600; font-size: .45em; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.cover-thumbnail-list-1 ul { float: left; width: 76%; }
.cover-thumbnail-list-1 ul li { float: left; width: 33.3333%; padding-left: 16px; text-align: left; font-size: .875em; line-height: 1.6; box-sizing: border-box; }
.cover-thumbnail-list-1 ul li a { display: block; text-decoration: none; color: var(--sub); }
.cover-thumbnail-list-1 ul li .thum { display: block; margin-bottom: 10px; position: relative; overflow: hidden; border-radius: var(--radius-s); }
.cover-thumbnail-list-1 ul li .thum img { width: 100%; height: auto; transition: transform .35s ease; }
.cover-thumbnail-list-1 ul li a:hover .thum img { transform: scale(1.04); }
.cover-thumbnail-list-1 ul li .title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--ink); }
.cover-thumbnail-list-1 ul li a:hover .title { color: var(--brand); }
.cover-thumbnail-list-1 ul li .thum:before, .cover-thumbnail-list-1 ul li a:hover .thum:before { content: none; }

/* ── 커버: 스페셜 ── */
.cover-special-contents { max-width: var(--wide); margin: 72px auto; padding: 0 24px; }
.cover-special-contents ul li { position: relative; overflow: hidden; text-align: center; margin-bottom: 48px; }
.cover-special-contents ul li .thum { display: block; float: left; width: 50%; overflow: hidden; border-radius: var(--radius); }
.cover-special-contents ul li .thum img { max-width: 100%; height: auto; }
.cover-special-contents ul li .box { display: block; position: absolute; top: 50%; left: 50%; width: 50%; transform: translateY(-50%); }
.cover-special-contents ul li:nth-child(even) .thum { float: right; }
.cover-special-contents ul li:nth-child(even) .box { left: 0; }
.cover-special-contents ul li .category { display: block; margin: 0 0 14px; font-weight: 600; font-size: .8125em; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.cover-special-contents ul li .title { display: block; margin: 0 0 20px; font-weight: 800; letter-spacing: -.02em; font-size: 1.75em; line-height: 1.3; color: var(--ink); }
.cover-special-contents ul li .title:after { content: none; }
.cover-special-contents ul li .excerpt {
  display: block; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 32px; padding: 0 14%; font-size: .9375em; line-height: 1.8; color: var(--sub);
}

/* ── 커버: 와이드 패널 ── */
.cover-wide-panel { max-width: var(--wide); margin: 72px auto 96px; padding: 0 24px; }
.cover-wide-panel .bg { height: 300px; border-radius: var(--radius); background-position: 50% 50%; background-size: cover; }
.cover-wide-panel .box {
  max-width: 860px; margin: -90px auto 0; padding: 44px 48px 40px; text-align: center;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); position: relative;
}
.cover-wide-panel .category { display: block; margin-bottom: 10px; font-weight: 600; font-size: .8125em; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.cover-wide-panel h2 { display: block; margin-bottom: 18px; font-weight: 800; letter-spacing: -.02em; font-size: 1.75em; line-height: 1.3; color: var(--ink); }
.cover-wide-panel h2:after { content: none; }
.cover-wide-panel p { display: block; margin-bottom: 30px; padding: 0 8%; font-size: .9375em; line-height: 1.8; color: var(--sub); }

/* ── 목록 헤더 + 보기 전환 ── */
.post-header {
  position: relative; z-index: 10; overflow: hidden; max-width: var(--content);
  margin: 56px auto 8px; padding: 0 24px 12px; border-bottom: 1px solid var(--line); color: var(--ink);
}
.post-header:first-child { margin-top: 64px; }
.post-header h2 { display: inline-block; font-size: .875em; font-weight: 700; line-height: 32px; vertical-align: top; }
.post-header .list-type { position: absolute; top: 0; right: 24px; margin-top: 0; }
.post-header .list-type button {
  float: left; width: 32px; height: 32px; margin-left: 6px; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--surface); box-sizing: border-box;
  text-indent: -999em; overflow: hidden; position: relative; transition: border-color .18s;
}
.post-header .list-type button::before {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%);
  text-indent: 0; font-size: 13px; line-height: 1; color: var(--faint);
}
.post-header .list-type .thum::before { content: "▦"; }
.post-header .list-type .list::before { content: "☰"; }
.post-header .list-type button:hover, .post-header .list-type button.current { border-color: var(--brand); }
.post-header .list-type button:hover::before, .post-header .list-type button.current::before { color: var(--brand); }

/* ── 글 목록: 썸네일 카드 ── */
.post-item {
  float: left; width: 47.5%; padding: 22px 0 30px; border-bottom: 0;
  box-sizing: border-box;
}
.post-item:nth-child(odd) { margin-right: 5%; }
.post-item:nth-child(4n+1) { padding-left: 0; }
.post-item a { display: block; text-decoration: none; }
.post-item .thum {
  display: block; position: relative; overflow: hidden; height: 0;
  margin-bottom: 14px; padding-bottom: 62%; border-radius: var(--radius);
  background: var(--brand-soft); box-shadow: var(--shadow); transition: box-shadow .25s;
}
.post-item a:hover .thum { box-shadow: var(--shadow-hover); }
.post-item .thum:before { content: none; }
.post-item .thum:after { content: none; }
.post-item .thum img {
  display: block; position: absolute; top: 0; left: 0; z-index: 10;
  width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease;
}
.post-item a:hover .thum img { transform: scale(1.04); }
.post-item .title {
  display: block; overflow: hidden; width: 100%; margin-bottom: 6px;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 700; letter-spacing: -.01em;
  font-size: 1.0625em; color: var(--ink); transition: color .18s;
}
.post-item .excerpt {
  display: block; display: -webkit-box; overflow: hidden; width: 100%; height: auto; max-height: 3.2em;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 10px;
  text-overflow: ellipsis; font-size: .875em; line-height: 1.6; color: var(--sub);
}
.post-item .excerpt.protected:before { content: "🔒"; margin-right: 6px; }
.post-item .more { display: inline-block; font-size: .75em; font-weight: 600; color: var(--brand); vertical-align: top; }
.post-item .more:after { content: "→"; display: inline-block; margin-left: 4px; transition: transform .18s; }
.post-item a:hover .title { color: var(--brand); }
.post-item a:hover .more:after { transform: translateX(3px); }

/* ── 글 목록: 텍스트형 ── */
.post-type-text .post-item { float: none; width: auto; margin: 0; padding: 26px 0; border-bottom: 1px solid var(--line); }
.post-type-text .post-item a { overflow: hidden; width: 100%; }
.post-type-text .post-item .thum {
  float: right; width: 190px; height: 128px; margin: 0 0 0 40px; padding-bottom: 0; box-shadow: none;
}
.post-type-text .post-item .thum img { position: relative; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.post-type-text .post-item .title { width: auto; margin-bottom: 6px; padding: 4px 0 0; font-size: 1.125em; white-space: normal; }
.post-type-text .post-item .excerpt { width: auto; }

/* ── 커버: 썸네일 리스트 2 ── */
.cover-thumbnail-list-2 { overflow: hidden; max-width: var(--wide); margin: 0 auto 40px; padding: 0 24px; }
.cover-thumbnail-list-2 h2 {
  position: relative; z-index: 10; overflow: hidden; max-width: var(--wide); margin: 0 auto 8px;
  border: 0; border-bottom: 1px solid var(--line); text-align: left;
  font-size: .875em; font-weight: 700; line-height: 44px; color: var(--ink);
}
.cover-thumbnail-list-2 ul { margin-left: -16px; }
.cover-thumbnail-list-2 ul li { float: left; width: 25%; padding: 20px 0 24px 16px; box-sizing: border-box; }
.cover-thumbnail-list-2 ul li a { display: block; text-decoration: none; }
.cover-thumbnail-list-2 ul li .thum {
  display: block; position: relative; overflow: hidden; height: 0; margin-bottom: 12px;
  padding-bottom: 72%; border-radius: var(--radius-s); background: var(--brand-soft);
}
.cover-thumbnail-list-2 ul li .thum:before, .cover-thumbnail-list-2 ul li .thum:after { content: none; }
.cover-thumbnail-list-2 ul li .thum img { display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cover-thumbnail-list-2 ul li a:hover .thum img { transform: scale(1.04); }
.cover-thumbnail-list-2 ul li .title { display: block; overflow: hidden; width: 100%; margin-bottom: 4px; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .9375em; color: var(--ink); }
.cover-thumbnail-list-2 ul li .excerpt { display: block; display: -webkit-box; overflow: hidden; width: 100%; height: auto; max-height: 3em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 8px; font-size: .8125em; line-height: 1.5; color: var(--sub); }
.cover-thumbnail-list-2 ul li .more { display: inline-block; font-size: .75em; font-weight: 600; color: var(--brand); }
.cover-thumbnail-list-2 ul li .more:after { content: "→"; margin-left: 4px; }
.cover-thumbnail-list-2 ul li a:hover .title { color: var(--brand); }

/* ── 글 상단(제목 영역) ── */
.hgroup { max-width: var(--content); margin: 0 auto 40px; padding: 72px 24px 28px; border-bottom: 1px solid var(--line); }
.hgroup .category { margin-bottom: 12px; font-weight: 600; font-size: .8125em; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.hgroup h1 { font-size: 2em; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
.hgroup .post-meta { margin: 16px 0 0; font-size: .8125em; color: var(--faint); }
.hgroup .post-meta a { text-decoration: none; color: var(--faint); }
.hgroup .post-meta a:hover { color: var(--brand); }
.hgroup .post-meta span:before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 3px; border-radius: 50%; background: var(--faint); vertical-align: middle; }
.hgroup .post-meta span:first-child:before { content: none; }
.hgroup.guest, .hgroup.tag { max-width: var(--content); margin: 0 auto 40px; padding: 64px 24px 0; border-bottom: 1px solid var(--line); }
.hgroup.guest h2, .hgroup.tag h2 { font-size: .875em; font-weight: 700; line-height: 40px; color: var(--ink); }

/* ── 본문 컨테이너 ── */
.entry-content { max-width: var(--content); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.entry-content h1 { clear: both; margin: 40px 0 16px; font-weight: 800; font-size: 1.625em; line-height: 1.4; color: var(--ink); }
.entry-content h2 { clear: both; margin: 40px 0 16px; font-weight: 800; font-size: 1.375em; line-height: 1.4; color: var(--ink); }
.entry-content h3 { clear: both; margin: 32px 0 12px; font-weight: 700; font-size: 1.1875em; line-height: 1.4; color: var(--ink); }
.entry-content h4 { clear: both; margin: 28px 0 12px; font-weight: 700; font-size: 1.0625em; line-height: 1.5; color: var(--ink); }
.entry-content p { word-break: break-word; }
.entry-content p img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
.entry-content hr { display: block; height: 0; border: 0; border-bottom: 1px solid var(--line); }
.entry-content pre { word-break: break-all; white-space: pre-wrap; word-wrap: break-word; }
.entry-content ul { list-style: disc; margin: 0 0 22px 22px; }
.entry-content ol { list-style: decimal; margin: 0 0 22px 22px; }
.entry-content li { margin-bottom: 6px; }
.entry-content a { color: var(--brand); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--brand-ink); }
.entry-content img.alignleft { float: left; margin: 0 22px 22px 0; }
.entry-content img.aligncenter { display: block; margin: 0 auto 22px; }
.entry-content img.alignright { float: right; margin: 0 0 22px 22px; }
.entry-content blockquote { margin: 24px 0; padding: 14px 20px; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.entry-content blockquote p { margin: 12px 0 0; }
.entry-content blockquote p:first-child { margin-top: 0; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content input {
  height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); font-size: .875em; color: var(--ink); box-sizing: border-box; vertical-align: middle;
}
.entry-content .protected_form { margin-bottom: 40px; padding: 100px 0 160px; border-bottom: 1px solid var(--line); text-align: center; }
.entry-content .protected_form input { width: 220px; margin-bottom: 12px; vertical-align: top; }
.entry-content .cap1 { text-align: center; font-size: .875em; color: var(--faint); }

/* ── 글 하단 버튼(공유/신고) ── */
.post-btn { max-width: var(--content); margin: 96px auto 20px; padding: 0 24px; }
.post-btn button {
  display: inline-block; width: auto; height: 32px; margin-right: 6px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  text-indent: 0; font-size: 12px; color: var(--sub); box-sizing: border-box; transition: border-color .18s, color .18s;
}
.post-btn button:hover { border-color: var(--brand); color: var(--brand); }

/* ── 카테고리의 다른 글 ── */
.another-category { max-width: var(--content); margin: 20px auto 36px; padding: 30px 24px 0; border-top: 1px solid var(--line); }
.another-category h4 { margin-bottom: 12px; font-size: .9375em; font-weight: 700; color: var(--ink); }
.another-category table { width: 100%; border-collapse: collapse; font-size: .875em; color: var(--sub); }
.another-category table th { padding: 9px 0 7px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.another-category table th a { text-decoration: none; color: var(--sub); }
.another-category table th a:hover { color: var(--brand); }
.another-category td { width: 70px; padding: 9px 0 7px; border-bottom: 1px solid var(--line); font-size: .8125em; color: var(--faint); }
.another_category table { border: none !important; }
.another_category td { border: none !important; }

/* ── 태그 ── */
.tags { position: relative; overflow: hidden; max-width: var(--content); margin: 32px auto; padding: 0 24px; }
.tags h2 { margin-bottom: 12px; font-size: .9375em; font-weight: 700; color: var(--ink); }
.tags .items { margin: 0; }
.tags .items a {
  display: inline-block; margin: 0 6px 8px 0; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  text-decoration: none; font-size: .8125em; color: var(--sub); transition: all .18s;
}
.tags .items a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.tags .items a:before { content: "#"; opacity: .5; margin-right: 1px; }
#content .tags .items a { margin-left: 0; }
#content .tags .items { margin: 0; padding-left: 0; }

/* ── 관련 글 ── */
.related-articles { overflow: hidden; max-width: var(--wide); margin: 40px auto 80px; padding: 0 24px; }
.related-articles h2 {
  margin-bottom: 22px; border: 0; border-top: 1px solid var(--line); padding-top: 22px;
  text-align: left; font-weight: 400; font-size: .875em; line-height: 1.5; color: var(--sub);
}
.related-articles h2 strong { font-weight: 700; color: var(--ink); }
.related-articles ul { margin-left: -16px; vertical-align: top; }
.related-articles ul li { float: left; position: relative; width: 25%; padding: 0 0 0 16px; box-sizing: border-box; }
.related-articles ul li a { overflow: hidden; display: block; position: relative; border-radius: var(--radius-s); }
.related-articles ul li .thum { display: block; position: relative; overflow: hidden; height: 0; padding-bottom: 78%; background: var(--brand-soft); }
.related-articles ul li .thum:before { content: none; }
.related-articles ul li .thum img { display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.related-articles ul li a:hover .thum img { transform: scale(1.05); }
.related-articles ul li .title {
  position: absolute; bottom: 0; left: 0; z-index: 10; overflow: hidden; width: 100%; padding: 20px 12px 10px;
  background: linear-gradient(transparent, rgba(10, 8, 6, .7)); text-overflow: ellipsis; white-space: nowrap;
  font-size: .8125em; font-weight: 600; color: #fff; box-sizing: border-box;
}

/* ── 댓글 ── */
.comments { max-width: var(--content); margin: 0 auto; padding: 0 24px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.comments h2 { font-size: .9375em; font-weight: 700; color: var(--ink); }
.comments h2 .count { color: var(--brand); }
.comments .comment-list { font-size: 16px; margin-bottom: 6px; overflow: hidden; }
.comments .comment-list ul li { padding: 28px 0 22px; border-top: 1px solid var(--line); position: relative; min-height: 48px; }
.comments .comment-list ul li:first-child { border: none; }
.comments .comment-list ul li ul li { padding: 24px 0 0 56px; border: 0; }
.comments .comment-list ul li .author-meta { position: absolute; overflow: hidden; top: 28px; height: 48px; left: 0; right: 0; padding: 4px 0 0 58px; }
.comments .comment-list ul li ul li .author-meta { top: 24px; left: 56px; }
.comments .comment-list ul li .author-meta .avatar { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; }
.comments .comment-list ul li .author-meta span { display: inline-block; }
.comments .comment-list ul li .author-meta a { text-decoration: none; color: var(--ink); }
.comments .comment-list ul li .author-meta .nickname { float: left; font-size: .875em; font-weight: 600; line-height: 20px; }
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger { margin-bottom: 3px; margin-right: 0; vertical-align: bottom; }
.comments .comment-list ul li .author-meta .date { float: left; margin-left: 10px; font-size: .75em; color: var(--faint); line-height: 20px; }
.comments .comment-list ul li .author-meta .date:before, .comments .comment-list ul li .author-meta .date a:before { content: none; }
.comments .comment-list ul li .author-meta .date a { margin-left: 8px; }
.comments .comment-list ul li .control { position: absolute; top: 31px; right: 0; }
.comments .comment-list ul li ul li .control { top: 27px; }
.comments .comment-list ul li .control a { margin: 0 2px; text-decoration: none; font-size: 12px; color: var(--faint); }
.comments .comment-list ul li .control a:hover { color: var(--brand); }
.comments .comment-list ul li p { position: relative; margin: 28px 0 0 58px; font-size: .875em; line-height: 1.7; color: var(--sub); }
.comments .comment-form .field { position: relative; overflow: hidden; width: 100%; margin-bottom: 10px; }
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface);
  font-size: .875em; line-height: 1.4; color: var(--ink);
}
.comments .comment-form input[type=text], .comments .comment-form input[type=password] { width: 140px; height: 42px; padding: 0 12px; box-sizing: border-box; }
.comments .comment-form input::-webkit-input-placeholder, .comments .comment-form textarea::-webkit-input-placeholder { color: var(--faint); }
.comments .comment-form textarea { display: block; width: 100%; margin-bottom: 10px; padding: 12px; resize: none; box-sizing: border-box; }
.comments .comment-form textarea:focus, .comments .comment-form input:focus { border-color: var(--brand); outline: none; }
.comments .comment-form .field .secret { float: right; }
.comments .comment-form .field .secret input { display: none; }
.comments .comment-form .field .secret label { font-size: .875em; line-height: 42px; color: var(--sub); cursor: pointer; }
.comments .comment-form .field .secret label:before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px;
  border: 1px solid var(--line); border-radius: 4px; vertical-align: middle; background: var(--surface);
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
  background: var(--brand); border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.comments .comment-form .submit { margin-bottom: 10px; text-align: right; }

/* 티스토리 신형 댓글 위젯 */
.guest .tt-comment-cont { padding-top: 40px; padding-bottom: 40px; }
.tt-comment-cont .tt-box-total .tt_txt_g, .tt-comment-cont .tt-wrap-cmt .tt-link-user { font-size: 15px; }
.tt-comment-cont .tt-box-total .tt_num_g, .tt-comment-cont .tt-wrap-cmt .tt_txt_g,
.tt-comment-cont .tt-link-comment .tt_num_g { font-size: 15px; color: var(--brand); }
.tt-comment-cont .tt-wrap-cmt .tt_desc, .tt-comment-cont .tt-txt-mention { font-size: 15px; color: var(--sub); }
.tt-comment-cont .tt-btn_register {
  width: 158px; height: 42px; background: var(--surface); color: var(--brand);
  border-radius: 999px; border-color: var(--brand);
}
.tt-comment-cont .tt-btn_register:hover, .tt-comment-cont .tt-btn_register:focus {
  color: #fff; background: var(--brand); border-color: var(--brand);
}

/* ── 페이지네이션 ── */
.pagination { max-width: var(--content); margin: 56px auto 140px; padding: 0 24px; text-align: center; }
.pagination a {
  display: inline-block; min-width: 32px; margin: 0 3px; border-radius: var(--radius-s);
  text-decoration: none; font-size: .875em; line-height: 32px; color: var(--sub); vertical-align: middle;
  transition: background-color .18s, color .18s;
}
.pagination a:hover { background: var(--brand-soft); color: var(--brand-ink); }
.pagination .selected { background: var(--ink); color: #fff; font-weight: 700; }
.pagination .selected:hover { background: var(--ink); color: #fff; }
.pagination .prev, .pagination .next {
  width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface);
  text-indent: -999em; overflow: hidden; position: relative; box-sizing: border-box;
}
.pagination .prev::before, .pagination .next::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px;
  border-top: 2px solid var(--sub); border-left: 2px solid var(--sub);
}
.pagination .prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.pagination .next::before { transform: translate(-70%, -50%) rotate(135deg); }
.pagination .prev:hover, .pagination .next:hover { border-color: var(--brand); }
.pagination .no-more-prev, .pagination .no-more-next { display: none; }
.pagination .view-more {
  display: block; width: 100%; margin: 0; padding: 13px 0; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1; color: var(--sub);
  transition: all .18s;
}
.pagination .view-more:before { content: "+"; display: inline-block; margin-right: 8px; font-weight: 700; }
.pagination .view-more:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }

/* ── 사이드(하단 정보 영역) ── */
#aside { margin-top: 120px; padding: 56px 0 24px; border-top: 1px solid var(--line); background: var(--surface); }
#aside .inner { overflow: hidden; max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
#aside h2 { margin-bottom: 12px; font-size: .8125em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
#aside .sidebar-1 { float: left; width: 25%; min-height: 10px; padding-right: 36px; box-sizing: border-box; }
#aside .sidebar-2 { float: left; width: 50%; min-height: 10px; margin: 0 0 40px; padding: 0 12px; box-sizing: border-box; }
#aside .sidebar-3 { float: left; width: 25%; min-height: 10px; padding-left: 36px; box-sizing: border-box; }
#aside .posts { margin-bottom: 44px; }
#aside .posts li { border-bottom: 1px solid var(--line); }
#aside .posts li a {
  display: block; overflow: hidden; width: 100%; padding: 9px 0; text-overflow: ellipsis; text-decoration: none;
  white-space: nowrap; font-size: .875em; line-height: 1.6; color: var(--sub); transition: color .18s;
}
#aside .posts li a:hover { color: var(--brand); }
#aside .tags { margin: 0 0 40px; padding: 0; max-width: none; }
#aside .tags h2 { margin-bottom: 12px; }
#aside .tags .items { margin-bottom: 6px; }
#aside .tags .more { text-decoration: none; font-size: 12px; font-weight: 600; line-height: 2; color: var(--brand); }
#aside .tags .more:after { content: "→"; display: inline-block; margin-left: 4px; }
#aside .tags .more:hover { color: var(--brand-ink); }
#aside .search { margin-bottom: 48px; }
#aside .search fieldset { position: relative; margin-top: 14px; padding-right: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); overflow: hidden; }
#aside .search input { width: 100%; height: 40px; padding: 0 16px; border: 0; background: transparent; font-size: .875em; color: var(--ink); box-sizing: border-box; }
#aside .search input::-webkit-input-placeholder { color: var(--faint); }
#aside .search input:focus { outline: none; }
#aside .search button {
  position: absolute; top: 0; right: 0; width: 44px; height: 40px;
  text-indent: -999em; overflow: hidden; background: transparent;
}
#aside .search button::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -8px 0 0 -8px;
  border: 2px solid var(--faint); border-radius: 50%; text-indent: 0;
}
#aside .search button::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 2px; margin: 5px 0 0 3px;
  background: var(--faint); transform: rotate(45deg);
}
#aside .search button:hover::before { border-color: var(--brand); }
#aside .search button:hover::after { background: var(--brand); }
#aside .count { margin: 0 0 40px; }
#aside .count .total { margin: 8px 0 4px; font-size: 1.75em; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
#aside .count ul li { overflow: hidden; padding: 6px 0; border-bottom: 1px solid var(--line); text-align: right; font-size: .875em; color: var(--sub); }
#aside .count ul li strong { float: left; font-weight: 400; color: var(--faint); }

/* ── 푸터 ── */
#footer { padding: 24px 0; background: var(--surface); border-top: 1px solid var(--line); }
#footer .copyright { text-align: center; font-size: .75em; color: var(--faint); }
#footer a { text-decoration: none; color: var(--sub); }
#footer a:hover { color: var(--brand); }
#footer .admin:before { content: ""; display: inline-block; width: 1px; height: 10px; margin: 1px 9px 2px; background: var(--line); vertical-align: middle; }

/* ── 광고 슬롯 ── */
.revenue_unit_wrap.position_list { max-width: var(--content); margin: 30px auto; }

/* ── 기타 ── */
#dimmed { position: fixed; top: 0; left: 0; z-index: 500; width: 100%; height: 100%; background: rgba(10, 8, 6, .45); }
#mediaLogNest { max-width: var(--wide); margin: 0 auto; }
.btn_more, .btn_less {
  border: 0; background: transparent; display: block; height: 21px; margin: 20px 0;
  font-size: 14px; line-height: 14px; color: var(--faint); 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; }
.box-timeline-content { word-break: break-all; }

/* ============================================================
   #article-view — 티스토리 에디터 콘텐츠 공통
   ============================================================ */
#article-view {
  margin: 0; padding: 8px 0 50px; word-wrap: break-word; color: var(--ink); min-height: 370px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0;
}
.contents_style > * { margin: 20px 0 0 0; }
#article-view h2[data-ke-size] { font-size: 1.5em; line-height: 1.42; }
#article-view h3[data-ke-size] { font-size: 1.3em; line-height: 1.45; }
#article-view h4[data-ke-size] { font-size: 1.15em; line-height: 1.5; }
#article-view p[data-ke-size='size18'] { font-size: 1.12em; line-height: 1.75; }
#article-view p[data-ke-size='size16'] { line-height: 1.8; }
#article-view p[data-ke-size='size14'] { font-size: .875em; line-height: 1.7; }
#article-view h2, #article-view h3, #article-view h4 { font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 1.2em 0 18px; }
#article-view p + p, #article-view p { margin-bottom: 28px; }
#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 a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
#article-view div[data-ke-type='moreLess'] {
  caret-color: auto; background: var(--bg); padding: 20px 20px 22px; margin: 20px 0;
  border: 1px dashed var(--line); border-radius: var(--radius-s); color: var(--ink);
}
#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(--sub); font-size: 15px; line-height: 26px; cursor: pointer; text-decoration: none; }
#article-view .moreless-content :first-child { margin-top: 0; margin-bottom: 0; }

/* 인용문 (에디터 스타일) */
#article-view blockquote { display: block; margin: 20px auto 0; letter-spacing: 0; }
#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; font-size: 1.12em; color: var(--ink); line-height: 1.7; border: 0; font-family: "Noto Serif KR", serif;
}
#article-view blockquote[data-ke-style='style2'] { border: 0; border-left: 3px solid var(--brand); padding: 1px 0 0 14px; color: var(--sub); line-height: 1.75; font-size: 1em; text-align: left; }
#article-view blockquote[data-ke-style='style3'] { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); text-align: left; padding: 20px 24px; color: var(--sub); font-size: 1em; line-height: 1.75; }

/* 이미지 */
#article-view span[data-lightbox] { cursor: pointer; }
#article-view figure { max-width: 100%; clear: both; }
#article-view figure img { display: inline-block; vertical-align: baseline; }
#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.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; border-radius: var(--radius-s); }
#article-view figure figcaption {
  font-size: 13px; color: var(--faint); word-break: break-word; padding-top: 10px; min-height: 20px;
  caption-side: bottom; text-align: center; caret-color: auto; width: 100%; box-sizing: content-box;
}
#article-view figure.imagegridblock { position: relative; caret-color: transparent; background: transparent; width: 100%; height: auto; margin: 20px 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; border-radius: 4px; }
#article-view figure.imagegridblock span img { width: 100%; }
#article-view figure.imagegridblock + figure.imagegridblock,
#article-view figure.imagegridblock + figure.imageblock,
#article-view figure.imageblock + figure.imagegridblock { margin-top: 10px; }

/* 구분선 (에디터 스타일) — 기존 keditor 리소스 유지 */
hr[data-ke-style], #article-view hr[data-ke-style] {
  border: none; font-size: 0; line-height: 0; margin: 20px auto;
  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/divider-line.svg);
  background-size: 200px 420px; cursor: default !important; display: block;
}
hr[data-ke-style='style1'], #article-view hr[data-ke-style='style1'] { background-position: center 0; width: 64px; height: 4px; padding: 20px; }
hr[data-ke-style='style2'], #article-view hr[data-ke-style='style2'] { background-position: center -48px; width: 64px; height: 3px; padding: 20px; }
hr[data-ke-style='style3'], #article-view hr[data-ke-style='style3'] { background-position: center -96px; width: 64px; height: 8px; padding: 18px 20px; }
hr[data-ke-style='style5'], #article-view hr[data-ke-style='style5'] { background-position: center -208px; background-repeat: repeat-x; height: 2px; padding: 21px 0; }
hr[data-ke-style='style6'], #article-view hr[data-ke-style='style6'] { background-position: center -256px; background-repeat: repeat-x; height: 2px; padding: 21px 0; }

/* 표 (에디터 기본) */
#article-view table { margin-bottom: 0; border-color: var(--line); }
#article-view table tbody tr { box-sizing: content-box; }
#article-view table td { word-break: break-word; padding: 10px 12px; font-size: 15px; line-height: 1.5; }
#article-view table[data-ke-style='style4'] tr:nth-child(2n) td,
#article-view table[data-ke-style='style12'] tr:nth-child(odd) td { background: var(--bg); }
#article-view table[data-ke-style='style8'] tr:first-child td { border-bottom: 2px solid var(--ink); }
#article-view table[data-ke-style='style8'] { border-left: 0; border-right: 0; }
#article-view table[data-ke-style='style8'] td { border-right-color: transparent; border-left-color: transparent; }

/* 파일/오픈그래프/비디오 첨부 */
#article-view figure.fileblock {
  width: 470px; max-width: 100%; height: 73px; box-sizing: border-box; position: relative; border-radius: var(--radius-s);
  margin-top: 20px; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--surface);
}
#article-view figure.fileblock a { display: block; text-decoration: none; }
#article-view figure.fileblock .image {
  float: left; width: 30px; height: 30px; margin: 22px 17px 21px 22px;
  background: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg') 0 0;
}
#article-view figure.fileblock .desc { position: absolute; left: 70px; right: 60px; top: 4px; bottom: 0; }
#article-view figure.fileblock .filename { color: var(--ink); font-size: 14px; text-overflow: ellipsis; width: 100%; height: 20px; margin: 16px 0 0; }
#article-view figure.fileblock .size { font-size: 12px; color: var(--faint); 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; }
#article-view figure.fileblock a::after {
  content: ''; background: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg') -40px 0;
  width: 30px; height: 30px; position: absolute; right: 24px; top: 19px;
}
#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: var(--shadow); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden;
  text-decoration: none; color: var(--ink); background: var(--surface);
}
#article-view figure[data-ke-type='opengraph'] a:hover { opacity: 1; box-shadow: var(--shadow-hover); }
#article-view figure[data-ke-type='opengraph'] div.og-image { border-right: 1px solid var(--line); 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(--ink); font-size: 20px; font-weight: 700; padding-bottom: 10px; max-width: 467px; text-overflow: ellipsis; white-space: nowrap; margin: 0; overflow: hidden; }
#article-view figure[data-ke-type='opengraph'] .og-desc {
  margin: 0; max-width: 467px; text-overflow: ellipsis; overflow: hidden; font-size: 14px; color: var(--faint);
  max-height: 42px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;
}
#article-view figure[data-ke-type='video'] { display: block; table-layout: fixed; justify-content: center; align-items: center; position: relative; text-align: center; color: var(--faint); font-size: 16px; line-height: 30px; }
#article-view figure[data-ke-type='video'][data-ke-style='alignCenter'] { margin: 20px auto 0; text-align: center; }
#article-view figure[data-ke-type='video'] img { display: block; max-width: 100%; margin: 0 auto; }
#article-view figure[data-ke-type='video'][data-video-host] iframe { margin: 0; display: block; }
#article-view figure[data-ke-type='video'] > iframe[width='0'][height='0'] { width: 860px; height: 484px; max-width: 100%; }
#article-view figure[data-ke-type=emoticon][data-ke-align=alignCenter] { text-align: center; }
#article-view figure[data-ke-type=emoticon][data-ke-align=alignLeft] { text-align: left; }
#article-view figure[data-ke-type=emoticon][data-ke-align=alignRight] { text-align: right; }
#article-view figure[data-ke-type='map'], #article-view iframe[data-ke-type='map'] { display: block; margin: 0 auto; }

/* 코드 블럭 */
#article-view pre code.hljs {
  font-size: 14px; padding: 20px; font-family: "SF Mono", Menlo, Consolas, Monaco, monospace;
  border: 1px solid var(--line); border-radius: var(--radius-s); line-height: 1.7; overflow: auto;
}

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

/* 이미지 슬라이드 */
#article-view figure.imageslideblock { clear: both; position: relative; font-size: 0; outline: 0; }
#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: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto; border-radius: var(--radius-s);
}
#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: -30px; }
#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 .btn span {
  display: inline-block; width: 14px; height: 14px; border-top: 2px solid #fff; border-left: 2px solid #fff;
  opacity: 0; transition: opacity .2s; text-indent: -10000px; overflow: hidden;
}
#article-view figure.imageslideblock div.image-container:hover .btn span { opacity: .5; }
#article-view figure.imageslideblock div.image-container .btn:hover span { opacity: 1; }
#article-view figure.imageslideblock div.image-container .btn .ico-prev { transform: rotate(-45deg); }
#article-view figure.imageslideblock div.image-container .btn .ico-next { transform: rotate(135deg); }
#article-view figure.imageslideblock div.mark { display: block; height: 44px; text-align: center; opacity: 0; transition: opacity .2s; }
#article-view figure.imageslideblock div.mark span { width: 26px; height: 3px; border-radius: 3px; display: inline-block; margin: 20px 2px; background: var(--line); text-indent: -10000px; overflow: hidden; cursor: pointer; }
#article-view figure.imageslideblock div.mark span:first-child { background: var(--ink); margin-left: 0; }
#article-view figure.imageslideblock figcaption { text-align: center; color: var(--faint); font-size: 14px; }
#article-view figure.imageslideblock.alignCenter { margin: 0 auto 20px; text-align: center; }

/* ============================================================
   .ai-post — n8n 자동 발행 글 테마 (카테고리 × 변형)
   ============================================================ */
.t-tech-a   { --p-ink:#161b22; --p-sub:#4b5563; --p-paper:#f7f9fc; --accent:#1d4ed8; --accent-soft:#dbe6fd; --p-rule:#dde3ec; }
.t-tech-b   { --p-ink:#161b22; --p-sub:#4b5563; --p-paper:#f7f9fc; --accent:#6d28d9; --accent-soft:#eae2fb; --p-rule:#dde3ec; }
.t-tech-c   { --p-ink:#161b22; --p-sub:#4b5563; --p-paper:#f7f9fc; --accent:#0369a1; --accent-soft:#d7ecf9; --p-rule:#dde3ec; }
.t-health-a { --p-ink:#163832; --p-sub:#4b6b63; --p-paper:#f4faf8; --accent:#0f766e; --accent-soft:#d9f2ec; --p-rule:#dbe8e4; }
.t-health-b { --p-ink:#163832; --p-sub:#4b6b63; --p-paper:#f4faf8; --accent:#15803d; --accent-soft:#dcf2e1; --p-rule:#dbe8e4; }
.t-health-c { --p-ink:#163832; --p-sub:#4b6b63; --p-paper:#f4faf8; --accent:#0e7490; --accent-soft:#d6eef4; --p-rule:#dbe8e4; }
.t-life-a   { --p-ink:#2b2116; --p-sub:#6b5b45; --p-paper:#faf6ec; --accent:#8a5a2b; --accent-soft:#f0e2c8; --p-rule:#e6d9bd; }
.t-life-b   { --p-ink:#2b2116; --p-sub:#6b5b45; --p-paper:#faf6ec; --accent:#b4552d; --accent-soft:#f6e3d7; --p-rule:#e6d9bd; }
.t-life-c   { --p-ink:#2b2116; --p-sub:#6b5b45; --p-paper:#faf6ec; --accent:#6d7c2f; --accent-soft:#e9eed2; --p-rule:#e6d9bd; }
.t-default-a{ --p-ink:#1c1a17; --p-sub:#55504a; --p-paper:#fdfbf7; --accent:#a11d1d; --accent-soft:#f4e4e0; --p-rule:#e4ded3; }
.t-default-b{ --p-ink:#1c1a17; --p-sub:#55504a; --p-paper:#fdfbf7; --accent:#9d174d; --accent-soft:#f7e1ea; --p-rule:#e4ded3; }

.ai-post {
  background: var(--p-paper); color: var(--p-ink);
  font-size: 17px; line-height: 1.85;
  padding: 48px 32px 56px; border-radius: var(--radius); border: 1px solid var(--p-rule);
}
.ai-post p { margin: 0 0 18px; }
.ai-post ul, .ai-post ol { margin: 0 0 20px; padding-left: 22px; }
.ai-post li { margin-bottom: 10px; }
.ai-post .lede { font-size: 18px; color: var(--p-sub); border-left: 3px solid var(--accent); padding-left: 18px; margin: 8px 0 40px; }
.ai-post h2 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; margin: 52px 0 18px; padding-top: 24px; border-top: 1px solid var(--p-rule); }
.ai-post h3 { font-size: 17px; font-weight: 700; color: var(--accent); margin: 28px 0 10px; }
.ai-post strong { background: var(--accent-soft); padding: 0 3px; }
.ai-post table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 15.5px; background: #fff; border: 1px solid var(--p-rule); border-radius: 8px; overflow: hidden; }
.ai-post th, .ai-post td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--p-rule); }
.ai-post th { background-color: var(--accent-soft); color: var(--accent); font-weight: 700; }
.ai-post tr:last-child td { border-bottom: none; }
.ai-post blockquote { margin: 24px 0; padding: 14px 20px; background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 6px; }
.ai-post figure { margin: 36px 0 8px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, .06); }
.ai-post figure img { width: 100%; display: block; border: none; }
.ai-post .pic-credit { text-align: right; font-size: 11px; color: #8a8a8a; margin: 0 4px 32px; }
.ai-post .pic-credit a { color: #8a8a8a; text-decoration: none; }

/* ============================================================
   변형 레이아웃 / 다크 (간소 지원)
   ============================================================ */
/* 세로형(layout-float): 좌측 고정 사이드 */
.layout-float #wrap { padding-left: 240px; }
.layout-float #header {
  float: left; position: fixed; top: 0; left: 0; z-index: 200; width: 240px; height: 100%;
  border-bottom: 0; border-right: 1px solid var(--line); background: var(--surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.layout-float #header h1 { float: none; padding: 60px 0 40px; text-align: center; }
.layout-float #gnb { float: none; padding: 0 32px; }
.layout-float #gnb ul li { float: none; padding: 0; border-bottom: 1px solid var(--line); text-align: center; }
.layout-float #gnb ul li a { padding: 12px 0; border-radius: 0; }
.layout-float #content { max-width: 900px; padding: 60px 0 0 60px; }
.layout-float #aside { padding-left: 60px; }
.layout-float #aside .inner { max-width: 900px; margin: 0; }
.layout-float #footer .copyright { max-width: 900px; padding-left: 60px; }

/* 다크 타입 */
.color-dark {
  --bg: #131110; --surface: #1c1917; --ink: #ece7e0; --sub: #a49c92;
  --faint: #6f675e; --line: #2c2825; --brand: #c99b6f; --brand-ink: #dfb890; --brand-soft: #2a2119;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 32px rgba(0, 0, 0, .45);
}
.color-dark #header { background: rgba(19, 17, 16, .82); }
.color-dark .pagination .selected { background: var(--brand); color: #131110; }
.color-dark .btn:hover { background: var(--brand); border-color: var(--brand); color: #131110; }
.color-dark #article-view { color: var(--ink); }
.color-dark #gnb { background: transparent; }

/* ============================================================
   반응형
   ============================================================ */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  /* 스프라이트 미사용: 레티나 별도 처리 불필요 */
}

@media screen and (max-width: 1199px) {
  #aside .inner, .cover-thumbnail-list-1, .cover-special-contents, .cover-thumbnail-list-2, .related-articles { padding-left: 34px; padding-right: 34px; }
  .cover-special-contents ul li .excerpt { -webkit-line-clamp: 3; }
  .entry-content img.alignleft, .entry-content img.alignright { max-width: 50%; }
  .layout-float #content { padding: 60px 34px 0; }
  .layout-float #aside { padding-left: 34px; padding-right: 34px; }
}

@media screen and (max-width: 1023px) {
  #header h1 { float: none; padding: 16px 50px 16px 0; }
  #header .mobile-menu {
    display: block; position: absolute; top: 50%; right: 16px; width: 44px; height: 44px; margin-top: -22px;
    text-indent: -999em; overflow: visible; outline: none;
  }
  #header .mobile-menu span, #header .mobile-menu:before, #header .mobile-menu:after {
    position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; margin-left: -9px;
    border-radius: 2px; background: var(--ink); transition: transform .3s;
  }
  #header .mobile-menu span { margin-top: -1px; text-indent: 0; overflow: hidden; color: transparent; }
  #header .mobile-menu:before { content: ""; margin-top: -8px; }
  #header .mobile-menu:after { content: ""; margin-top: 6px; }
  #header .mobile-menu.on { position: fixed; top: 12px; right: 16px; margin-top: 0; z-index: 610; }
  #header .mobile-menu.on span { display: none; }
  #header .mobile-menu.on:before { margin-top: -1px; transform: rotate(45deg); }
  #header .mobile-menu.on:after { margin-top: -1px; transform: rotate(-45deg); }
  #gnb {
    position: fixed; top: 0; right: -300px; z-index: 600; width: 300px; height: 100%;
    padding-top: 68px; background: var(--surface); box-sizing: border-box;
    box-shadow: -8px 0 32px rgba(0, 0, 0, .12); transition: right .3s;
  }
  #gnb ul { overflow-y: auto; height: 100%; }
  #gnb ul li { float: none; padding: 0; border-top: 1px solid var(--line); font-size: 1.0625em; }
  #gnb ul li a { padding: 16px 28px; border-radius: 0; color: var(--ink); }
  #gnb ul li a:hover { background: var(--brand-soft); }
  #gnb.on { right: 0; }
  #aside { margin-top: 80px; }
  #aside .sidebar-1, #aside .sidebar-2 { width: 50%; padding: 0 10px; margin: 0; }
  #aside .sidebar-3 { clear: both; float: none; width: auto; padding: 0; }
  #aside .search { float: left; width: 50%; padding-right: 10px; box-sizing: border-box; }
  #aside .count { float: right; width: 50%; padding-left: 10px; box-sizing: border-box; }
  .cover-slider { margin-bottom: 48px; padding-bottom: 46%; }
  .cover-slider ul li .text-box .title { font-size: 2em; }
  .hgroup h1 { font-size: 1.625em; }
  .post-header:first-child { margin-top: 44px; }
  .layout-float #wrap { padding-left: 200px; }
  .layout-float #header { width: 200px; }
  .layout-float #header .mobile-menu { display: none; }
  .layout-float #gnb { position: relative; width: auto; top: auto; right: auto; padding: 0 24px; box-shadow: none; }
}

@media screen and (max-width: 767px) {
  :root { --radius: 12px; }
  #header .inner { padding: 0 16px; }
  #content .inner, .pagination, .entry-content, .hgroup, .tags, .comments, .post-btn, .another-category, .post-header { padding-left: 20px; padding-right: 20px; }
  .pagination { margin: 20px auto 64px; }
  .cover-thumbnail-list-1, .cover-thumbnail-list-2, .related-articles { padding-left: 20px; padding-right: 20px; }
  .cover-special-contents { padding: 0 20px; }
  #gnb { padding-top: 60px; }
  #aside { padding: 40px 0; }
  #aside .sidebar-1, #aside .sidebar-2, #aside .sidebar-3, #aside .search, #aside .count { float: none; width: auto; padding: 0; }
  .cover-slider { padding-bottom: 72%; }
  .cover-slider .prev, .cover-slider .next { width: 36px; height: 36px; margin-top: -18px; }
  .cover-slider .prev { left: 10px; }
  .cover-slider .next { right: 10px; }
  .cover-slider ul li .text-box .title { margin-bottom: 24px; font-size: 1.5em; }
  .cover-thumbnail-list-1 h2 { float: none; width: auto; margin-bottom: 20px; text-align: left; }
  .cover-thumbnail-list-1 h2 br { display: none; }
  .cover-thumbnail-list-1 h2:after { margin: 18px 0 0; }
  .cover-thumbnail-list-1 ul { float: none; width: auto; }
  .cover-thumbnail-list-1 ul li { float: none; width: auto; margin-bottom: 16px; padding: 0; }
  .cover-special-contents ul li, .cover-special-contents ul li:nth-child(even) { width: auto; margin-bottom: 56px; padding: 0; }
  .cover-special-contents ul li .thum, .cover-special-contents ul li:nth-child(even) .thum { float: none; width: auto; margin: 0 0 20px; }
  .cover-special-contents ul li .box { position: relative; left: auto; top: auto; width: 100%; margin: 0; transform: none; }
  .cover-special-contents ul li .excerpt { padding: 0; }
  .cover-wide-panel .bg { height: 160px; }
  .cover-wide-panel .box { margin: -40px 12px 0; padding: 28px 24px; }
  .cover-wide-panel p { padding: 0; }
  .cover-thumbnail-list-2 ul { margin-left: -10px; }
  .cover-thumbnail-list-2 ul li { width: 50%; margin-bottom: 12px; padding-left: 10px; }
  .post-item { float: none; width: auto; margin: 0 !important; padding: 20px 0 24px; }
  .post-type-thumbnail .post-item { border-bottom: none; }
  .post-type-text .post-item .thum { width: 100px; height: 100px; margin-left: 20px; }
  .hgroup { padding-top: 44px; padding-bottom: 22px; margin-bottom: 32px; }
  .hgroup h1 { font-size: 1.375em; }
  .hgroup.guest { margin-bottom: 25px; }
  #content .tags.section { padding: 0 20px; }
  .entry-content h2 { font-size: 1.25em; }
  .entry-content .table-wrap { overflow: auto; width: 100%; }
  .entry-content table { min-width: 560px; table-layout: fixed; font-size: .8125em; }
  .entry-content img.alignleft, .entry-content img.alignright { max-width: 100%; }
  .related-articles ul { margin-left: -10px; }
  .related-articles ul li { width: 50%; margin-bottom: 10px; padding-left: 10px; }
  .comments { margin-bottom: 20px; }
  .comments .comment-list { margin-bottom: 10px; border-top: 1px solid var(--line); }
  .comments .comment-list ul li { padding-bottom: 0; }
  .comments .comment-list ul li ul { border-top: 1px solid var(--line); }
  .comments .comment-list ul li ul li { padding: 20px 0 0 44px; }
  .comments .comment-list ul li .author-meta, .comments .comment-list ul li ul li .author-meta { position: relative; top: 0; left: 0; }
  .comments .comment-list ul li .author-meta img { position: absolute; top: 0; left: 0; }
  .comments .comment-list ul li .author-meta .nickname, .comments .comment-list ul li .author-meta .date { display: block; float: none; line-height: 1.5; }
  .comments .comment-list ul li .author-meta .date { margin: 2px 0 0; }
  .comments .comment-list ul li p { margin: 14px 0 0; }
  .comments .comment-list ul li .control { position: relative; top: auto; right: auto; display: block; margin: 9px 0 18px -2px; }
  .comments .comment-form .field { width: auto; margin: 0; padding-right: 80px; }
  .comments .comment-form .field .secret { float: none; position: absolute; bottom: 10px; right: 0; }
  .comments .comment-form .field .secret label { line-height: 20px; }
  .comments .comment-form input[type=text], .comments .comment-form input[type=password] { display: block; width: 100%; margin-bottom: 10px; }
  .comments.guest { margin-bottom: 20px; padding: 0 20px; }
  .pagination a { margin: 0 2px; }
  .ai-post { padding: 32px 18px 40px; border-radius: 10px; }
  .layout-float #wrap { padding: 0; }
  .layout-float #header { float: none; position: sticky; z-index: 300; width: 100%; height: auto; padding: 0 16px; border-bottom: 1px solid var(--line); border-right: 0; box-sizing: border-box; }
  .layout-float #header h1 { float: none; padding: 16px 0; text-align: left; }
  .layout-float #header .mobile-menu { display: block; }
  .layout-float #gnb { position: fixed; top: 0; right: -300px; z-index: 600; width: 300px; height: 100%; padding: 60px 0 0; background: var(--surface); box-sizing: border-box; transition: right .3s; }
  .layout-float #gnb.on { right: 0; }
  .layout-float #gnb ul li { float: none; padding: 0; border-top: 1px solid var(--line); border-bottom: none; font-size: 1.0625em; text-align: left; }
  .layout-float #gnb ul li a { padding: 16px 28px; }
  .layout-float #content { padding: 0; }
  .layout-float #aside { padding: 40px 16px; }
}