@charset "utf-8";

@font-face {
  font-family: "Paperlogy";
  src: url("./images/Paperlogy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("./images/Paperlogy-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("./images/Paperlogy-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "A2Z Display";
  src: url("./images/A2Z-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --accent: #76172c;
  --accent-deep: #3f0b18;
  --gold: #c59b4a;
  --ink: #1b1a21;
  --muted: #6f6a72;
  --line: #e7dfd6;
  --paper: #fffdfa;
  --canvas: #f5f1ec;
  --soft: #f0e8e2;
  --content-width: 820px;
  --wide-width: 1120px;
  --radius: 20px;
  --shadow: 0 18px 50px rgba(49, 26, 31, .09);
  color-scheme: light;
}

html[data-theme="dark"] {
  --ink: #f4eef0;
  --muted: #bbb1b6;
  --line: #49383e;
  --paper: #211a1d;
  --canvas: #171214;
  --soft: #302329;
  --shadow: 0 18px 50px rgba(0, 0, 0, .28);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Paperlogy", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--gold)); z-index: 100; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; padding: 10px 16px; background: var(--accent-deep); color: white; border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, white); outline-offset: 3px; }

.site-header { background: color-mix(in srgb, var(--paper) 95%, transparent); border-bottom: 1px solid var(--line); }
.header-inner { max-width: var(--wide-width); min-height: 130px; margin: auto; padding: 26px 28px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: grid; gap: 2px; max-width: 700px; }
.brand-kicker, .eyebrow, .cover-heading > span { color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.brand strong { font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: clamp(26px, 4vw, 42px); line-height: 1.2; letter-spacing: -.035em; }
.brand-description { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; gap: 8px; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); }
.menu-toggle { display: none; }

.site-navigation { border-top: 1px solid var(--line); background: var(--paper); }
.nav-inner { max-width: var(--wide-width); min-height: 58px; margin: auto; padding: 0 28px; display: flex; align-items: center; gap: 20px; }
.category-menu { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.category-menu::-webkit-scrollbar { display: none; }
.category-menu .tt_category,
.category-menu .category_list,
.category-menu .category_list > li,
.category-menu .sub_category_list { width: 100%; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.category-menu .category_list > li > .link_tit { display: none !important; }
.category-menu .category_list > li > img { display: none !important; }
.category-menu .category_list > li > .sub_category_list { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 8px 24px; white-space: nowrap; }
.category-menu .sub_category_list > li { position: relative; }
.category-menu .sub_category_list .sub_category_list { display: none; position: absolute; top: calc(100% + 10px); left: -14px; z-index: 20; min-width: 150px; padding: 10px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }
.category-menu .sub_category_list li:hover > .sub_category_list,
.category-menu .sub_category_list li:focus-within > .sub_category_list { display: block; }
.category-menu .sub_category_list .sub_category_list a { display: block; padding: 7px 14px; }
.category-menu .c_cnt { margin-left: 2px; color: var(--muted); font-size: 10px; }
.category-menu a, .blog-menu a { font-size: 14px; font-weight: 700; }
.category-menu a:hover, .blog-menu a:hover { color: var(--accent); }
.blog-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.search-box { display: flex; width: 220px; border: 1px solid var(--line); background: var(--canvas); border-radius: 999px; overflow: hidden; }
.search-box input { width: 100%; min-width: 0; padding: 9px 4px 9px 14px; border: 0; background: transparent; color: var(--ink); outline: 0; font-size: 13px; }
.search-box button { border: 0; padding: 8px 13px; background: transparent; color: var(--accent); font-weight: 800; }

.site-main { min-height: 65vh; }
.cover-area, .list-page { max-width: var(--wide-width); margin: 0 auto; padding: 54px 28px 70px; }
.cover-section + .cover-section { margin-top: 72px; }
.cover-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.cover-heading h2 { margin: 0; font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; }
.hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hero-item { min-height: 430px; border-radius: 28px; overflow: hidden; background: var(--accent-deep); box-shadow: var(--shadow); }
.hero-item:first-child { grid-column: span 2; }
.hero-link { position: relative; display: grid; min-height: inherit; isolation: isolate; }
.hero-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(18, 7, 11, .88) 100%); }
.hero-link img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero-copy { align-self: end; padding: clamp(24px, 5vw, 50px); color: white; max-width: 760px; }
.hero-copy .eyebrow { color: #f1d493; }
.hero-copy h3 { margin: 8px 0 12px; font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: clamp(30px, 5vw, 54px); line-height: 1.24; letter-spacing: -.045em; }
.hero-copy p { margin: 0; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
.story-card { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(49,26,31,.04); }
.story-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--accent-deep), var(--accent)); }
.story-thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.story-card:hover .story-thumb img { transform: scale(1.035); }
.thumb-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.4); font-family: Georgia, serif; font-size: 28px; letter-spacing: .2em; }
.story-copy { padding: 22px; }
.story-copy h2, .story-copy h3 { margin: 7px 0 10px; font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: 23px; line-height: 1.35; letter-spacing: -.035em; }
.story-copy p { margin: 0 0 14px; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story-copy time, .story-meta { color: var(--muted); font-size: 12px; }
.story-meta { display: flex; justify-content: space-between; gap: 12px; }
.more-link { display: table; margin: 28px auto 0; padding: 11px 22px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-weight: 800; font-size: 13px; }

.list-header, .utility-page { max-width: var(--content-width); margin: 0 auto 30px; padding: 42px clamp(24px, 5vw, 50px); background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
#tt-body-index .list-header { display: none; }
.list-header h1, .utility-page h1 { margin: 4px 0 8px; font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: clamp(31px, 5vw, 50px); line-height: 1.25; }
.list-header p { margin: 0 0 8px; color: var(--muted); }
.list-header strong { color: var(--accent); font-size: 13px; }
.empty-message { grid-column: 1 / -1; padding: 50px; text-align: center; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.index-fallback { max-width: var(--wide-width); margin: 28px auto; padding: 24px 28px; display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.index-thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--soft); }
.index-thumb img { width: 100%; height: 100%; object-fit: cover; }
.index-fallback h2 { margin: 5px 0 8px; font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: 25px; line-height: 1.35; }
.index-fallback p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.index-fallback time { color: var(--muted); font-size: 12px; }

.post { max-width: calc(var(--content-width) + 72px); margin: 50px auto 80px; padding: 0 36px 54px; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; }
.post-header { max-width: var(--content-width); margin: 0 auto; padding: clamp(46px, 8vw, 78px) 0 36px; text-align: center; }
.post-header h1 { margin: 10px auto 18px; max-width: 760px; font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: clamp(34px, 6vw, 54px); line-height: 1.26; letter-spacing: -.05em; }
.post-meta { display: flex; justify-content: center; gap: 14px; color: var(--muted); font-size: 12px; }
.post-lead-image { max-width: var(--content-width); margin: 0 auto 40px; overflow: hidden; border-radius: 20px; }
.post-lead-image img { width: 100%; max-height: 680px; object-fit: cover; }
.article-body { max-width: var(--content-width); margin: 0 auto; font-size: 17px; }
.article-body > :first-child { margin-top: 0; }
.article-body h2 { margin: 64px 0 22px; padding-bottom: 13px; border-bottom: 2px solid var(--accent); font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: clamp(26px, 4vw, 34px); line-height: 1.35; letter-spacing: -.035em; }
.article-body h3 { margin: 38px 0 14px; font-size: 22px; line-height: 1.45; color: var(--accent-deep); }
html[data-theme="dark"] .article-body h3 { color: #e8b0bd; }
.article-body p { margin: 0 0 1.15em; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body figure, .article-body .imageblock { margin: 34px 0; }
.article-body figure img, .article-body .imageblock img, .article-body > img { width: 100%; border-radius: 16px; }
.article-body figcaption, .article-body .cap1 { margin-top: 9px; color: var(--muted); text-align: center; font-size: 12px; }
.article-body blockquote { margin: 28px 0; padding: 22px 24px; border: 0; border-left: 5px solid var(--accent); border-radius: 0 14px 14px 0; background: var(--soft); color: var(--ink); }
.article-body table { width: 100%; margin: 28px 0; border-collapse: collapse; border-top: 2px solid var(--accent); font-size: 14px; }
.article-body th, .article-body td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { width: 26%; background: var(--soft); color: var(--accent-deep); font-weight: 800; }
html[data-theme="dark"] .article-body th { color: #f5c4cf; }
.article-body ul, .article-body ol { margin: 22px 0; padding-left: 1.35em; }
.article-body li + li { margin-top: 7px; }
.article-body hr { margin: 54px 0; border: 0; border-top: 1px solid var(--line); }
.article-body .info-box, .article-body .summary-box, .article-body .source-box { margin: 30px 0; padding: 24px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.article-body .source-box { font-size: 13px; color: var(--muted); }
.post-footer { max-width: var(--content-width); margin: 50px auto 0; padding-top: 26px; border-top: 1px solid var(--line); }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags a { padding: 7px 12px; border-radius: 999px; background: var(--soft); color: var(--accent); font-size: 12px; font-weight: 750; }
.post-tools { margin-top: 16px; color: var(--muted); font-size: 12px; }
.comment-area { max-width: var(--content-width); margin: 40px auto 0; }
.related-posts, .post-neighbors { max-width: var(--content-width); margin: 42px auto 0; }
.related-posts h2 { margin: 0 0 16px; font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: 23px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.related-item { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.related-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.related-item span { display: block; padding: 10px 11px 12px; font-size: 12px; font-weight: 700; line-height: 1.45; }
.post-neighbors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.post-neighbors a { padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.post-neighbors small { display: block; margin-bottom: 3px; color: var(--accent); font-weight: 800; }
.post-neighbors span { font-size: 13px; font-weight: 650; }

.utility-page { margin-top: 54px; margin-bottom: 70px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tag-cloud a { padding: 8px 13px; background: var(--soft); border-radius: 999px; font-size: 13px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 auto 70px; }
.page-numbers { display: flex; gap: 6px; }
.page-arrow, .page-number { min-width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-size: 13px; }
.page-number span.selected, .page-number:hover { background: var(--accent); color: white; border-color: var(--accent); }
.no-more-prev, .no-more-next { opacity: .3; pointer-events: none; }

.site-footer { border-top: 1px solid var(--line); background: var(--paper); }
.footer-inner { max-width: var(--wide-width); margin: auto; padding: 46px 28px; display: grid; grid-template-columns: 1fr auto; gap: 16px 30px; }
.footer-inner strong { font-family: "A2Z Display", "Paperlogy", sans-serif; font-size: 22px; }
.footer-inner p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; gap: 16px; font-size: 13px; }
.footer-inner small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }

@media (max-width: 820px) {
  .header-inner { min-height: 104px; padding: 22px 20px 18px; }
  .brand-description { max-width: 70vw; }
  .menu-toggle { display: block; }
  .site-navigation { display: none; }
  .site-navigation.is-open { display: block; }
  .nav-inner { padding: 10px 20px 22px; display: grid; gap: 18px; }
  .category-menu { overflow: visible; }
  .category-menu .category_list > li > .sub_category_list { display: flex !important; flex-direction: row !important; gap: 10px 18px; white-space: normal; }
  .category-menu .sub_category_list .sub_category_list { position: static; display: block; margin: 8px 0 0 14px; padding: 0; border: 0; box-shadow: none; }
  .blog-menu ul { flex-wrap: wrap; }
  .search-box { width: 100%; }
  .cover-area, .list-page { padding: 36px 16px 54px; }
  .hero-grid, .story-grid { grid-template-columns: 1fr; }
  .hero-item:first-child { grid-column: auto; }
  .hero-item { min-height: 390px; }
  .post { margin: 22px 10px 54px; padding: 0 18px 38px; border-radius: 20px; }
  .index-fallback { margin: 20px 16px; padding: 18px; grid-template-columns: 1fr; }
  .post-header { padding: 42px 4px 28px; }
  .article-body { font-size: 16px; }
  .article-body h2 { margin-top: 52px; }
  .article-body table { display: table; width: 100%; font-size: 13px; }
  .article-body th, .article-body td { padding: 11px 10px; }
  .footer-inner { grid-template-columns: 1fr; padding: 38px 20px; }
  .footer-inner small { grid-column: auto; }
  .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .brand-kicker { font-size: 9px; }
  .theme-toggle { display: none; }
  .hero-copy p { display: none; }
  .hero-item { min-height: 330px; }
  .cover-heading { align-items: start; flex-direction: column-reverse; gap: 3px; }
  .story-copy { padding: 18px; }
  .post-header h1 { font-size: 32px; }
  .article-body table { line-height: 1.55; }
  .article-body th { width: 32%; }
}

@media print {
  .site-header, .site-footer, .comment-area, .pagination { display: none !important; }
  body { background: white; }
  .post { margin: 0; padding: 0; border: 0; box-shadow: none; max-width: 100%; }
}

/* Right search and category layout — 2026-10-06 */
.header-actions { position:relative; flex-shrink:0; }
.header-search { position:relative; }
.header-search summary { list-style:none; cursor:pointer; }
.header-search summary::-webkit-details-marker { display:none; }
.header-search .search-box { position:absolute; top:calc(100% + 12px); right:0; width:min(300px,calc(100vw - 40px)); z-index:50; background:var(--paper); box-shadow:var(--shadow); }
.header-search summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.nav-inner { justify-content:flex-start; }
.content-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; max-width:1280px; margin:0 auto; }
.site-main { min-width:0; }
.site-sidebar { border-left:1px solid var(--line); padding:60px 28px 40px; background:var(--paper); }
.sidebar-categories ul,.sidebar-categories li { margin:0; padding:0; list-style:none; }
.sidebar-categories a { display:block; padding:11px 0; font-size:14px; color:var(--muted); line-height:1.65; overflow-wrap:anywhere; }
.sidebar-categories .link_tit { color:var(--ink); font-weight:700; margin-bottom:10px; }
.sidebar-categories .sub_category_list { padding-left:14px; }
.sidebar-categories .category_list { padding-left:0; }
.sidebar-categories .c_cnt { font-size:11px; margin-left:5px; }
.sidebar-categories img { display:inline-block; vertical-align:middle; }
.sidebar-categories a:hover { color:var(--accent); }
.content-layout .post { margin:40px 28px 60px; }
@media (max-width:960px) {
 .content-layout { grid-template-columns:minmax(0,1fr) 200px; }
 .site-sidebar { padding:40px 20px; }
}
@media (max-width:820px) {
 .content-layout { display:flex; flex-direction:column; }
 .site-sidebar { order:-1; border-left:0; border-bottom:1px solid var(--line); padding:16px 20px; }
 .sidebar-categories .link_tit { margin:0; padding:4px 0; }
 .sidebar-categories .sub_category_list { display:flex; flex-wrap:wrap; gap:4px 20px; padding-left:0; }
 .sidebar-categories .sub_category_list .sub_category_list { padding-left:12px; }
 .sidebar-categories a { padding:6px 0; font-size:13px; }
 .content-layout .post { margin:22px 10px 54px; }
 .header-search .search-box { width:min(280px,calc(100vw - 40px)); }
}
@media print { .site-sidebar { display:none; } .content-layout { display:block; } }
/* Inline expanding search — 2026-10-06 */
.header-search { width:34px; height:34px; flex:0 0 auto; transition:width .2s ease; }
.header-search summary.icon-button { width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:999px; }
.header-search summary svg,.header-search .search-box button svg { display:block; width:18px; height:18px; flex:none; }
.header-search[open] { width:220px; }
.header-search[open] summary { display:none; }
.header-search .search-box { position:absolute; top:0; right:0; width:100%; height:34px; margin:0; box-shadow:none; border-radius:999px; display:flex; align-items:center; background:var(--paper); }
.header-search .search-box input { height:32px; padding:0 0 0 14px; flex:1; font-size:13px; }
.header-search .search-box button { display:flex; align-items:center; justify-content:center; width:34px; height:32px; flex:0 0 34px; padding:0; color:var(--muted); cursor:pointer; }
@media(max-width:820px) { .header-search[open] { width:min(220px,45vw); } .header-search .search-box { width:100%; } }
@media(prefers-reduced-motion:reduce) { .header-search { transition:none; } }

/* Matching header buttons and restored navigation — 2026-10-06 */
.header-actions .theme-toggle,.header-actions .header-search summary.icon-button {
 width:34px; height:34px; min-width:34px; min-height:34px; padding:0;
 display:flex; align-items:center; justify-content:center; flex:0 0 34px;
 border:1px solid var(--line); border-radius:50%; box-sizing:border-box;
}
.header-actions .theme-toggle span { display:block; line-height:1; font-size:18px; }
@media(max-width:480px) { .header-actions .theme-toggle { display:flex; } }

/* Post sidebar: recent/popular posts, comments, tags */
.sidebar-extras { display:none; }
#tt-body-page .sidebar-extras { display:block; }
.sidebar-block { margin-top:32px; padding-top:28px; border-top:1px solid var(--line); }
.sidebar-block h2 { margin:0 0 16px; font:500 14px/1.6 "Paperlogy",sans-serif; color:var(--muted); }
.sidebar-tabs { display:flex; gap:18px; margin-bottom:18px; }
.sidebar-tabs button { padding:0; background:none; border:0; color:var(--muted); font:400 14px/1.6 "Paperlogy",sans-serif; cursor:pointer; }
.sidebar-tabs button[aria-selected="true"] { color:var(--ink); font-weight:600; }
.sidebar-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.sidebar-block ul { list-style:none; padding:0; margin:0; }
.sidebar-story-list li+li { margin-top:19px; }
.sidebar-story-list li:nth-child(n+6),.sidebar-comment-list li:nth-child(n+5) { display:none; }
.sidebar-story { display:flex; align-items:flex-start; gap:12px; color:var(--muted); }
.sidebar-story-copy { flex:1; min-width:0; }
.sidebar-story-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.sidebar-story time { display:block; margin-top:4px; font-size:12px; color:var(--muted); }
.sidebar-story img { width:58px; height:58px; flex:0 0 58px; object-fit:cover; }
.sidebar-comment-list li+li { margin-top:11px; }
.sidebar-comment-list a { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:var(--muted); font-size:13px; line-height:1.7; }
.sidebar-tag-list { display:flex; flex-wrap:wrap; gap:8px 12px; }
.sidebar-tag-list li:nth-child(n+16) { display:none; }
.sidebar-tag-list a,.sidebar-more-tags,.sidebar-empty { font-size:12px; color:var(--muted); line-height:1.7; }
.sidebar-more-tags { display:inline-block; margin-top:14px; }
.sidebar-block a:hover { color:var(--accent); }
.sidebar-empty { margin:8px 0 0; }
.sidebar-story-list:has(li)+.sidebar-empty,.sidebar-comment-list:has(li)+.sidebar-empty { display:none; }
.sidebar-post-tabs [hidden] { display:none!important; }
@media(max-width:820px) { #tt-body-page .sidebar-extras { display:none; } }

/* Visitor counts on home and post pages — 2026-10-07 */
.sidebar-visitors { margin-top:30px; padding-top:23px; }
.sidebar-visitors::before { content:""; display:block; width:18px; height:1px; margin-bottom:18px; background:var(--muted); opacity:.6; }
.sidebar-visitors h2 { margin:0 0 7px; color:var(--muted); font:400 13px/1.6 "Paperlogy",sans-serif; }
.sidebar-visitors .visitor-total { margin:0 0 12px; color:var(--ink); font:600 clamp(24px,2.4vw,30px)/1.2 "Paperlogy",sans-serif; letter-spacing:-1px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.visitor-daily { margin:0; color:var(--muted); font:400 12px/1.8 "Paperlogy",sans-serif; font-variant-numeric:tabular-nums; }
.visitor-daily div { display:flex; gap:4px; }
.visitor-daily dt::after { content:" :"; }
.visitor-daily dd { margin:0; }
@media(max-width:820px) { .sidebar-visitors { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; } .sidebar-visitors::before { display:none; } .sidebar-visitors h2,.sidebar-visitors .visitor-total { margin:0; } .sidebar-visitors .visitor-total { font-size:22px; } .visitor-daily { display:flex; gap:14px; } }

/* Left thumbnails and popular ranking — 2026-10-07 */
.sidebar-story-thumb { position:relative; order:-1; width:66px; height:66px; flex:0 0 66px; overflow:hidden; background:var(--canvas); }
.sidebar-story .sidebar-story-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.sidebar-thumb-empty { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--muted); font-size:10px; letter-spacing:1px; }
.sidebar-story-thumb:has(img) .sidebar-thumb-empty { display:none; }
.sidebar-story { gap:10px; }
#side-popular .sidebar-story-list { counter-reset:popular-rank; }
#side-popular .sidebar-story-list>li { counter-increment:popular-rank; }
#side-popular .sidebar-story-thumb::after { content:counter(popular-rank); position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; color:#fff; background:var(--accent); font:600 12px/1 "Paperlogy",sans-serif; z-index:1; }

/* Daily visitor graph above counts — 2026-10-07 */
.sidebar-visitor-graph { margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.sidebar-visitor-graph h2 { margin:0 0 14px; color:var(--muted); font:400 13px/1.6 "Paperlogy",sans-serif; }
.visitor-graph { width:100%; overflow:hidden; }
.visitor-graph>* { max-width:100%; }
.visitor-graph iframe { display:block; width:100%; border:0; }
.sidebar-visitor-graph+.sidebar-visitors { margin-top:18px; padding-top:0; }
@media(max-width:820px) { .sidebar-visitor-graph { max-width:300px; margin-top:16px; padding-top:16px; } .sidebar-visitor-graph+.sidebar-visitors { margin-top:14px; padding-top:12px; } }

.visitor-graph #chartdiv { width:100%; height:150px; }
.visitor-graph #chart-time { margin:8px 0 0!important; color:var(--muted)!important; font:400 10px/1.6 "Paperlogy",sans-serif!important; }

.visitor-trend-svg { display:block; width:100%; height:auto; overflow:visible; }
.trend-grid { stroke:var(--line); stroke-width:1; }
.trend-label { fill:var(--muted); font:10px "Paperlogy",sans-serif; }
.trend-line { fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linejoin:round; }
.trend-point { fill:var(--paper); stroke:var(--accent); stroke-width:1.5; }
.visitor-data-module #chartdiv { display:none; }

/* Category other posts: wide titles and compact date column — 2026-10-07 */
.article-body .another_category { margin:32px 0!important; padding:24px 0 0!important; border:0!important; border-top:1px solid var(--line)!important; }
.article-body .another_category h4 { margin:0 0 14px!important; padding:0!important; border:0!important; color:var(--muted)!important; font:600 14px/1.7 "Paperlogy",sans-serif!important; }
.article-body .another_category table { display:table; width:100%!important; margin:0!important; border:0!important; border-collapse:collapse; table-layout:fixed; }
.article-body .another_category th { width:auto!important; padding:12px 16px 12px 0!important; background:transparent!important; color:var(--ink)!important; font:400 14px/1.75 "Paperlogy",sans-serif!important; text-align:left!important; vertical-align:top; border-bottom:1px solid var(--line)!important; }
.article-body .another_category td { width:92px!important; padding:14px 0 12px!important; color:var(--muted)!important; font:400 12px/1.7 "Paperlogy",sans-serif!important; white-space:nowrap; text-align:right!important; vertical-align:top; border-bottom:1px solid var(--line)!important; }
.article-body .another_category th a { display:inline!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; color:var(--ink)!important; font-weight:400!important; overflow-wrap:anywhere; }
.article-body .another_category th a:hover { color:var(--accent)!important; }
.article-body .another_category th span { color:var(--muted)!important; font-size:11px!important; }
@media(max-width:480px) { .article-body .another_category th { font-size:13px!important; padding-right:10px!important; } .article-body .another_category td { width:78px!important; font-size:11px!important; } }

/* Compact reading header with the post title — 2026-10-07 */
.reading-header-title,.reading-header-spacer { display:none; }
#tt-body-page .site-header.reading-header-active { position:fixed; top:0; left:0; right:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 2px 12px rgba(0,0,0,.035); }
.reading-header-active .header-inner { min-height:64px; height:64px; padding:0 28px; gap:24px; }
.reading-header-active .brand,.reading-header-active .site-navigation { display:none; }
.reading-header-active .reading-header-title { display:block; flex:1; min-width:0; color:var(--ink); font:600 16px/1.5 "Paperlogy",sans-serif; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.reading-header-active .header-actions { margin-left:auto; }
@media(max-width:820px) { .reading-header-active .header-inner { padding:0 20px; gap:14px; } .reading-header-active .reading-header-title { font-size:14px; } }
@media print { .reading-header-spacer { display:none!important; } }

/* Same sidebar modules on home, archive and post pages — 2026-10-07 */
.sidebar-extras { display:block; }
@media(max-width:820px) { .sidebar-extras,#tt-body-page .sidebar-extras { display:none; } }

/* Archive width and balanced gutters — 2026-10-10 */
.site-main .list-page { width:100%; max-width:none; }
.list-page .list-header { width:100%; max-width:none; margin-inline:0; }
.site-main > .index-fallback { width:calc(100% - 56px); max-width:none; margin-inline:28px; min-width:0; }
.site-main > .index-fallback > div { min-width:0; overflow-wrap:anywhere; }
@media(max-width:820px) {
 .site-main > .index-fallback { width:calc(100% - 32px); margin-inline:16px; }
}

/* Readable category labels in post lists — 2026-10-10 */
.story-copy > .eyebrow, .index-fallback > div > .eyebrow { display:inline-block; font-family:"Paperlogy",sans-serif; font-size:15px; font-weight:700; line-height:1.6; letter-spacing:.02em; margin-bottom:6px; }
@media(max-width:820px) { .story-copy > .eyebrow, .index-fallback > div > .eyebrow { font-size:14px; } }

/* Half category menu spacing — 2026-10-10 */
.sidebar-categories a { padding-block:5.5px; }
.sidebar-categories .link_tit { margin-bottom:5px; }
@media(max-width:820px) { .sidebar-categories a { padding-block:3px; } .sidebar-categories .link_tit { margin-bottom:0; padding-block:2px; } .sidebar-categories .sub_category_list { row-gap:2px; } }

/* Compact category-to-title gap — 2026-10-10 */
.story-copy > .eyebrow, .index-fallback > div > .eyebrow { display:block; margin-bottom:0; line-height:1.4; }
.story-copy > h2, .story-copy > h3, .index-fallback > div > h2 { margin-top:3px; }

/* Compact vertical spacing on archive lists — 2026-10-10 */
.site-main .list-page { padding-top:27px; padding-bottom:35px; }
.list-page .list-header { padding-top:21px; padding-bottom:21px; margin-bottom:15px; }
.list-header h1 { margin-top:2px; margin-bottom:4px; }
.list-header p { margin-bottom:4px; }
.list-page .story-grid { row-gap:13px; }
.list-page .story-copy { padding-top:11px; padding-bottom:11px; }
.list-page .story-copy h2, .list-page .story-copy h3 { margin-bottom:5px; }
.list-page .story-copy p { margin-bottom:7px; }
.site-main > .index-fallback { margin-top:14px; margin-bottom:14px; padding-top:12px; padding-bottom:12px; row-gap:12px; }
.index-fallback h2, .index-fallback p { margin-bottom:4px; }
.site-main > .pagination { margin-bottom:35px; }
@media(max-width:820px) {
 .site-main .list-page { padding-top:18px; padding-bottom:27px; }
 .list-page .story-copy { padding-top:9px; padding-bottom:9px; }
 .site-main > .index-fallback { margin-top:10px; margin-bottom:10px; padding-top:9px; padding-bottom:9px; }
}

/* Desktop archive summaries: four lines — 2026-10-11 */
@media (min-width:961px) {
  .index-fallback p {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    overflow:hidden;
  }
}

/* Space Look: cafe article dark-mode readability, 2026-10-12 */
html[data-theme="dark"] {
 --ink:#f4eef0; --muted:#bbb1b6; --line:#49383e;
 --paper:#211a1d; --canvas:#171214; --soft:#302329;
 --accent:#f6a6ba; --accent-deep:#e8b0bd; --gold:#d4b893;
 --shadow:0 18px 50px rgba(0,0,0,.28); color-scheme:dark;
}
html[data-theme="dark"] .article-body .gp { color:#eee6df !important; background:transparent !important; }
html[data-theme="dark"] .article-body .gp :is(p,.info-val) { color:#eee6df !important; }
html[data-theme="dark"] .article-body .gp :is(h2,.quote,.info-title) { color:#fff5ea !important; }
html[data-theme="dark"] .article-body .gp :is(.post-meta,.post-subtitle,.hero-caption,.img-caption,.section-label,.info-key) { color:#d4b893 !important; }
html[data-theme="dark"] .article-body .gp :is(.intro-box,.tip-box,.point-box,.info-box) { background:#302329 !important; color:#eee6df !important; }
html[data-theme="dark"] .article-body .gp :is(.section-divider,.quote,.info-title) { border-color:#70564f !important; }

/* Override editor-applied inline colors inside cafe article text */
html[data-theme="dark"] .article-body .gp :is(span,strong,b,em,i)[style*="color"] { color:inherit !important; }

/* Space Look: wtpost follows the blog's chosen theme, not device preference */
html #wtpost { background:transparent !important; color:var(--ink) !important; }
html #wtpost :is(p,h2,h3,td,li) { color:var(--ink) !important; }
html #wtpost :is(span,strong,b,em,i)[style*="color"] { color:inherit !important; }
html #wtpost :is(.caption,.source) { color:var(--muted) !important; }
html:not([data-theme="dark"]) #wtpost thead th { background:#dce8f5 !important; color:#17324f !important; }
html:not([data-theme="dark"]) #wtpost .details th { background:#edf2f7 !important; color:#253b53 !important; }
html:not([data-theme="dark"]) #wtpost :is(td,th) { border-color:#bbc7d5 !important; }
html:not([data-theme="dark"]) #wtpost hr { border-color:#a8b5c5 !important; }
html[data-theme="dark"] #wtpost th { background:#283e58 !important; color:#f0f6ff !important; }
html[data-theme="dark"] #wtpost .details th { background:#233247 !important; color:#eef4fc !important; }
html[data-theme="dark"] #wtpost :is(td,th,hr) { border-color:#526378 !important; }
html[data-theme="dark"] #wtpost .note { border-color:#91aaca !important; }

/* Space Look: only the three legacy articles identified in HTML */
html[data-theme="dark"] body.legacy-content-theme .article-body :is(p,h1,h2,h3,h4,li,td,th),
html[data-theme="dark"] body.legacy-content-theme .article-body [style*="color"] { color:var(--ink) !important; }
html[data-theme="dark"] body.legacy-content-theme .article-body :is(div,p,span)[style*="background"] { background-color:transparent !important; }
html[data-theme="dark"] body.legacy-content-theme .article-body :is(table,td,th) { border-color:var(--line) !important; }
html[data-theme="dark"] body.legacy-content-theme .article-body :is(td,th)[style*="background"],
html[data-theme="dark"] body.legacy-content-theme .article-body th { background-color:var(--soft) !important; }
html[data-theme="dark"] body.legacy-content-theme .article-body a { color:var(--accent) !important; }
html[data-theme="dark"] body.legacy-content-theme .article-body a :is(span,strong,b,em)[style*="color"] { color:inherit !important; }

/* 다크모드: 표의 줄무늬 배경 수정 */
html[data-theme="dark"] body.legacy-content-theme
.article-body table tr:nth-child(even) {
  background-color: #302329 !important;
}

html[data-theme="dark"] body.legacy-content-theme
.article-body table tr:nth-child(odd) {
  background-color: transparent !important;
}

html[data-theme="dark"] body.legacy-content-theme
.article-body table td {
  background-color: transparent !important;
}