/* 354 주력 영역의 예외 상황으로 보는 실무 역량 = 질문 카드 덱(2026-10-16 글마다 다른 레이아웃).
   머리는 앞면에 질문, 뒷면에 확인할 근거가 있는 뒤집는 카드 셋(스크립트가 없으면 앞뒤를 이어 표출), 구간마다:
   빨강과 파랑 신호등, 세 단 선반, 두 예약 흐름, 네 칸 화살표 띠, 소개팅 앱 예외 흐름, 두 장부 대조, 카드 모양 결제 진행 방식, 검토와 먼저 확인, 같은 비율 축소 대 배분 막대, ≠ */
.v-artd .sp-354 .prose{font-size:17px}
.v-artd .sp-354 :where(.prose) .qd-lead{font-size:20px;line-height:1.7;color:var(--ink);margin:0 0 26px}
.v-artd .sp-354 :where(.prose) .qd-lead b{color:var(--blue)}
.v-artd .sp-354 .prose h2{margin:0 0 18px;padding:0;border:0;font-size:26px;letter-spacing:-.7px;display:block;min-height:0}
.v-artd .sp-354 .prose h2::before,.v-artd .sp-354 .prose h2::after{content:none}
.v-artd .sp-354 :where(.prose) .qd-s{padding:60px 0 4px}
.v-artd .sp-354 :where(.prose) .qd-s>p{margin:0 0 14px}
.v-artd .sp-354 :where(.prose) li::before{content:none}
.v-artd .sp-354 :where(.prose) ul,.v-artd .sp-354 :where(.prose) ol{list-style:none;padding:0}
.v-artd .sp-354 :where(.prose) li{margin:0}

/* 카드 덱 */
.v-artd .sp-354 :where(.prose) .qd-deck{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v-artd .sp-354 :where(.prose) .fc{perspective:1200px}
.v-artd .sp-354 :where(.prose) .fc-in{appearance:none;display:block;width:100%;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer;position:relative}
.v-artd .sp-354 :where(.prose) .fc-f,.v-artd .sp-354 :where(.prose) .fc-b{display:block;padding:22px 20px;border-radius:18px;font-size:14.5px;line-height:1.6}
.v-artd .sp-354 :where(.prose) .fc-f{background:var(--navy);color:#fff;box-shadow:0 20px 34px -24px rgba(27,31,58,.8)}
.v-artd .sp-354 :where(.prose) .fc-b{margin-top:8px;background:#fff;border:2px solid var(--blue);color:#2b3042}
.v-artd .sp-354 :where(.prose) .fc small{display:block;margin-bottom:6px;font-size:12px;font-weight:800;color:#a9b9ff}
.v-artd .sp-354 :where(.prose) .fc-b small{color:#1d3fc4}
.v-artd .sp-354 :where(.prose) .fc-f b{display:block;margin-bottom:12px;font-size:19px;color:#fff}
.v-artd .sp-354 :where(.prose) .fc-b b{color:#1d3fc4}
.v-artd .sp-354 :where(.prose) .fc q{display:block;padding:14px;border-radius:12px;background:rgba(255,255,255,.1);font-size:15.5px;font-weight:700;quotes:none}
.v-artd .sp-354 :where(.prose) .fc i{display:none}
.v-artd .sp-354 :where(.prose) .fc-in:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:18px}
/* 뒤집기(스크립트가 붙인 .flip 에서만) */
.v-artd .sp-354 :where(.prose) .qd-deck.flip .fc-in{display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.v-artd .sp-354 :where(.prose) .qd-deck.flip .fc-f,.v-artd .sp-354 :where(.prose) .qd-deck.flip .fc-b{grid-area:1/1;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;min-height:250px}
.v-artd .sp-354 :where(.prose) .qd-deck.flip .fc-b{transform:rotateY(180deg);display:block;padding-top:40px;font-size:16px}
.v-artd .sp-354 :where(.prose) .qd-deck.flip .fc-in[aria-pressed=true]{transform:rotateY(180deg)}
.v-artd .sp-354 :where(.prose) .qd-deck.flip .fc i{display:block;margin-top:14px;font-style:normal;font-size:12.5px;font-weight:800;color:var(--yellow)}
.v-artd .sp-354 :where(.prose) .qd-deck.flip .fc i::after{content:" ↻"}
@media (prefers-reduced-motion:reduce){.v-artd .sp-354 :where(.prose) .qd-deck.flip .fc-in{transition:none}}

/* 신호등 */
.v-artd .sp-354 :where(.prose) .qd-lamp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 0}
.v-artd .sp-354 :where(.prose) .qd-lamp p{position:relative;margin:0;padding:16px 16px 16px 56px;border-radius:14px;background:var(--soft);font-size:14.5px;line-height:1.55;color:#3b4152}
.v-artd .sp-354 :where(.prose) .qd-lamp i{position:absolute;left:16px;top:18px;width:26px;height:26px;border-radius:50%}
.v-artd .sp-354 :where(.prose) .lp-r i{background:#e5484d;box-shadow:0 0 0 5px #ffd6d7}
.v-artd .sp-354 :where(.prose) .lp-b i{background:var(--blue);box-shadow:0 0 0 5px var(--blue2)}
.v-artd .sp-354 :where(.prose) .qd-lamp b{display:block;font-size:15.5px;color:var(--ink)}

/* 세 단 선반 */
.v-artd .sp-354 :where(.prose) .qd-shelf{margin:18px 0 16px}
.v-artd .sp-354 :where(.prose) .qd-shelf p{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:14px 16px 16px;border-bottom:6px solid var(--ink)}
.v-artd .sp-354 :where(.prose) .qd-shelf p+p{margin-top:10px}
.v-artd .sp-354 :where(.prose) .qd-shelf b{flex-basis:100%;font-size:13.5px;color:#4a5060}
.v-artd .sp-354 :where(.prose) .qd-shelf span{padding:9px 14px;border-radius:8px 8px 2px 2px;font-weight:800;font-size:14.5px}
.v-artd .sp-354 :where(.prose) .sh1 span{background:var(--blue);color:#fff}
.v-artd .sp-354 :where(.prose) .sh2 span{background:var(--blue2);color:#1d3fc4}
.v-artd .sp-354 :where(.prose) .sh3 span{background:var(--soft);color:#3b4152}

/* 두 예약 흐름 */
.v-artd .sp-354 :where(.prose) .qd-twin{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 16px}
.v-artd .sp-354 :where(.prose) .qd-twin>div{padding:18px;border-radius:16px;border:1.5px solid var(--line)}
.v-artd .sp-354 :where(.prose) .tw-hot{border-color:#e5484d!important;background:#fffafa}
.v-artd .sp-354 :where(.prose) .tw-k{margin:0 0 12px;font-weight:900;font-size:15.5px}
.v-artd .sp-354 :where(.prose) .tw-f{display:flex;align-items:center;gap:0;margin:0}
.v-artd .sp-354 :where(.prose) .tw-f span{flex:1;padding:10px 6px;background:var(--soft);font-weight:800;font-size:13.5px;text-align:center;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%)}
.v-artd .sp-354 :where(.prose) .tw-f span:first-child{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);border-radius:8px 0 0 8px}
.v-artd .sp-354 :where(.prose) .tw-hot .tw-f span{background:#ffd6d7;color:#7d1a1f}
.v-artd .sp-354 :where(.prose) .tw-n{margin:12px 0 0;font-size:13.5px;font-weight:800;color:#b4232a}
.v-artd .sp-354 :where(.prose) .qd-ask{padding:16px 18px;border-radius:4px 16px 16px 16px;background:var(--navy);color:#d3d9f5;font-size:15px!important}
.v-artd .sp-354 :where(.prose) .qd-ask b{color:#fff}

/* 네 칸 화살표 띠 */
.v-artd .sp-354 :where(.prose) .qd-chev{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:16px 0 16px}
.v-artd .sp-354 :where(.prose) .qd-chev li{padding:0 12px 0 0;font-size:14px;line-height:1.55;color:#3b4152}
.v-artd .sp-354 :where(.prose) .qd-chev b{display:block;margin-bottom:10px;padding:12px 18px 12px 14px;background:var(--blue2);color:#1d3fc4;font-size:14.5px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%)}
.v-artd .sp-354 :where(.prose) .qd-chev li:first-child b{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.v-artd .sp-354 :where(.prose) .qd-chev li:nth-child(even) b{background:#c9d5ff}

/* 소개팅 앱 사례 */
.v-artd .sp-354 :where(.prose) .qd-case{margin:16px 0 18px;padding:22px;border-radius:18px;background:var(--navy);color:#fff}
.v-artd .sp-354 :where(.prose) .cs-k{margin:0;font-size:12.5px;font-weight:800;color:#a9b9ff}
.v-artd .sp-354 :where(.prose) .cs-t{margin:2px 0 16px;font-size:19px;font-weight:900}
.v-artd .sp-354 :where(.prose) .cs-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.v-artd .sp-354 :where(.prose) .cs-flow span{padding:8px 12px;border-radius:10px;font-weight:800;font-size:14px}
.v-artd .sp-354 :where(.prose) .cs-ex{background:#3a1720;color:#ffb3b8}
.v-artd .sp-354 :where(.prose) .cs-rule{background:var(--yellow);color:var(--navy)}
.v-artd .sp-354 :where(.prose) .cs-test{background:#fff;color:var(--navy)}
.v-artd .sp-354 :where(.prose) .cs-flow em{font-style:normal;font-weight:900;color:#a9b9ff}

/* 두 장부 대조 */
.v-artd .sp-354 :where(.prose) .qd-match{display:grid;grid-template-columns:1fr 90px 1fr;align-items:end;gap:0;margin:16px 0 16px}
.v-artd .sp-354 :where(.prose) .qd-match>div:not(.mt-mid){display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.v-artd .sp-354 :where(.prose) .mt-k{margin:0 0 4px;font-weight:900;font-size:14.5px}
.v-artd .sp-354 :where(.prose) .qd-match span{padding:9px 12px;border-radius:8px;background:var(--soft);font-weight:700;font-size:14px}
.v-artd .sp-354 :where(.prose) .qd-match span.bad{background:#fff1f1;color:#b4232a;border:1.5px dashed #e5484d}
.v-artd .sp-354 :where(.prose) .mt-mid{display:flex;flex-direction:column;gap:6px;padding:16px 8px}
.v-artd .sp-354 :where(.prose) .mt-mid i{height:38px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12.5px;font-weight:800;color:#1d3fc4;background:linear-gradient(var(--blue),var(--blue)) center/100% 2px no-repeat}
.v-artd .sp-354 :where(.prose) .mt-mid b{padding:0 5px;background:#fff;color:inherit}
.v-artd .sp-354 :where(.prose) .mt-mid i.bad{color:#b4232a;background:linear-gradient(#e5484d,#e5484d) center/100% 2px no-repeat}

/* 결제 카드 진행 방식 */
.v-artd .sp-354 :where(.prose) .qd-we{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center;margin:30px 0 8px;padding:26px 28px;border-radius:20px;background:var(--soft)}
.v-artd .sp-354 :where(.prose) .we-card{position:relative;aspect-ratio:1.586;border-radius:14px;background:linear-gradient(135deg,var(--navy),var(--blue));box-shadow:0 20px 34px -18px rgba(27,31,58,.7);color:#fff}
.v-artd .sp-354 :where(.prose) .we-card i{position:absolute;left:18px;top:26px;width:34px;height:26px;border-radius:5px;background:var(--yellow)}
.v-artd .sp-354 :where(.prose) .we-card span{position:absolute;left:18px;bottom:16px;font-weight:900;letter-spacing:.08em}
.v-artd .sp-354 :where(.prose) .we-tx p{margin:0}
.v-artd .sp-354 :where(.prose) .we-k{font-size:13px;font-weight:800;color:#1d3fc4}
.v-artd .sp-354 :where(.prose) .we-t{margin:4px 0 12px!important;font-size:19px;font-weight:900;color:var(--ink)}
.v-artd .sp-354 :where(.prose) .we-l{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px!important}
.v-artd .sp-354 :where(.prose) .we-l span{padding:6px 12px;border-radius:8px;background:#fff;border:1px solid var(--line);font-weight:800;font-size:14px}
.v-artd .sp-354 :where(.prose) .we-btn{display:inline-flex;padding:12px 24px;border-radius:999px;background:var(--navy);color:#fff!important;font-weight:800;text-decoration:none!important}
.v-artd .sp-354 :where(.prose) .we-btn:hover{background:var(--blue)}

/* 검토와 먼저 확인 */
.v-artd .sp-354 :where(.prose) .qd-plan{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 14px}
.v-artd .sp-354 :where(.prose) .qd-plan>div{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px}
.v-artd .sp-354 :where(.prose) .qd-plan p{margin:0 0 4px;font-size:13px;font-weight:800;color:#4a5060}
.v-artd .sp-354 :where(.prose) .pn-a{border:1.5px solid var(--line)}
.v-artd .sp-354 :where(.prose) .pn-a span{padding:8px 0;border-bottom:1px dashed var(--line);font-weight:700;font-size:14.5px}
.v-artd .sp-354 :where(.prose) .pn-b{background:var(--blue2)}
.v-artd .sp-354 :where(.prose) .pn-b b{font-size:17px;color:#1d3fc4}
.v-artd .sp-354 :where(.prose) .pn-b span{padding:6px 10px;border-radius:8px;background:#fff;font-weight:700;font-size:14px}

/* 축소 대 배분 */
.v-artd .sp-354 :where(.prose) .qd-cut{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 16px}
.v-artd .sp-354 :where(.prose) .qd-cut>div{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;background:var(--soft)}
.v-artd .sp-354 :where(.prose) .qd-cut p{margin:0 0 6px;font-weight:900;font-size:14.5px}
.v-artd .sp-354 :where(.prose) .ct-x p{color:#b4232a}
.v-artd .sp-354 :where(.prose) .ct-o p{color:#1d3fc4}
.v-artd .sp-354 :where(.prose) .qd-cut span{display:block;width:var(--w);padding:8px 10px;border-radius:6px;background:var(--blue);color:#fff;font-weight:800;font-size:13px;white-space:nowrap}
.v-artd .sp-354 :where(.prose) .ct-x span{background:#5b6475}
.v-artd .sp-354 :where(.prose) .ct-x span:nth-child(3){background:#c4282d}
.v-artd .sp-354 :where(.prose) .ct-x span:nth-child(3)::after{content:" 품질 부족 가능";font-weight:600;font-size:12px}

/* ≠ */
.v-artd .sp-354 :where(.prose) .qd-ne{display:flex;align-items:center;gap:12px;font-weight:900;font-size:16px}
.v-artd .sp-354 :where(.prose) .qd-ne span{padding:12px 16px;border-radius:12px;background:var(--soft)}
.v-artd .sp-354 :where(.prose) .qd-ne span:last-child{background:var(--blue2);color:#1d3fc4}
.v-artd .sp-354 :where(.prose) .qd-ne em{font-style:normal;font-size:24px;color:#c4282d}

.v-artd .sp-354 :where(.prose) .qd-rel{margin:46px 0 16px;padding:18px 0 0;border-top:1px solid var(--line)}
.v-artd .sp-354 :where(.prose) .qd-rel li{padding:5px 0}
.v-artd .sp-354 :where(.prose) .qd-rel a{font-weight:700;text-decoration:none}
.v-artd .sp-354 :where(.prose) .qd-rel a::before{content:"→ ";color:var(--sub)}

@media (max-width:720px){
  .v-artd .sp-354 :where(.prose) .qd-lead{font-size:18px}
  .v-artd .sp-354 .prose h2{font-size:22px}
  .v-artd .sp-354 :where(.prose) .qd-s{padding-top:46px}
  .v-artd .sp-354 :where(.prose) .qd-deck{grid-template-columns:1fr}
  .v-artd .sp-354 :where(.prose) .qd-deck.flip .fc-f,.v-artd .sp-354 :where(.prose) .qd-deck.flip .fc-b{min-height:210px}
  .v-artd .sp-354 :where(.prose) .qd-lamp,.v-artd .sp-354 :where(.prose) .qd-twin,.v-artd .sp-354 :where(.prose) .qd-plan,.v-artd .sp-354 :where(.prose) .qd-cut{grid-template-columns:1fr}
  .v-artd .sp-354 :where(.prose) .qd-chev{grid-template-columns:1fr;gap:10px}
  .v-artd .sp-354 :where(.prose) .qd-match{grid-template-columns:1fr 54px 1fr}
  .v-artd .sp-354 :where(.prose) .qd-match span{font-size:12.5px;padding:8px}
  .v-artd .sp-354 :where(.prose) .mt-mid i{font-size:11px}
  .v-artd .sp-354 :where(.prose) .qd-we{grid-template-columns:1fr;padding:22px 20px}
  .v-artd .sp-354 :where(.prose) .we-card{max-width:220px}
  .v-artd .sp-354 :where(.prose) .qd-ne{flex-direction:column;align-items:stretch;gap:4px;text-align:center}
}