:root{
  --wrap: 1720px;
  --gap: 22px;
  --radius: 18px;
  --headerH: 64px;

  --railW: 170px;
  --sideW: 340px;

  --pad: 18px;
  --pad2: 36px;

  --bg:#ffffff;
  --bg2:#f6f7f9;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,0.07);
  --link:#1f2937;

  --stickyTop: calc(var(--headerH) + var(--pad));
  --vhAvail: calc(100vh - var(--headerH) - var(--pad2));
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --bg2:#0f172a;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --line:#1f2937;
    --card:#0f172a;
    --shadow:0 12px 40px rgba(0,0,0,0.35);
    --link:#e5e7eb;
  }
}

html, body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height:1.7;
}

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

#wrap, #container, .site, .main, .layout-grid, .content-col, .rail{
  overflow: visible;
  transform: none;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  z-index:9999;
}

.site-header{
  position:sticky;
  top:0;
  z-index:2000;
  background:rgba(255,255,255,0.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}

@media (prefers-color-scheme: dark){
  .site-header{ background:rgba(15,23,42,0.86); }
}

.header-inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand-link{ font-weight:800; letter-spacing:-0.2px; }

.gnb{ display:flex; gap:12px; align-items:center; }
.gnb-link{ font-size:14px; color:var(--muted); }

.main{
  max-width:var(--wrap);
  margin:0 auto;
  padding:var(--pad) 18px 44px;
}

.layout-grid{
  display:grid;
  grid-template-columns: var(--railW) minmax(0, 1fr) var(--sideW) var(--railW);
  gap:var(--gap);
  align-items: stretch;
}

.rail, .content-col{
  min-width:0;
}

.rail{
  align-self: stretch;
}

.rail-sticky{
  position: sticky;
  top: var(--stickyTop);
}

.ad-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
}

.ad-label{
  font-size:12px;
  color:var(--muted);
  margin:0 0 10px 0;
}

.ad-rail{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height: var(--vhAvail);
}

.ad-rail-unit{
  height: calc((var(--vhAvail) - 14px) / 2);
  display:flex;
  flex-direction:column;
}

.ad-rail-unit-bottom{
  margin-top:auto;
}

.ad-rail-unit ins.adsbygoogle{
  display:block;
  width:100%;
  min-height:260px;
  height:100%;
}

.side-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height: var(--vhAvail);
  overflow:auto;
  padding-right:6px;
}

.widget{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 14px;
}

.widget-title{
  margin:0 0 10px 0;
  font-size:15px;
  letter-spacing:-0.2px;
}

.toc-aside{
  max-height: 42vh;
  overflow:auto;
  padding-right:6px;
}

.toc-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.toc-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.toc-link{
  display:block;
  padding:6px 8px;
  border-radius:12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.toc-h2{
  font-weight:700;
  color:var(--text);
  background:rgba(17,24,39,0.02);
}

@media (prefers-color-scheme: dark){
  .toc-h2{ background:rgba(229,231,235,0.03); }
}

.toc-h3{ margin-left:10px; }

.category-box ul{ list-style:none; margin:0; padding:0; }
.category-box li{ margin:0; padding:0; }
.category-box a{
  display:block;
  padding:6px 8px;
  border-radius:12px;
  color:var(--text);
  font-size:14px;
  line-height:1.4;
}
.category-box a:hover{
  background:rgba(17,24,39,0.04);
  text-decoration:none;
}
@media (prefers-color-scheme: dark){
  .category-box a:hover{ background:rgba(229,231,235,0.06); }
}
.category-box ul ul{ margin-left:10px; }

.list-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.post-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.post-card-link{ display:block; height:100%; }
.post-card-thumb{ background:var(--bg2); min-height:120px; }
.post-card-thumb img{ width:100%; height:auto; display:block; }

.post-card-body{ padding:12px 14px 14px; }

.post-card-meta{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
}

.post-card-title{
  margin:0 0 8px 0;
  font-size:16px;
  letter-spacing:-0.25px;
  line-height:1.35;
}

.post-card-excerpt{
  margin:0;
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.paging{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.paging-prev, .paging-next{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
}

.paging-num{
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--muted);
}

.post{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.post-head{
  padding:18px 18px 12px;
  border-bottom:1px solid var(--line);
}

.post-kicker{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
  margin-bottom:10px;
}

.post-title{
  margin:0;
  font-size:28px;
  letter-spacing:-0.4px;
  line-height:1.28;
}

.post-tools{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  font-size:14px;
}

.btn:hover{ text-decoration:none; background:var(--bg2); }

.post-body-wrap{ padding:18px 18px 12px; }

.post-body{
  font-size:16px;
  word-break:break-word;
}

.post-body img, .post-body video, .post-body iframe{
  max-width:100%;
  height:auto;
}

.post-foot{
  padding:12px 18px 18px;
  border-top:1px solid var(--line);
}

.post-tags{ margin-top:10px; color:var(--muted); }

.related{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.section-title{
  margin:0 0 10px 0;
  font-size:15px;
  letter-spacing:-0.2px;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.related-item{
  display:block;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--bg2);
  overflow:hidden;
}

.related-title{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}

.site-footer{
  border-top:1px solid var(--line);
  margin-top:28px;
}

.footer-inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:20px 18px;
  color:var(--muted);
  font-size:13px;
}

@media (max-width: 1500px){
  .layout-grid{
    grid-template-columns: var(--railW) minmax(0, 1fr) var(--sideW);
  }
  .rail-right{ display:none; }
}

@media (max-width: 1220px){
  .layout-grid{
    grid-template-columns: minmax(0, 1fr) var(--sideW);
  }
  .rail-left{ display:none; }
}

@media (max-width: 980px){
  .layout-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .rail-mid, .rail-left, .rail-right{ display:none; }
  .list-grid{ grid-template-columns: 1fr; }
}

/* 레일이 얇을 때는 100%보다 고정 폭이 안전 */
.rail-left .ad-card ins.adsbygoogle,
.rail-right .ad-card ins.adsbygoogle{
  display:inline-block;
  width:160px;
  height:600px;
}

/* 함께읽기: 숨김 해제 */
.together-read,
.readmore,
#ra-cards{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  max-height:none !important;
}

/* 본문 하단 배치: article-footer 내부 요소를 flex로 정렬 */
.article-footer{
  display:flex;
  flex-direction:column;
}

/* 기본 순서값 부여 */
.article-footer > *{
  order:10;
}

/* 함께읽기를 가장 하단(댓글 바로 위)로 */
.article-footer .together-read{
  order:90;
}

/* 댓글은 최하단 */
.article-footer .article-comment{
  order:100;
}

/* post-foot 구조에서 함께읽기(related) 하단 배치 */
.post-foot{
  display:flex;
  flex-direction:column;
}

.post-foot > *{
  order:10;
}

.post-foot .related{
  order:90;
}

.post-foot .comments,
#comments{
  order:100;
}