/* =====================================================================
   Skin F · 다크 골드 프리미엄  (2026-09-22)

   시안: 검정 바탕 + 금색 한 가지. 사진은 크게, 글자는 희게, 강조는 금색으로만.

   ── 지키는 것
   · **이 파일의 규칙은 전부 `.skin-f` 아래에 있다.** skin-a~e 에는 아무 영향이 없다.
     skins/layout.php 가 skin-f 일 때만 이 파일을 부른다(200바이트 넘는 스킨 파일만 부름).
   · 색·글꼴·간격은 **맨 위 토큰에서만** 정한다. 아래 규칙은 토큰을 쓴다.
     (사이트작업틀 v1 의 tokens.css 방식 — 시안 값을 한 곳에 모아 둔다)
   · 글은 블록이 주는 것을 그대로 쓴다. 이 파일이 넣는 글자는 장식용 영문 한 줄
     (SPECIAL CLEANING 같은 것)과 번호(01·02…)뿐이다. 약속하는 문장을 넣지 않는다.
   · 사진은 페이지가 이미 가진 것만 쓴다(히어로·사례·전후). 없으면 어두운 바탕으로 남는다.
   · 휴대폰(390px)에서 아래 상담 바를 가리지 않는다. 가로로 밀리지 않는다.
   ===================================================================== */

.skin-f{
  /* 색 */
  --f-bg:#0B0C0E;          /* 바탕 */
  --f-bg-2:#101216;        /* 번갈아 깔리는 바탕 */
  --f-bg-3:#07080A;        /* 가장 어두운 곳 (머리말·꼬리말) */
  --f-surface:#15181D;     /* 카드 */
  --f-surface-2:#1B1F25;   /* 카드 위 칸 (입력칸 등) */
  --f-line:rgba(212,174,99,.28);
  --f-line-soft:rgba(255,255,255,.09);
  --f-gold:#D4AE63;
  --f-gold-hi:#EBCB86;
  --f-gold-deep:#B88D3E;
  --f-gold-grad:linear-gradient(135deg,#F0D491 0%,#D4AE63 48%,#B88D3E 100%);
  --f-title:#F5F1E8;       /* 제목 — 바탕 대비 17:1 */
  --f-copy:#C9C3B8;        /* 본문 — 바탕 대비 11:1 */
  --f-muted:#A09A8F;       /* 흐린 글 — 바탕 대비 6.8:1 (AA 통과) */
  --f-ink-on-gold:#17120A; /* 금색 단추 위 글자 — 9:1 */

  /* 글꼴 · 크기 */
  --f-sans:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",sans-serif;
  --f-h1:clamp(34px,4.6vw,60px);
  --f-h2:clamp(26px,2.9vw,38px);
  --f-eyebrow:12px;
  --f-track:.24em;

  /* 간격 · 모양 */
  --f-sec:96px;
  --f-sec-m:64px;
  --f-r:6px;               /* 시안은 모서리가 거의 각져 있다 */
  --f-r-lg:10px;
  --f-shadow:0 24px 60px rgba(0,0,0,.45);

  /* 선 아이콘 (장식) — 금색으로 칠해지는 마스크 */
  --f-ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E");
  --f-ic-clip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4.5' width='14' height='16' rx='1.5'/%3E%3Cpath d='M9 4.5V3h6v1.5M8.5 10h7M8.5 13.5h7M8.5 17h4'/%3E%3C/svg%3E");
  --f-ic-tool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5a4 4 0 0 0 4.9 4.9l-8.9 8.9a2 2 0 0 1-2.8-2.8z'/%3E%3Cpath d='M5 5l3 3M4 9h3M9 4v3'/%3E%3C/svg%3E");
  --f-ic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.3-3 7.8-7 9.5-4-1.7-7-5.2-7-9.5V6z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.3-4.4'/%3E%3C/svg%3E");
  --f-ic-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
  --f-ic-lr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
  --f-ic-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

  background:var(--f-bg);
  color:var(--f-copy);
  font-family:var(--f-sans);
}

/* ── 공통 ─────────────────────────────────────────────── */
.skin-f h1,.skin-f h2,.skin-f h3,.skin-f h4{color:var(--f-title)}
.skin-f section{background:var(--f-bg);padding:var(--f-sec) 0}
.skin-f section.alt{background:var(--f-bg-2);border-top:1px solid var(--f-line-soft);border-bottom:1px solid var(--f-line-soft)}
.skin-f section h2{font-size:var(--f-h2);font-weight:800;letter-spacing:-.04em;padding-top:30px}
/* 제목 위 금색 영문 한 줄 (장식). 섹션 종류마다 한 번씩만 바꾼다 */
.skin-f section h2::before{content:"CLEAN NETWORK";width:auto;height:auto;background:none;
  font-size:var(--f-eyebrow);font-weight:700;letter-spacing:var(--f-track);color:var(--f-gold);line-height:1}
.skin-f section:has(.grid3) h2::before{content:"OUR SERVICE"}
.skin-f section:has(.steps-v) h2::before{content:"WORK PROCESS"}
.skin-f section:has(.case) h2::before{content:"RECENT WORK"}
.skin-f section.ba h2::before{content:"RESULT"}
.skin-f section.faq h2::before{content:"FAQ"}
.skin-f .sec-desc{color:var(--f-muted)}
.skin-f .prose p{color:var(--f-copy)}
.skin-f .prose strong{color:var(--f-title)}
.skin-f .prose a{color:var(--f-gold-hi)}
.skin-f a:focus-visible,.skin-f button:focus-visible,.skin-f summary:focus-visible{outline-color:var(--f-gold-hi)}

/* 단추 — 시안처럼 각진 금색 */
.skin-f .btn{border-radius:var(--f-r);font-weight:700}
.skin-f .btn-p{background:var(--f-gold-grad);color:var(--f-ink-on-gold);box-shadow:0 14px 34px rgba(212,174,99,.22)}
.skin-f .btn-p:hover{background:linear-gradient(135deg,#F7E0A8,#DDB86C 50%,#C29545)}
.skin-f .btn-p::before{content:"";order:2;width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--f-ic-arrow) center/contain no-repeat;mask:var(--f-ic-arrow) center/contain no-repeat}
.skin-f .btn-o{background:rgba(8,9,11,.55);color:var(--f-title);border:1px solid rgba(235,203,134,.45)}
.skin-f .btn-o:hover{background:rgba(212,174,99,.12);border-color:var(--f-gold-hi)}

/* ── 머리말 ───────────────────────────────────────────── */
.skin-f .hd{background:rgba(7,8,10,.94);border-bottom:1px solid var(--f-line)}
.skin-f .gnb a{color:#DCD6CB}
.skin-f .gnb a:hover{color:#fff;background:rgba(212,174,99,.1)}
.skin-f .gnb a.on{color:var(--f-gold-hi);background:rgba(212,174,99,.12)}
.skin-f .hd .tel{color:var(--f-gold-hi);font-weight:700;white-space:nowrap;flex:none}
.skin-f .hd .tel::before{width:15px;height:15px;border-radius:0;box-shadow:none;background:var(--f-gold-hi);
  -webkit-mask:var(--f-ic-phone) center/contain no-repeat;mask:var(--f-ic-phone) center/contain no-repeat}
.skin-f .hd .hq{flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;margin-left:16px;
  border-radius:var(--f-r);background:var(--f-gold-grad);color:var(--f-ink-on-gold);
  font-size:14px;font-weight:750;letter-spacing:-.02em;white-space:nowrap;
  box-shadow:0 8px 22px rgba(212,174,99,.2);transition:transform .2s ease}
.skin-f .hd .hq::after{content:"";width:14px;height:14px;background:currentColor;
  -webkit-mask:var(--f-ic-arrow) center/contain no-repeat;mask:var(--f-ic-arrow) center/contain no-repeat}
.skin-f .hd .hq:hover{transform:translateY(-1px)}
.skin-f .gnb{margin-right:10px}
@media(max-width:1279px){.skin-f .hd .hq{display:none}}
@media(max-width:900px){.skin-f .gnb{background:rgba(7,8,10,.985)}}

/* ── 히어로 ───────────────────────────────────────────── */
.skin-f .hero{background:var(--f-bg-3);min-height:560px;align-items:center;padding:80px 0 0}
/* 사진은 오른쪽에 크게. 왼쪽은 글자가 읽히도록 검게 */
.skin-f .hero-bg{left:28%;opacity:.9;filter:saturate(.8) contrast(1.05) brightness(.9);animation:none;transform:none}
.skin-f .hero::after{background:linear-gradient(90deg,var(--f-bg-3) 0%,var(--f-bg-3) 26%,rgba(7,8,10,.82) 42%,rgba(7,8,10,.25) 70%,rgba(7,8,10,.35) 100%)}
.skin-f .hero::before{height:260px;background:linear-gradient(0deg,var(--f-bg-3) 0%,rgba(7,8,10,.92) 30%,transparent 100%)}
.skin-f .hero .wrap{display:flex!important;flex-direction:column;align-items:flex-start;gap:0}
.skin-f .hero .wrap::after{content:none!important}
.skin-f .hero .wrap::before{content:"SPECIAL CLEANING & TOTAL CARE";order:-1;display:block;margin-bottom:18px;
  font-size:var(--f-eyebrow);font-weight:700;letter-spacing:var(--f-track);color:var(--f-gold)}
.skin-f .hero .crumbs{order:-2;color:#CFC9BE}
/* 2줄 제목의 둘째 줄부터 금색 — 첫 줄은 희게 */
.skin-f .hero h1{font-size:var(--f-h1);line-height:1.18;letter-spacing:-.045em;color:var(--f-gold-hi);
  max-width:760px;margin-bottom:22px;text-shadow:0 8px 30px rgba(0,0,0,.4)}
.skin-f .hero h1::first-line{color:#fff}
.skin-f .hero h1 em{background:none;-webkit-text-fill-color:currentColor;color:var(--f-gold-hi)}
.skin-f .hero .sub{color:#D8D2C7;font-size:17px;max-width:560px;margin-bottom:30px}
.skin-f .hero .cta{padding-bottom:64px;gap:12px}
.skin-f .hero .cta .btn{min-width:200px}

/* 네 칸 지표 → 번호 붙은 카드 띠. 사진 아래 끝에 걸쳐 놓인다 (홈·허브) */
.skin-f .hero:has(.facts){padding-bottom:0}
.skin-f .hero:has(.facts) .hero-bg,
.skin-f .hero:has(.facts)::after{bottom:84px}
.skin-f .hero .facts{order:5;counter-reset:ff;width:100%;max-width:none;margin:0 0 28px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;background:rgba(14,16,20,.92);
  border:1px solid var(--f-line);border-radius:var(--f-r-lg);box-shadow:var(--f-shadow);backdrop-filter:blur(8px)}
.skin-f .hero .facts > div{counter-increment:ff;position:relative;background:none;padding:26px 22px 24px 92px;
  border-left:1px solid var(--f-line-soft);min-height:112px;display:flex;flex-direction:column;justify-content:center}
.skin-f .hero .facts > div:first-child{border-left:0}
.skin-f .hero .facts > div::before{content:"";position:absolute;left:24px;top:50%;margin-top:-26px;width:52px;height:52px;
  border:1px solid var(--f-gold);border-radius:50%;background:radial-gradient(circle,rgba(212,174,99,.12),transparent 70%)}
.skin-f .hero .facts > div::after{content:"";position:absolute;left:38px;top:50%;margin-top:-12px;width:24px;height:24px;
  background:var(--f-gold-hi);-webkit-mask:var(--f-ic-search) center/contain no-repeat;mask:var(--f-ic-search) center/contain no-repeat}
.skin-f .hero .facts > div:nth-child(4n+2)::after{-webkit-mask-image:var(--f-ic-clip);mask-image:var(--f-ic-clip)}
.skin-f .hero .facts > div:nth-child(4n+3)::after{-webkit-mask-image:var(--f-ic-tool);mask-image:var(--f-ic-tool)}
.skin-f .hero .facts > div:nth-child(4n+4)::after{-webkit-mask-image:var(--f-ic-shield);mask-image:var(--f-ic-shield)}
.skin-f .hero .facts .v{order:2;font-size:21px;color:var(--f-title)}
.skin-f .hero .facts .v small{color:var(--f-copy)}
.skin-f .hero .facts .l{order:1;font-size:13px;color:var(--f-muted);margin:0 0 2px}
.skin-f .hero .facts .l::before{content:counter(ff,decimal-leading-zero);display:block;color:var(--f-gold);
  font-size:12px;font-weight:700;letter-spacing:.14em;margin-bottom:4px}

/* 사업자 정보 줄 — 지표가 없는 지역 페이지에서는 이것이 사진 끝에 걸친 카드 띠가 된다 */
.skin-f .trust{background:var(--f-bg-3);border-top:1px solid var(--f-line-soft);border-bottom:1px solid var(--f-line-soft)}
.skin-f .trust span{color:var(--f-muted)}
.skin-f .trust span::before{background:var(--f-gold)}
.skin-f .trust b{color:var(--f-title)}
.skin-f .hero:not(:has(.facts)){padding-bottom:56px}
.skin-f .hero:not(:has(.facts)) + .trust{position:relative;z-index:3;background:linear-gradient(180deg,transparent 0,transparent 56px,var(--f-bg) 56px);
  margin-top:-56px;border:0;padding:0 0 8px}
.skin-f .hero:not(:has(.facts)) + .trust .wrap{counter-reset:ft;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
  padding:0;background:rgba(14,16,20,.94);border:1px solid var(--f-line);border-radius:var(--f-r-lg);box-shadow:var(--f-shadow);
  width:min(1140px,calc(100% - 60px));max-width:none}
.skin-f .hero:not(:has(.facts)) + .trust span{counter-increment:ft;position:relative;display:block;padding:24px 20px 22px 86px;
  border-left:1px solid var(--f-line-soft);font-size:13px;line-height:1.5;min-height:96px}
.skin-f .hero:not(:has(.facts)) + .trust span:first-child{border-left:0}
.skin-f .hero:not(:has(.facts)) + .trust span::before{content:counter(ft,decimal-leading-zero);position:absolute;left:22px;top:50%;
  margin-top:-23px;width:46px;height:46px;border-radius:50%;border:1px solid var(--f-gold);background:none;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--f-gold-hi)}
.skin-f .hero:not(:has(.facts)) + .trust b{display:block;margin-top:3px;font-size:16px;font-weight:750;color:var(--f-title)}

/* ── 견적 폼 ─────────────────────────────────────────── */
.skin-f .formsec{background:var(--f-bg);border-top:0}
.skin-f .formcard{background:var(--f-surface);border:1px solid var(--f-line);border-top:2px solid var(--f-gold);
  border-radius:var(--f-r-lg);box-shadow:var(--f-shadow)}
.skin-f .formcard h2{color:var(--f-title)}
.skin-f .formcard h2::before{content:none}
.skin-f .lead-sm,.skin-f .fdesc,.skin-f .fstepno,.skin-f .fhelp,.skin-f .fcount,.skin-f .form-fallback{color:var(--f-muted)}
.skin-f .skeleton{background:linear-gradient(90deg,var(--f-surface-2),#252a31,var(--f-surface-2));background-size:200% 100%}
.skin-f .ffield label{color:var(--f-title)}
.skin-f .ffield input,.skin-f .ffield select,.skin-f .ffield textarea,
.skin-f .jf input,.skin-f .jf textarea{background:var(--f-bg-2)!important;border-color:rgba(255,255,255,.18)!important;color:var(--f-title)!important}
.skin-f .ffield input::placeholder,.skin-f .ffield textarea::placeholder,.skin-f .jf input::placeholder,.skin-f .jf textarea::placeholder{color:#7F7A71}
.skin-f .ffield input:focus,.skin-f .ffield select:focus,.skin-f .ffield textarea:focus{border-color:var(--f-gold)!important;box-shadow:0 0 0 3px rgba(212,174,99,.18)!important}
.skin-f .chip{background:var(--f-bg-2)!important;border-color:rgba(255,255,255,.18)!important;color:var(--f-copy)!important}
.skin-f .chip.on{background:var(--f-gold)!important;border-color:var(--f-gold)!important;color:var(--f-ink-on-gold)!important}
.skin-f .fprog{background:var(--f-surface-2)}
.skin-f .fprog i{background:var(--f-gold)}
.skin-f .fagree,.skin-f .fpolicy{color:var(--f-copy)}
.skin-f .fnav .btn-o{background:var(--f-surface-2);color:var(--f-title);border-color:rgba(255,255,255,.18)}
.skin-f .fdone p{color:var(--f-title)}
.skin-f .fdone .mark{background:var(--f-bg-3);color:var(--f-gold-hi)}
.skin-f .jf span{color:var(--f-copy)}
.skin-f .jf-note{color:var(--f-muted)}

/* ── 카드 공통 ───────────────────────────────────────── */
.skin-f .card,.skin-f .rev,.skin-f .svcard,.skin-f .brcard,.skin-f .olcard{background:var(--f-surface);border:1px solid var(--f-line-soft);
  border-radius:var(--f-r);box-shadow:none}
.skin-f .card:hover,.skin-f .rev:hover,.skin-f a.svcard:hover,.skin-f .olcard:hover{border-color:var(--f-line);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.skin-f .card h4,.skin-f .svcard h4,.skin-f .brcard h3,.skin-f .olcard .oltxt strong{color:var(--f-title)}
.skin-f .card p,.skin-f .svcard p,.skin-f .rev p,.skin-f .brcard li{color:var(--f-copy)}
.skin-f .card .num{font-size:13px;color:var(--f-gold);letter-spacing:.14em}
.skin-f .rev{border-top:2px solid var(--f-gold)}
.skin-f .rev .who{color:var(--f-title)}
.skin-f .rev .star{color:var(--f-gold-hi)}
.skin-f .rev .src,.skin-f .brcard .tag{background:var(--f-surface-2);color:var(--f-muted)}
.skin-f .olcard .oltxt em,.skin-f .olad,.skin-f .bradr,.skin-f .brcov{color:var(--f-muted)}
.skin-f .olcard .olgo{background:transparent;border-color:var(--f-line);color:var(--f-gold-hi)}
.skin-f .brcard li{border-color:var(--f-line-soft)}
.skin-f .outlinks h3,.skin-f .svcat{color:var(--f-title)}

/* ── 서비스 · 작업 범위 — 글은 왼쪽, 번호 카드 여섯 장은 오른쪽 ─────── */
@media(min-width:1000px){
  .skin-f section .wrap:has(> .grid3){display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.9fr);
    column-gap:56px;align-items:start}
  .skin-f section .wrap:has(> .grid3) > *{grid-column:1}
  .skin-f section .wrap:has(> .grid3) > .grid3{grid-column:2;grid-row:1 / span 6}
  .skin-f section .wrap:has(> .grid3) > h2{position:sticky;top:110px}
}
.skin-f .grid3{counter-reset:fc}
.skin-f .grid3 > .card{position:relative;overflow:hidden;min-height:190px;padding:26px 22px 24px;
  background:linear-gradient(160deg,#1C2026 0%,#121418 60%,#0E1013 100%)}
.skin-f .grid3 > .card::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,174,99,.16),transparent 70%);pointer-events:none}
.skin-f .grid3 > .card .num{display:block;font-size:15px;margin-bottom:12px}
.skin-f .grid3 > .card h4{font-size:18px}
.skin-f .grid3 > .card p{font-size:14px;white-space:pre-line}

/* ── 사례 — 사진을 꽉 채운 카드, 글은 사진 위 아래쪽 ────────────── */
.skin-f .grid4:has(> .case){counter-reset:fk}
.skin-f .case{counter-increment:fk;position:relative;min-height:380px;background:var(--f-surface);border:1px solid var(--f-line-soft);
  border-radius:var(--f-r);box-shadow:none;justify-content:flex-end}
.skin-f .case > img,.skin-f .case > .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.85)}
.skin-f .case .body{position:relative;z-index:1;flex:none;background:linear-gradient(180deg,rgba(8,9,11,0) 0%,rgba(8,9,11,.86) 34%,rgba(8,9,11,.96) 100%);
  padding:70px 18px 20px}
.skin-f .case .body::before{content:counter(fk,decimal-leading-zero);display:block;color:var(--f-gold-hi);font-size:13px;font-weight:700;letter-spacing:.14em;margin-bottom:6px}
.skin-f .case .meta{color:#BDB6AA}
.skin-f .case h4{color:#fff}
.skin-f .case p,.skin-f .case .spec span{color:#CFC9BE}
.skin-f .case .spec{color:#fff}
.skin-f .case .calink,.skin-f .calink,.skin-f .svn,.skin-f .brtel{color:var(--f-gold-hi)}
.skin-f .case:hover{border-color:var(--f-line)}
.skin-f .case:hover img{filter:saturate(1) brightness(.95)}

/* ── 작업 전과 후 — 한 장처럼 붙이고 가운데 손잡이 ─────────────── */
.skin-f .ba-grid{position:relative;gap:0;border:1px solid var(--f-line);border-radius:var(--f-r-lg);overflow:hidden;box-shadow:var(--f-shadow)}
.skin-f .ba-grid figure{border-radius:0;box-shadow:none}
.skin-f .ba-grid figure + figure{border-left:2px solid var(--f-gold)}
.skin-f .ba-grid img{height:420px}
.skin-f .ba-grid figcaption{top:auto;bottom:16px;left:16px;border-radius:3px;background:rgba(8,9,11,.82);
  color:#fff;border:1px solid rgba(255,255,255,.18);letter-spacing:.04em}
.skin-f .ba-grid figure + figure figcaption{left:auto;right:16px}
.skin-f .ba-grid::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:var(--f-gold-grad) ;box-shadow:0 0 0 6px rgba(212,174,99,.2),0 10px 24px rgba(0,0,0,.5);pointer-events:none}
.skin-f .ba-grid::before{content:"";position:absolute;z-index:2;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  background:var(--f-ink-on-gold);-webkit-mask:var(--f-ic-lr) center/contain no-repeat;mask:var(--f-ic-lr) center/contain no-repeat;pointer-events:none}
.skin-f .ba-grid::after{z-index:1}
.skin-f .pphotos figcaption{background:rgba(8,9,11,.82)}

/* ── 진행 절차 — 금색 동그라미 번호를 가로로 ───────────────────── */
.skin-f .steps-v{border-left:1px solid var(--f-line)}
.skin-f .stp::before{background:var(--f-bg);border:1px solid var(--f-gold);color:var(--f-gold-hi);box-shadow:0 0 0 5px rgba(212,174,99,.08)}
.skin-f .stp h4{color:var(--f-title)}
.skin-f .stp p{color:var(--f-copy)}
@media(min-width:900px){
  .skin-f .wrap.narrow:has(> .steps-v){max-width:1200px}
  .skin-f .steps-v{border-left:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 36px}
  .skin-f .stp{padding:0;text-align:center}
  .skin-f .stp::before{position:relative;left:auto;top:auto;margin:0 auto 18px;width:64px;height:64px;font-size:18px;font-weight:700}
  .skin-f .stp::after{content:"";position:absolute;top:31px;left:calc(50% + 46px);right:calc(-50% + 28px);height:1px;
    background:linear-gradient(90deg,var(--f-gold),rgba(212,174,99,.15))}
  .skin-f .stp:nth-child(3n)::after,.skin-f .stp:last-child::after{content:none}
  .skin-f .stp h4{font-size:17px;margin-bottom:8px}
  .skin-f .stp p{font-size:14.5px;max-width:30ch;margin:0 auto}
}

/* ── 표 · 목록 ───────────────────────────────────────── */
.skin-f .cmp{border-color:var(--f-line-soft)}
.skin-f .cmp th{background:#1A1D22;color:var(--f-title);border-bottom-color:var(--f-line-soft)}
.skin-f .cmp td{background:var(--f-surface);color:var(--f-copy);border-bottom-color:var(--f-line-soft)}
.skin-f .cmp tr:hover td{background:#1C1A16}
.skin-f .note-sm{color:var(--f-muted);border-color:var(--f-line)}
.skin-f .chk-list li{color:var(--f-title);border-color:var(--f-line-soft)}
.skin-f .chk-list li span{color:var(--f-muted)}
.skin-f table.facts th,.skin-f .facts-table th{color:var(--f-muted)}
.skin-f table.facts td,.skin-f .facts-table td{color:var(--f-copy)}
.skin-f table.facts th,.skin-f table.facts td,.skin-f .facts-table th,.skin-f .facts-table td{border-color:var(--f-line-soft)}
.skin-f table.facts{border-top-color:var(--f-gold)}

/* ── 지표 ─────────────────────────────────────────────── */
.skin-f .metrics{background:var(--f-bg-3)!important;border-top:1px solid var(--f-line)!important;border-bottom:1px solid var(--f-line)!important}
.skin-f .metrics .mgrid{background:var(--f-line-soft);border-color:var(--f-line);border-radius:var(--f-r-lg)}
.skin-f .metrics .m{background:var(--f-bg-3)}
.skin-f .metrics .m .v{color:var(--f-gold-hi)}
.skin-f .metrics .m .l{color:var(--f-muted)}

/* ── 자주 묻는 질문 ───────────────────────────────────── */
.skin-f .faq-list details,.skin-f .faq-list details:first-child{border-color:var(--f-line-soft)}
.skin-f .faq-list summary{color:var(--f-title)}
.skin-f .faq-list summary::after{color:var(--f-gold)}
.skin-f .faq-list details[open] summary{color:var(--f-gold-hi)}
.skin-f .faq-list p{color:var(--f-copy)}

/* ── 상담 띠 — 페이지의 사진을 어둡게 깔고 그 위에 ────────────── */
.skin-f .ctasec{overflow:hidden;background:var(--f-bg-3);padding:84px 0;border-top:1px solid var(--f-line);border-bottom:1px solid var(--f-line)}
.skin-f .ctasec::before{content:"";position:absolute;inset:0;z-index:1;height:auto;
  background:linear-gradient(90deg,rgba(7,8,10,.96) 0%,rgba(7,8,10,.86) 45%,rgba(7,8,10,.55) 100%)}
.skin-f .ctasec .ctabg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.6;filter:saturate(.7) sepia(.25)}
.skin-f .ctasec .wrap{position:relative;z-index:2}
.skin-f .ctasec h2{color:var(--f-gold-hi);font-size:clamp(24px,2.6vw,34px);letter-spacing:-.04em}
.skin-f .ctasec p{color:#D8D2C7}

/* ── 내부 링크 · 목록 ─────────────────────────────────── */
.skin-f .linksec{background:var(--f-bg-2);border-top:1px solid var(--f-line-soft)}
.skin-f .linksec h3{color:var(--f-title)}
.skin-f .tag-l{background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--f-copy);border-radius:var(--f-r)}
.skin-f .tag-l:hover{background:rgba(212,174,99,.12);border-color:var(--f-gold);color:var(--f-gold-hi)}
.skin-f .sitemap{background:var(--f-bg-3);border-top:1px solid var(--f-line-soft)}
.skin-f .sitemap h3{color:var(--f-title)}
.skin-f .idx a{color:var(--f-muted)}
.skin-f .idx a:hover{color:var(--f-gold-hi)}
.skin-f .joincta{background:linear-gradient(135deg,#111317,#1A1712)}
.skin-f .joincta p,.skin-f .phead p{color:var(--f-copy)}
.skin-f .phead{background:var(--f-bg-3)}
.skin-f .about p,.skin-f .addr{color:var(--f-copy)}
.skin-f .bigline{color:var(--f-title)}
.skin-f .btn-line-lg{border-color:var(--f-gold);color:var(--f-gold-hi)}
.skin-f .btn-line-lg:hover{background:var(--f-gold);color:var(--f-ink-on-gold)}

/* ── 꼬리말 ───────────────────────────────────────────── */
.skin-f .ft{background:var(--f-bg-3);border-top:1px solid var(--f-line);color:var(--f-muted)}
.skin-f .ft strong{color:var(--f-title)}
.skin-f .ft a{color:var(--f-gold-hi)}
.skin-f .ft-nav{border-color:var(--f-line-soft)}
.skin-f .ft-nav a{color:#CFC9BE}
.skin-f .ft-trust p{color:var(--f-muted)}

/* ── 상담 바 · 퀵바 — 가리지 않고, 금색으로 ─────────────────── */
.skin-f .float{box-shadow:0 -1px 0 var(--f-line),0 -10px 24px rgba(0,0,0,.4)}
.skin-f .float .c{background:#121418;color:#fff}
.skin-f .float .k{background:var(--f-gold-grad);color:var(--f-ink-on-gold)}
.skin-f .qrail .q{background:rgba(14,16,20,.9);border-color:var(--f-line)}
.skin-f .qrail .q-quote{background:var(--f-gold-grad);border-color:var(--f-gold);color:var(--f-ink-on-gold)}

/* ── 휴대폰 ───────────────────────────────────────────── */
@media(max-width:900px){
  .skin-f section{padding:var(--f-sec-m) 0}
  .skin-f .hero{min-height:0;padding-top:64px}
  .skin-f .hero-bg{left:0;opacity:.55}
  .skin-f .hero::after{background:linear-gradient(180deg,rgba(7,8,10,.7) 0%,rgba(7,8,10,.82) 55%,var(--f-bg-3) 100%)}
  .skin-f .hero .facts{grid-template-columns:1fr 1fr}
  .skin-f .hero .facts > div:nth-child(odd){border-left:0}
  .skin-f .hero .facts > div:nth-child(n+3){border-top:1px solid var(--f-line-soft)}
  .skin-f .ba-grid img{height:300px}
}
@media(max-width:560px){
  .skin-f .hero{padding-top:44px}
  .skin-f .hero .wrap::before{font-size:11px;letter-spacing:.18em;margin-bottom:14px}
  .skin-f .hero h1{font-size:34px}
  .skin-f .hero .sub{font-size:15.5px}
  .skin-f .hero .cta{padding-bottom:40px;width:100%}
  .skin-f .hero .cta .btn{min-width:0}
  .skin-f .hero:has(.facts) .hero-bg,.skin-f .hero:has(.facts)::after{bottom:0}
  /* 휴대폰은 2×2 — 아이콘을 글 위로 올려 폭을 아낀다 */
  .skin-f .hero .facts{grid-template-columns:1fr 1fr;margin-bottom:22px}
  .skin-f .hero .facts > div{min-height:0;padding:66px 14px 16px 16px;justify-content:flex-start}
  .skin-f .hero .facts > div::before{left:16px;top:16px;width:40px;height:40px;margin-top:0}
  .skin-f .hero .facts > div::after{left:26px;top:26px;width:20px;height:20px;margin-top:0}
  .skin-f .hero .facts .v{font-size:19px}
  .skin-f .hero:not(:has(.facts)){padding-bottom:48px}
  /* 휴대폰: 사업자 정보는 **한 줄 작은 글씨**로 — 사진 갤러리가 첫 화면 바로 밑에 오도록 (2026-09-22 사장님: 사진을 위로) */
  .skin-f .hero:not(:has(.facts)) + .trust{margin-top:0;background:var(--f-bg-3)}
  .skin-f .hero:not(:has(.facts)) + .trust .wrap{display:flex;flex-wrap:wrap;gap:4px 14px;width:auto;margin:0 16px;padding:10px 0;border:0;background:none;box-shadow:none}
  .skin-f .hero:not(:has(.facts)) + .trust span{display:inline;border:0;min-height:0;padding:0;font-size:12px}
  .skin-f .hero:not(:has(.facts)) + .trust span::before{content:none;display:none}
  .skin-f .hero:not(:has(.facts)) + .trust b{display:inline;margin:0 0 0 3px;font-size:12px}
  .skin-f .case{min-height:280px}
  .skin-f .ba-grid{grid-template-columns:1fr 1fr}
  .skin-f .ba-grid img{height:220px}
  .skin-f .ba-grid figcaption{bottom:10px;left:10px;font-size:12px;padding:5px 9px}
  .skin-f .ba-grid figure + figure figcaption{right:10px}
  .skin-f .ctasec{padding:60px 0}
}

/* 내부 링크 띠는 촘촘하게 (위 section 여백을 되돌린다) */
.skin-f .linksec{padding:44px 0}
.skin-f .linksec + .linksec{padding-top:0;border-top:0}

/* 지표 칸 안의 글줄도 div 라서 site.css 의 `.facts div` 상자가 한 겹 더 씌워졌다 — 벗긴다 */
.skin-f .hero .facts > div > div{background:none;padding:0;backdrop-filter:none;border:0}

/* 빨간 필수 표시·오류 글자 — 어두운 바탕에서도 읽히게 (원래 #C8322B 는 3.3:1) */
.skin-f .jf i,.skin-f .ffield label .req{color:#FF8A7E}
.skin-f .ferr,.skin-f .jf .jf-err{color:#FF8A7E}

/* =====================================================================
   v126 · 사진 층 (2026-09-22) — 사진을 위로, 크게, 누르면 크게.
   조각은 skins/partials/sf_*.php · 스크립트는 assets/js/sf-photo.js.
   ===================================================================== */

/* ── 히어로 사진 — 실제 현장 사진을 <img> 로. 있으면 원래 배경은 숨긴다 ─────── */
.skin-f .hero-ph{position:absolute;top:0;right:0;bottom:0;left:28%;width:72%;height:100%;object-fit:cover;object-position:center;
  opacity:.92;filter:saturate(.85) contrast(1.05) brightness(.82)}
.skin-f .hero-ph ~ .hero-bg{display:none}
.skin-f .hero:has(.facts) .hero-ph{bottom:84px;height:auto}

/* ── 사진 갤러리 ─────────────────────────────────────── */
.skin-f section.sfg{padding:72px 0 64px;background:var(--f-bg);border-bottom:1px solid var(--f-line-soft)}
.skin-f section.sfg h2{padding-top:26px}
.skin-f section.sfg h2::before{content:"FIELD PHOTOS"}
.skin-f .sfg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:26px}
.skin-f .sfg-head h2{margin:0}
.skin-f .sfg-sub{margin:0;color:var(--f-muted);font-size:14.5px}
.skin-f .sfg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:218px;grid-auto-flow:dense;gap:12px}
.skin-f .sfg-i{position:relative;min-width:0;border-radius:var(--f-r);overflow:hidden;background:var(--f-surface);
  border:1px solid var(--f-line-soft)}
.skin-f .sfg-i.sfg-lead{grid-column:span 2;grid-row:span 2}
.skin-f .sfg-i.sfg-pair{grid-column:span 2}
.skin-f .sfg-a{position:relative;display:block;width:100%;height:100%;overflow:hidden;cursor:zoom-in;color:#fff}
.skin-f .sfg-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .3s ease;filter:saturate(.92)}
.skin-f .sfg-a:hover .sfg-img{transform:scale(1.04);filter:saturate(1.05)}
.skin-f .sfg-a:focus-visible{outline:2px solid var(--f-gold-hi);outline-offset:-4px}
.skin-f .sfg-tag{position:absolute;left:10px;top:10px;padding:5px 9px;border-radius:3px;font-size:12px;font-weight:700;letter-spacing:.02em;
  background:rgba(8,9,11,.84);color:#fff;border:1px solid rgba(255,255,255,.2)}
.skin-f .sfg-tag--after{background:var(--f-gold-grad);color:var(--f-ink-on-gold);border-color:transparent}
.skin-f .sfg-zoom{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(8,9,11,.72);
  border:1px solid rgba(235,203,134,.5);opacity:0;transition:opacity .2s ease}
.skin-f .sfg-zoom::before{content:"";position:absolute;inset:8px;background:var(--f-gold-hi);
  -webkit-mask:var(--f-ic-search) center/contain no-repeat;mask:var(--f-ic-search) center/contain no-repeat}
.skin-f .sfg-a:hover .sfg-zoom,.skin-f .sfg-a:focus-visible .sfg-zoom{opacity:1}
/* 전후 한 쌍 — 두 장을 한 칸에 나란히, 사이에 금색 선 */
.skin-f .sfg-duo{display:grid;grid-template-columns:1fr 1fr;height:100%}
.skin-f .sfg-duo .sfg-a + .sfg-a{border-left:2px solid var(--f-gold)}
.skin-f .sfg-pair .sfg-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 12px 10px;font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,9,11,.88));pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-f .sfg-pair .sfg-zoom{bottom:auto;top:10px}
/* 더 보기 */
.skin-f .sfg-more{margin-top:16px}
.skin-f .sfg-more > summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;
  border:1px solid var(--f-line);border-radius:var(--f-r);color:var(--f-gold-hi);font-weight:700;cursor:pointer;background:rgba(212,174,99,.05)}
.skin-f .sfg-more > summary::-webkit-details-marker{display:none}
.skin-f .sfg-more > summary::after{content:"";width:14px;height:14px;background:currentColor;transform:rotate(90deg);transition:transform .2s ease;
  -webkit-mask:var(--f-ic-arrow) center/contain no-repeat;mask:var(--f-ic-arrow) center/contain no-repeat}
.skin-f .sfg-more[open] > summary::after{transform:rotate(-90deg)}
.skin-f .sfg-more > summary b{color:var(--f-muted);font-weight:600}
.skin-f .sfg-more > summary:hover{background:rgba(212,174,99,.1)}
.skin-f .sfg-more > summary:focus-visible{outline:2px solid var(--f-gold-hi);outline-offset:2px}
.skin-f .sfg-grid--more{margin-top:12px;grid-auto-rows:170px}

/* ── 사진 옆 상담 띠 ─────────────────────────────────── */
.skin-f section.sfc{position:relative;overflow:hidden;padding:48px 0;background:var(--f-bg-3);border-bottom:1px solid var(--f-line)}
.skin-f .sfc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.6) sepia(.2) brightness(.8)}
.skin-f section.sfc::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,10,.95) 0%,rgba(7,8,10,.82) 50%,rgba(7,8,10,.6) 100%)}
.skin-f .sfc-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px 36px;flex-wrap:wrap}
.skin-f section.sfc h2{padding:0;margin:0 0 6px;font-size:clamp(22px,2.4vw,30px);color:var(--f-gold-hi)}
.skin-f section.sfc h2::before{content:none}
.skin-f .sfc-txt p{margin:0;color:#DDD7CC;font-size:16px}
.skin-f .sfc-btns{display:flex;gap:10px;flex-wrap:wrap}
.skin-f .sfc-btns .btn{min-height:52px}
.skin-f .sfc-k{display:inline-flex;align-items:center;gap:8px;background:#FEE500;color:#191600;border:0}
.skin-f .sfc-k:hover{background:#FFEB3B}
.skin-f .sfc-k svg{width:20px;height:20px}

/* ── 전후 비교 — 끌어서 보는 슬라이더 (range 입력칸이 손잡이) ─────── */
.skin-f .ba-grid:has(.ba-range){display:block;position:relative;aspect-ratio:16/10;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.skin-f .ba-grid:has(.ba-range)::before,.skin-f .ba-grid:has(.ba-range)::after{content:none}
.skin-f .ba-grid:has(.ba-range) figure{position:absolute;inset:0;margin:0}
.skin-f .ba-grid:has(.ba-range) figure + figure{border-left:0;clip-path:inset(0 0 0 var(--pos,50%))}
.skin-f .ba-grid:has(.ba-range) img{width:100%;height:100%;object-fit:cover;display:block}
.skin-f .ba-range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.skin-f .ba-knob{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:var(--f-gold);pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.skin-f .ba-knob::before{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:var(--f-gold-grad);box-shadow:0 0 0 6px rgba(212,174,99,.22),0 10px 24px rgba(0,0,0,.5)}
.skin-f .ba-knob::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;background:var(--f-ink-on-gold);
  -webkit-mask:var(--f-ic-lr) center/contain no-repeat;mask:var(--f-ic-lr) center/contain no-repeat}
.skin-f .ba-range:focus-visible + .ba-knob::before{box-shadow:0 0 0 3px #fff,0 0 0 7px var(--f-gold)}
.skin-f .ba-grid:has(.ba-range) figcaption{z-index:1}

/* ── 홈 · 취급 서비스 사진 카드 ─────────────────────────── */
.skin-f section.sfs{padding:88px 0 80px;background:var(--f-bg)}
.skin-f section.sfs h2::before{content:"SPECIAL CLEANING"}
.skin-f .sfs-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,2fr);gap:40px 56px;align-items:start}
.skin-f .sfs-txt h2{margin-bottom:22px}
.skin-f .sfs-cats{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.skin-f .sfs-cats li{position:relative;padding-left:18px;color:var(--f-copy);font-size:15.5px}
.skin-f .sfs-cats li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--f-gold)}
.skin-f .sfs-all{display:inline-flex;align-items:center;gap:8px;color:var(--f-gold-hi);font-weight:700;border-bottom:1px solid var(--f-line);padding-bottom:4px}
.skin-f .sfs-all::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--f-ic-arrow) center/contain no-repeat;mask:var(--f-ic-arrow) center/contain no-repeat}
.skin-f .sfs-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.skin-f .sfs-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:236px;height:100%;overflow:hidden;
  border-radius:var(--f-r);border:1px solid var(--f-line-soft);background:var(--f-surface);color:#fff}
.skin-f .sfs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.8);transition:transform .45s ease,filter .3s ease}
.skin-f .sfs-card:hover .sfs-img{transform:scale(1.05);filter:saturate(1) brightness(.9)}
.skin-f .sfs-card:hover{border-color:var(--f-line)}
.skin-f .sfs-body{position:relative;z-index:1;display:block;padding:60px 16px 16px;background:linear-gradient(180deg,rgba(8,9,11,0) 0%,rgba(8,9,11,.8) 40%,rgba(8,9,11,.94) 100%)}
.skin-f .sfs-n{display:block;color:var(--f-gold-hi);font-size:12.5px;font-weight:700;letter-spacing:.14em;margin-bottom:4px}
.skin-f .sfs-body strong{display:block;font-size:18px;color:#fff;letter-spacing:-.02em;margin-bottom:4px}
.skin-f .sfs-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.5;color:#D6D0C5}

/* ── 홈 · 결과(전후) + 진행 절차 ───────────────────────── */
.skin-f section.sfr{padding:80px 0;background:var(--f-bg-2);border-top:1px solid var(--f-line);border-bottom:1px solid var(--f-line-soft)}
.skin-f section.sfr h2::before{content:"RESULT"}
.skin-f .sfr-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px 48px;align-items:center}
.skin-f .sfr-case{color:var(--f-title);font-size:17px;font-weight:700;margin:0 0 10px}
.skin-f .sfr-hint{color:var(--f-muted);font-size:14.5px;margin:0 0 22px}
.skin-f .sfr-link{display:inline-flex;align-items:center;gap:8px;color:var(--f-gold-hi);font-weight:700;border-bottom:1px solid var(--f-line);padding-bottom:4px}
.skin-f .sfr-link::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--f-ic-arrow) center/contain no-repeat;mask:var(--f-ic-arrow) center/contain no-repeat}
.skin-f .sfr-proc{margin-top:64px;padding-top:40px;border-top:1px solid var(--f-line-soft)}
.skin-f .sfr--noba .sfr-proc{margin-top:0;padding-top:0;border-top:0}
.skin-f .sfr-proc h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;margin:0 0 30px}
.skin-f .sfr-proc h3::before{content:"WORK PROCESS";display:block;margin-bottom:10px;font-size:var(--f-eyebrow);font-weight:700;letter-spacing:var(--f-track);color:var(--f-gold)}
.skin-f .sfp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px 18px}
.skin-f .sfp-i{position:relative;text-align:center}
.skin-f .sfp-i + .sfp-i::before{content:"";position:absolute;top:32px;right:calc(50% + 44px);width:calc(100% - 70px);height:1px;
  background:linear-gradient(90deg,rgba(212,174,99,.15),var(--f-gold))}
.skin-f .sfp-ic{position:relative;display:block;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;border:1px solid var(--f-gold);
  background:radial-gradient(circle,rgba(212,174,99,.14),transparent 70%)}
.skin-f .sfp-ic::after{content:"";position:absolute;inset:19px;background:var(--f-gold-hi);
  -webkit-mask:var(--f-ic-phone) center/contain no-repeat;mask:var(--f-ic-phone) center/contain no-repeat}
.skin-f .sfp-i:nth-child(2) .sfp-ic::after{-webkit-mask-image:var(--f-ic-search);mask-image:var(--f-ic-search)}
.skin-f .sfp-i:nth-child(3) .sfp-ic::after{-webkit-mask-image:var(--f-ic-clip);mask-image:var(--f-ic-clip)}
.skin-f .sfp-i:nth-child(4) .sfp-ic::after{-webkit-mask-image:var(--f-ic-tool);mask-image:var(--f-ic-tool)}
.skin-f .sfp-i:nth-child(n+5) .sfp-ic::after{-webkit-mask-image:var(--f-ic-shield);mask-image:var(--f-ic-shield)}
.skin-f .sfp-n{display:block;color:var(--f-gold);font-size:12.5px;font-weight:700;letter-spacing:.14em;margin-bottom:4px}
.skin-f .sfp-i strong{display:block;color:var(--f-title);font-size:16px;margin-bottom:6px}
.skin-f .sfp-d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--f-muted);font-size:13.5px;line-height:1.55}

/* ── 크게 보기 창 ─────────────────────────────────────── */
.skin-f.sflb-on{overflow:hidden}
.skin-f .sflb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(5,6,8,.95);
  padding:64px 72px 24px}
.skin-f .sflb[hidden]{display:none}
.skin-f .sflb-top{position:absolute;top:0;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 22px}
.skin-f .sflb-count{color:#E9E3D8;font-size:14px;font-weight:700;letter-spacing:.08em}
.skin-f .sflb-fig{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.skin-f .sflb-img{display:block;max-width:100%;max-height:calc(100% - 52px);width:auto;height:auto;object-fit:contain;border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);background:#111}
.skin-f .sflb-cap{margin-top:14px;color:#E9E3D8;font-size:15px;text-align:center;max-width:760px;line-height:1.5}
.skin-f .sflb button{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid rgba(235,203,134,.45);
  background:rgba(14,16,20,.8);color:var(--f-gold-hi);cursor:pointer;border-radius:50%;padding:0}
.skin-f .sflb button:hover{background:rgba(212,174,99,.18)}
.skin-f .sflb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.skin-f .sflb button[hidden]{display:none}
.skin-f .sflb-x{position:static!important;width:44px;height:44px}
.skin-f .sflb-x span{width:18px;height:18px;position:relative}
.skin-f .sflb-x span::before,.skin-f .sflb-x span::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transform:rotate(45deg)}
.skin-f .sflb-x span::after{transform:rotate(-45deg)}
.skin-f .sflb-nav{top:50%;width:52px;height:52px;margin-top:-26px}
.skin-f .sflb-prev{left:12px}
.skin-f .sflb-next{right:12px}
.skin-f .sflb-nav span{width:20px;height:20px;background:currentColor;-webkit-mask:var(--f-ic-arrow) center/contain no-repeat;mask:var(--f-ic-arrow) center/contain no-repeat}
.skin-f .sflb-prev span{transform:rotate(180deg)}

/* ── 태블릿 ───────────────────────────────────────────── */
@media(max-width:1000px){
  .skin-f .sfs-grid{grid-template-columns:1fr}
  .skin-f .sfs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skin-f .sfr-top{grid-template-columns:1fr}
}

/* ── 휴대폰 — 옆으로 넘기는 큰 카드 ────────────────────── */
@media(max-width:900px){
  .skin-f .hero-ph,.skin-f .hero:has(.facts) .hero-ph{left:0;width:100%;bottom:0;height:100%;opacity:.8}
  .skin-f .hero:has(.hero-ph)::after{background:linear-gradient(180deg,rgba(7,8,10,.62) 0%,rgba(7,8,10,.74) 55%,var(--f-bg-3) 100%)}
  .skin-f section.sfg{padding:48px 0 40px}
  .skin-f .sfg-head{margin-bottom:18px}
  .skin-f .sfg-grid[data-sfg]{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 -22px;padding:0 22px 6px;scroll-padding:0 22px;scrollbar-width:none}
  .skin-f .sfg-grid[data-sfg]::-webkit-scrollbar{display:none}
  .skin-f .sfg-grid[data-sfg] > .sfg-i{flex:0 0 84%;height:auto;aspect-ratio:4/3.3;scroll-snap-align:start}
  .skin-f .sfg-grid[data-sfg] > .sfg-i.sfg-pair{flex-basis:92%}
  .skin-f .sfg-grid--more{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:8px}
  .skin-f .sfg-grid--more .sfg-i.sfg-pair{grid-column:span 2}
  .skin-f .sfg-zoom{opacity:1;width:30px;height:30px}
  .skin-f .sfg-zoom::before{inset:7px}
  .skin-f section.sfc{padding:36px 0}
  .skin-f .sfc-btns{width:100%}
  .skin-f .sfc-btns .btn{flex:1 1 100%;justify-content:center}
  .skin-f section.sfs,.skin-f section.sfr{padding:56px 0}
  .skin-f .sfr-proc{margin-top:44px;padding-top:32px}
  .skin-f .sfp{grid-template-columns:1fr;gap:0}
  .skin-f .sfp-i{display:grid;grid-template-columns:52px 1fr;column-gap:14px;text-align:left;padding:12px 0;border-top:1px solid var(--f-line-soft)}
  .skin-f .sfp-i + .sfp-i::before{content:none}
  .skin-f .sfp-ic{grid-row:span 3;width:52px;height:52px;margin:0}
  .skin-f .sfp-ic::after{inset:15px}
  .skin-f .sflb{padding:56px 8px 16px}
  .skin-f .sflb-nav{top:auto;bottom:18px;margin-top:0;width:46px;height:46px}
  .skin-f .sflb-img{max-height:calc(100% - 110px)}
  .skin-f .sflb-cap{font-size:14px;padding:0 60px}
}
@media(max-width:560px){
  .skin-f .sfs-cards{grid-template-columns:1fr 1fr;gap:10px}
  .skin-f .sfs-card{min-height:190px}
  .skin-f .sfs-body{padding:48px 12px 12px}
  .skin-f .sfs-body strong{font-size:16px}
  .skin-f .sfs-d{font-size:12.5px}
  .skin-f .ba-grid:has(.ba-range){aspect-ratio:4/3.4}
}
@media(prefers-reduced-motion:reduce){
  .skin-f .sfg-img,.skin-f .sfs-img{transition:none}
}
/* 슬라이더의 두 장은 한 자리에 겹쳐 있다 — 나타나기 효과(site.js 의 motion-item)가 따로 움직이면 어긋난다 */
.skin-f .ba-grid:has(.ba-range) figure{opacity:1!important;transform:none!important;transition:none!important}

/* =====================================================================
   v127 · AI 그림 · 짧은 영상 (2026-09-22)

   자리는 셋뿐이다 — 첫 화면 배경 · 안내 글 삽화 · 공유 그림(화면에는 안 나온다).
   **현장 사진 갤러리 · 전후 비교 · 작업사례에는 들어가지 않는다.**
   AI 가 깔리면 늘 그 옆에 「연출 이미지」 한 줄이 붙는다(.hero-ai-note · .gi figcaption).
   조각은 skins/partials/sf_hero_media.php · 스크립트는 assets/js/sf-video.js.
   ===================================================================== */

/* ── 첫 화면 영상 — 깔린 그림 위에 겹친다. 자리는 그림이 잡아 두므로 밀리지 않는다 ── */
.skin-f .hero-av{position:absolute;top:0;right:0;bottom:0;left:28%;width:72%;overflow:hidden}
.skin-f .hero-av ~ .hero-bg{display:none}
.skin-f .hero:has(.facts) .hero-av{bottom:84px}
.skin-f .hero-av .hero-ph{left:0;width:100%;bottom:0;height:100%}
.skin-f .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .7s ease;filter:saturate(.85) contrast(1.05) brightness(.82);
  pointer-events:none}
.skin-f .hero-vid.is-on{opacity:.92}

/* ── 연출 이미지 알림 — 시안에서 사진 설명이 앉던 자리(사진 오른쪽 아래) ─────── */
/* 자리: 사진 오른쪽 아래. 단, **오른쪽 세로 퀵바(.qrail, 폭 62 + 16)를 피하고**
   첫 화면 아래를 덮는 신뢰 줄(.trust)·숫자 줄(.facts) 위로 올린다 —
   겹치면 글자끼리 포개져 둘 다 안 읽힌다 (2026-09-22 미리보기에서 확인). */
.skin-f .hero-ai-note{position:absolute;right:94px;bottom:72px;z-index:4;margin:0;max-width:min(60vw,360px);
  padding:5px 10px;border-radius:var(--f-r);border:1px solid var(--f-line-soft);
  background:rgba(7,8,10,.72);color:var(--f-copy);
  font-size:11.5px;line-height:1.45;letter-spacing:-.01em;text-align:right;pointer-events:none}
.skin-f .hero:has(.facts) .hero-ai-note{bottom:160px}

/* ── 안내 글 삽화 — 글 맨 위 한 장 ───────────────────────────── */
.skin-f .prose .gi{margin:0 0 26px}
/* 삽화는 **글을 밀어내지 않을 만큼만** 크게 — 높이를 정해 두어 자리도 안 밀린다 */
.skin-f .prose .gi-img{display:block;width:100%;height:clamp(190px,30vw,360px);object-fit:cover;
  border-radius:var(--f-r-lg);border:1px solid var(--f-line-soft)}
.skin-f .prose .gi figcaption{margin-top:8px;color:var(--f-muted);font-size:11.5px;line-height:1.5}

@media(max-width:900px){
  .skin-f .hero-av{left:0;width:100%;bottom:0}
  .skin-f .hero:has(.facts) .hero-av{bottom:0}
  /* 좁은 화면에서는 사진이 첫 화면 전체를 덮는다 — 구석 어디에 놓아도 글자 위에 포개진다.
     그래서 여기서는 띄우지 않고 **글 밑줄로 내려 놓는다**(줄바꿈 + order). 자리를 뺏지 않는다. */
  .skin-f .hero:has(.hero-ai-note){flex-wrap:wrap}
  .skin-f .hero-ai-note{position:static;order:9;width:100%;right:auto;bottom:auto;
    margin:0 16px 16px;max-width:none;font-size:11px}
  .skin-f .hero:has(.facts) .hero-ai-note{bottom:auto}
}
@media(prefers-reduced-motion:reduce){
  .skin-f .hero-vid{display:none}
}