/* 칼럼 (2026-11-03): 블로그 글을 가져온 /ko/column 목록과 글 페이지. 만드는 곳 ~/blog-column/render.py
   색은 site.css 의 토큰만 쓴다. 빨강(--point)은 현재 쪽 번호에만 쓴다. */

/* 목록 */
.x-col .col-count{margin:clamp(28px,3vw,44px) auto 0;max-width:1200px;font-size:14px;color:#7a6d63}
.x-col .col-count b{color:var(--ink);font-weight:700}
.col-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px);max-width:1200px;margin:16px auto 0;padding:0;list-style:none}
.col-l > li[hidden]{display:none}
.col-card a{display:flex;flex-direction:column;height:100%;color:inherit}
.col-ph{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:10px;background:var(--champ)}
.col-ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.col-ph-none{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;letter-spacing:.2em;color:var(--brown)}
.col-card h3{margin-top:16px;font-size:clamp(17px,16.2px + .22vw,19px);font-weight:600;line-height:1.5;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.col-sum{margin-top:8px;font-size:14.5px;line-height:1.65;color:#6b5f55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.col-date{margin-top:auto;padding-top:12px;font-size:13px;letter-spacing:.04em;color:var(--brown)}
.col-card a:hover .col-ph img,.col-card a:focus-visible .col-ph img{transform:scale(1.04)}
.col-card a:hover h3,.col-card a:focus-visible h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

.col-pg{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:clamp(44px,4.8vw,64px)}
.col-pg[hidden]{display:none}
.col-pg button{min-width:44px;height:44px;padding:0 10px;border:0;border-radius:999px;background:none;font:inherit;font-size:15px;color:#5d5249;cursor:pointer}
.col-pg button:hover{background:var(--ivory)}
.col-pg button[aria-current]{color:var(--point);font-weight:700;box-shadow:inset 0 -2px 0 var(--point);border-radius:0}
.col-pg button:disabled{opacity:.35;cursor:default;background:none}
.col-pg .col-pg-dots{min-width:20px;text-align:center;color:#8f8379}

@media (max-width:1023px){.col-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.col-l{grid-template-columns:minmax(0,1fr)}.col-pg button{min-width:40px;height:40px;font-size:14px}}

/* 글 */
.col-art{max-width:800px;margin:0 auto}
.col-hd{padding-bottom:clamp(20px,2.4vw,32px);border-bottom:1px solid #E6DCCF}
.col-hd .eb{color:var(--brown)}
.col-t{margin-top:8px;font-size:clamp(24px,20px + 1vw,34px);font-weight:700;line-height:1.45;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.col-meta{margin-top:14px;font-size:14px;color:#7a6d63}
.col-meta a{color:var(--brown);text-decoration:underline;text-underline-offset:3px}

.col-body{margin-top:clamp(28px,3vw,44px);font-size:clamp(16px,15.6px + .12vw,17px);line-height:1.9;color:#3d342e;overflow-wrap:anywhere}
.col-body p{margin:0}
.col-body b,.col-body strong{font-weight:700;color:var(--ink)}
.col-body img{display:block;max-width:100%;height:auto;margin:1.4em auto;border-radius:6px}
.col-body figure{margin:0}
.col-body figcaption{margin-top:-.8em;font-size:13px;color:#7a6d63;text-align:center}
.col-body blockquote{margin:1.8em 0 1em;padding:14px 22px;border-left:3px solid var(--sandb);background:var(--gray);font-size:1.06em;font-weight:600;color:var(--ink)}
.col-body h3{margin:2.2em 0 .6em;font-size:clamp(20px,18.5px + .4vw,24px);font-weight:700;line-height:1.5;color:var(--ink)}
.col-body h4{margin:1.6em 0 .4em;font-size:clamp(17px,16.4px + .2vw,19px);font-weight:700;line-height:1.55;color:var(--ink)}
.col-body hr{margin:2em 0;border:0;border-top:1px solid #E6DCCF}
.col-body ul,.col-body ol{margin:.6em 0;padding-left:1.3em}
.col-body ul{list-style:disc}
.col-body ol{list-style:decimal}
.col-body a{color:var(--brown);text-decoration:underline;text-underline-offset:3px}
.col-tbl{margin:1.4em 0;overflow-x:auto}
.col-tbl table{width:100%;min-width:480px;border-collapse:collapse;font-size:.92em;line-height:1.6}
.col-tbl td,.col-tbl th{padding:10px 12px;border:1px solid #E6DCCF;text-align:center;vertical-align:middle}
.col-tbl tr:first-child td{background:var(--champ)}
.col-tbl p{margin:0}

/* 글 안의 지도·글 카드·동영상 안내 */
.col-body .col-map,.col-body .col-link,.col-body .col-video{display:flex;gap:14px;align-items:center;margin:1.4em 0;padding:16px 20px;border:1px solid #E6DCCF;border-radius:10px;
  background:#fff;color:inherit;text-decoration:none;line-height:1.6}
.col-map svg{flex:none;color:var(--brown)}
.col-map span{display:flex;flex-direction:column;min-width:0}
.col-map b{color:var(--ink)}
.col-map small,.col-link small{font-size:13.5px;color:#7a6d63}
.col-body .col-link{flex-direction:column;align-items:flex-start;gap:2px}
.col-link b{color:var(--ink)}
.col-link span{font-size:14.5px;color:#6b5f55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.col-video span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--champ);color:var(--brown);font-size:13px}
.col-body .col-map:hover,.col-body .col-link:hover,.col-body .col-video:hover{border-color:var(--brown)}

.x-colview .x-evv-nav{max-width:800px}