@charset "utf-8";
/* ==========================================================================
   골든디아망 칼럼 — 목록(column.html) · 글(column-<번호>.html)   2026-10-13
   main.css → sub.css → events.css → 이 파일 순으로 로드한다.
   조판은 공지사항 게시판(events.css 의 .ev-*)을 그대로 쓰고, 여기서는
   «블로그 글»이라 달라지는 것만 얹는다 — 3열 목록·요약·쪽 넘김·글 본문 타이포.

   ⚠ 글 본문은 블로그에서 받아 온 HTML 이다(~/bin/gd-column-sync.py 가 걸러서
     p·h2·h3·figure·img·blockquote·hr·표·목록만 남긴다). class 가 없으므로
     .gd-col-body 아래 «태그 선택자»로만 꾸민다.
   ⚠ 아랍어(RTL) — left/right 를 쓰지 않는다. 논리 속성만(margin-inline·text-align:start…).
   ⚠ 셀렉터는 body.gd-col 로 시작한다 — events.css(.gd-ev …)보다 한 단계 세야 덮인다.

   블록  01 LIST   02 PAGER   03 POST   04 BODY   05 NAV   06 RESPONSIVE
   ========================================================================== */

/* --- 01. LIST — 4열 정사각(공지) → 3열 3:2(블로그 표지 대부분이 3:2) ------- */
body.gd-col .ev-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(34px,3.1vw,60px)}
body.gd-col .ev-card-fig{aspect-ratio:3/2}
body.gd-col .ev-card-t{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
body.gd-col .gd-col-sum{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin-top:clamp(8px,.73vw,14px);
  font-size:clamp(13px,.83vw,16px);line-height:1.7;letter-spacing:-.01em;color:var(--gd-muted);
}

/* --- 01-b. TOOLS — 검색창 · 분야 칩 · 건수 (2026-10-13) -------------------- */
body.gd-col .gd-col-tools{margin-bottom:clamp(30px,3.1vw,60px)}
body.gd-col .gd-col-search{
  position:relative;max-width:min(100%,560px);margin:0 auto clamp(18px,1.67vw,32px);
}
body.gd-col .gd-col-search input{
  width:100%;height:52px;padding-block:0;padding-inline:22px 56px;
  border:1px solid var(--gd-line);border-radius:999px;background:#fff;
  font:inherit;font-size:16px;color:var(--gd-ink);   /* 16px 미만이면 iOS 가 확대한다 */
  -webkit-appearance:none;appearance:none;
  transition:border-color .3s var(--gd-ease),box-shadow .3s var(--gd-ease);
}
body.gd-col .gd-col-search input::placeholder{color:var(--gd-muted)}
body.gd-col .gd-col-search input:focus{outline:0;border-color:var(--gd-brown);box-shadow:0 0 0 3px rgba(163,106,51,.14)}
body.gd-col .gd-col-search button{
  position:absolute;inset-block:4px;inset-inline-end:4px;width:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;background:var(--gd-ink);color:#fff;cursor:pointer;
  transition:background .3s var(--gd-ease);
}
body.gd-col .gd-col-search button:hover{background:var(--gd-brown)}
body.gd-col .gd-col-search button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body.gd-col .gd-col-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
body.gd-col .gd-col-chip{
  display:inline-flex;align-items:center;min-height:40px;padding:0 18px;
  border:1px solid var(--gd-line);border-radius:999px;background:#fff;
  font-size:clamp(13px,.83vw,15px);font-weight:500;letter-spacing:-.01em;color:var(--gd-ink-2);white-space:nowrap;
  transition:background .3s var(--gd-ease),border-color .3s var(--gd-ease),color .3s var(--gd-ease);
}
body.gd-col a.gd-col-chip:hover{border-color:var(--gd-brown);color:var(--gd-brown)}
body.gd-col .gd-col-chip.is-on{background:var(--gd-ink);border-color:var(--gd-ink);color:#fff}
body.gd-col .gd-col-count{
  display:flex;justify-content:center;align-items:center;gap:14px;margin-top:clamp(16px,1.46vw,28px);
  font-size:clamp(13px,.83vw,15px);color:var(--gd-muted);
}
body.gd-col .gd-col-count a{border-bottom:1px solid var(--gd-line);padding-bottom:1px;color:var(--gd-ink-2)}
body.gd-col .gd-col-count a:hover{color:var(--gd-brown);border-color:var(--gd-brown)}
body.gd-col .gd-col-none{
  padding:clamp(48px,5vw,96px) 0;text-align:center;
  font-size:clamp(14px,.94vw,17px);color:var(--gd-muted);
}

/* --- 02. PAGER — events.css 03-c 로 옮겼다(공지사항 페이지 두 구역도 같이 쓴다, 2026-10-14) --- */

/* --- 03. POST — 제목 띠 · 표지 · 원문 링크 -------------------------------- */
/* 블로그 제목은 공지 제목보다 길다(30~60자). 목록 h1 크기 그대로면 4~5줄이 된다. */
body.gd-col .gd-col-h{font-size:clamp(24px,2.4vw,46px);line-height:1.3;word-break:keep-all}
body.gd-col .gd-col-article{
  max-width:min(100%,860px);margin-inline:auto;
  padding:clamp(22px,3.6vw,64px);
  background:#fff;border-radius:var(--gd-r,14px);
}
body.gd-col .gd-col-cover{margin:0 0 clamp(26px,2.6vw,48px)}
body.gd-col .gd-col-cover img{width:100%;height:auto;border-radius:calc(var(--gd-r,14px) - 4px)}
body.gd-col .gd-col-src{
  margin-top:clamp(30px,2.6vw,48px);padding-top:clamp(16px,1.25vw,24px);
  border-top:1px solid var(--gd-line);text-align:end;
  font-size:clamp(12.5px,.78vw,15px);color:var(--gd-muted);
}
body.gd-col .gd-col-src a{border-bottom:1px solid var(--gd-line);padding-bottom:2px;transition:color .3s var(--gd-ease),border-color .3s var(--gd-ease)}
body.gd-col .gd-col-src a:hover{color:var(--gd-brown);border-color:var(--gd-brown)}
body.gd-col .gd-col-src--empty{border-top:0;text-align:center}

/* --- 04. BODY — 블로그 원문 HTML ------------------------------------------ */
body.gd-col .gd-col-body{
  font-size:clamp(15px,1vw,18px);line-height:1.95;letter-spacing:-.01em;color:var(--gd-ink-2);
  word-break:keep-all;overflow-wrap:anywhere;
}
body.gd-col .gd-col-body > :first-child{margin-top:0}
body.gd-col .gd-col-body p{margin:0 0 .9em}
body.gd-col .gd-col-body h2,
body.gd-col .gd-col-body h3,
body.gd-col .gd-col-body h4{
  margin:2em 0 .7em;font-weight:700;line-height:1.45;letter-spacing:-.03em;color:var(--gd-ink);
}
body.gd-col .gd-col-body h2{font-size:1.4em}
body.gd-col .gd-col-body h3{font-size:1.2em}
body.gd-col .gd-col-body h4{font-size:1.05em}
body.gd-col .gd-col-body b,
body.gd-col .gd-col-body strong{font-weight:700;color:var(--gd-ink)}
body.gd-col .gd-col-body a{color:var(--gd-brown);text-decoration:underline;text-underline-offset:3px}
body.gd-col .gd-col-body figure{margin:1.8em 0}
body.gd-col .gd-col-body img{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:8px}
body.gd-col .gd-col-body figcaption{margin-top:.7em;font-size:.82em;line-height:1.7;color:var(--gd-muted);text-align:center}
/* 원문에서 「각주 ※ …」·소제목 강조에 인용을 쓴다 — 크림 띠로 본문과 갈라 준다 */
body.gd-col .gd-col-body blockquote{
  margin:1.6em 0;padding:1em 1.2em;
  border-inline-start:3px solid var(--gd-brown);border-radius:0 8px 8px 0;
  background:var(--gd-cream);font-size:.93em;line-height:1.85;color:var(--gd-ink-2);
}
[dir="rtl"] body.gd-col .gd-col-body blockquote{border-radius:8px 0 0 8px}
body.gd-col .gd-col-body blockquote p:last-child{margin-bottom:0}
body.gd-col .gd-col-body hr{margin:2.4em 0;border:0;border-top:1px solid var(--gd-line)}
body.gd-col .gd-col-body ul,
body.gd-col .gd-col-body ol{margin:0 0 1em;padding-inline-start:1.4em}
body.gd-col .gd-col-body ul{list-style:disc}
body.gd-col .gd-col-body ol{list-style:decimal}
body.gd-col .gd-col-body li{margin-bottom:.35em}
body.gd-col .gd-col-table{margin:1.6em 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
body.gd-col .gd-col-body table{width:100%;min-width:480px;border-collapse:collapse;font-size:.9em;line-height:1.65}
body.gd-col .gd-col-body th,
body.gd-col .gd-col-body td{padding:.65em .8em;border:1px solid var(--gd-line);vertical-align:top;text-align:start}
body.gd-col .gd-col-body th{background:var(--gd-cream);font-weight:700;color:var(--gd-ink)}
body.gd-col .gd-col-body td p{margin:0}

/* --- 05. NAV — events.css 의 이전/다음/목록. 오른쪽 정렬만 논리 속성으로 ------ */
body.gd-col .ev-nav{max-width:min(100%,860px)}
body.gd-col .ev-nav-a--next{text-align:end}
body.gd-col .ev-nav-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
[dir="rtl"] body.gd-col .ev-nav-list svg{transform:scaleX(-1)}
[dir="rtl"] body.gd-col .ev-nav-list:hover svg{transform:scaleX(-1) translateX(5px)}

/* --- 06. RESPONSIVE ------------------------------------------------------ */
@media (max-width:1024px){
  body.gd-col .ev-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  body.gd-col .ev-list{grid-template-columns:minmax(0,1fr)}
  body.gd-col .ev-card-fig{aspect-ratio:3/2}
  body.gd-col .ev-nav-a--next{text-align:start}
  body.gd-col .gd-col-article{padding:20px 18px 26px}
  /* 칩 9개가 세 줄로 쌓이면 목록이 화면 아래로 밀린다 — 한 줄로 두고 옆으로 민다 */
  body.gd-col .gd-col-chips{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gd-gut) * -1);padding-inline:var(--gd-gut);
  }
  body.gd-col .gd-col-chips::-webkit-scrollbar{display:none}
}