@charset "UTF-8";

/* ========================================
   MODERN DEV BLOG THEME FOR TISTORY
   - Dark UI
   - Card based layout
   - Developer friendly typography
======================================== */

:root {
  --bg: #0b1020;
  --bg-elev: #121a2b;
  --bg-soft: #182235;
  --bg-code: #0a0f1d;
  --line: #24324a;
  --line-soft: #1d2940;

  --text: #e5edf7;
  --text-strong: #ffffff;
  --text-muted: #98a6bd;
  --text-faint: #70819d;

  --primary: #7c8cff;
  --primary-hover: #96a2ff;
  --accent: #38bdf8;
  --success: #34d399;
  --danger: #fb7185;
  --warning: #f59e0b;

  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.24);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --content-width: 760px;
  --layout-width: 1240px;
  --sidebar-width: 320px;
  --header-height: 76px;
}

/* ========================================
   RESET / BASE
======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(124, 140, 255, 0.08), transparent 30%),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.06), transparent 22%),
    var(--bg);
  color: var(--text);
  font-family:
    "Pretendard",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: 1.6;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  outline: none;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

pre,
code,
kbd,
samp {
  font-family:
    "JetBrains Mono",
    "Fira Code",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
}

.blind,
.screen_out {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}

.display-none {
  display: none !important;
}

/* ========================================
   GLOBAL LAYOUT
======================================== */
#wrap {
  position: relative;
  overflow: hidden;
}

#container {
  position: relative;
  z-index: 1;
}

.main {
  width: 100%;
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 40px 24px 100px;
}

.wrap-right .main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: 36px;
  align-items: start;
}

.wrap-drawer .main {
  max-width: calc(var(--content-width) + 48px);
}

.area-main {
  min-width: 0;
}

.wrap-right .area-main {
  max-width: none;
}

.wrap-drawer .area-main {
  max-width: var(--content-width);
  margin: 0 auto;
}

.area-common,
.area-view,
.area-tag {
  min-width: 0;
}

/* ========================================
   HEADER
======================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(11, 16, 32, 0.72);
  border-bottom: 1px solid rgba(36, 50, 74, 0.7);
}

.header .line-bottom {
  display: none !important;
}

.header .inner-header {
  position: relative;
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 24px;
}

.header .box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: 24px;
}

.header .title-logo {
  margin: 0;
  flex: 0 0 auto;
}

.header .link_logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header .link_logo img {
  max-height: 28px;
  width: auto;
  object-fit: contain;
}

.header .area-align {
  display: flex;
  flex-direction: column;
}

.header .area-slogun {
  padding: 6px 0 28px;
}

.header .area-slogun strong {
  display: block;
  margin: 0 0 10px;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-strong);
  word-break: keep-all;
}

.header .area-slogun p {
  max-width: 680px;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
  word-break: keep-all;
}

.header .area-gnb {
  position: relative;
  padding: 0 0 14px;
}

.header .area-gnb nav > ul,
.header .tt_category .category_list,
.header .topnavmenu > ul {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.header .area-gnb nav > ul::-webkit-scrollbar,
.header .tt_category .category_list::-webkit-scrollbar,
.header .topnavmenu > ul::-webkit-scrollbar {
  display: none;
}

.header .tt_category .link_tit {
  display: none;
}

.header .tt_category li,
.header .topnavmenu > ul > li {
  flex: 0 0 auto;
}

.header .tt_category .category_list .link_item,
.header .topnavmenu > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted) !important;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.header .tt_category .category_list .link_item:hover,
.header .topnavmenu > ul > li > a:hover,
.header .tt_category .category_list .link_item:focus,
.header .topnavmenu > ul > li > a:focus {
  color: var(--text-strong) !important;
  background: rgba(124, 140, 255, 0.12);
  border-color: rgba(124, 140, 255, 0.22);
}

.header .tt_category .category_list .c_cnt {
  display: none;
}

.header .tt_category .sub_category_list {
  display: none;
}

.header .button-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
}

.header .button-menu svg path {
  fill: var(--text);
}

/* ========================================
   SEARCH
======================================== */
.util {
  flex: 0 0 auto;
}

.util .search {
  position: relative;
  width: 280px;
}

.util .search input,
.area-aside .box-search .inp-search {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    var(--bg-elev)
    url("./images/icon-search.svg")
    no-repeat 16px center;
  color: var(--text);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.util .search input::placeholder,
.area-aside .box-search .inp-search::placeholder {
  color: var(--text-faint);
}

.util .search input:focus,
.area-aside .box-search .inp-search:focus {
  border-color: rgba(124, 140, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(124, 140, 255, 0.12);
}

.util.use-sidebar {
  display: none;
}

/* ========================================
   HERO / BANNER
======================================== */
.area-promotion,
.category-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  background-color: var(--bg-soft);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-md);
}

.area-promotion::before,
.category-banner::before,
.article-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11, 16, 32, 0.88), rgba(11, 16, 32, 0.28));
}

.area-promotion .inner-promotion,
.category-banner .category-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: 40px;
}

.area-promotion .box-promotion strong,
.category-banner .category-description-box strong {
  display: block;
  max-width: 760px;
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.04em;
  color: #fff;
  word-break: keep-all;
}

.area-promotion .link-promotion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 10px 24px rgba(124, 140, 255, 0.28);
}

.area-promotion .link-promotion:hover {
  background: var(--primary-hover) !important;
}

/* ========================================
   PAGE TITLES
======================================== */
.title-search,
.area-cover .title-cover,
.notice-title {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.title-search.title-border {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.title-search span {
  color: var(--primary);
}

/* ========================================
   ARTICLE LIST COMMON
======================================== */
.box-article {
  display: grid;
  gap: 18px;
}

.article-type-common {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--bg-elev);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.article-type-common:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 140, 255, 0.38);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

.article-type-common .link-article {
  display: block;
}

.article-type-common .thumbnail {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(124,140,255,0.12), rgba(56,189,248,0.08)),
    var(--bg-soft);
  background-size: cover;
  background-position: center;
}

.article-type-common .thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,16,32,0.22), transparent 45%);
  opacity: 0.8;
}

.article-type-common .img-thumbnail {
  display: none;
}

.article-type-common .article-content {
  padding: 22px 22px 20px;
}

.article-type-common .title {
  display: block;
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  word-break: keep-all;
}

.article-type-common .summary {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  overflow: hidden;
}

.article-type-common .box-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-faint);
}

.article-type-common .link-category {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(124, 140, 255, 0.12);
  color: var(--primary);
  font-weight: 700;
}

.article-type-common .date,
.article-type-common .reply {
  color: var(--text-faint);
}

.article-type-common .reply {
  padding-left: 0;
  background: none;
}

.article-type-common .reply::before,
.article-type-common .date::before {
  display: none;
}

/* ========================================
   ARTICLE LIST TYPES
======================================== */
.article-type-thumbnail,
.article-type- {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0;
}

.article-type-thumbnail .thumbnail,
.article-type- .thumbnail {
  min-height: 100%;
  height: 100%;
}

.article-type-thumbnail .article-content,
.article-type- .article-content {
  padding: 22px;
}

.article-type-thumbnail .summary,
.article-type- .summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.article-type-crop .thumbnail {
  aspect-ratio: 16 / 9;
}

.article-type-crop .summary,
.article-type-resize .summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.article-type-resize .thumbnail {
  padding-top: 0;
  aspect-ratio: 16 / 9;
}

.article-type-resize .img-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-type-poster {
  overflow: hidden;
}

.article-type-poster .thumbnail {
  aspect-ratio: 4 / 5.2;
}

.article-type-poster .title {
  font-size: 17px;
}

.article-type-poster .summary,
.article-type-poster .link-category,
.article-type-poster .reply {
  display: none;
}

.article-type-text .thumbnail,
.article-type-text .summary,
.article-type-text .link-category,
.article-type-text .reply {
  display: none;
}

.article-type-text .article-content {
  padding: 18px 20px;
}

.article-type-text .title {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* cover poster */
.box-cover-poster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  white-space: normal;
  overflow: visible;
}

/* cover spacing */
.area-cover {
  margin-bottom: 48px;
}

.area-cover:last-of-type {
  margin-bottom: 0;
}

.area-cover .button-more {
  display: none;
}

.box-cover-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.box-cover-title .link-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

/* ========================================
   DETAIL HEADER
======================================== */
.article-header {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  margin-bottom: 28px;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(124,140,255,0.18), rgba(56,189,248,0.08)),
    var(--bg-soft);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-md);
}

.article-header .inner-header {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  min-height: 320px;
  padding: 36px;
}

.article-header .box-meta {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 32px;
  max-width: 760px;
}

.article-header .category {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 14px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(8px);
}

.article-header .title-article {
  margin: 0 0 18px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #fff;
  word-break: keep-all;
}

.article-header .box-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
}

.article-header .box-info .date::before {
  display: none;
}

/* ========================================
   ARTICLE VIEW
======================================== */
#article-view.article-view,
.area-view > .article-view {
  position: relative;
  overflow: hidden;
  margin-bottom: 36px;
  padding: 34px 34px 36px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--bg-elev);
  box-shadow: var(--shadow-sm);
}

.article-view {
  word-break: break-word;
}

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

.article-view > *:last-child {
  margin-bottom: 0 !important;
}

.article-view p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
}

.article-view h1,
.article-view h2,
.article-view h3,
.article-view h4 {
  margin: 40px 0 16px;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  word-break: keep-all;
}

.article-view h1 {
  font-size: 34px;
  line-height: 1.24;
  font-weight: 900;
}

.article-view h2 {
  font-size: 28px;
  line-height: 1.28;
  font-weight: 800;
}

.article-view h3 {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
}

.article-view h4 {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
}

.article-view blockquote {
  margin: 24px 0;
  padding: 16px 18px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: rgba(56, 189, 248, 0.07);
  color: #cfe8ff;
  font-size: 15px;
  line-height: 1.85;
}

.article-view ul,
.article-view ol {
  margin: 18px 0 22px 22px;
}

.article-view ul li,
.article-view ol li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

.article-view hr {
  margin: 34px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.article-view a {
  color: #8ab4ff;
  text-decoration: underline;
  text-decoration-color: rgba(138, 180, 255, 0.38);
  text-underline-offset: 3px;
}

.article-view a:hover {
  color: #bdd3ff;
}

.article-view img {
  display: block;
  height: auto;
  max-width: 100% !important;
  margin: 24px auto;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.article-view iframe {
  max-width: 100%;
  border-radius: 16px;
}

/* tables */
.article-view .table-overflow {
  overflow-x: auto;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.article-view table {
  width: 100%;
  min-width: 560px;
  background: transparent;
}

.article-view table thead tr {
  background: rgba(124, 140, 255, 0.08);
}

.article-view table th,
.article-view table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  text-align: left;
}

.article-view table th {
  color: var(--text-strong);
  font-weight: 700;
}

.article-view table td {
  color: var(--text-muted);
}

/* code */
.article-view pre {
  overflow-x: auto;
  margin: 22px 0;
  padding: 18px 20px;
  border: 1px solid #1d2940;
  border-radius: 16px;
  background: var(--bg-code);
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.75;
}

.article-view code {
  padding: 2px 7px;
  border: 1px solid rgba(124, 140, 255, 0.16);
  border-radius: 8px;
  background: rgba(124, 140, 255, 0.1);
  color: #c7d2fe;
  font-size: 0.92em;
}

.article-view pre code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.article-view .cap1 {
  font-size: 13px;
  color: var(--text-faint);
}

.article-view .another_category {
  margin: 28px 0 0 !important;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.article-view .another_category table,
.article-view .another_category table * {
  border: none;
}

/* moreless */
.article-view .moreless_top,
.article-view .moreless_bottom {
  border-color: var(--line);
}

.article-view .moreless_fold span,
.article-view .moreless_top span {
  font-size: 15px;
  color: var(--text);
}

.article-view .moreless_content {
  padding-top: 18px;
}

.article-view .footnotes li,
.article-view .footnote a {
  color: var(--text-faint) !important;
}

/* ========================================
   ARTICLE FOOTER
======================================== */
.article-footer .title-footer {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

/* tag */
.article-tag {
  display: block;
  margin-bottom: 28px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-elev);
}

.article-tag .title-footer {
  margin-bottom: 14px;
}

.article-tag .box-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.article-tag .box-tag a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 13px;
  color: var(--text-muted);
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.article-tag .box-tag a:hover {
  color: var(--primary);
  border-color: rgba(124, 140, 255, 0.35);
  transform: translateY(-1px);
}

.article-tag .box-tag a::after {
  display: none;
}

/* prev/next */
.article-page {
  margin-bottom: 28px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-elev);
}

.article-page ul {
  margin: 0;
}

.article-page ul li {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-muted);
}

.article-page ul li:last-child {
  margin-bottom: 0;
}

.article-page ul li span {
  display: inline-block;
  min-width: 56px;
  margin-right: 10px;
  color: var(--text-faint);
  font-weight: 700;
}

.article-page ul li a,
.article-page ul li strong {
  color: var(--text);
}

.article-page ul li a:hover {
  color: var(--primary);
}

.article-page ul li:nth-child(2)::after {
  display: none;
}

/* related */
.article-related {
  margin-bottom: 28px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-elev);
}

.article-related .title-footer {
  margin-bottom: 14px;
}

.article-related .list-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  overflow: visible;
}

.article-related .item-related {
  width: auto;
  min-width: 0;
}

.article-related .item-related:last-child {
  display: block;
}

.article-related .link-related {
  display: block;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-soft);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}

.article-related .link-related:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 140, 255, 0.35);
}

.article-related .thumnail {
  display: block;
  aspect-ratio: 16 / 10;
  height: auto;
  margin: 0;
  background-size: cover;
  background-position: center;
}

.article-related .box_content {
  padding: 14px;
}

.article-related .link-related strong {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

.article-related .date {
  font-size: 12px;
  color: var(--text-faint);
}

/* ========================================
   COMMENTS / GUESTBOOK
======================================== */
.article-reply {
  width: 100%;
  margin-bottom: 24px;
}

.area-reply {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-elev);
}

.area-reply .item-reply {
  position: relative;
  display: flex;
  gap: 14px;
  width: 100%;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line-soft);
}

.area-reply .item-reply:last-child {
  border-bottom: 0;
}

.area-reply .thumbnail {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin-right: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-size: cover;
  background-position: center;
}

.area-reply .box-content {
  width: 100%;
  min-width: 0;
}

.area-reply .box-content .box-meta {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-faint);
}

.area-reply .box-content .box-meta strong a {
  font-weight: 700;
  color: var(--text);
}

.area-reply .box-content .box-meta .date,
.area-reply .box-content .box-meta .date a {
  padding-left: 0;
  color: var(--text-faint);
}

.area-reply .box-content .box-meta .date::before,
.area-reply .box-content .box-meta .date a::before {
  display: none;
}

.area-reply .box-content .text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
}

.area-reply .box-content .link-comment {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

.area-reply .box-content .box-modify {
  top: 20px;
  right: 18px;
}

.area-reply .box-content .button-modify {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    var(--bg-soft)
    url("./images/icon-modify.svg")
    no-repeat center;
  background-size: 14px;
}

.area-reply .box-content .list-modify {
  top: 38px;
  left: auto;
  right: 0;
  width: 96px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}

.area-reply .box-content .list-modify li {
  border-bottom: 1px solid var(--line-soft);
}

.area-reply .box-content .list-modify li:last-child {
  border-bottom: 0;
}

.area-reply .box-content .list-modify a {
  background: transparent;
  color: var(--text);
}

.area-reply .list-reply-comment {
  width: auto;
  margin: 0;
  padding: 0 0 0 56px;
  background: rgba(124, 140, 255, 0.04);
  border-top: 1px solid var(--line-soft);
  border-bottom: 0;
}

.area-reply .list-reply-comment .item-reply {
  padding-top: 20px;
  padding-bottom: 20px;
}

.area-reply .list-reply-comment .box-modify {
  right: 18px;
}

/* write form */
.area-write {
  margin-top: 0;
  padding: 24px;
  border-top: 1px solid var(--line-soft);
}

.area-write .box-account,
.area-write .box-homepage,
.area-write .box-textarea {
  margin-bottom: 12px;
}

.area-write .box-account {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.area-write .box-account input,
.area-write .box-homepage input,
.area-write .box-textarea textarea,
.area-protected input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--text);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.area-write .box-account input,
.area-write .box-homepage input,
.area-protected input {
  height: 46px;
  padding: 0 14px;
}

.area-write .box-textarea textarea {
  min-height: 150px;
  padding: 14px;
  resize: vertical;
}

.area-write .box-account input:focus,
.area-write .box-homepage input:focus,
.area-write .box-textarea textarea:focus,
.area-protected input:focus {
  border-color: rgba(124, 140, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(124, 140, 255, 0.12);
}

.area-write .box-write {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.area-write .box-write .xe-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-top: 0;
}

.area-write .box-write .xe-label > input[type="checkbox"] + .xe-input-helper {
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
}

.area-write .box-write .xe-label > input[type="checkbox"]:checked + .xe-input-helper {
  background: var(--primary);
  border-color: transparent;
}

.area-write .box-write .xe-label .xe-label-text {
  padding: 0 0 0 28px;
  font-size: 13px;
  color: var(--text-muted);
}

.area-write .box-write .btn_register,
.area-protected button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), #6f7dff);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(124, 140, 255, 0.24);
}

.area-write .box-write .btn_register:hover,
.area-protected button:hover {
  filter: brightness(1.08);
}

/* protected */
.area-protected {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 0;
  text-align: center;
}

.area-protected .text-protected {
  margin: 0 0 20px;
  padding-top: 92px;
  background: url("./images/icon-exclamation.svg") no-repeat center top;
  background-size: 72px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-strong);
}

.area-protected .text-protected span {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-muted);
}

.area-protected .box-protected {
  display: flex;
  gap: 10px;
}

.article-header-protected {
  background:
    linear-gradient(135deg, rgba(251,113,133,0.18), rgba(124,140,255,0.12)),
    var(--bg-soft) !important;
}

.article-header-protected .inner-header {
  display: flex;
  align-items: flex-end;
}

.article-header-protected .info_text {
  position: relative;
  z-index: 1;
  padding: 0 0 8px;
}

.article-header-protected .title_post {
  display: block;
  margin-bottom: 12px;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
}

.article-header-protected .info {
  margin: 0;
  color: rgba(255,255,255,0.82);
}

/* ========================================
   TAG PAGE
======================================== */
.area-tag {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg-elev);
  min-height: auto;
}

.area-tag .box-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.area-tag .box-tag a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 14px;
  color: var(--text-muted);
}

.area-tag .box-tag a:hover {
  color: var(--primary);
  border-color: rgba(124, 140, 255, 0.35);
}

/* ========================================
   SIDEBAR
======================================== */
.area-aside {
  position: sticky;
  top: calc(var(--header-height) + 22px);
  width: 100%;
  min-width: 0;
}

.area-aside > div,
.area-aside .box-profile,
.area-aside .box-category,
.area-aside .box-tag,
.area-aside .box-recent,
.area-aside .box-reply,
.area-aside .box-notice,
.area-aside .box-plugins,
.area-aside .box-archive,
.area-aside .box-calendar,
.area-aside .box-visit,
.area-aside .util.use-sidebar {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}

.area-aside .title-sidebar {
  display: block;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.area-aside .link-sidebar {
  display: block;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-muted);
}

.area-aside .link-sidebar:hover {
  color: var(--primary);
}

/* profile */
.area-aside .box-profile {
  overflow: hidden;
  text-align: center;
}

.area-aside .box-profile .img-profile {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border: 2px solid rgba(124, 140, 255, 0.34);
  border-radius: 999px;
  object-fit: cover;
}

.area-aside .box-profile .tit-g {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-strong);
}

.area-aside .box-profile .text-profile {
  max-width: none;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  word-break: keep-all;
}

.area-aside .box-profile .button-subscription,
.area-aside .profile-btn-group .btn-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 38px;
  padding: 0 14px;
  margin: 0 4px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.area-aside .box-profile .box-sns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 0;
}

.area-aside .box-profile .link-sns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}

.area-aside .box-profile .link-sns .svg path {
  fill: var(--text-muted) !important;
}

.area-aside .box-profile .link-sns:hover {
  border-color: rgba(124, 140, 255, 0.35);
}

.area-aside .box-profile .link-sns:hover .svg path {
  fill: var(--primary) !important;
}

.area-aside .box-profile-invert {
  position: relative;
  background-size: cover;
  background-position: center;
}

.area-aside .box-profile-invert::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,16,32,0.92), rgba(11,16,32,0.45));
}

.area-aside .box-profile-invert .inner-box {
  position: relative;
  z-index: 1;
}

.area-aside .box-profile-invert .text-profile,
.area-aside .box-profile-invert .tit-g {
  color: #fff;
}

/* category */
.area-aside .box-category .tt_category a {
  display: block;
}

.area-aside .box-category .tt_category .link_tit,
.area-aside .box-category .tt_category .category_list .link_item {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text);
}

.area-aside .box-category .tt_category .category_list .link_item:hover,
.area-aside .box-category .tt_category .link_tit:hover {
  color: var(--primary) !important;
  text-decoration: none;
}

.area-aside .box-category .tt_category .category_list .link_sub_item {
  display: block;
  position: relative;
  margin: 0 0 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.area-aside .box-category .tt_category .category_list .link_sub_item::before {
  content: "—";
  position: absolute;
  left: -14px;
  top: 0;
  color: var(--text-faint);
}

.area-aside .box-category .tt_category .c_cnt {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-faint);
}

/* tags */
.area-aside .box-tag .box_tag,
.area-aside .box-tag .box-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.area-aside .box-tag a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.area-aside .box-tag a:hover {
  color: var(--primary);
  border-color: rgba(124, 140, 255, 0.35);
}

/* recent / popular */
.area-aside .box-recent .tab-recent,
.area-aside .box-plugins .tab-sns {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
}

.area-aside .box-recent .tab-recent li,
.area-aside .box-plugins .tab-sns li {
  margin: 0;
}

.area-aside .box-recent .tab-recent li::before,
.area-aside .box-plugins .tab-sns li::before {
  display: none !important;
}

.area-aside .box-recent .tab-recent li a,
.area-aside .box-plugins .tab-sns li a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.area-aside .box-recent .tab-recent li.on a,
.area-aside .box-plugins .tab-sns li.on a {
  background: rgba(124, 140, 255, 0.16);
  color: var(--primary);
}

.area-aside .box-recent .list-recent li {
  margin-bottom: 12px;
}

.area-aside .box-recent .list-recent li:last-child {
  margin-bottom: 0;
}

.area-aside .box-recent .list-recent .link-recent {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.area-aside .box-recent .list-recent .thumbnail {
  width: 64px;
  height: 64px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-size: cover;
  background-position: center;
}

.area-aside .box-recent .list-recent .box-recent {
  width: auto;
  margin-top: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.area-aside .box-recent .list-recent .box-recent strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text);
}

.area-aside .box-recent .list-recent .box-recent span {
  color: var(--text-faint);
  font-size: 12px;
}

/* archive / reply / notice */
.box-reply .list-sidebar li,
.box-notice .list-sidebar li,
.box-archive .list-sidebar li {
  margin-bottom: 10px;
}

.box-reply .list-sidebar li:last-child,
.box-notice .list-sidebar li:last-child,
.box-archive .list-sidebar li:last-child {
  margin-bottom: 0;
}

.box-reply .link-sidebar strong {
  display: block;
  font-weight: 700;
  color: var(--text);
}

.box-reply .list-sidebar p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-faint);
}

/* calendar */
.area-aside .box-calendar .inner-calendar {
  padding: 0;
  border: 0;
  font-size: 13px;
}

.area-aside .box-calendar .inner-calendar table {
  width: 100%;
}

.area-aside .box-calendar .inner-calendar table caption a,
.area-aside .box-calendar .inner-calendar .cal_month a {
  color: var(--text);
  font-weight: 800;
}

.area-aside .box-calendar .inner-calendar table th,
.area-aside .box-calendar .inner-calendar table td {
  padding: 6px 0;
  color: var(--text-muted);
}

.box-calendar .cal_click {
  color: var(--primary);
}

/* visit */
.area-aside .box-visit .text-total {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text-strong);
}

.area-aside .box-visit .item-visit {
  font-size: 13px;
  color: var(--text-muted);
}

/* plugins */
.area-aside .box-plugins .plugin-facebook,
.area-aside .box-plugins .plugin-twitter {
  border-radius: 14px;
  overflow: hidden;
}

/* ========================================
   PAGING
======================================== */
.area-paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
}

.area-paging a {
  text-decoration: none;
}

.area-paging .link_page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  font-size: 20px;
  color: var(--text);
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
}

.area-paging .link_page:hover {
  color: var(--primary);
  border-color: rgba(124, 140, 255, 0.35);
}

.area-paging .paging_num {
  display: flex;
  align-items: center;
  gap: 8px;
}

.area-paging .link_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.area-paging .link_num span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.area-paging .link_num:hover span {
  color: var(--primary);
  border-color: rgba(124, 140, 255, 0.35);
  background: rgba(124, 140, 255, 0.08);
}

.area-paging .selected {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--primary), #6f7dff) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(124, 140, 255, 0.22);
}

.area-paging .paging_slash {
  display: none;
}

.area-paging .link_page.no-more-prev,
.area-paging .link_page.no-more-next {
  opacity: 0.3;
  pointer-events: none;
  display: inline-flex;
}

.area-paging-more {
  position: relative;
  margin-top: 16px;
}

.paging-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.paging-more:hover {
  border-color: rgba(124, 140, 255, 0.35);
  color: var(--primary);
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.paging-more-loading {
  color: transparent;
  pointer-events: none;
}

.paging-more-loading::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--primary);
  animation: spinner 0.65s linear infinite;
}

/* ========================================
   EMPTY / SEARCH / 404
======================================== */
.box-no-search {
  display: none;
  padding: 22px 24px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: rgba(124, 140, 255, 0.04);
  color: var(--text-muted);
}

.box-no-search span {
  display: block;
  margin-bottom: 8px;
}

.box-no-search span:last-child {
  margin-bottom: 0;
}

#tt-body-search .type-search,
#tt-body-category .type-category,
#tt-body-tag .type-tag,
#tt-body-archive .type-archive {
  display: block;
}

.absent_post {
  display: none;
}

.notfoundpage .absent_post {
  display: block;
  padding: 16px 0 40px !important;
  font-size: 14px !important;
  line-height: 1.9;
  color: var(--text-muted) !important;
  background: none !important;
}

.notfoundpage .absent_post::before {
  content: "혹시 다른 글이지 않을까요?";
  display: block;
  height: auto;
  margin-bottom: 14px;
  padding-top: 94px;
  background: url("./images/icon-no-img.svg") no-repeat center top !important;
  background-size: 72px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--text-strong);
}

/* ========================================
   FOOTER
======================================== */
#footer {
  margin-top: 0;
  border-top: 1px solid var(--line);
  background: rgba(9, 13, 25, 0.72);
}

#footer .inner-footer {
  position: relative;
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 28px 24px 42px;
}

#footer .box-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 16px;
}

#footer .link-footer {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

#footer .link-footer:hover {
  color: var(--primary);
}

#footer .link-footer::before {
  display: none;
}

#footer .text-info,
#footer address {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-faint);
}

#footer address {
  font-style: normal;
}

#footer .box-site {
  position: absolute;
  top: 28px;
  right: 24px;
}

#footer .box-site button {
  position: relative;
  width: 148px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  font-size: 13px;
  color: var(--text);
  text-align: left;
}

#footer .box-site button::after {
  content: "⌄";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
}

#footer .box-site ul {
  position: absolute;
  right: 0;
  bottom: 46px;
  width: 220px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

#footer .box-site ul.on {
  opacity: 1;
  pointer-events: auto;
}

#footer .box-site ul li {
  padding: 0;
}

#footer .box-site ul li a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
}

#footer .box-site ul li a:hover {
  background: rgba(124, 140, 255, 0.08);
  color: var(--text);
}

/* ========================================
   BODY VARIANTS / TISTORY PAGES
======================================== */
#tt-body-index .main,
#tt-body-category .main,
#tt-body-search .main,
#tt-body-tag .main,
#tt-body-archive .main,
#tt-body-guestbook .main {
  padding-top: 34px;
}

#tt-body-page .area-promotion {
  display: none;
}

#tt-body-page .main {
  padding-top: 34px;
}

#tt-body-page .area-main,
#tt-body-tag .area-main,
#tt-body-category .area-main,
#tt-body-search .area-main,
#tt-body-archive .area-main {
  margin-top: 0;
}

#tt-body-page .area-slogun {
  display: none;
}

#tt-body-page.protected-view .article-header,
#tt-body-page.protected-view .area-paging,
#tt-body-page.protected-view .area-aside {
  display: none;
}

#tt-body-page.protected-view .area-main {
  max-width: 100%;
}

#tt-body-page.protected-view .article-view {
  margin-bottom: 120px;
}

/* category banner */
.use-category-banner .category-banner-wrp {
  display: block;
  margin-bottom: 28px;
}

.use-category-banner .category-banner {
  height: 280px;
}

.use-category-banner .category-banner .category-description-box {
  margin-top: 0;
}

/* no image / protected image */
.not-found-img .thumbnail {
  background-image: url("./images/no-image.jpg") !important;
  background-size: cover;
  background-position: center;
}

.protected-img .thumbnail {
  background:
    url("./images/icon-exclamation.svg") no-repeat center / 72px,
    rgba(255,255,255,0.03) !important;
}

/* ========================================
   RESPONSIVE
======================================== */
@media screen and (max-width: 1180px) {
  .main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .header .inner-header,
  #footer .inner-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .wrap-right .main {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
  }

  .article-related .list-related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .box-cover-poster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 1060px) {
  .header {
    position: sticky;
  }

  .header .inner-header {
    padding-top: 0;
  }

  .header .box-header {
    min-height: 68px;
  }

  .header .link_logo {
    max-width: 220px;
    font-size: 18px;
  }

  .header .area-slogun {
    padding-bottom: 18px;
  }

  .header .area-slogun strong {
    font-size: 30px;
  }

  .header .area-slogun p {
    font-size: 14px;
  }

  .header .area-gnb {
    padding-bottom: 12px;
  }

  .header .tt_category .category_list .link_item,
  .header .topnavmenu > ul > li > a {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .wrap-right .main,
  .wrap-drawer .main {
    display: block;
    max-width: none;
    padding-top: 28px;
    padding-bottom: 72px;
  }

  .area-aside {
    position: static;
    top: auto;
    margin-top: 24px;
  }

  .util.use-top {
    display: none;
  }

  .util.use-sidebar {
    display: block;
  }

  .util .search,
  .util.use-sidebar .search {
    width: 100%;
  }

  .article-header {
    min-height: 260px;
    border-radius: 20px;
  }

  .article-header .inner-header {
    min-height: 260px;
    padding: 26px;
  }

  .article-header .box-meta {
    left: 26px;
    right: 26px;
    bottom: 24px;
  }

  .article-header .title-article {
    font-size: 34px;
  }

  #article-view.article-view,
  .area-view > .article-view,
  .article-tag,
  .article-page,
  .article-related {
    padding: 24px;
  }

  .article-type-thumbnail,
  .article-type- {
    grid-template-columns: 1fr;
  }

  .article-type-thumbnail .thumbnail,
  .article-type- .thumbnail {
    aspect-ratio: 16 / 9;
  }

  .area-reply .list-reply-comment {
    padding-left: 36px;
  }

  #footer .box-site {
    position: static;
    margin-top: 18px;
  }

  #footer .box-site ul {
    right: auto;
    left: 0;
    bottom: 46px;
  }
}

@media screen and (max-width: 760px) {
  :root {
    --header-height: 68px;
  }

  .main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header .inner-header,
  #footer .inner-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header .box-header {
    gap: 12px;
  }

  .header .link_logo {
    max-width: 180px;
    font-size: 17px;
  }

  .header .area-slogun strong {
    font-size: 26px;
  }

  .header .area-slogun p {
    font-size: 13px;
    line-height: 1.7;
  }

  .article-type-common .article-content {
    padding: 18px 18px 16px;
  }

  .article-type-common .title {
    font-size: 18px;
  }

  .article-type-common .summary {
    font-size: 13px;
  }

  .article-header {
    min-height: 220px;
    margin-bottom: 20px;
    border-radius: 18px;
  }

  .article-header .inner-header {
    min-height: 220px;
    padding: 20px;
  }

  .article-header .box-meta {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }

  .article-header .category {
    min-height: 28px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 12px;
  }

  .article-header .title-article {
    margin-bottom: 12px;
    font-size: 26px;
    line-height: 1.18;
  }

  .article-header .box-info {
    font-size: 12px;
  }

  #article-view.article-view,
  .area-view > .article-view {
    padding: 20px 18px 24px;
    border-radius: 18px;
  }

  .article-view p,
  .article-view ul li,
  .article-view ol li {
    font-size: 15px;
  }

  .article-view h1 {
    font-size: 28px;
  }

  .article-view h2 {
    font-size: 24px;
  }

  .article-view h3 {
    font-size: 20px;
  }

  .article-view h4 {
    font-size: 17px;
  }

  .article-tag,
  .article-page,
  .article-related,
  .area-tag {
    padding: 18px;
    border-radius: 18px;
  }

  .article-related .list-related {
    grid-template-columns: 1fr;
  }

  .box-cover-poster {
    grid-template-columns: 1fr;
  }

  .area-write {
    padding: 18px;
  }

  .area-write .box-account {
    grid-template-columns: 1fr;
  }

  .area-write .box-write {
    flex-direction: column;
    align-items: stretch;
  }

  .area-write .box-write .btn_register {
    width: 100%;
  }

  .area-protected .box-protected {
    flex-direction: column;
  }

  .area-reply .item-reply {
    padding: 18px;
  }

  .area-reply .thumbnail {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .area-reply .list-reply-comment {
    padding-left: 18px;
  }

  .area-aside > div,
  .area-aside .box-profile,
  .area-aside .box-category,
  .area-aside .box-tag,
  .area-aside .box-recent,
  .area-aside .box-reply,
  .area-aside .box-notice,
  .area-aside .box-plugins,
  .area-aside .box-archive,
  .area-aside .box-calendar,
  .area-aside .box-visit,
  .area-aside .util.use-sidebar {
    padding: 16px;
    border-radius: 16px;
  }

  .area-paging {
    gap: 8px;
  }

  .area-paging .paging_num {
    gap: 6px;
  }

  .area-paging .link_page,
  .area-paging .link_num span {
    min-width: 38px;
    height: 38px;
  }

  #footer .inner-footer {
    padding-top: 22px;
    padding-bottom: 32px;
  }

  #footer .box-policy {
    gap: 8px 12px;
  }

  #footer .link-footer,
  #footer .text-info,
  #footer address {
    font-size: 12px;
  }

  
}

/* ========================================
   TISTORY SUBSCRIPTION BUTTON FIX
======================================== */
.area-aside .box-profile [class*="subscribe"],
.area-aside .box-profile [class*="subscription"],
.area-aside .box-profile [id*="subscribe"],
.area-aside .box-profile [id*="subscription"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.area-aside .box-profile [class*="subscribe"] a,
.area-aside .box-profile [class*="subscription"] a,
.area-aside .box-profile [id*="subscribe"] a,
.area-aside .box-profile [id*="subscription"] a,
.area-aside .box-profile [class*="subscribe"] button,
.area-aside .box-profile [class*="subscription"] button,
.area-aside .box-profile [id*="subscribe"] button,
.area-aside .box-profile [id*="subscription"] button,
.area-aside .box-profile > a[role="button"],
.area-aside .box-profile > button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--primary), #6f7dff) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(124, 140, 255, 0.22);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.area-aside .box-profile [class*="subscribe"] a:hover,
.area-aside .box-profile [class*="subscription"] a:hover,
.area-aside .box-profile [id*="subscribe"] a:hover,
.area-aside .box-profile [id*="subscription"] a:hover,
.area-aside .box-profile [class*="subscribe"] button:hover,
.area-aside .box-profile [class*="subscription"] button:hover,
.area-aside .box-profile [id*="subscribe"] button:hover,
.area-aside .box-profile [id*="subscription"] button:hover,
.area-aside .box-profile > a[role="button"]:hover,
.area-aside .box-profile > button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.area-aside .box-profile [class*="subscribe"] svg,
.area-aside .box-profile [class*="subscription"] svg,
.area-aside .box-profile [id*="subscribe"] svg,
.area-aside .box-profile [id*="subscription"] svg {
  margin-right: 6px;
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* 기본은 숨김 */
.area-aside .profile-btn-group {
  display: none !important;
}

/* 소유자일 때만 노출
   -> 아래 owner 클래스명은 실제 렌더링된 값에 맞춰 수정 필요 */
.area-aside .profile-btn-group.owner,
.area-aside .profile-btn-group.admin,
.area-aside .profile-btn-group.role_owner {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
}

.area-aside .profile-btn-group .btn-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.area-aside .profile-btn-group .btn-g:hover {
  border-color: rgba(124, 140, 255, 0.35);
  color: var(--primary);
}