/* 9209 도메인 관리(연재 '전문가는 전문가를 만나야 한다' 9편, 2026-10-27).
   연결 세 단계 흐름(등록업체 → 네임서버 → 레코드 네 줄) → 등록 정보 카드와 확인 네 항목
   → 만료 이후 두 줄 시간 축(.com ICANN, .kr KISA) + 스팸 정책 인용 → Lovable 설정 화면 견본(켜짐 단추 세 줄)
   → 네임서버 변경 전후 레코드 비교(빠진 MX·TXT 빨강) → 진행 방식 세 칸 → 연재 순서(칸 수 자동) */
.v-artd .sp-9209 .prose{font-size:17px}
.v-artd .sp-9209 .prose h2{margin:0 0 14px;padding:0;border:0;font-size:26px;letter-spacing:-.7px;display:block;min-height:0}
.v-artd .sp-9209 .prose h2::before,.v-artd .sp-9209 .prose h2::after{content:none}
.v-artd .sp-9209 :where(.prose) .dn-s{padding:64px 0 4px;scroll-margin-top:90px}
.v-artd .sp-9209 :where(.prose) .dn-s>p{margin:0 0 16px}
.v-artd .sp-9209 :where(.prose) li::before{content:none}
.v-artd .sp-9209 :where(.prose) ul,.v-artd .sp-9209 :where(.prose) ol{list-style:none;padding:0;margin:0}
.v-artd .sp-9209 :where(.prose) li{margin:0}

/* 연결 세 단계 */
.v-artd .sp-9209 .prose .dn-flow{display:grid;grid-template-columns:170px 170px minmax(0,1fr);align-items:stretch;gap:28px;margin:6px 0 16px;padding:22px;border-radius:20px;background:#f2f6ff}
.v-artd .sp-9209 .prose .dn-st{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 16px;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(27,31,58,.06)}
.v-artd .sp-9209 :where(.prose) .dn-st::after{content:"";position:absolute;right:-24px;top:50%;width:20px;height:3px;border-radius:2px;background:#2f6bff}
.v-artd .sp-9209 .prose .dn-st p{margin:0}
.v-artd .sp-9209 .prose .dn-k{width:28px;height:28px;border-radius:50%;background:#2f6bff;font-size:13px;font-weight:900;line-height:28px;text-align:center;color:#fff}
.v-artd .sp-9209 .prose .dn-t{font-size:18px;font-weight:900;letter-spacing:-.4px;color:var(--ink)}
.v-artd .sp-9209 .prose .dn-d{font-size:13.5px;font-weight:600;line-height:1.5;color:#3a3f52}
.v-artd .sp-9209 :where(.prose) .dn-ns .dn-k{background:var(--navy)}
.v-artd .sp-9209 .prose .dn-rc{display:flex;flex-direction:column;justify-content:center;gap:6px}
.v-artd .sp-9209 .prose .dn-rc li{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:10px;padding:9px 12px;border-radius:11px;background:#fff;font-size:13.5px;font-weight:700;line-height:1.35;color:#3a3f52}
.v-artd .sp-9209 .prose .dn-rc b{padding:4px 0;border-radius:7px;background:var(--navy);font-size:12.5px;font-weight:900;text-align:center;color:#fff}
.v-artd .sp-9209 :where(.prose) .dn-rc li:nth-child(3) b{background:#1f9d5c}
.v-artd .sp-9209 :where(.prose) .dn-rc li:nth-child(4) b{background:#8a5cf6}
.v-artd .sp-9209 .prose .dn-rc span{font-weight:800;color:var(--ink)}
.v-artd .sp-9209 .prose .dn-rc em{font-style:normal;color:var(--sub)}
.v-artd .sp-9209 :where(.prose) .dn-rc em::before{content:"→ ";color:#2f6bff;font-weight:900}

/* 등록 정보 카드와 확인 항목 */
.v-artd .sp-9209 .prose .dn-who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;margin:6px 0 16px}
.v-artd .sp-9209 .prose .dn-card{padding:20px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.v-artd .sp-9209 .prose .dn-ch{margin:0 0 12px;padding:0 0 10px;border-bottom:1.5px solid var(--line);font-size:13px;font-weight:800;letter-spacing:.3px;color:var(--sub)}
.v-artd .sp-9209 .prose .dn-card dl{display:flex;flex-direction:column;gap:4px;margin:0}
.v-artd .sp-9209 .prose .dn-card dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px;padding:9px 10px;border-radius:9px;font-size:14px}
.v-artd .sp-9209 :where(.prose) .dn-card dt{font-weight:700;color:var(--sub)}
.v-artd .sp-9209 :where(.prose) .dn-card dd{margin:0;font-weight:800;color:var(--ink)}
.v-artd .sp-9209 :where(.prose) .dn-card .dn-hl{background:#fff3c4}
.v-artd .sp-9209 .prose .dn-chk{counter-reset:c;display:flex;flex-direction:column;gap:8px}
.v-artd .sp-9209 .prose .dn-chk li{counter-increment:c;position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px 12px 52px;border-radius:12px;background:var(--soft);font-size:14px;font-weight:600;line-height:1.5;color:#3a3f52}
.v-artd .sp-9209 :where(.prose) .dn-chk li::after{content:counter(c);position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--yellow);font-size:12.5px;font-weight:900;line-height:26px;text-align:center;color:var(--navy)}
.v-artd .sp-9209 .prose .dn-chk b{font-size:15px;font-weight:900;color:var(--ink)}

/* 만료 이후 두 줄 시간 축 */
.v-artd .sp-9209 .prose .dn-tl{display:flex;flex-direction:column;gap:12px;margin:6px 0 16px}
.v-artd .sp-9209 .prose .dn-ln{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px;align-items:center;padding:16px;border-radius:16px;background:var(--soft)}
.v-artd .sp-9209 .prose .dn-lh{display:flex;flex-direction:column;gap:4px;margin:0}
.v-artd .sp-9209 .prose .dn-lh b{font-size:19px;font-weight:900;letter-spacing:-.3px;color:var(--ink)}
.v-artd .sp-9209 .prose .dn-lh small{font-size:12px;font-weight:700;line-height:1.4;color:var(--sub)}
.v-artd .sp-9209 .prose .dn-ln ol{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding-top:18px}
.v-artd .sp-9209 :where(.prose) .dn-ln ol::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:3px;border-radius:2px;background:linear-gradient(90deg,#c9d3ee 0 30%,#e5484d 70%)}
.v-artd .sp-9209 .prose .dn-ln ol li{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 10px;border-radius:10px;background:#fff;font-size:13px;font-weight:600;line-height:1.45;color:#3a3f52}
.v-artd .sp-9209 :where(.prose) .dn-ln ol li::after{content:"";position:absolute;left:10px;top:-17px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #8fa0c9}
.v-artd .sp-9209 .prose .dn-ln ol span{font-size:12.5px;font-weight:900;color:var(--blue)}
.v-artd .sp-9209 .prose .dn-ln ol .dn-x{background:var(--navy);color:#e6e9f5}
.v-artd .sp-9209 .prose .dn-ln ol .dn-x span{color:var(--yellow)}
.v-artd .sp-9209 :where(.prose) .dn-ln .dn-x::after{background:var(--yellow);box-shadow:none}
.v-artd .sp-9209 .prose .dn-ln ol .dn-r{background:#fdecec;color:#7a1e21}
.v-artd .sp-9209 .prose .dn-ln ol .dn-r span{color:#c62f34}
.v-artd .sp-9209 :where(.prose) .dn-ln .dn-r::after{box-shadow:inset 0 0 0 3px #e5484d}
.v-artd .sp-9209 :where(.prose) .dn-kr{background:#f1f8f4}
.v-artd .sp-9209 .prose .dn-q{margin:6px 0 16px;padding:22px 24px;border:0;border-left:0;border-radius:18px;background:#1b1f3a;font-style:normal;quotes:none}
.v-artd .sp-9209 .prose .dn-q::before,.v-artd .sp-9209 .prose .dn-q::after{content:none}
.v-artd .sp-9209 .prose .dn-qs{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.3px;color:var(--yellow)}
.v-artd .sp-9209 .prose .dn-q ul{display:flex;flex-direction:column;gap:8px}
.v-artd .sp-9209 .prose .dn-q li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;font-size:15px;font-weight:700;line-height:1.5;color:#fff}
.v-artd .sp-9209 :where(.prose) .dn-q li::after{content:"";order:-1;width:8px;height:8px;border-radius:2px;background:#e5484d;transform:translateY(-2px)}

/* Lovable 설정 화면 견본 */
.v-artd .sp-9209 .prose .dn-app{margin:6px 0 16px;border-radius:18px;background:#fff;box-shadow:0 10px 26px rgba(27,31,58,.08),inset 0 0 0 1.5px var(--line);overflow:hidden}
.v-artd .sp-9209 .prose .dn-ah{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0;padding:14px 20px;background:#fdf1f6;border-bottom:1.5px solid #f6d5e3}
.v-artd .sp-9209 .prose .dn-ah b{font-size:18px;font-weight:900;color:#b0275c}
.v-artd .sp-9209 .prose .dn-ah span{font-size:12.5px;font-weight:700;color:var(--sub)}
.v-artd .sp-9209 .prose .dn-tg{display:flex;flex-direction:column;padding:6px 20px}
.v-artd .sp-9209 .prose .dn-tg li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.v-artd .sp-9209 .prose .dn-tg li:last-child{border-bottom:0}
.v-artd .sp-9209 .prose .dn-tg p{display:flex;flex-direction:column;gap:3px;margin:0;font-size:15px;font-weight:800;color:var(--ink)}
.v-artd .sp-9209 .prose .dn-tg small{font-size:13px;font-weight:600;line-height:1.5;color:#5a6075}
.v-artd .sp-9209 :where(.prose) .dn-tg i{position:relative;flex:none;width:44px;height:24px;border-radius:999px;background:#d9467a}
.v-artd .sp-9209 :where(.prose) .dn-tg i::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.v-artd .sp-9209 :where(.prose) .dn-tg li:last-child small{color:#b0275c}
.v-artd .sp-9209 .prose .dn-an{margin:0;padding:14px 20px;background:var(--soft);font-size:14px;line-height:1.65;color:#3a3f52}

/* 네임서버 변경 전후 */
.v-artd .sp-9209 .prose .dn-mv{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;gap:12px;margin:6px 0 16px}
.v-artd .sp-9209 .prose .mv-c{padding:16px;border-radius:16px;background:var(--soft)}
.v-artd .sp-9209 .prose .mv-h{margin:0 0 10px;font-size:14px;font-weight:900;color:var(--ink)}
.v-artd .sp-9209 .prose .mv-c ul{display:flex;flex-direction:column;gap:6px}
.v-artd .sp-9209 .prose .mv-c li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#fff;font-size:14px;font-weight:700;color:#3a3f52}
.v-artd .sp-9209 .prose .mv-c b{flex:none;width:62px;padding:3px 0;border-radius:6px;background:var(--navy);font-size:12px;font-weight:900;text-align:center;color:#fff}
.v-artd .sp-9209 :where(.prose) .mv-n{background:#eef2ff}
.v-artd .sp-9209 :where(.prose) .mv-c .mv-miss{background:#fff;outline:1.5px dashed #e5484d;outline-offset:-1.5px;color:#c62f34}
.v-artd .sp-9209 :where(.prose) .mv-c .mv-miss b{background:#fbd5d6;color:#c62f34;text-decoration:line-through}
.v-artd .sp-9209 .prose .mv-ar{position:relative;margin:0;padding:34px 0 0;font-size:13px;font-weight:900;text-align:center;color:var(--blue)}
.v-artd .sp-9209 :where(.prose) .mv-ar::before{content:"";position:absolute;left:8px;right:16px;top:14px;height:3px;border-radius:2px;background:var(--blue)}
.v-artd .sp-9209 :where(.prose) .mv-ar::after{content:"";position:absolute;right:8px;top:9px;border:6.5px solid transparent;border-left:10px solid var(--blue);border-right:0}

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

/* 연재 순서 */
.v-artd .sp-9209 .prose .dn-nx{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin:6px 0 8px}
.v-artd .sp-9209 :where(.prose) .dn-nx a,.v-artd .sp-9209 :where(.prose) .dn-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-9209 :where(.prose) .dn-nx a:hover{background:#eef2ff}
.v-artd .sp-9209 :where(.prose) .dn-nx li.on p{background:var(--navy);color:#fff}
.v-artd .sp-9209 :where(.prose) .dn-nx li.nx-w p{background:#fff;border:1.5px dashed #c9cdd8;color:var(--sub)}
.v-artd .sp-9209 :where(.prose) .dn-nx span{font-size:12.5px;font-weight:800;color:var(--blue)}
.v-artd .sp-9209 :where(.prose) .dn-nx li.on span{color:var(--yellow)}

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

@media (max-width:760px){
  .v-artd .sp-9209 .prose h2{font-size:22px}
  .v-artd .sp-9209 :where(.prose) .dn-s{padding-top:48px}
  .v-artd .sp-9209 .prose .dn-flow{grid-template-columns:1fr;gap:22px;padding:14px}
  .v-artd .sp-9209 :where(.prose) .dn-st::after{right:auto;left:30px;top:auto;bottom:-19px;width:3px;height:16px}
  .v-artd .sp-9209 .prose .dn-rc li{grid-template-columns:62px minmax(0,1fr);row-gap:4px}
  .v-artd .sp-9209 .prose .dn-rc em{grid-column:2}
  .v-artd .sp-9209 .prose .dn-who{grid-template-columns:1fr}
  .v-artd .sp-9209 .prose .dn-ln{grid-template-columns:1fr;padding:14px}
  .v-artd .sp-9209 .prose .dn-ln ol{grid-auto-flow:row;grid-auto-columns:auto;padding:0 0 0 24px}
  .v-artd .sp-9209 :where(.prose) .dn-ln ol::before{left:6px;right:auto;top:10px;bottom:10px;width:3px;height:auto;background:linear-gradient(180deg,#c9d3ee 0 30%,#e5484d 70%)}
  .v-artd .sp-9209 :where(.prose) .dn-ln ol li::after{left:-23px;top:14px}
  .v-artd .sp-9209 .prose .dn-q{padding:18px}
  .v-artd .sp-9209 .prose .dn-q li{font-size:14px}
  .v-artd .sp-9209 .prose .dn-ah,.v-artd .sp-9209 .prose .dn-tg,.v-artd .sp-9209 .prose .dn-an{padding-left:16px;padding-right:16px}
  .v-artd .sp-9209 .prose .dn-mv{grid-template-columns:1fr;gap:8px}
  .v-artd .sp-9209 .prose .mv-ar{padding:0 0 0 30px;text-align:left}
  .v-artd .sp-9209 :where(.prose) .mv-ar::before{left:12px;right:auto;top:-4px;width:3px;height:26px}
  .v-artd .sp-9209 :where(.prose) .mv-ar::after{left:7.5px;right:auto;top:20px;border:6.5px solid transparent;border-top:10px solid var(--blue);border-bottom:0}
  .v-artd .sp-9209 :where(.prose) .dn-wbox{padding:20px 16px}
  .v-artd .sp-9209 .prose .dn-wbox dl{grid-template-columns:1fr}
  .v-artd .sp-9209 .prose .dn-nx{grid-template-columns:1fr 1fr}
}