/*
 * fx 맞춤 제작·상담(/service/custom/) - 화면 키 custom. 접두사 fx-cus-. 공용 부품은 n3-common.css.
 * 면: 머리 s0 -> 진행 흐름 s1(타임라인 레일 점등) -> 현황판 s0(행 목록 + 단계 트랙) -> 의뢰 s1(왼쪽 안내 어둡게 / 폼 밝게).
 */

/* ===== 머리: 왼쪽 글, 오른쪽 한 가지 수치(기준일과 함께) ===== */
.fx-cus-hero__grid{display:grid;gap:clamp(40px,5vw,72px);align-items:end}
.fx-cus-hero .fx-n3-h1{font-size:clamp(52px,10vw,136px);line-height:1}
.fx-cus-hero__fact{padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--fx-edge-strong)}
.fx-cus-fact__k{font-size:17px;font-weight:600;color:var(--fx-fg-2)}
.fx-cus-fact__v{margin-top:4px;font-size:clamp(72px,11vw,152px);font-weight:700;line-height:1;letter-spacing:-.045em}
.fx-cus-fact__basis{margin-top:12px}

/* ===== 진행 흐름 ===== */
.fx-cus-offer{margin-top:28px;border-top:1px solid var(--fx-edge-strong)}
.fx-cus-offer li{padding:14px 0;border-bottom:1px solid var(--fx-edge);font-size:17px;font-weight:600}
.fx-cus-flow .fx-n3-act{margin-top:28px}
.fx-cus-no{display:inline-block;min-width:2.2em;margin-right:6px;font-size:max(14px,.5em);font-weight:600;letter-spacing:0;color:var(--fx-fg-3);vertical-align:.28em}
.fx-cus-flow .fx-n3-steps__tag{vertical-align:.3em}

/* ===== 현황판 ===== */
.fx-cus-board__head{max-width:44em}
.fx-cus-strip{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px 40px;margin-top:clamp(28px,4vw,48px);padding:24px 0;border-top:1px solid var(--fx-edge-strong);border-bottom:1px solid var(--fx-edge-strong)}
.fx-cus-strip__lead,.fx-cus-strip__done{font-size:17px;font-weight:600;color:var(--fx-fg-2)}
.fx-cus-strip__lead b,.fx-cus-strip__done b{margin-left:6px;font-size:clamp(34px,4.8vw,60px);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--fx-fg)}
.fx-cus-strip__dist{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px}
.fx-cus-strip__dist li{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--fx-fg-2)}
.fx-cus-strip__dist b{color:var(--fx-fg)}
.fx-cus-strip__done{display:inline-flex;align-items:baseline;gap:8px}
.fx-cus-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--fx-fg-3)}
.fx-cus-dot--building,.fx-cus-dot--open{background:var(--fx-brand)}

.fx-cus-list{margin-top:8px}
.fx-cus-item{display:grid;gap:12px 40px;padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--fx-edge)}
.fx-cus-item__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.fx-cus-item__title{font-size:clamp(20px,2vw,24px);line-height:1.35;font-weight:700;letter-spacing:-.02em}
.fx-cus-item__info{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px;color:var(--fx-fg-3)}
.fx-cus-item__term b{color:var(--fx-fg);font-weight:700}
.fx-cus-item--open .fx-cus-item__title{color:var(--fx-fg)}
.fx-cus-item{position:relative}
.fx-cus-item__link{color:inherit;text-decoration:none;transition:color .2s ease}
.fx-cus-item__link::after{content:"";position:absolute;inset:0}
.fx-cus-item:hover .fx-cus-item__link{color:var(--fx-brand);text-decoration:underline;text-underline-offset:4px}
.fx-cus-item__link:focus-visible{outline:2px solid var(--fx-brand);outline-offset:4px;border-radius:2px}
.fx-cus-item:has(.fx-cus-item__link:focus-visible){outline:2px solid var(--fx-brand);outline-offset:-2px}
.fx-cus-item:has(.fx-cus-item__link:focus-visible) .fx-cus-item__link:focus-visible{outline:0}

.fx-cus-track{display:flex;align-items:flex-start;max-width:420px}
.fx-cus-track__s{position:relative;flex:1;display:grid;justify-items:start;gap:8px;min-width:0}
.fx-cus-track__s::before{content:"";position:absolute;left:12px;right:-12px;top:5px;height:2px;background:var(--fx-edge-strong)}
.fx-cus-track__s:last-child::before{display:none}
.fx-cus-track__s--done::before{background:var(--fx-brand)}
.fx-cus-track__dot{position:relative;width:12px;height:12px;border-radius:50%;background:var(--fx-bg);box-shadow:inset 0 0 0 2px var(--fx-edge-strong)}
.fx-cus-track__s--done .fx-cus-track__dot{background:var(--fx-brand);box-shadow:none}
.fx-cus-track__s--now .fx-cus-track__dot{background:var(--fx-bg);box-shadow:inset 0 0 0 3px var(--fx-brand)}
.fx-cus-track__l{font-size:14px;line-height:1.3;color:var(--fx-fg-3)}
.fx-cus-track__s--done .fx-cus-track__l{color:var(--fx-fg-2)}
.fx-cus-track__s--now .fx-cus-track__l{font-weight:700;color:var(--fx-fg)}

.fx-cus-aside{padding:8px 0;border-bottom:1px solid var(--fx-edge)}
.fx-cus-more{margin-top:20px}
.fx-cus-pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.fx-cus-pager__i{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:var(--fx-radius-pill);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;transition:background-color .2s,box-shadow .2s}
a.fx-cus-pager__i:hover{background:var(--fx-tint);box-shadow:inset 0 0 0 1px var(--fx-fg-3)}
.fx-cus-pager__i--cur{background:var(--fx-fg);color:var(--fx-bg);box-shadow:none}

.fx-cus-empty{margin-top:clamp(28px,4vw,48px)}
.fx-cus-guide{display:grid;gap:0;width:100%;max-width:640px;border-top:1px solid var(--fx-edge-strong)}
.fx-cus-guide li{display:grid;gap:2px 20px;padding:14px 0;border-bottom:1px solid var(--fx-edge)}
.fx-cus-guide b{font-size:18px}
.fx-cus-guide span{font-size:16px;color:var(--fx-fg-2)}

/* ===== 의뢰 ===== */
.fx-cus-asides{display:grid;gap:32px;margin-top:28px}
.fx-cus-blk__t{font-size:20px;line-height:1.4;font-weight:700;letter-spacing:-.01em}
.fx-cus-blk__l{margin-top:10px;border-top:1px solid var(--fx-edge-strong)}
.fx-cus-blk__l li{padding:12px 0;border-bottom:1px solid var(--fx-edge);font-size:16px;line-height:1.6;color:var(--fx-fg-2)}

@media (min-width:768px){
  .fx-cus-item{grid-template-columns:minmax(0,1fr) minmax(300px,420px);align-items:center}
  .fx-cus-item__top,.fx-cus-item__info{grid-column:1}
  .fx-cus-track{grid-column:2;grid-row:1 / span 2;justify-self:end;width:100%}
  .fx-cus-guide li{grid-template-columns:120px minmax(0,1fr)}
}
@media (min-width:1024px){
  .fx-cus-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}