/* 9210 SSL 인증서 관리(연재 '전문가는 전문가를 만나야 한다' 10편, 2026-10-27).
   주소창 세 장(HTTPS, HTTP 주의 요함, 만료 전체 화면 경고) + 개인정보 암호화 조문 상자
   → 유효기간 단축 가로 막대 네 줄(398·200·100·47일, 연 갱신 횟수) + 확인 항목 셋
   → Let's Encrypt 변경 세 장(메일 종료, 64일, 45일) → 발급 대기 화면 견본과 원인 네 줄
   → 혼합 콘텐츠 두 칸(자동 전환, 차단) → 진행 방식 세 칸 → 연재 순서(칸 수 자동) */
.v-artd .sp-9210 .prose{font-size:17px}
.v-artd .sp-9210 .prose h2{margin:0 0 14px;padding:0;border:0;font-size:26px;letter-spacing:-.7px;display:block;min-height:0}
.v-artd .sp-9210 .prose h2::before,.v-artd .sp-9210 .prose h2::after{content:none}
.v-artd .sp-9210 :where(.prose) .sl-s{padding:64px 0 4px;scroll-margin-top:90px}
.v-artd .sp-9210 :where(.prose) .sl-s>p{margin:0 0 16px}
.v-artd .sp-9210 :where(.prose) li::before{content:none}
.v-artd .sp-9210 :where(.prose) ul,.v-artd .sp-9210 :where(.prose) ol{list-style:none;padding:0;margin:0}
.v-artd .sp-9210 :where(.prose) li{margin:0}

/* 주소창 세 장 */
.v-artd .sp-9210 .prose .sl-br{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 16px}
.v-artd .sp-9210 .prose .br-w{display:flex;flex-direction:column;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(27,31,58,.07),inset 0 0 0 1.5px var(--line);overflow:hidden}
.v-artd .sp-9210 .prose .br-w p{margin:0}
.v-artd .sp-9210 .prose .br-bar{display:flex;align-items:center;gap:8px;margin:10px !important;padding:8px 12px;border-radius:999px;background:#f1f3f7;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3a3f52}
.v-artd .sp-9210 :where(.prose) .br-bar i{flex:none;width:12px;height:12px;border-radius:3px;background:var(--bc)}
.v-artd .sp-9210 :where(.prose) .br-ok{--bc:#1f9d5c}
.v-artd .sp-9210 :where(.prose) .br-http{--bc:#d98a14}
.v-artd .sp-9210 :where(.prose) .br-exp{--bc:#e5484d}
.v-artd .sp-9210 :where(.prose) .br-http .br-bar{color:#8a5a00}
.v-artd .sp-9210 .prose .br-full{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;margin:0 10px !important;padding:14px 12px;border-radius:10px;background:#c62f34;font-size:14px;font-weight:900;line-height:1.4;color:#fff}
.v-artd .sp-9210 .prose .br-full small{font-size:11px;font-weight:700;letter-spacing:.2px;color:#ffd6d7;word-break:break-all}
.v-artd .sp-9210 .prose .br-st{display:flex;flex-direction:column;gap:2px;margin-top:auto !important;padding:14px 14px 16px;font-size:16px;font-weight:900;color:var(--ink)}
.v-artd .sp-9210 .prose .br-st small{font-size:12.5px;font-weight:700;color:var(--bc)}
.v-artd .sp-9210 .prose .br-pg{flex:1;display:flex;flex-direction:column;gap:7px;margin:0 10px !important;padding:14px 12px;border-radius:10px;background:#f7f8fb}
.v-artd .sp-9210 :where(.prose) .br-pg i{height:9px;border-radius:5px;background:#e3e6ee}
.v-artd .sp-9210 :where(.prose) .br-pg i:first-child{width:55%;height:13px;background:#cfd5e3}
.v-artd .sp-9210 :where(.prose) .br-pg i:nth-child(3){width:80%}
.v-artd .sp-9210 :where(.prose) .br-pg i:last-child{width:38%;height:20px;border-radius:999px;background:var(--bc);opacity:.35}
.v-artd .sp-9210 .prose .sl-law{margin:6px 0 16px;padding:22px 24px;border:0;border-radius:16px;background:#f3f0ff;box-shadow:inset 0 0 0 1.5px #ddd3fb;font-style:normal;quotes:none}
.v-artd .sp-9210 .prose .sl-law::before,.v-artd .sp-9210 .prose .sl-law::after{content:none}
.v-artd .sp-9210 .prose .lw-s{margin:0 0 8px;font-size:12.5px;font-weight:800;color:#6b46d6}
.v-artd .sp-9210 .prose .lw-t{margin:0;font-size:17px;font-weight:800;line-height:1.6;letter-spacing:-.3px;color:var(--ink)}

/* 유효기간 단축 막대 */
.v-artd .sp-9210 .prose .sl-bars{display:flex;flex-direction:column;gap:8px;margin:6px 0 16px;padding:20px;border-radius:18px;background:var(--navy)}
.v-artd .sp-9210 .prose .sl-bars li{display:grid;grid-template-columns:150px minmax(0,1fr) 92px;align-items:center;gap:14px}
.v-artd .sp-9210 .prose .sl-bars p{margin:0}
.v-artd .sp-9210 .prose .sb-k{font-size:13.5px;font-weight:800;color:#c9d3ee}
.v-artd .sp-9210 .prose .sb-b{position:relative;height:34px}
.v-artd .sp-9210 :where(.prose) .sb-b i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--d) / 398 * 100%);min-width:6px;border-radius:8px;background:#5d74a8;transform-origin:left center}
.v-artd .sp-9210 .prose .sb-b b{position:relative;display:flex;align-items:center;height:100%;padding-left:12px;font-size:15px;font-weight:900;color:#fff}
.v-artd .sp-9210 :where(.prose) .sl-bars li:nth-child(4) .sb-b b{padding-left:calc(47 / 398 * 100% + 10px)}
.v-artd .sp-9210 .prose .sb-n{justify-self:end;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12.5px;font-weight:800;color:#e6e9f5}
.v-artd .sp-9210 :where(.prose) .sb-now .sb-k{color:var(--yellow)}
.v-artd .sp-9210 :where(.prose) .sb-now .sb-b i{background:var(--yellow)}
.v-artd .sp-9210 :where(.prose) .sb-now .sb-b b{color:var(--navy)}
.v-artd .sp-9210 :where(.prose) .sl-bars li:nth-child(n+3) .sb-b i{background:#2f6bff}
.v-artd .sp-9210 .prose .sl-chk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
.v-artd .sp-9210 .prose .sl-chk li{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;background:var(--soft);border-top:3px solid #2f6bff;font-size:14px;font-weight:600;line-height:1.55;color:#3a3f52}
.v-artd .sp-9210 .prose .sl-chk b{font-size:15px;font-weight:900;color:var(--ink)}

/* Let's Encrypt 세 장 */
.v-artd .sp-9210 .prose .sl-le{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 16px}
.v-artd .sp-9210 .prose .le-c{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.v-artd .sp-9210 .prose .le-c p{margin:0}
.v-artd .sp-9210 .prose .le-d{font-size:12.5px;font-weight:800;color:var(--blue)}
.v-artd .sp-9210 .prose .le-t{font-size:19px;font-weight:900;letter-spacing:-.4px;color:var(--ink)}
.v-artd .sp-9210 .prose .le-x{font-size:14px;line-height:1.55;color:#3a3f52}
.v-artd .sp-9210 :where(.prose) .le-off{background:#fff6f6;box-shadow:inset 0 0 0 1.5px #f5c7c8}
.v-artd .sp-9210 :where(.prose) .le-off .le-d{color:#c62f34}
.v-artd .sp-9210 :where(.prose) .le-off .le-t{display:flex;align-items:center;gap:8px}
.v-artd .sp-9210 :where(.prose) .le-off .le-t::before{content:"";flex:none;width:22px;height:16px;border-radius:3px;background:linear-gradient(135deg,transparent 46%,#c62f34 46% 54%,transparent 54%),#fbd5d6;box-shadow:inset 0 0 0 1.5px #c62f34}
.v-artd .sp-9210 :where(.prose) .le-end{background:#eef2ff;box-shadow:inset 0 0 0 1.5px #c9d5ff}

/* 발급 대기 견본 */
.v-artd .sp-9210 .prose .sl-pend{margin:6px 0 16px;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(27,31,58,.07),inset 0 0 0 1.5px var(--line);overflow:hidden}
.v-artd .sp-9210 .prose .pd-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:14px 18px;border-bottom:1.5px solid var(--line);font-size:16px}
.v-artd .sp-9210 .prose .pd-h b{font-weight:900;color:var(--ink)}
.v-artd .sp-9210 .prose .pd-h span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#fff3c4;font-size:12.5px;font-weight:800;color:#8a5a00}
.v-artd .sp-9210 :where(.prose) .pd-h span::before{content:"";width:8px;height:8px;border-radius:50%;background:#d98a14}
.v-artd .sp-9210 .prose .sl-pend ul{display:flex;flex-direction:column;padding:4px 18px}
.v-artd .sp-9210 .prose .sl-pend li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px;font-weight:600;line-height:1.5;color:#3a3f52}
.v-artd .sp-9210 .prose .sl-pend li:last-child{border-bottom:0}
.v-artd .sp-9210 .prose .sl-pend li b{font-weight:900;color:var(--ink)}

/* 혼합 콘텐츠 두 칸 */
.v-artd .sp-9210 .prose .sl-mx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;margin:6px 0 16px}
.v-artd .sp-9210 .prose .mi-c{padding:18px;border-radius:16px}
.v-artd .sp-9210 :where(.prose) .mi-up{background:#e9f6ee}
.v-artd .sp-9210 :where(.prose) .mi-bl{background:#fdecec}
.v-artd .sp-9210 .prose .mi-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:16px;font-weight:900}
.v-artd .sp-9210 :where(.prose) .mi-up .mi-h{color:#137a45}
.v-artd .sp-9210 :where(.prose) .mi-bl .mi-h{color:#c62f34}
.v-artd .sp-9210 :where(.prose) .mi-h::before{content:"";width:18px;height:18px;border-radius:50%;background:currentColor}
.v-artd .sp-9210 .prose .mi-c ul{display:flex;flex-wrap:wrap;gap:6px}
.v-artd .sp-9210 .prose .mi-c li{padding:8px 12px;border-radius:9px;background:#fff;font-size:13.5px;font-weight:800;color:var(--ink)}
.v-artd .sp-9210 :where(.prose) .mi-bl li{text-decoration:line-through;text-decoration-color:#e5484d;text-decoration-thickness:2px}

/* 진행 방식 세 칸 */
.v-artd .sp-9210 :where(.prose) .sl-wbox{margin:0;padding:24px 26px;border-radius:18px;background:#fff8e1}
.v-artd .sp-9210 :where(.prose) .sl-wbox .we-h{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.4px;color:#9a6a00}
.v-artd .sp-9210 .prose .sl-wbox dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.v-artd .sp-9210 .prose .sl-wbox dl>div{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:12px;background:#fff}
.v-artd .sp-9210 :where(.prose) .sl-wbox dt{font-size:15px;font-weight:900;color:var(--ink)}
.v-artd .sp-9210 :where(.prose) .sl-wbox dd{margin:0;font-size:14.5px;line-height:1.6;color:#3a3f52}

/* 연재 순서 */
.v-artd .sp-9210 .prose .sl-nx{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin:6px 0 8px}
.v-artd .sp-9210 :where(.prose) .sl-nx a,.v-artd .sp-9210 :where(.prose) .sl-nx p{display:flex;flex-direction:column;gap:3px;height:100%;margin:0;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:14px;font-weight:700;line-height:1.4;color:var(--ink);text-decoration:none;box-sizing:border-box}
.v-artd .sp-9210 :where(.prose) .sl-nx a:hover{background:#eef2ff}
.v-artd .sp-9210 :where(.prose) .sl-nx li.on p{background:var(--navy);color:#fff}
.v-artd .sp-9210 :where(.prose) .sl-nx li.nx-w p{background:#fff;border:1.5px dashed #c9cdd8;color:var(--sub)}
.v-artd .sp-9210 :where(.prose) .sl-nx span{font-size:12.5px;font-weight:800;color:var(--blue)}
.v-artd .sp-9210 :where(.prose) .sl-nx li.on span{color:var(--yellow)}

/* 출처 */
.v-artd .sp-9210 .prose .sl-srcs h2{font-size:15px;color:var(--sub)}
.v-artd .sp-9210 :where(.prose) .sl-srcs li{font-size:13.5px;line-height:1.7;color:var(--sub)}

@media (max-width:760px){
  .v-artd .sp-9210 .prose h2{font-size:22px}
  .v-artd .sp-9210 :where(.prose) .sl-s{padding-top:48px}
  .v-artd .sp-9210 .prose .sl-br{grid-template-columns:1fr}
  .v-artd .sp-9210 .prose .br-pg{display:none}
  .v-artd .sp-9210 .prose .br-full{margin-bottom:0 !important}
  .v-artd .sp-9210 .prose .sl-law{padding:18px}
  .v-artd .sp-9210 .prose .lw-t{font-size:15.5px}
  .v-artd .sp-9210 .prose .sl-bars{padding:16px 14px}
  .v-artd .sp-9210 .prose .sl-bars li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px;column-gap:8px}
  .v-artd .sp-9210 .prose .sb-b{grid-column:1/-1;grid-row:2}
  .v-artd .sp-9210 .prose .sl-chk{grid-template-columns:1fr}
  .v-artd .sp-9210 .prose .sl-le{grid-template-columns:1fr}
  .v-artd .sp-9210 .prose .pd-h,.v-artd .sp-9210 .prose .sl-pend ul{padding-left:14px;padding-right:14px}
  .v-artd .sp-9210 .prose .sl-pend li{grid-template-columns:1fr;gap:2px}
  .v-artd .sp-9210 .prose .sl-mx{grid-template-columns:1fr}
  .v-artd .sp-9210 :where(.prose) .sl-wbox{padding:20px 16px}
  .v-artd .sp-9210 .prose .sl-wbox dl{grid-template-columns:1fr}
  .v-artd .sp-9210 .prose .sl-nx{grid-template-columns:1fr 1fr}
}