/* =============================================================
   fandit.net 구매가이드 퀴즈 엔진 — fd-guide-*
   도면 팔레트(웜 페이퍼 + 잉크 네이비 + 측정 오렌지)
   🔴 인포팁의 it-* 클래스는 건드리지 않는다. 전용 네임스페이스.
   ============================================================= */
:root{
  --fd-bg:#FAF8F4; --fd-surface:#FFFFFF; --fd-ink:#16202B; --fd-ink-soft:#5A6472;
  --fd-ink-faint:#8A9199; --fd-line:#E9E4DA; --fd-brand:#17456B; --fd-brand-soft:#E6EDF3;
  --fd-accent:#C2551F; --fd-accent-soft:#FBEDE4; --fd-warn:#A33A2A; --fd-warn-soft:#F8E9E6;
  --fd-ok:#1F6B58; --fd-ok-soft:#E3F1EC; --fd-amber:#8A6A00; --fd-amber-soft:#FDF3D2;
}
#fd-guide-app{ color:var(--fd-ink); }
#fd-guide-app *{ box-sizing:border-box; }

/* ---- 머리 ---- */
.fd-guide-head{ margin-bottom:18px; }
.fd-guide-head h1{ font-size:29.9px; font-weight:900; letter-spacing:-.5px; margin:0 0 7px; line-height:1.35; word-break:keep-all; }
.fd-guide-head .sub{ font-size:17.2px; color:var(--fd-ink-soft); line-height:1.75; word-break:keep-all; }
.fd-guide-head .sub b{ font-weight:800; color:var(--fd-ink); }
.fd-guide-empty{ font-size:17.2px; color:var(--fd-ink-faint); padding:40px 0; text-align:center; }

/* ---- 문항 ---- */
.fd-q{ background:var(--fd-surface); border:2px solid var(--fd-brand); border-radius:20px; padding:21px 21px 19px; margin-bottom:16px; }
.fd-q .step{ font-size:14.4px; font-weight:900; color:var(--fd-brand); letter-spacing:.4px; margin-bottom:8px; }
.fd-q .q{ font-size:24.1px; font-weight:900; line-height:1.45; letter-spacing:-.4px; margin-bottom:5px; word-break:keep-all; }
.fd-q .hint{ font-size:16.1px; color:var(--fd-ink-faint); margin-bottom:13px; line-height:1.6; word-break:keep-all; }
.fd-q .opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fd-q .opt{
  display:block; font-size:16.7px; font-weight:700; background:var(--fd-bg);
  border:1px solid var(--fd-line); border-radius:13px; padding:14px 15px;
  line-height:1.45; word-break:keep-all; cursor:pointer; text-align:left;
  color:var(--fd-ink); text-decoration:none; font-family:inherit; width:100%;
}
.fd-q .opt:hover{ border-color:var(--fd-brand); background:var(--fd-brand-soft); }
.fd-q .bar{ height:5px; border-radius:999px; background:var(--fd-line); margin-top:15px; overflow:hidden; }
.fd-q .bar i{ display:block; height:100%; background:var(--fd-brand); border-radius:999px; }
.fd-q .barx{ font-size:14.9px; color:var(--fd-ink-faint); margin-top:8px; font-weight:600; }
.fd-q .back{
  border:0; background:none; color:var(--fd-brand); font-weight:800; font-size:14.9px;
  cursor:pointer; padding:0 0 0 8px; font-family:inherit; text-decoration:none;
}

/* ---- 결과 ---- */
.fd-res{ background:var(--fd-surface); border:1px solid var(--fd-line); border-radius:20px; padding:18px 20px 17px; }
.fd-res-h{ font-size:16.1px; font-weight:900; color:var(--fd-ink-soft); margin-bottom:10px; }
.fd-res-h em{ font-style:normal; color:var(--fd-brand); }
.fd-res .hero{ border-radius:16px; padding:16px 18px; margin-bottom:15px; }
.fd-res .hero.ok{ background:var(--fd-ok-soft); }
.fd-res .hero.no{ background:var(--fd-warn-soft); }
.fd-res .hero .l{ display:block; font-size:14.9px; font-weight:800; color:var(--fd-ink-soft); }
.fd-res .hero .a{ display:block; font-size:26.4px; font-weight:900; margin:5px 0 3px; letter-spacing:-.5px; word-break:keep-all; }
.fd-res .hero.ok .a{ color:var(--fd-ok); }
.fd-res .hero.no .a{ color:var(--fd-warn); }
.fd-res .hero .s{ display:block; font-size:15.5px; color:var(--fd-ink-soft); }

/* 조건표 */
.fd-res .rows{ border:1px solid var(--fd-line); border-radius:15px; padding:4px 15px; margin-bottom:15px; }
.fd-res .row{ display:flex; gap:12px; padding:9px 0; font-size:16.1px; line-height:1.65; align-items:flex-start; }
.fd-res .row + .row{ border-top:1px solid var(--fd-line); }
.fd-res .row .k{ flex:0 0 76px; color:var(--fd-ink-soft); font-weight:700; }
.fd-res .row .v{ flex:1; min-width:0; color:var(--fd-ink); font-weight:600; word-break:keep-all; }
.fd-res .row .dim{ color:var(--fd-ink-faint); font-weight:500; }
.fd-res .row .no{ color:var(--fd-warn); font-weight:800; }

/* 충돌 */
.fd-res .warns{ display:flex; flex-direction:column; gap:9px; margin-bottom:15px; }
.fd-res .w{ border-radius:14px; padding:13px 15px; }
.fd-res .w.block{ background:var(--fd-warn-soft); }
.fd-res .w.warn{ background:var(--fd-amber-soft); }
.fd-res .w.info{ background:var(--fd-brand-soft); }
.fd-res .w .wt{ font-size:16.7px; font-weight:900; line-height:1.5; word-break:keep-all; }
.fd-res .w .bd{
  display:inline-block; font-size:13.8px; font-weight:900; color:#fff;
  border-radius:999px; padding:2px 9px; margin-right:7px; vertical-align:1px;
}
.fd-res .w.block .bd{ background:var(--fd-warn); }
.fd-res .w.warn .bd{ background:var(--fd-amber); }
.fd-res .w.info .bd{ background:var(--fd-brand); }
.fd-res .w.block .wt{ color:var(--fd-warn); }
.fd-res .w.warn .wt{ color:var(--fd-amber); }
.fd-res .w.info .wt{ color:var(--fd-brand); }
.fd-res .w .wb{ font-size:15.5px; color:var(--fd-ink-soft); line-height:1.75; margin-top:6px; word-break:keep-all; }
/* 🔴 설명문 안의 <b>는 인라인 강조다. 블록으로 만들면 줄이 끊긴다 */
.fd-res .w .wb b{ display:inline; font-weight:800; color:var(--fd-ink); }
.fd-res .w .wa{ margin:9px 0 0; padding-left:17px; }
.fd-res .w .wa li{ font-size:15.5px; color:var(--fd-ink); line-height:1.8; padding:2px 0; word-break:keep-all; }
.fd-res .w .wa li b{ display:inline; font-weight:800; }

/* 체크리스트 */
.fd-res .check{ background:var(--fd-bg); border-radius:15px; padding:14px 16px; margin-bottom:13px; }
.fd-res .check .h{ font-size:16.1px; font-weight:900; margin-bottom:7px; }
.fd-res .check ul{ margin:0; padding-left:17px; }
.fd-res .check li{ font-size:15.5px; color:var(--fd-ink-soft); line-height:1.8; word-break:keep-all; }
.fd-res .check li b{ display:inline; color:var(--fd-ink); font-weight:800; }

/* CTA · 고지 */
.fd-res .cta{
  display:flex; align-items:center; gap:11px; background:var(--fd-brand);
  border-radius:14px; padding:13px 16px; flex-wrap:wrap;
}
.fd-res .cta .q{ font-size:14.4px; font-weight:700; color:rgba(255,255,255,.82); white-space:nowrap; }
.fd-res .cta .w{ font-size:17.2px; font-weight:900; color:#fff; word-break:keep-all; }
.fd-res .note{ font-size:14.4px; color:var(--fd-ink-faint); line-height:1.65; margin-top:10px; word-break:keep-all; }
.fd-res .again{ margin-top:12px; }
.fd-res .again a, .fd-res .again button{
  font-size:15.5px; font-weight:800; color:var(--fd-ink-soft); background:var(--fd-bg);
  border:1px solid var(--fd-line); border-radius:11px; padding:9px 15px;
  cursor:pointer; font-family:inherit; text-decoration:none; display:inline-block;
}

@media (max-width:520px){
  .fd-q .opts{ grid-template-columns:1fr; }
  .fd-guide-head h1{ font-size:25.3px; }
  .fd-q .q{ font-size:20.7px; }
  .fd-res .hero .a{ font-size:23px; }
  .fd-res .row{ flex-direction:column; gap:2px; }
  .fd-res .row .k{ flex:none; font-size:14.9px; }
}
@media (prefers-color-scheme:dark){
  :root{
    --fd-bg:#12140F; --fd-surface:#1A1D18; --fd-ink:#F0EFE9; --fd-ink-soft:#B2B4AC;
    --fd-ink-faint:#7E8179; --fd-line:#2C2F28; --fd-brand:#7FA8C9; --fd-brand-soft:#1E2A33;
    --fd-accent:#E38A5C; --fd-accent-soft:#33231A; --fd-warn:#E08B7C; --fd-warn-soft:#331F1C;
    --fd-ok:#6FBFA5; --fd-ok-soft:#152A24; --fd-amber:#D9B45C; --fd-amber-soft:#332614;
  }
  .fd-res .cta{ background:#1E2A33; }
}

/* ---- 제휴 고지 (결과 최상단 · 공정위) ---- */
.fd-disclose{
  background:var(--fd-amber-soft); border:1px solid rgba(138,106,0,.22);
  border-radius:12px; padding:11px 14px; margin-bottom:15px;
  font-size:14.9px; color:var(--fd-amber); line-height:1.65; word-break:keep-all; font-weight:600;
}

/* ---- 제휴 CTA (결과 최하단) ---- */
.fd-affwrap{ margin-top:4px; }
.fd-affwrap .lead{
  font-size:15.5px; font-weight:800; color:var(--fd-ink-soft);
  margin-bottom:8px; word-break:keep-all;
}
/* 🔴 육안으로 "누르는 것"임이 분명해야 한다 — 입체감 + 화살표 + 커서 + 눌림 반응 */
a.fd-aff{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--fd-accent); border-radius:14px; padding:16px 20px;
  text-decoration:none; color:#fff; cursor:pointer;
  box-shadow:0 3px 0 rgba(122,52,18,.85), 0 6px 16px rgba(194,85,31,.28);
  transition:transform .08s ease, box-shadow .08s ease;
}
a.fd-aff:hover{
  box-shadow:0 4px 0 rgba(122,52,18,.85), 0 9px 22px rgba(194,85,31,.34);
  transform:translateY(-1px);
}
a.fd-aff:active{
  transform:translateY(3px);
  box-shadow:0 0 0 rgba(122,52,18,.85), 0 2px 8px rgba(194,85,31,.24);
}
a.fd-aff .w{ font-size:19px; font-weight:900; color:#fff; word-break:keep-all; line-height:1.4; }
a.fd-aff .arrow{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.22); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:900; line-height:1;
}
/* 링크가 아직 없을 때 — 검색어 안내로 폴백 (버튼처럼 보이면 안 된다) */
.fd-aff.nolink{
  display:block; background:var(--fd-bg); border:1px dashed var(--fd-ink-faint);
  border-radius:12px; padding:13px 16px; box-shadow:none;
}
.fd-aff.nolink .w{ font-size:17.2px; font-weight:900; color:var(--fd-ink); }
@media (max-width:520px){
  a.fd-aff{ padding:15px 17px; }
  a.fd-aff .w{ font-size:17.8px; }
}
@media (prefers-color-scheme:dark){
  a.fd-aff{ box-shadow:0 3px 0 rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.4); }
}