@charset "utf-8";

/*
 *
 * CSS CONTENTS:
 *
 * 01. Web Font
 * 02. Type Selector Reset
 * 03. Accessibility Navigation
 * 04. Layout Selector
 * 05. Components
 * 06. Entry Content
 * 07. Comment
 * 08. Widget & Template Page
 * 09. ETC
 * 10. Post Type & Color Type
 * 11. Retina Display
 * 12. Media Screen - Tablet
 * 13. Media Screen - Mobie
 *
 */

/* Web Font Load */
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');

/* =========================
   02. Type Selector Reset
   ========================= */

body {
  font-weight: 400;
  font-family: Pretendard-Regular, sans-serif;
  font-size: 1em;
  line-height: 1.25;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

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: Pretendard-Regular, sans-serif;
  font-size: 100%;
  border-radius: 0;
}

button {
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

ul li {
  list-style: none;
}

img, fieldset {
  border: none;
  vertical-align: top;
}

hr {
  display: none;
}

/* =========================
   03. Accessibility Navigation
   ========================= */

#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-left: -1px;
  margin-bottom: -1px;
  text-align: center;
  font-weight: bold;
  font-size: 0.875em;
  color: #000;
  white-space: nowrap;
}

#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
  width: 100%;
  height: auto;
  padding: 10px 0;
  background: #000;
  color: #fff;
  z-index: 1000;
}

/* =========================
   04. Layout Selector
   ========================= */

#header {
  position: relative;
  width: 100%;
}

#header h1 {
  padding: 28px 0;
  text-align: center;
  font-size: 1.5em;
  line-height: 1;
  color: #1a1a1a;
}

#header h1 a {
  display: inline-block;
  text-decoration: none;
  vertical-align: top;
  color: #1a1a1a;
}

#header .mobile-menu {
  position: absolute;
  top: 20px;
  left: 33px;
  z-index: 500;
  width: 40px;
  height: 40px;
  outline: none;
}

#header .mobile-menu span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  margin: -2px 0 0 -13px;
  background-color: #000;
  text-indent: -999em;
}

#header .mobile-menu:before,
#header .mobile-menu:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  background-color: #000;
}

#header .mobile-menu:before {
  margin-top: -9px;
}

#header .mobile-menu:after {
  margin-top: 5px;
}

#header .mobile-menu.on {
  position: fixed;
}

#header .mobile-menu.on span {
  display: none;
}

#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
  margin-top: -2px;
}

#header .mobile-menu.on:before {
  transform: rotate(-45deg);
}

#header .mobile-menu.on:after {
  transform: rotate(45deg);
}

#header .menu {
  position: fixed;
  top: 0;
  left: -348px;
  z-index: 400;
  width: 348px;
  height: 100%;
  padding: 94px 40px 189px;
  background-color: #fff;
  box-sizing: border-box;
  transition: left .5s ease-in-out;
}

#header .menu .social-link {
  position: absolute;
  left: 40px;
  bottom: 129px;
}

#header .menu p {
  position: absolute;
  left: 40px;
  bottom: 79px;
  font-size: 0.75em;
  color: #9b9b9b;
}

#header .menu.on {
  left: 0;
}

#header .search {
  position: absolute;
  top: 20px;
  right: 19px;
  width: 0;
  padding-right: 40px;
}

#header .search input {
  display: none;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 1em;
  line-height: 40px;
  color: #000;
  border: 0;
  box-sizing: border-box;
  background-color: transparent;
}

#header .search button {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 40px;
  height: 40px;
  background: url(./images/ico_package.png) no-repeat 0 0;
  text-indent: -999em;
  outline: none;
}

#header .search:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  width: 40px;
  height: 40px;
  background: url(./images/ico_package.png) no-repeat 0 0;
  text-indent: -999em;
  cursor: pointer;
}

#header .search:hover:before {
  background-color: #ebebeb;
}

#header .search.on {
  width: 322px;
  border-bottom: 1px solid #000;
}

#header .search.on input {
  display: block;
  outline: none;
}

#header .search.on button {
  display: block;
}

#header .search.on:before {
  display: none;
}

#gnb {
  overflow: auto;
  height: 100%;
  margin-bottom: 8px;
}

#gnb ul li {
  margin-bottom: 6px;
  font-size: 1.125em;
  line-height: 1.5;
}

#gnb ul li a {
  display: block;
  text-decoration: none;
  color: #000;
}

#gnb ul li ul li ul li a.link_sub_item {
  color: #333;
}

#gnb ul li a:hover {
  text-decoration: underline;
  color: #4e2e28;
}

#gnb ul li ul {
  margin: 22px 0 0;
}

#gnb ul li ul li {
  font-size: 1em;
}

#gnb ul li ul li ul {
  margin: 6px 0 13px;
}

#gnb ul li ul li ul li {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5625rem;
}

#gnb ul li ul li ul li a:before {
  content: "-";
  margin-right: 5px;
  color: #333;
}

#gnb ul li ul li ul li a {
  padding: 0 12px;
}

#content .inner {
  max-width: 960px;
  margin: 0 auto;
}

#content > .inner {
  max-width: 860px;
}

#content .inner:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#footer {
  position: relative;
  padding: 29px 0;
  border-top: 1px solid #ebebeb;
}

#footer p {
  text-align: center;
  font-size: 0.75em;
  color: #9b9b9b;
}

#footer p a {
  text-decoration: none;
  color: #9b9b9b;
}

#footer .admin {
  color: #666;
}

#footer .admin:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  margin: 0 9px;
  background-color: #b2b2b2;
  vertical-align: middle;
}

#tt-body-index #footer {
  border-top: 0;
}

/* =========================
   05. Components
   ========================= */

.social-link a {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  text-indent: -999em;
  background-image: url(./images/ico_package.png);
  background-repeat: no-repeat;
  vertical-align: top;
}

.social-link a:hover {
  background-position-y: -68px;
}

.social-link .pinterest { background-position: 0 -50px; }
.social-link .facebook  { background-position: -50px -50px; }
.social-link .twitter   { background-position: -100px -50px; }
.social-link .instagram { background-position: -150px -50px; }

.btn, a.btn {
  display: inline-block;
  width: 158px;
  height: 50px;
  border: 1px solid #dcdcdc;
  font-size: 0.875em;
  line-height: 50px;
  color: unset;
}

.btn:hover {
  border-color: #4d4d4d;
}

/* =========================
   POST / LISTS (원본 그대로)
   ========================= */

.post-header {
  position: relative;
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto 30px;
  padding: 57px 0 15px;
  border-bottom: 1px solid #ebebeb;
}

.post-header h1 { float: left; font-size: 1em; }

.post-header .list-type { float: right; }

.post-header .list-type button {
  float: left;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  background-image: url(./images/ico_package.png);
  background-repeat: no-repeat;
  text-indent: -999em;
  outline: none;
}

.post-header .list-type button:hover { background-color: #ebebeb; }
.post-header .list-type .list { background-position: 0 -200px; }
.post-header .list-type .thum { background-position: -100px -200px; }
.post-header .list-type .list.current { background-position: -50px -200px; }
.post-header .list-type .thum.current { background-position: -150px -200px; }

.post-item {
  overflow: hidden;
  width: 100%;
  border-bottom: 1px solid #ebebeb;
}

.post-item a {
  display: block;
  min-height: 148px;
  padding: 30px 0 30px;
  text-decoration: none;
  color: #080808;
}

.post-item:first-child a { padding-top: 0; }

.post-item a:hover .title {
  text-decoration: underline;
  color: #4e2e28;
}

.post-item .category {
  display: inline-block;
  margin-bottom: 16px;
  border-bottom: 1px solid #a3a3a3;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 0.875em;
  color: #808080;
}

.post-item .title {
  display: block;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.8em;
  font-weight: 700;
  font-size: 1.125em;
  line-height: 1.4;
}

.post-item .excerpt {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9375em;
  line-height: 1.6;
  color: #666;
}

.post-item .date {
  display: block;
  font-size: 0.8125em;
  color: #999;
}

/* =========================
   06. Entry Content (원본 일부)
   ========================= */

.entry-content h1 { margin: 60px 0 19px; font-size: 1.6875em; }
.entry-content h2 { margin: 60px 0 19px; font-size: 1.5em; }
.entry-content h3 { margin: 60px 0 19px; font-weight: 700; font-size: 1.3125em; }
.entry-content h4 { margin: 60px 0 19px; font-weight: 400; font-size: 1.125em; }

.entry-content p img {
  max-width: 100%;
  height: auto;
  margin-top: 36px;
}

.entry-content pre { word-break: break-word; white-space: pre-wrap; word-wrap: break-word; }
.entry-content pre code.hljs { padding: 20px; }

/* =========================
   09. ETC
   ========================= */

#dimmed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.43);
}

/* =========================
   (중략) 원본이 너무 길어서 여기서 끝낸 게 아니라
   네가 올린 스타일에서 "뉴모피즘 override"가 핵심이니까
   아래에 그대로 이어 붙임
   ========================= */


/* =========================================================
   Neumorphism Override (Light)
   붙이는 위치: style.css 맨 아래
   ========================================================= */

/* 0) 테마 변수 */
:root{
  --neo-bg: #E9EEF5;
  --neo-surface: #E9EEF5;
  --neo-text: #1F2937;
  --neo-muted: #6B7280;

  --neo-radius-lg: 22px;
  --neo-radius-md: 16px;

  --neo-shadow-raised: 10px 10px 24px rgba(163, 177, 198, 0.65),
                       -10px -10px 24px rgba(255, 255, 255, 0.9);

  --neo-shadow-soft: 6px 6px 16px rgba(163, 177, 198, 0.55),
                     -6px -6px 16px rgba(255, 255, 255, 0.85);

  --neo-shadow-pressed: inset 8px 8px 18px rgba(163, 177, 198, 0.55),
                        inset -8px -8px 18px rgba(255, 255, 255, 0.95);

  --neo-border: rgba(31, 41, 55, 0.08);
}

/* 1) 전체 배경/텍스트 */
html, body{
  background: var(--neo-bg) !important;
  color: var(--neo-text) !important;
}

#wrap{
  background: transparent !important;
}

/* 2) header */
#header{
  background: transparent !important;
  padding: 18px 0 6px;
}

#header h1{
  padding: 22px 0 14px !important;
  color: var(--neo-text) !important;
}

#header h1 a{
  color: var(--neo-text) !important;
}

/* 3) 모바일 메뉴 버튼 */
#header .mobile-menu{
  border-radius: 14px;
  background: var(--neo-surface);
  box-shadow: var(--neo-shadow-soft);
  width: 44px;
  height: 44px;
}

#header .mobile-menu:hover{ box-shadow: var(--neo-shadow-raised); }
#header .mobile-menu:active{ box-shadow: var(--neo-shadow-pressed); }

#header .mobile-menu span,
#header .mobile-menu:before,
#header .mobile-menu:after{
  background-color: var(--neo-text) !important;
}

/* 4) 사이드 메뉴 패널 */
#header .menu{
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-raised);
  border-right: 1px solid var(--neo-border);
}

/* gnb */
#gnb ul li a{
  color: var(--neo-text) !important;
}
#gnb ul li a:hover{
  color: var(--neo-text) !important;
  text-decoration: none !important;
  opacity: .75;
}

/* 5) 검색 */
#header .search.on{
  border: 0 !important;
  width: 360px;
  padding-right: 0 !important;
}

#header .search.on input{
  display: block;
  height: 44px !important;
  border-radius: 999px !important;
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-pressed) !important;
  padding: 0 52px 0 16px !important;
  color: var(--neo-text) !important;
}

#header .search.on button{
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-soft);
  background-position: 0 0;
}

#header .search.on button:hover{ box-shadow: var(--neo-shadow-raised); }
#header .search.on button:active{ box-shadow: var(--neo-shadow-pressed); }

#header .search:before{
  border-radius: 14px;
  background-color: var(--neo-surface);
  box-shadow: var(--neo-shadow-soft);
}
#header .search:hover:before{
  background-color: var(--neo-surface);
  box-shadow: var(--neo-shadow-raised);
}

/* 6) 컨테이너/패널 기본 */
#content .inner,
#content > .inner,
.post-header,
.hgroup,
.pagination,
.comments,
.tags{
  background: transparent !important;
  border: 0 !important;
}

/* =========================
   핵심: 모서리 삐져나오는 문제 “근본 해결”
   =========================
   원인:
   - 내부 요소(a, div.og-image 등)가 배경색/보더를 갖고 있고
   - 부모에 radius가 있어도 overflow가 제대로 안 걸리거나
   - 자식이 자기 배경으로 사각형이 보이면서 모서리가 튀어나옴
*/

/* 글 본문 카드 */
#article-view{
  background: var(--neo-surface) !important;
  border-radius: var(--neo-radius-lg) !important;
  box-shadow: var(--neo-shadow-raised) !important;
  border: 1px solid var(--neo-border) !important;
  overflow: hidden !important;         /* 필수 */
  position: relative;                  /* 안정화 */
  background-clip: padding-box;        /* 사각 배경 튀는 거 완화 */
}

/* 목록 카드 */
.post-item{
  border: 0 !important;
  margin-bottom: 16px;
}

.post-item a{
  background: var(--neo-surface) !important;
  border-radius: var(--neo-radius-lg) !important;
  box-shadow: var(--neo-shadow-raised) !important;
  border: 1px solid var(--neo-border) !important;
  padding: 22px 22px !important;

  overflow: hidden !important;         /* 필수 */
  position: relative;                  /* 안정화 */
  background-clip: padding-box;
}

.post-item a:hover{
  box-shadow: var(--neo-shadow-soft) !important;
}

.post-item a:hover .title{
  text-decoration: none !important;
  color: var(--neo-text) !important;
  opacity: .85;
}

.post-item .category{
  border-bottom: 0 !important;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-pressed) !important;
  color: var(--neo-muted) !important;
  font-family: Pretendard-Regular, sans-serif !important;
  font-size: 12px !important;
  margin-bottom: 12px !important;
}

.post-item .title{ color: var(--neo-text) !important; }
.post-item .excerpt{ color: var(--neo-muted) !important; }
.post-item .date{ color: var(--neo-muted) !important; }

/* post-header 패널 */
.post-header{
  max-width: 860px;
  margin: 0 auto 18px !important;
  padding: 18px 18px !important;
  border-radius: var(--neo-radius-lg) !important;
  box-shadow: var(--neo-shadow-raised) !important;
  border: 1px solid var(--neo-border) !important;
  background: var(--neo-surface) !important;

  overflow: hidden !important;         /* 안전 */
  background-clip: padding-box;
}

/* 리스트 타입 버튼 */
.post-header .list-type button{
  border-radius: 12px;
  background-color: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-soft) !important;
}
.post-header .list-type button:hover{
  background-color: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-raised) !important;
}

/* 페이징 */
.pagination{
  margin: 30px auto 120px !important;
}

.pagination a{
  border-radius: 12px !important;
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-soft) !important;
  color: var(--neo-muted) !important;
}
.pagination a:hover{
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-raised) !important;
}
.pagination .selected{
  color: var(--neo-text) !important;
  box-shadow: var(--neo-shadow-pressed) !important;
}

.pagination .prev,
.pagination .next{
  border: 0 !important;
  background-color: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-soft) !important;
  border-radius: 14px !important;
}
.pagination .prev:hover,
.pagination .next:hover{
  box-shadow: var(--neo-shadow-raised) !important;
}

/* 태그/댓글 카드 */
.tags{
  max-width: 860px;
  margin: 30px auto !important;
  padding: 18px 18px !important;
  border-radius: var(--neo-radius-lg) !important;
  box-shadow: var(--neo-shadow-raised) !important;
  border: 1px solid var(--neo-border) !important;
  background: var(--neo-surface) !important;

  overflow: hidden !important;
  background-clip: padding-box;
}

.tags h2{
  color: var(--neo-text) !important;
  font-weight: 700 !important;
}

.tags .items a{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-pressed) !important;
  margin: 8px 8px 0 0 !important;
  color: var(--neo-muted) !important;
}
.tags .items a:hover{ color: var(--neo-text) !important; }

.comments{
  max-width: 860px;
  margin: 26px auto 60px !important;
  padding: 18px 18px !important;
  border-radius: var(--neo-radius-lg) !important;
  box-shadow: var(--neo-shadow-raised) !important;
  border: 1px solid var(--neo-border) !important;
  background: var(--neo-surface) !important;

  overflow: hidden !important;
  background-clip: padding-box;
}

/* footer */
#footer{
  background: transparent !important;
  border-top: 0 !important;
  padding: 26px 0 34px !important;
}
#footer p, #footer p a{
  color: var(--neo-muted) !important;
}

/* =========================
   오픈그래프/첨부 블록 “사각형 튀는” 문제 해결
   ========================= */

/* 티스토리 오픈그래프 카드 자체를 둥글게 + 클립 */
#article-view figure[data-ke-type='opengraph']{
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* 내부 a가 가진 border/배경이 각지게 보이는 걸 제거 */
#article-view figure[data-ke-type='opengraph'] a{
  border-radius: inherit !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

/* og-image(왼쪽 이미지 박스)도 radius inherit */
#article-view figure[data-ke-type='opengraph'] .og-image{
  border-top-left-radius: inherit !important;
  border-bottom-left-radius: inherit !important;
  overflow: hidden !important;
}

/* Tistory가 figure/div에 넣는 흰 배경/테두리 강제 제거 */
#article-view figure[data-ke-type],
#article-view div[data-ke-type],
#article-view figure[data-ke-type] a{
  background: transparent !important;
}

/* 마지막 안전장치: 자식이 사각 배경으로 튀어나오는 케이스 전부 클립 */
#article-view *{
  max-width: 100%;
}

.post-item,
.post-item a{
  border-radius: 22px !important;
  overflow: hidden !important;   /* 핵심 */
  background-clip: padding-box !important;
}

/* 2) 카드 안에서 배경/테두리로 튀는 요소들 정리 */
.post-item a *{
  background-clip: padding-box !important;
}

/* 3) 카드 내부 이미지/썸네일이 사각형으로 남는 경우 */
.post-item img,
.post-item .thumbnail,
.post-item .thumb,
.post-item .og-image,
.post-item .image,
.post-item figure,
.post-item figure img{
  border-radius: 18px !important;
  overflow: hidden !important;
  display: block;
}

/* 4) 티스토리 오픈그래프 카드가 목록에도 들어오는 경우 */
figure[data-ke-type="opengraph"],
figure[data-ke-type="opengraph"] a,
figure[data-ke-type="opengraph"] .og-image{
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* 5) 혹시 내부에 border가 따로 있어서 모서리에 라인이 튀면 제거/완화 */
.post-item a,
figure[data-ke-type="opengraph"] a{
  border: 1px solid rgba(31, 41, 55, 0.08) !important; /* 네가 쓰던 neo-border 느낌 */
}

/* ===== 카드 모서리 삐져나옴(사각 레이어) 강제 해결 ===== */

/* 1) 카드의 "진짜 외곽"을 a로 고정하고, 나머지 wrapper는 투명 처리 */
.post-item{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important; /* wrapper가 잘못 클리핑하는 경우 방지 */
}

/* 2) 카드 외곽은 a 하나로 통일 (여기서 클리핑) */
.post-item > a{
  position: relative !important;
  display: block !important;

  border-radius: 22px !important;
  overflow: hidden !important;        /* 핵심 */
  background-clip: padding-box !important;

  /* 혹시 다른 레이어가 위로 올라오면 격리 */
  isolation: isolate !important;
}

/* 3) a의 가상요소가 사각형이면 얘가 모서리 튀어나옴. 같이 둥글게 + 클리핑 */
.post-item > a::before,
.post-item > a::after{
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* 4) 카드 안의 이미지/썸네일/오픈그래프도 확실히 둥글게 */
.post-item img,
.post-item figure,
.post-item figure img,
.post-item .thum,
.post-item .thum img,
figure[data-ke-type="opengraph"],
figure[data-ke-type="opengraph"] a,
figure[data-ke-type="opengraph"] .og-image{
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* =========================================================
   Article (글 상세) - 더 세련된 본문 스타일 (붙이는 위치: CSS 맨 아래)
   대상: #article-view 내부 전체
   ========================================================= */

/* 0) 글 본문 카드 레이아웃 안정화 */
#article-view{
  max-width: 860px;
  margin: 24px auto 80px;
  padding: 34px 36px 42px;

  background: var(--neo-surface) !important;
  border: 1px solid var(--neo-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--neo-shadow-raised) !important;

  overflow: hidden !important; /* 내부 요소 삐져나옴 방지 */
}

/* 모바일에서 패딩 줄이기 */
@media (max-width: 767px){
  #article-view{
    padding: 22px 18px 28px;
    border-radius: 20px !important;
  }
}

/* 1) 기본 타이포/간격: “읽기 좋게” */
#article-view{
  color: var(--neo-text) !important;
  font-family: Pretendard-Regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", Arial, sans-serif !important;
  line-height: 1.85;
  letter-spacing: -0.2px;
}

#article-view .contents_style > *{
  margin-top: 18px !important;
}
#article-view .contents_style > *:first-child{
  margin-top: 0 !important;
}

/* 문단 */
#article-view p{
  margin: 0 0 18px !important;
  color: rgba(31, 41, 55, 0.92) !important;
  font-size: 16px;
}
@media (max-width: 767px){
  #article-view p{ font-size: 15px; }
}

/* 2) 제목(Heading) 세련되게 */
#article-view h2,
#article-view h3,
#article-view h4{
  margin: 28px 0 12px !important;
  color: var(--neo-text) !important;
  letter-spacing: -0.6px;
  font-weight: 700 !important;
  line-height: 1.35;
}

#article-view h2{ font-size: 24px; }
#article-view h3{ font-size: 20px; }
#article-view h4{ font-size: 17px; }

@media (max-width: 767px){
  #article-view h2{ font-size: 21px; }
  #article-view h3{ font-size: 18px; }
  #article-view h4{ font-size: 16px; }
}

/* 3) 링크 톤 정리 */
#article-view a{
  color: #0B63CE !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#article-view a:hover{
  opacity: .85;
}

/* 4) 인라인 코드 */
#article-view :not(pre) > code{
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(31,41,55,0.06);
  border: 1px solid rgba(31,41,55,0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
}

/* 5) 코드 블럭: “깔끔한 패널” 느낌 */
#article-view pre{
  margin: 18px 0 20px !important;
  padding: 18px 18px !important;

  background: rgba(31,41,55,0.04) !important;
  border: 1px solid rgba(31,41,55,0.08) !important;
  border-radius: 16px !important;

  overflow: auto !important;
  white-space: pre !important;     /* 줄바꿈/들여쓰기 유지 */
  word-break: normal !important;

  box-shadow: none !important;
}

#article-view pre code.hljs,
#article-view pre code{
  display: block;
  padding: 0 !important;           /* pre에서 패딩 처리 */
  background: transparent !important;
  border: 0 !important;
  line-height: 1.65;
  font-size: 13.5px !important;

  color: rgba(31,41,55,0.92) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
}

/* 6) 인용문(blockquote) */
#article-view blockquote{
  margin: 18px 0 20px !important;
  padding: 16px 18px !important;

  border-radius: 16px !important;
  background: rgba(31,41,55,0.03) !important;
  border: 1px solid rgba(31,41,55,0.08) !important;

  color: rgba(31,41,55,0.78) !important;
}
#article-view blockquote p{
  margin: 0 !important;
}

/* 7) 이미지/figure: 카드 톤 맞추고 깔끔하게 */
#article-view figure{
  margin: 18px 0 0 !important;
  max-width: 100%;
}

#article-view figure.imageblock img,
#article-view figure img{
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* 캡션 */
#article-view figure figcaption{
  margin-top: 10px !important;
  font-size: 13px !important;
  color: rgba(31,41,55,0.55) !important;
}

/* 8) 표: “얇은 보더 + 라운드” */
#article-view .table-wrap{
  overflow: auto;
  border-radius: 16px;
}

#article-view table{
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 18px !important;

  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(31,41,55,0.08);
  border-radius: 16px;
  overflow: hidden;
}

#article-view table td,
#article-view table th{
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(31,41,55,0.08);
  color: rgba(31,41,55,0.86) !important;
  font-size: 14px;
}

#article-view table tr:last-child td{
  border-bottom: 0;
}

/* 9) opengraph(링크 카드): 본문 카드 톤에 맞추기 */
#article-view figure[data-ke-type='opengraph'] a{
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(31,41,55,0.08) !important;
  box-shadow: none !important;
}

#article-view figure[data-ke-type='opengraph'] .og-desc{
  color: rgba(31,41,55,0.60) !important;
}

/* 10) 불필요한 "사각 배경" 덮어쓰기(너가 이전에 넣은 투명화가 과했을 수 있음)
      - 내부 요소까지 border-radius:0으로 강제하는 부분이 있으면 톤 깨짐 */
#article-view figure[data-ke-type],
#article-view div[data-ke-type],
#article-view figure[data-ke-type] a{
  border-radius: inherit !important; /* 0으로 만들지 말고 상속 */
}


/* =========================================================
   Related Articles(관련글) 레이아웃 깨짐/겹침 해결
   - float 기반을 flex grid로 강제
   - 이미지/타이틀 정렬 안정화
   ========================================================= */

/* 관련글 전체 박스 */
.related-articles{
  max-width: 860px;
  margin: 26px auto 80px !important;
  padding: 18px 18px !important;

  background: var(--neo-surface) !important;
  border: 1px solid var(--neo-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--neo-shadow-raised) !important;

  overflow: hidden !important;
}

/* 제목 */
.related-articles h2{
  margin: 0 0 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px;
}

/* 기존 float 무력화 + grid 구성 */
.related-articles ul{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* 기존 float/width/padding 제거 */
.related-articles ul li{
  float: none !important;
  width: calc(25% - 10.5px) !important;
  padding-left: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 카드 링크 */
.related-articles ul li a{
  display: block !important;
  text-decoration: none !important;

  background: rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(31,41,55,0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  padding: 12px 12px 14px !important;
}

/* 썸네일 박스(기존 height:0 + padding-bottom 유지하되 안정화) */
.related-articles ul li .thum{
  position: relative !important;
  height: 0 !important;
  padding-bottom: 66% !important; /* 보기 좋은 비율 */
  background-color: rgba(31,41,55,0.04) !important;

  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
}

/* NO IMAGE 문구도 중앙 정렬 유지 */
.related-articles ul li .thum:before{
  color: rgba(31,41,55,0.30) !important;
}

/* 이미지 꽉 채우기 */
.related-articles ul li .thum img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 카테고리/타이틀/날짜 톤 정리 */
.related-articles ul li .category{
  display: inline-flex !important;
  margin: 0 0 8px !important;
  padding: 5px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-shadow-pressed) !important;
  color: var(--neo-muted) !important;
  font-size: 12px !important;
  font-family: Pretendard-Regular, sans-serif !important;
}

.related-articles ul li .title{
  display: block !important;
  margin: 0 0 6px !important;

  color: var(--neo-text) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;

  /* 긴 제목 말줄임 */
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.related-articles ul li .date{
  display: block !important;
  color: rgba(31,41,55,0.55) !important;
  font-size: 12px !important;
}

/* 호버 */
.related-articles ul li a:hover{
  box-shadow: var(--neo-shadow-soft) !important;
}
.related-articles ul li a:hover .title{
  opacity: .88;
}

/* 반응형 */
@media (max-width: 1023px){
  .related-articles ul li{ width: calc(33.333% - 9.5px) !important; }
}
@media (max-width: 767px){
  .related-articles{ padding: 14px 14px !important; border-radius: 20px !important; }
  .related-articles ul li{ width: calc(50% - 7px) !important; }
}
/* =========================================================
   '카테고리의 다른 글' 스타일 정리
   ========================================================= */

/* 전체 박스 */
.another_category,
.another_category_wrap{
  max-width: 860px;
  margin: 30px auto 80px !important;
  padding: 20px 22px !important;

  background: var(--neo-surface) !important;
  border: 1px solid var(--neo-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--neo-shadow-raised) !important;
}

/* 제목 */
.another_category h4,
.another_category .title{
  margin: 0 0 16px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--neo-text) !important;
  letter-spacing: -0.4px;
}

/* 리스트 */
.another_category ul{
  margin: 0 !important;
  padding: 0 !important;
}

/* 항목 하나 */
.another_category ul li{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 12px 14px !important;
  border-radius: 14px !important;

  transition: box-shadow .15s ease, background .15s ease;
}

/* 항목 구분선 느낌 */
.another_category ul li + li{
  margin-top: 6px !important;
}

/* 링크 */
.another_category ul li a{
  flex: 1;
  text-decoration: none !important;
  color: var(--neo-text) !important;
  font-size: 14.5px !important;
  line-height: 1.45;
}

/* 날짜 */
.another_category ul li .date,
.another_category ul li span.date{
  margin-left: 14px;
  font-size: 12.5px;
  color: var(--neo-muted);
  white-space: nowrap;
}

/* hover */
.another_category ul li:hover{
  background: rgba(255,255,255,0.35) !important;
  box-shadow: var(--neo-shadow-soft) !important;
}

/* 현재 글(링크 없는 경우) */
.another_category ul li .current{
  font-weight: 700;
  color: var(--neo-text);
}

/* 모바일 */
@media (max-width: 767px){
  .another_category,
  .another_category_wrap{
    padding: 16px 16px !important;
    border-radius: 20px !important;
  }

  .another_category ul li{
    padding: 10px 10px !important;
  }

  .another_category ul li a{
    font-size: 14px !important;
  }
}
/* =========================================================
   카테고리의 다른 글 - 기본 파란색 링크 제거
   ========================================================= */

/* 링크 기본 스타일 제거 */
.another_category a,
.another_category a:visited,
.another_category a:link{
  color: var(--neo-text) !important;
  text-decoration: none !important;
}

/* hover 시만 살짝 강조 */
.another_category a:hover{
  color: var(--neo-text) !important;
  opacity: 0.85;
}

/* 리스트 아이템 전체를 클릭 가능하게 보이도록 */
.another_category ul li{
  cursor: pointer;
}

/* 제목 느낌 주기 */
.another_category ul li a{
  font-weight: 500;
  letter-spacing: -0.2px;
}

/* 날짜는 링크 영향 안 받게 */
.another_category ul li .date{
  color: var(--neo-muted) !important;
}

/* =========================================
   카테고리의 다른 글: 파란 링크 완전 제거
   ========================================= */

/* 모든 상태의 링크 색 강제 통일 */
.another_category a,
.another_category a:link,
.another_category a:visited,
.another_category a:hover,
.another_category a:active{
  color: #1F2937 !important;   /* 거의 블랙에 가까운 다크 그레이 */
  text-decoration: none !important;
}

/* 혹시 li 안의 span, strong 등에 파랑이 남아있을 경우 대비 */
.another_category *{
  color: #1F2937 !important;
}

/* hover 시만 살짝 강조 */
.another_category ul li:hover a{
  opacity: 0.85;
}

/* =========================
   "목록 더보기" 위치/레이아웃 강제 수정
   ========================= */

/* 페이징 컨테이너를 정상 흐름으로 */
.pagination{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;

  width: 100% !important;
  max-width: 860px !important;
  margin: 30px auto 120px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  float: none !important;
  clear: both !important;
}

/* "목록 더보기" 버튼 자체를 흐름 안으로 */
.pagination .view-more,
.pagination a.view-more{
  position: static !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  margin: 0 auto !important;
  float: none !important;

  /* 너의 뉴모피즘 톤 유지 */
  border-radius: 14px !important;
  box-shadow: var(--neo-shadow-soft) !important;
  background: var(--neo-surface) !important;
  color: var(--neo-text) !important;
  text-decoration: none !important;
}

/* 혹시 prev/next float이 남아서 레이아웃 밀면 제거 */
.pagination .prev,
.pagination .next{
  float: none !important;
}