@charset "utf-8";

/* 기술 칼럼 스킨 — 모든 규칙을 .tc 아래로 한정해 사이트 공통 CSS와 충돌하지 않게 한다. */

.tc{--tcs:1;--f-h2:calc(30px * var(--tcs));--f-h3:calc(24px * var(--tcs));--f-txt:calc(20px * var(--tcs));--f-sub:calc(16px * var(--tcs));
    --tc-blue:#0557aa;--tc-dark:#202228;--tc-soft:#f6f8fb;--tc-line:#e5e5e5;--tc-gray:#888;--tc-body:#555;--tc-note:#e8590c;
    font-family:inherit;color:#000;line-height:1.5;word-break:normal;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-align:left}
.tc *,.tc *::before,.tc *::after{box-sizing:border-box}
.tc a{color:inherit;text-decoration:none}
.tc h1,.tc h2,.tc h3,.tc h4,.tc p,.tc ul,.tc ol,.tc li,.tc table,.tc details,.tc summary{margin:0;padding:0}

/* ───────── 목록 ───────── */
.tc-list{padding:10px 0 40px}
.tc-list .tc-ptit{font-size:40px;font-weight:700;letter-spacing:-.5px}
.tc-list .tc-intro{font-size:18px;line-height:1.8;color:var(--tc-gray);margin:18px 0 44px}
.tc-list .tc-intro b{color:#333;font-weight:600}
.tc-list .tc-filter{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.tc-list .tc-filter a{font-size:15px;font-weight:500;padding:10px 22px;border:1px solid var(--tc-line);background:#fff;color:var(--tc-body)}
.tc-list .tc-filter a.on{border-color:var(--tc-blue);background:var(--tc-blue);color:#fff}
.tc-list .tc-count{font-size:15px;color:var(--tc-gray);margin-bottom:12px}
.tc-list .tc-count b{color:var(--tc-blue);font-weight:600}
.tc-list .tc-items{border-top:2px solid var(--tc-dark)}
.tc-list .tc-item{display:grid;grid-template-columns:120px 1fr;gap:30px;align-items:center;padding:34px 10px;border-bottom:1px solid var(--tc-line);transition:background .15s}
.tc-list .tc-item:hover{background:var(--tc-soft)}
.tc-list .tc-item:hover h3{color:var(--tc-blue)}
.tc .tc-cat{display:block;font-size:var(--f-sub);color:var(--tc-blue);border:1px solid var(--tc-blue);padding:6px 0;text-align:center;line-height:1.4}
.tc-list .tc-item h3{font-size:22px;font-weight:700;line-height:1.45;margin-bottom:8px;transition:color .15s}
.tc-list .tc-item p{font-size:16px;line-height:1.7;color:var(--tc-gray)}
.tc-list .tc-empty{padding:80px 0;text-align:center;color:var(--tc-gray);font-size:17px}
.tc-list .tc-pager{margin-top:44px;text-align:center}
.tc .pg_wrap{float:none;display:block;text-align:center}
.tc .pg{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tc .pg a,.tc .pg strong{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;border:1px solid var(--tc-line);font-size:15px;color:var(--tc-gray);background:#fff}
.tc .pg strong.pg_current{background:var(--tc-dark);border-color:var(--tc-dark);color:#fff}

/* ───────── 글 보기 ───────── */
.tc-view{padding:10px 0 60px}
.tc-view .tc-post{max-width:none;margin:0 auto}
.tc-view .tc-crumb{font-size:var(--f-sub);color:var(--tc-gray);margin-bottom:26px}
.tc-view .tc-crumb a{color:var(--tc-blue)}
.tc-view .tc-crumb .tc-crumb-cur{color:var(--tc-gray)}
.tc-view .tc-cat-inline{display:inline-block;padding:5px 14px}
.tc-view .tc-h1{font-size:40px;font-weight:700;line-height:1.35;letter-spacing:-.5px;margin-top:14px}
.tc-view .tc-meta{margin:22px 0 44px;padding-bottom:28px;border-bottom:1px solid var(--tc-line);font-size:calc(17px * var(--tcs));color:var(--tc-gray);display:flex;gap:18px;flex-wrap:wrap}
.tc-view .tc-meta b{color:#000;font-weight:600}

/* 글자 크기 4단계 (--tcs 하나로 PC/모바일 전체 비율 조절)
   소제목 30 > 세부제목 24 > 본문·표·목록·FAQ 20 > 이미지 설명·출처·각주 16 (글 제목 40은 아래 .tc-h1) */
/* 본문 (직원이 붙여 넣는 HTML의 클래스: summary, pstit, num, txt, ptable, cap, uldot, faq, refs, train, tbd) */
.tc-body{font-size:var(--f-txt);line-height:1.8;color:var(--tc-body)}
.tc-body .con{padding:0;margin:0;border:0;background:none;width:auto;float:none}
.tc-body .summary{background:var(--tc-soft);border-top:3px solid var(--tc-blue);padding:32px 40px;margin-bottom:50px}
.tc-body .summary h2{font-size:var(--f-h3);font-weight:700;color:var(--tc-blue);margin-bottom:12px}
.tc-body .summary p{font-size:var(--f-txt);line-height:1.75;color:#000}
.tc-body .summary ul{list-style:none;margin-top:12px;padding:0}
.tc-body .summary li{font-size:var(--f-txt);line-height:1.85;color:var(--tc-body);margin:0}
.tc-body .summary li::before{content:"•";color:var(--tc-blue)}
.tc-body h2{font-size:var(--f-h2);line-height:1.4}
.tc-body h2.pstit{font-size:var(--f-h2);font-weight:700;color:#000;margin:66px 0 20px;line-height:1.4}
.tc-body h2.pstit .num{color:var(--tc-blue);margin-right:10px}
.tc-body h3{font-size:var(--f-h3);font-weight:700;color:#000;margin:40px 0 14px;line-height:1.45}
.tc-body p.txt,.tc-body > p{font-size:var(--f-txt);line-height:1.85;color:var(--tc-body);margin-bottom:16px}
.tc-body b,.tc-body strong{color:#000;font-weight:700}
.tc-body a{color:var(--tc-blue);text-decoration:underline;text-underline-offset:3px}
.tc-body ul:not(.uldot):not(.summary ul){padding-left:1.3em;list-style:disc;margin:0 0 16px}
.tc-body ol{padding-left:1.4em;margin:0 0 16px}
.tc-body li{font-size:var(--f-txt);line-height:1.8;color:var(--tc-body);margin:4px 0}
.tc-body ul.uldot{list-style:none;padding:0;margin:0 0 16px}
.tc-body ul.uldot li::before{content:"•";color:var(--tc-blue);margin-right:4px}
.tc-body img{max-width:100%;height:auto}
.tc-body figure.tc-fig{margin:30px 0}
.tc-body figure.tc-fig img{display:block;margin:0 auto;max-width:100%;height:auto;border:1px solid var(--tc-line)}
.tc-body small{font-size:var(--f-sub)}
.tc-body figure.tc-fig figcaption{font-size:var(--f-sub);color:var(--tc-gray);text-align:center;margin-top:10px;line-height:1.6}
.tc-body .cap{font-size:var(--f-sub);color:var(--tc-gray);margin-bottom:28px}
.tc-body .tbd{color:var(--tc-note)}

.tc-body .train{display:flex;align-items:stretch;margin:26px 0 12px;overflow-x:auto;border:1px solid var(--tc-line)}
.tc-body .train > div{flex:1;min-width:120px;padding:22px 12px;text-align:center;border-right:1px solid var(--tc-line)}
.tc-body .train > div:last-child{border-right:0}
.tc-body .train .n{font-size:var(--f-sub);color:var(--tc-blue);font-weight:700;margin:0}
.tc-body .train h4{font-size:var(--f-txt);font-weight:700;margin:6px 0;color:#000}
.tc-body .train p{font-size:var(--f-sub);line-height:1.5;color:var(--tc-gray);margin:0}
.tc-body .train > div.hl{background:#f3f7fc}

.tc-body table.ptable{width:100%;border-collapse:collapse;border-top:2px solid var(--tc-dark);margin:18px 0 10px}
.tc-body table{font-size:var(--f-txt)}
.tc-body .ptable th{font-size:var(--f-txt);font-weight:500;color:#444;padding:15px 10px;border-bottom:1px solid var(--tc-line);background:#fafafa;text-align:center}
.tc-body .ptable td{font-size:var(--f-txt);color:var(--tc-gray);padding:15px 12px;border-bottom:1px solid var(--tc-line);line-height:1.6;text-align:left}
.tc-body .ptable td:first-child{color:#333;font-weight:600;white-space:nowrap}

.tc-body .faq details{border-bottom:1px solid var(--tc-line)}
.tc-body .faq details:first-child{border-top:2px solid var(--tc-dark)}
.tc-body .faq summary{list-style:none;cursor:pointer;font-size:var(--f-txt);font-weight:600;color:#000;padding:22px 40px 22px 0;position:relative}
.tc-body .faq summary::-webkit-details-marker{display:none}
.tc-body .faq summary::before{content:"Q.";color:var(--tc-blue);margin-right:10px}
.tc-body .faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:26px;font-weight:300;color:var(--tc-gray)}
.tc-body .faq details[open] summary::after{content:"−"}
.tc-body .faq details p{font-size:var(--f-txt);line-height:1.8;color:var(--tc-body);padding:0 0 24px 30px;margin:0}

.tc-body .refs{margin-top:44px;padding:20px 24px;background:#fafafa;font-size:var(--f-sub);line-height:1.8;color:#777}
.tc-body .refs h4{font-size:var(--f-sub);color:#444;margin-bottom:6px}

.tc-view .tc-author{display:flex;gap:24px;align-items:center;border:1px solid var(--tc-line);padding:28px 34px;margin-top:66px}
.tc-view .tc-badge{width:68px;height:68px;flex:none;border-radius:50%;background:var(--tc-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.tc-view .tc-author h4{font-size:var(--f-txt);margin-bottom:6px}
.tc-view .tc-author p{font-size:var(--f-sub);line-height:1.7;color:var(--tc-body)}

.tc-view .tc-postnav{margin-top:56px;border-top:2px solid var(--tc-dark)}
.tc-view .tc-postnav a{display:flex;gap:24px;padding:20px 10px;border-bottom:1px solid var(--tc-line);font-size:16px}
.tc-view .tc-postnav a span{color:var(--tc-gray);width:80px;flex:none}
.tc-view .tc-postnav a:hover{color:var(--tc-blue)}
.tc-view .tc-btns{display:flex;justify-content:center;margin-top:36px}
.tc-view .tc-btns a{border:1px solid var(--tc-dark);padding:15px 50px;font-size:16px;font-weight:600}
.tc-view .tc-btns a:hover{background:var(--tc-dark);color:#fff}

/* 관리자 버튼 */
.tc .tc-admin{display:flex;justify-content:center;gap:8px;list-style:none;margin-top:28px}
.tc .tc-admin a{display:inline-block;border:1px solid #000;background:#fff;color:#000;padding:10px 24px;font-size:14px}


@media (max-width:768px){
    .tc{--tcs:.88}
    .tc-list .tc-ptit,.tc-view .tc-h1{font-size:28px}
    .tc-list .tc-intro{font-size:16px}
    .tc-list .tc-item{grid-template-columns:1fr;gap:10px;padding:26px 6px}
    .tc-list .tc-item .tc-cat{width:90px}
    .tc-list .tc-item h3{font-size:19px}
    .tc-body .summary{padding:24px 20px}
    .tc-body table.ptable{display:block;overflow-x:auto}
    .tc-view .tc-author{flex-direction:column;align-items:flex-start;padding:24px 20px}
}

/* [2026-10-29] 각주 번호 링크 (본문 용량을 줄이려고 인라인 스타일 대신 사용) */
.tc-body sup a.fn{text-decoration:none;font-size:.75em;color:#0557aa}

/* [2026-11-01] 저자 소개 확장 (수상·지정·특허·링크·작성 원칙) */
.tc-view .tc-author2{align-items:flex-start}
.tc-view .tc-au-b{min-width:0}
.tc-view .tc-author2 h4{margin-bottom:2px}
.tc-view .tc-author2 .tc-au-sub{color:var(--tc-gray);margin-bottom:10px}
.tc-view .tc-au-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.tc-view .tc-au-facts li{font-size:var(--f-sub);line-height:1.4;color:#0b3f86;background:#eef4fb;border:1px solid #d6e4f5;border-radius:999px;padding:6px 14px}
.tc-view .tc-au-facts li.aw{color:#6b4a00;background:#fff7e3;border-color:#f1dca6}
.tc-view .tc-au-facts li.aw::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:6px;vertical-align:-1px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b07800' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14 7 22l5-3 5 3-1.5-8'/%3E%3C/svg%3E")}
.tc-view .tc-au-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.tc-view .tc-au-links a{color:var(--tc-blue);font-weight:600}
.tc-view .tc-au-pol{margin-top:12px;padding-top:12px;border-top:1px dashed var(--tc-line);color:var(--tc-gray)}