@charset "utf-8";
/* 가게 여는 순서 (/opening) — 시안 6판 docs/features/store-opening/3-result-new-fitout.html 에서 옮겼다.
   견적신청 화면(.qp · .quote_0501)의 머리·바닥·버튼 위에 본문만 더한다. 모든 규칙은 .sf 안에 가둔다. */
.sf{--fire:#ff5a00}
.sf .qp_head h2{word-break:keep-all}
.sf .qp_steps{margin-top:14px}
.sf .bc_facts .hl dd{color:var(--fire);font-weight:700}
.sf .bc_facts .wait dd{color:#9aa2a9;font-weight:500}

/* ② 업종 · 따라 열리는 질문 */
.sf .more{display:block;width:100%;margin-top:10px;padding:13px 0;border:1px solid #dfe3e6;border-radius:10px;background:#fafbfc;font-size:15px;color:#555;text-align:center;cursor:pointer}
.sf .more small{display:block;font-size:12.5px;color:#9aa2a9;margin-top:3px;padding:0 8px;word-break:keep-all}
.sf .reveal{font-size:12.5px;color:#b8460b;margin:14px 0 6px}
.sf .ask{margin-top:14px;border:1.5px solid #ffd2b8;background:#fffaf6;border-radius:14px;padding:16px 14px 14px}
.sf .ask.need{border-color:#e5484d;background:#fff7f7}
.sf .ask .q{font-size:17px;font-weight:800;color:#1f2d3a;letter-spacing:-.2px;word-break:keep-all}
.sf .ask .h{font-size:13.5px;color:#8b949c;margin:3px 0 10px;line-height:1.45}
.sf .opts{display:flex;gap:8px}
.sf .opts button{flex:1;text-align:center;padding:14px 0;border:1.5px solid #dfe3e6;border-radius:10px;background:#fff;font-size:15.5px;font-weight:600;color:#444;cursor:pointer;transition:border-color .12s, background-color .12s}
.sf .opts button:hover{border-color:#ffb489}
.sf .opts button.on{border-color:var(--fire);color:var(--fire);font-weight:700;background:#fff5ef;box-shadow:0 2px 8px rgba(255,90,0,.14)}
/* 답이 긴 질문(이어받기)은 세로로 쌓고, 왼쪽에 고른 표시를 둔다 — 줄만 있으면 무엇을 눌러야 할지 눈이 안 간다 */
.sf .opts.col{flex-direction:column;gap:10px}
.sf .opts.col button{position:relative;text-align:left;padding:15px 14px 15px 46px;line-height:1.45;font-size:15.5px;color:#333}
.sf .opts.col button::before{content:"";position:absolute;left:15px;top:17px;width:20px;height:20px;border-radius:50%;border:2px solid #c9ced3;background:#fff;box-sizing:border-box}
.sf .opts.col button.on::before{border-color:var(--fire);border-width:6px}
.sf .opts.col button small{display:block;font-size:13px;color:#8b949c;font-weight:400;margin-top:3px}
.sf .opts.col button.on{color:#b8460b}
.sf .opts.col button.on small{color:#c9763f}
.sf .chips_t{font-size:14px;font-weight:700;color:#333;margin-top:12px}
.sf .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sf .chips button{flex:none;padding:7px 12px;border-radius:18px;font-size:13.5px;border:1px solid #dfe3e6;background:#fff;color:#555;cursor:pointer}
.sf .chips button.on{border-color:var(--fire);color:var(--fire);font-weight:700;background:#fff5ef}
.sf .ask .pics{display:flex;gap:8px;margin:0 0 10px}
.sf .ask .pic{flex:1;margin:0;border:1px solid #f0d9c9;border-radius:9px;background:#fff;overflow:hidden;text-align:center}
.sf .ask .pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sf .ask .pic figcaption{font-size:12.5px;line-height:1.35;color:#555;padding:6px 4px 7px;word-break:keep-all}
.sf .ask .pic figcaption b{display:block;font-size:13.5px;color:#333}

/* ③ 판정 칸 */
.sf .hero{border-radius:14px;background:linear-gradient(135deg,#ff6a13,#ff8a3d);color:#fff;padding:18px 18px 16px;margin:2px 0 22px;box-shadow:0 6px 18px rgba(255,90,0,.18)}
.sf .hero.green{background:linear-gradient(135deg,#1f9d6b,#34b884);box-shadow:0 6px 18px rgba(31,157,107,.2)}
.sf .hero.gray{background:linear-gradient(135deg,#5b6670,#7b8791);box-shadow:0 6px 18px rgba(60,70,80,.18)}
.sf .hero .k{display:inline-block;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.22);border-radius:20px;padding:3px 10px}
.sf .hero .t{font-size:22px;font-weight:800;margin:10px 0 4px;letter-spacing:-.3px;word-break:keep-all}
.sf .hero .s{font-size:15px;line-height:1.5;opacity:.95;word-break:keep-all}
.sf .hero .why2{margin-top:10px;font-size:13.5px;background:rgba(0,0,0,.12);border-radius:8px;padding:8px 10px;line-height:1.5;white-space:pre-line;word-break:keep-all}
.sf .hero .flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;font-weight:700}
.sf .hero .flow span{background:#fff;color:#ff5a00;border-radius:7px;padding:6px 8px}
.sf .hero.green .flow span{color:#1f9d6b}
.sf .hero .flow i{font-style:normal;opacity:.9}

/* ③ 단계 카드 — 시안 6판: 카드 하나에 단계 하나, 들여쓰기 없음 */
.sf .fl{list-style:none;margin:0;padding:0}
.sf .fl>li{margin:0 0 16px;border:1.5px solid #dde5ee;border-radius:14px;padding:0 12px 10px;background:#fff;overflow:hidden}
.sf .fl>li.fire{border-color:#ffc9a8}
.sf .fl .hd{display:flex;align-items:center;gap:8px;margin:0 -12px 8px;padding:12px 14px;background:#eef3f8;border-bottom:1px solid #e2eaf2}
.sf .fl li.fire .hd{background:#fff1e8;border-bottom-color:#ffe0cc}
.sf .fl .hd .n{flex:none;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #9db4cb;font-size:12.5px;font-weight:800;color:#3d6188;display:flex;align-items:center;justify-content:center}
.sf .fl li.fire .hd .n{border-color:#ff5a00;color:#ff5a00}
.sf .fl .hd .st{font-size:17px;font-weight:800;color:#222}
.sf .fl .hd .when{font-size:13px;color:#8b949c;font-weight:600;margin-left:auto}
.sf .fl .it{font-size:15px;line-height:1.55;color:#555;padding:9px 2px;border-bottom:1px solid #f1f3f4;word-break:keep-all}
.sf .fl .it b{color:#222}
.sf .fl .it.fire{border:0;background:#fff5ef;border-radius:10px;padding:12px;margin:8px 0;color:#333}
.sf .fl .it.fire .tag{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:#ff5a00;border-radius:4px;padding:1px 6px;margin-right:6px;vertical-align:1px}
.sf .fl .it .why{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:#b8460b}
.sf .fl .it .why:before{content:"왜 지금? ";font-weight:700}
.sf .ct{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0;padding:10px 12px;border:1px solid #e6eaee;border-radius:10px;font-size:14px;line-height:1.4;color:#55606a;background:#fff}
.sf .ct b{display:block;color:#1f2d3a;font-size:14.5px}
.sf .ct a{flex:none;font-weight:800;color:#1d4f91;text-decoration:none;border:1px solid #cfdcec;border-radius:8px;padding:7px 10px;background:#f5f9ff;font-size:14px;white-space:nowrap}
.sf .tip{border:1px solid #dfe8f5;background:#f5f9ff;border-radius:10px;padding:12px 13px;margin:8px 0;font-size:14.5px;line-height:1.55;color:#34495e;word-break:keep-all}
.sf .tip b{display:block;color:#1d4f91}
.sf .fl .it:last-child,.sf .fl .ct:last-child,.sf .fl .tip:last-child{margin-bottom:2px}

/* ③ 재발급 */
.sf .bring{margin:0 0 6px;padding:14px 16px 14px 32px;border:1px solid #eceef0;border-radius:12px;list-style:disc}
.sf .bring li{font-size:15px;line-height:1.6;color:#333;word-break:keep-all}
.sf .warn{border:1px solid #ffd2b8;background:#fffaf6;border-radius:10px;padding:12px 13px;font-size:14px;line-height:1.55;color:#6b3a17;margin-top:14px;word-break:keep-all}
.sf .warn b{color:#b8460b}
.sf .warn a{color:#b8460b;font-weight:700;text-decoration:underline}

/* ③ 시설 목록 펼치기 */
.sf .acc{display:flex;width:100%;justify-content:space-between;align-items:center;border:1px solid #dfe3e6;border-radius:12px;padding:15px 16px;font-size:16px;font-weight:700;color:#222;margin-top:4px;background:#fff;text-align:left;cursor:pointer}
.sf .acc small{display:block;font-size:13px;color:#8b949c;font-weight:500;margin-top:2px}
.sf .acc em{flex:none;font-style:normal;color:#ff5a00;font-size:14px;margin-left:8px}
.sf .acc[aria-expanded="true"] em{transform:none}
.sf .facts_wrap{margin-top:10px}
.sf .facts{margin:0 0 6px;padding:0;list-style:none;border:1px solid #eceef0;border-radius:12px;overflow:hidden}
.sf .facts li{display:flex;gap:10px;padding:12px 14px;border-top:1px solid #f1f3f4;font-size:15px;line-height:1.45;word-break:keep-all}
.sf .facts li:first-child{border-top:0}
.sf .facts .n{flex:1;color:#222;font-weight:600}
.sf .facts .r{flex:1.25;color:#7b848c;font-size:14px}
.sf .facts li.big .n{color:var(--fire)}
.sf .facts li.cond .n:after{content:" · 조건부";font-size:12px;font-weight:500;color:#8b949c}
.sf .facts li.no .n{color:#9aa2a9;font-weight:500;text-decoration:line-through}
.sf .facts li.no .r{color:#9aa2a9}
.sf .facts_t{font-size:13.5px;font-weight:700;color:#8b949c;margin:14px 0 6px}

/* 덜 고른 채 '다음' 을 누르면 그 질문으로 데려가 흔든다 (회색으로 잠가 두면 왜 안 되는지 모른다) */
.sf .need_tx{display:none;margin:10px 0 0;font-size:14px;font-weight:700;color:#e5484d}
.sf .need .need_tx,.sf .need_tx.need{display:block}
.sf .qp_pick.need,.sf #askPrevious.need{outline:2px solid #e5484d;outline-offset:6px;border-radius:12px}
.sf .shake{animation:sfShake .5s}
@keyframes sfShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
@media (prefers-reduced-motion: reduce){.sf .shake{animation:none}}
.sf .qp_sub_wrap.need{border:1.5px solid #e5484d;border-radius:12px;background:#fff7f7}
.sf .qp_addrbtn.need{border-color:#e5484d}

/* ③ 아래 — 견적 버튼은 이 화면의 주인공이라 넓게. 사이트 기본(min-width:16rem)은 긴 글자가 넘친다 */
.sf .qp_pcbtn a{padding:0 2.8rem;white-space:nowrap}
.sf .qp_pcbtn .b_next{min-width:30rem;font-size:1.9rem;border-radius:0.8rem}

/* ③ 아래 */
.sf .cta_sub{text-align:center;font-size:14px;color:#8b949c;margin-top:10px;line-height:1.5;word-break:keep-all}
.sf .disc{margin-top:22px;font-size:13px;line-height:1.6;color:#9aa2a9;border-top:1px solid #eceef0;padding-top:14px;white-space:pre-line;word-break:keep-all}
.sf .again{display:block;text-align:center;margin-top:16px;font-size:14px;color:#6b747c;text-decoration:underline}
.sf .cond{margin:-12px 0 20px;font-size:13.5px;line-height:1.5;color:#6b747c;background:#f6f7f8;border-radius:10px;padding:10px 12px;word-break:keep-all}

/* 중개사가 보낸 링크로 들어온 손님 화면 맨 위 (opening/broker-banner.html) */
.sf .bkr_banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#17233c;color:#fff;font-size:15px;line-height:1.45;word-break:keep-all}
.sf .bkr_banner b{color:#ffb27a}
.sf .bkr_banner .bb_tel{flex:none;padding:5px 12px;border-radius:999px;background:#fff;color:#17233c;font-weight:700;font-size:14px;text-decoration:none}

/* 중개사 발급 화면 /broker (opening/broker.html · broker-issued.html) */
.sf .bkr_kicker{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:999px;background:#fff1e6;color:#ee4700;font-size:13px;font-weight:700}
.sf .bkr_gets{margin:18px 0;padding:0;list-style:none}
.sf .bkr_gets li{position:relative;margin:0 0 8px;padding:0 0 0 22px;font-size:15px;line-height:1.55;color:#34495e;word-break:keep-all}
.sf .bkr_gets li:before{content:'';position:absolute;left:4px;top:8px;width:8px;height:8px;border-radius:50%;background:#ff7d1f}
.sf .bkr_form{margin-top:10px}
.sf .bkr_f{display:block;margin:0 0 14px}
.sf .bkr_f span{display:block;margin-bottom:6px;font-size:15px;font-weight:700;color:#17233c}
.sf .bkr_f em{margin-left:6px;font-style:normal;font-weight:400;font-size:13px;color:#8a929c}
.sf .bkr_f input{width:100%;height:50px;padding:0 14px;border:1px solid #d5dae0;border-radius:10px;font-size:16px;box-sizing:border-box}
.sf .bkr_agree{display:flex;align-items:center;gap:8px;margin:6px 0 4px;font-size:15px;color:#17233c}
/* ⚠️ 사이트 공통 초기화가 체크 칸을 appearance:none 으로 지워 둔다 — 여기서 되살린다 */
.sf .bkr_agree input{width:20px;height:20px;flex:none;-webkit-appearance:checkbox;appearance:auto;accent-color:#ff7d1f;margin:0}
.sf .bkr_terms{margin:0 0 16px;font-size:13.5px;color:#5b6475;line-height:1.55}
.sf .bkr_terms summary{cursor:pointer;color:#8a929c;text-decoration:underline}
.sf .bkr_terms dl{margin:8px 0 6px;padding:10px 12px;border-radius:8px;background:#f6f7f9}
.sf .bkr_terms dt{font-weight:700;color:#34495e}
.sf .bkr_terms dd{margin:0 0 6px}
.sf .bkr_err{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:#fff7f7;color:#e5484d;font-weight:700;font-size:14.5px}
.sf .bkr_go,.sf .bkr_sub{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 18px;border-radius:10px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;box-sizing:border-box}
.sf .bkr_go{width:100%;border:0;background:#ff7d1f;color:#fff}
.sf .bkr_sub{border:1px solid #d5dae0;background:#fff;color:#17233c}
.sf .bkr_note{margin:10px 0 0;font-size:14px;line-height:1.55;color:#6b7480;word-break:keep-all}
.sf .bkr_linkbox{margin:16px 0 10px;padding:12px 14px;border:1px dashed #ffb27a;border-radius:10px;background:#fffaf5}
.sf .bkr_linkbox .bl_k{display:block;font-size:13px;color:#8a929c}
.sf .bkr_linkbox .bl_v{display:block;margin-top:2px;font-size:14px;font-weight:700;color:#17233c;word-break:break-all}
.sf .bkr_btns{display:flex;flex-wrap:wrap;gap:8px}
.sf .bkr_btns .bkr_go{flex:1 1 100%}
.sf .bkr_btns .bkr_sub{flex:1 1 0}
.sf .bkr_done{min-height:1.4em;margin:8px 0 0;font-size:14px;color:#1d7a46;font-weight:700}
.sf .bkr_card{max-width:260px;margin:0 auto 12px;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(23,35,60,.18)}
.sf .bkr_card img{display:block;width:100%;height:auto}
.sf .bkr_keep{margin-top:18px}
.sf .bkr_banner .bb_tx small{display:block;margin-top:2px;font-size:13px;color:rgba(255,255,255,.75);font-weight:400}
/* /broker 첫 화면의 손님 화면 미리보기 */
.sf .bkr_preview{margin:6px 0 22px;padding:12px;border:1px solid #e3e7ec;border-radius:14px;background:#f7f8fa}
.sf .bkr_preview .bp_k{display:block;margin-bottom:8px;font-size:13px;font-weight:700;color:#8a929c}
.sf .bkr_preview .bkr_banner{margin:0}
.sf .bkr_preview .bb_tel{flex:none;padding:5px 12px;border-radius:999px;background:#fff;color:#17233c;font-weight:700;font-size:14px}
.sf .bkr_preview .bp_rest{margin-top:10px;text-align:center;font-size:15px;color:#9aa2a9}
.sf .bkr_preview .bp_rest b{color:#ff7d1f}
.sf .bkr_why{margin:22px 0 14px;padding:14px;border-radius:12px;background:#fff5ec;font-size:14.5px;line-height:1.6;color:#34495e;word-break:keep-all}
.sf .bkr_why p{margin:0}
.sf .bkr_why b{color:#17233c}
.sf .bkr_why .bw_how{margin-top:8px;padding-top:8px;border-top:1px solid #ffe0c7;font-size:14px;color:#5b6475}
.sf .bkr_done:empty{display:none}
.sf .bkr_btns .bkr_sub{padding:0 8px;font-size:15px;white-space:nowrap}
/* 공장·창고 결과(/factory) 카드 맨 아래 덧붙이는 한 줄 — 본문보다 약하게 */
.sf .fl .it .fc_note{color:#8b949c}
/* 중개사 발급 첫 화면의 모집 차수 "1차 모집 16/20" (2026-10-03). 마감이면 회색 막대·빨간 글씨 */
.sf .bkr_round{display:flex;align-items:center;gap:10px;margin:12px auto 22px;max-width:360px;padding:10px 14px;border-radius:12px;background:#fff6ef;border:1.5px solid #ffb27a}
.sf .bkr_round .br_t{flex:none;font-size:14px;font-weight:700;color:#c94f00}
.sf .bkr_round .br_bar{flex:1;height:8px;border-radius:4px;background:#ffe2cc;overflow:hidden}
.sf .bkr_round .br_bar i{display:block;height:100%;background:#ff6a00;border-radius:4px}
.sf .bkr_round .br_n{flex:none;font-size:14px;color:#555}
.sf .bkr_round .br_n b{font-size:17px;color:#ff6a00}
.sf .bkr_round.is_full{background:#f4f5f7;border-color:#d5d9de}
.sf .bkr_round.is_full .br_t,.sf .bkr_round.is_full .br_n b{color:#d0342c}
.sf .bkr_round.is_full .br_bar{background:#e3e6ea}
.sf .bkr_round.is_full .br_bar i{background:#9aa3ab}
.sf .bkr_full{margin:10px 0 0;font-size:14px;line-height:1.6;color:#555;text-align:center;word-break:keep-all}