/* [생성일] 2026-11-04
   [경위] 제일클린 제안 시안 v1 — 메인 + 준공청소 하위 + 견적 문의 공용 CSS
          (큐앤코 sian.css 구조에서 출발, 참고 사이트 처음클린 계열의 흰 바탕 + 남색 띠 + 파란 알약 버튼으로 치환)
   [변경이력]
     - 2026-11-04: 최초 생성
     - 2026-11-04: v2 「시안개선」 — 첫 화면 덮개 56→42% · 제목 키움 · 청소 전후 섹션 · 견적 순서 띠 2칸(순서 + 견적서 목업) */
/* ── 토큰: 흰 바탕 · 남색 띠 · 행동색 파랑 하나 ── */
:root{
  --bg:#FFFFFF; --soft:#F4F5F7; --navy:#13192B; --navy-2:#0C1120; --line:#E3E6EB; --line-n:rgba(255,255,255,.16);
  --t-1:#15181E; --t-2:#4E5666; --t-3:#7C8494; --n-1:#FFFFFF; --n-2:#B8C0D0;
  --blue:#2458E6; --blue-2:#1E4BC4; --blue-soft:#E9EFFD; --blue-n:#8FB0FF;
  --f-hero:clamp(40px,4.8vw,62px); --f-1:clamp(26px,2.6vw,36px); --f-2:20px; --f-3:18px; --f-body:16px; --f-small:13px;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:72px; --s-6:104px;
  --r:8px; --wrap:1200px; --gutter:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--t-1);font-family:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;font-size:var(--f-body);line-height:1.65;word-break:keep-all}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--t-1)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.nw{white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* 버튼: 알약, 색 변화만 (71149 커스텀 색상 · 모서리 둥글기) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;font-weight:700;font-size:var(--f-body);border:1px solid var(--blue);border-radius:999px;background:var(--blue);color:var(--n-1);white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{background:var(--blue-2);border-color:var(--blue-2)}
.btn--line{background:transparent;border-color:var(--t-1);color:var(--t-1)}
.btn--line:hover{background:var(--t-1);color:var(--n-1);border-color:var(--t-1)}
.btn--white{background:transparent;border-color:var(--n-1);color:var(--n-1)}
.btn--white:hover{background:var(--n-1);color:var(--navy);border-color:var(--n-1)}
.btn--full{width:100%}
.more{font-weight:700;color:var(--blue);border-bottom:1px solid transparent;transition:border-color .2s}
.more:hover{border-bottom-color:var(--blue)}
.label{display:block;font-size:var(--f-small);font-weight:700;color:var(--blue);letter-spacing:.04em;margin-bottom:var(--s-2)}
.lead{color:var(--t-2);font-size:var(--f-3);margin-top:var(--s-2);max-width:36em}
.note{color:var(--t-3);font-size:var(--f-small);margin-top:var(--s-3)}
.mt{margin-top:var(--s-4)}

/* 헤더: 흰 불투명 */
.hd{background:var(--bg);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:var(--s-3)}
.logo{font-weight:800;font-size:22px;line-height:1.1;color:var(--navy);letter-spacing:-.02em}
.logo small{display:block;font-weight:500;font-size:12px;color:var(--t-3);margin-top:3px;letter-spacing:0}
.nav{display:flex;gap:28px;font-size:15px;font-weight:600;color:var(--t-2)}
.nav a:hover{color:var(--t-1)}
.hd-r{display:flex;align-items:center;gap:20px}
.tel{font-size:15px;font-weight:700;color:var(--t-1)}
.hd .btn{min-height:44px;padding:0 22px;font-size:15px}
.menu-t{display:none;background:none;border:1px solid var(--t-2);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;color:var(--t-1);cursor:pointer}
.nav-m{display:none;border-top:1px solid var(--line);background:var(--bg)}
.nav-m.open{display:block}
.nav-m a{display:block;padding:14px var(--gutter);border-bottom:1px solid var(--line);font-size:16px}

/* 첫 화면: 전면 사진 + 남색 단색 덮개 + 왼쪽 글 (비주얼 섹션 · 71303 음영 색상) */
.hero{position:relative;background:var(--navy) url(../img/hero.jpg) center/cover no-repeat;display:flex;align-items:center;min-height:calc(100dvh - 73px)}
.hero::before{content:"";position:absolute;inset:0;background:rgba(19,25,43,.42)}
.hero .wrap{position:relative;width:100%;padding-top:var(--s-6);padding-bottom:var(--s-6)}
.hero-t{max-width:760px}
.hero-t .label{color:var(--blue-n)}
.hero-t h1{font-size:var(--f-hero);font-weight:800;line-height:1.15;letter-spacing:-.03em;color:var(--n-1)}
.hero-t p{max-width:28em;margin-top:var(--s-3);font-size:var(--f-2);color:var(--n-1)}
.hero-b{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}

/* 공통 섹션 · 띠 순환 흰 > 연회색 > 남색 */
.sec{padding-top:var(--s-6);padding-bottom:var(--s-6);border-bottom:1px solid var(--line)}
.sec h2{font-size:var(--f-1)}
.sec--soft{background:var(--soft)}
.sec--navy{background:var(--navy);color:var(--n-1);border-bottom:0}
.sec--navy h2,.sec--navy h3{color:var(--n-1)}
.sec--navy .lead{color:var(--n-2)}
.sec--navy .label{color:var(--blue-n)}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s-2)}

/* 청소 서비스 7타일 (3 + 4 두 줄, 사진 아래 글) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.tiles--4{grid-template-columns:repeat(4,1fr);margin-top:var(--s-3)}
.tile{display:block;background:var(--soft);border-radius:var(--r);overflow:hidden;transition:background-color .2s}
.tile:hover{background:var(--blue-soft)}
.tile img{aspect-ratio:4/3;object-fit:cover}
.tile-b{padding:var(--s-3)}
.tile b{display:block;font-size:var(--f-3);font-weight:700;color:var(--t-1)}
.tile p{color:var(--t-2);font-size:15px;margin-top:6px}
.tiles--4 .tile-b{padding:20px}
.tiles--4 .tile b{font-size:17px}
.tiles--4 .tile p{font-size:14px}

/* 2칸: 사진 + 글 (사업장 소개 · 작업 범위) */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:center}
.two img{aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.two--r>img{order:2}

/* 이름/값 줄 목록 */
.dl-list{margin-top:var(--s-4)}
.dl-list div{display:grid;grid-template-columns:140px 1fr;gap:var(--s-3);padding:14px 0;border-top:1px solid var(--line)}
.dl-list div:last-child{border-bottom:1px solid var(--line)}
.dl-list dt{color:var(--t-3);font-size:var(--f-small);font-weight:600;padding-top:3px}
.dl-list dd{color:var(--t-1)}
.dl-list dd small{display:block;color:var(--t-3);font-size:var(--f-small)}

/* 작업 사례: 최신글 4칸 같은 크기 (71189 리스트 항목) */
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.post{display:block;background:var(--bg);border-radius:var(--r);overflow:hidden}
.post img{aspect-ratio:4/3;object-fit:cover}
.post-b{padding:18px 20px}
.post b{display:block;font-size:16px;font-weight:700;color:var(--t-1)}
.post small{display:block;color:var(--t-3);font-size:var(--f-small);margin-top:6px}

/* 청소 전과 후: 2쌍 (사진 아래 글, 사진 위 글자 없음) */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-4)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-1)}
.pair figure{margin:0}
.pair img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.pair figcaption{font-size:var(--f-small);font-weight:700;color:var(--t-3);margin-top:8px}
.pair figure:last-child figcaption{color:var(--blue)}
.ba-t{margin-top:var(--s-2)}
.ba-t b{display:block;font-size:var(--f-3);font-weight:700;color:var(--t-1)}
.ba-t p{color:var(--t-2);font-size:15px;margin-top:4px}

/* 견적 받는 순서: 남색 띠, 왼쪽 순서 · 오른쪽 견적서 목업 */
.flow{display:grid;grid-template-columns:6fr 5fr;gap:var(--s-5);align-items:start}
.vsteps{margin-top:var(--s-4);border-top:1px solid rgba(255,255,255,.3)}
.vsteps li{display:grid;grid-template-columns:40px 1fr;gap:var(--s-2);padding:16px 0;border-bottom:1px solid var(--line-n)}
.vsteps .n{font-size:var(--f-small);font-weight:700;color:var(--blue-n);padding-top:4px}
.vsteps b{display:block;font-size:var(--f-3);font-weight:700;color:var(--n-1)}
.vsteps p{color:var(--n-2);font-size:15px;margin-top:2px}
.quote{background:var(--bg);color:var(--t-1);border-radius:var(--r);padding:var(--s-4)}
.quote-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--t-1);padding-bottom:var(--s-2)}
.quote-h b{font-size:var(--f-2);font-weight:800;letter-spacing:.1em}
.quote-h small{font-size:var(--f-small);color:var(--t-3)}
.quote-meta{display:grid;grid-template-columns:72px 1fr;gap:6px var(--s-2);padding:var(--s-2) 0;border-bottom:1px solid var(--line);font-size:14px}
.quote-meta dt{color:var(--t-3)}
.quote-meta dd{color:var(--t-1)}
.quote table{width:100%;border-collapse:collapse;font-size:14px;margin-top:var(--s-1)}
.quote th{text-align:left;font-weight:600;color:var(--t-3);font-size:var(--f-small);padding:10px 0;border-bottom:1px solid var(--line)}
.quote td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.quote td:last-child,.quote th:last-child{text-align:right;white-space:nowrap}
.quote td small{display:block;color:var(--t-3);font-size:12px}
.quote tfoot td{border-bottom:0;font-weight:800;font-size:var(--f-3);padding-top:14px}
.quote-f{font-size:12px;color:var(--t-3);margin-top:var(--s-2);line-height:1.6}
.quote-f b{color:var(--t-1);font-weight:700}
.quote-note{font-size:var(--f-small);color:var(--n-2);margin-top:var(--s-2)}

/* (v1) 5칸 가로 순서 — 미사용 */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3);margin-top:var(--s-5)}
.step{border-top:1px solid rgba(255,255,255,.3);padding-top:var(--s-2)}
.step .n{display:block;font-size:var(--f-small);font-weight:700;color:var(--blue-n);margin-bottom:var(--s-2)}
.step b{display:block;font-size:var(--f-3);font-weight:700;color:var(--n-1);margin-bottom:6px}
.step p{color:var(--n-2);font-size:15px}
.btns{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}

/* 자주 묻는 질문: 질문 + 답 줄 */
.qa{margin-top:var(--s-4);border-top:1px solid var(--line)}
.qa div{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s-3);padding:22px 0;border-bottom:1px solid var(--line)}
.qa dt{font-weight:700;color:var(--t-1);font-size:var(--f-3)}
.qa dd{color:var(--t-2)}

/* 견적 문의: 2칸 + 폼 (71185 입력폼, 1열) */
.apply .wrap{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-5);align-items:start}
.form{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4)}
.form label{display:block;font-weight:600;font-size:15px;margin:0 0 6px;color:var(--t-1)}
.form .f{margin-bottom:var(--s-3)}
.form input[type=text],.form input[type=tel],.form input[type=email],.form input[type=date],.form textarea{width:100%;border:1px solid #C9CFD8;border-radius:var(--r);padding:12px 14px;font:inherit;font-size:var(--f-body);color:var(--t-1);background:var(--bg)}
.form input[type=file]{width:100%;font:inherit;font-size:14px;color:var(--t-2)}
.form input:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:0}
.form textarea{min-height:120px;resize:vertical}
.tel3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:center}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px}
.checks label,.agree label{display:inline-flex;align-items:center;gap:8px;font-weight:400;margin:0;color:var(--t-2)}
.checks input,.agree input{accent-color:var(--blue);width:16px;height:16px;margin:0}
.agree{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);font-size:15px}
.agree a{color:var(--t-3);text-decoration:underline;font-size:var(--f-small)}

/* 하위 페이지 머리 · 3칸 · 사진 띠 */
.ph{position:relative;background:var(--navy) url(../img/construction.jpg) center/cover no-repeat}
.ph::before{content:"";position:absolute;inset:0;background:rgba(19,25,43,.68)}
.ph .wrap{position:relative;padding-top:var(--s-5);padding-bottom:var(--s-5)}
.ph h1{font-size:var(--f-1);font-weight:800;letter-spacing:-.03em;color:var(--n-1)}
.ph p{max-width:34em;margin-top:var(--s-2);font-size:var(--f-3);color:var(--n-2)}
.ph--soft{background:var(--soft)}
.ph--soft::before{display:none}
.ph--soft h1{color:var(--t-1)}
.ph--soft p,.ph--soft .crumb{color:var(--t-2)}
.crumb{font-size:var(--f-small);color:var(--n-2);margin-bottom:var(--s-3)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-4)}
.col{border-top:1px solid var(--t-1);padding-top:var(--s-2)}
.col b{display:block;font-size:var(--f-3);color:var(--t-1);margin-bottom:8px}
.col ul,.list{color:var(--t-2);font-size:15px}
.col li,.list li{padding:4px 0}
.list{margin-top:var(--s-3)}
.list li{padding-left:18px;position:relative}
.list li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--blue)}
.list--x li::before{background:var(--t-3)}
.strip{margin-top:var(--s-5)}
.strip img{aspect-ratio:21/9;object-fit:cover;border-radius:var(--r)}
.olist{margin-top:var(--s-4);border-top:1px solid var(--line);counter-reset:n}
.olist li{display:grid;grid-template-columns:48px 1fr;gap:var(--s-2);padding:16px 0;border-bottom:1px solid var(--line);counter-increment:n}
.olist li::before{content:counter(n);font-weight:700;color:var(--blue)}
.olist b{display:block;font-weight:700;color:var(--t-1)}
.olist p{color:var(--t-2);font-size:15px}

/* 푸터 */
.ft{background:var(--navy-2);color:var(--n-2);padding-top:var(--s-5);padding-bottom:var(--s-4);font-size:var(--f-small)}
.ft .logo{color:var(--n-1)}
.ft .logo small{color:var(--n-2)}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s-4);padding-bottom:var(--s-4);border-bottom:1px solid var(--line-n)}
.ft h3{font-size:var(--f-small);color:var(--n-1);margin-bottom:var(--s-2);letter-spacing:.04em}
.ft li{margin-bottom:6px}
.ft a:hover{color:var(--n-1)}
.ft-bot{padding-top:var(--s-3);line-height:1.9}
.ft-bot a{text-decoration:underline}
.ft-ex{margin-top:var(--s-2);color:#6E7788}

/* 제작 메모 (시안 전용, 아임웹에 안 들어감) */
.memo-btn{position:fixed;right:16px;bottom:16px;z-index:30;background:var(--bg);color:var(--t-2);border:1px solid #C9CFD8;border-radius:999px;font:inherit;font-size:12px;padding:8px 14px;cursor:pointer}
.memo{display:none;position:fixed;right:16px;bottom:56px;z-index:31;width:min(380px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--bg);color:var(--t-1);border:1px solid #C9CFD8;border-radius:var(--r);padding:var(--s-3);font-size:14px;line-height:1.6}
.memo.open{display:block}
.memo li{padding-left:14px;position:relative;margin-bottom:8px}
.memo li::before{content:"-";position:absolute;left:0}

/* 등장: 투명도만 (71169 페이드인) */
.fade{opacity:0;transition:opacity .6s}
.fade.in{opacity:1}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transition:none}}

/* 반응형 */
@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tiles--4{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .nav{gap:18px;font-size:14px}
  .tel{display:none}
}
@media (max-width:767px){
  :root{--s-5:48px;--s-6:64px}
  .nav,.tel{display:none}
  .menu-t{display:block}
  .hd .btn{display:none}
  .hero{min-height:0}
  .hero .wrap{padding-top:var(--s-5);padding-bottom:var(--s-5)}
  .hero-b .btn,.btns .btn{flex:1 1 100%}
  .tiles,.tiles--4,.posts,.two,.apply .wrap,.cols3,.steps,.ba-grid,.flow{grid-template-columns:1fr;gap:var(--s-3)}
  .quote{padding:var(--s-3)}
  .two--r>img{order:0}
  .qa div{grid-template-columns:1fr;gap:6px}
  .dl-list div{grid-template-columns:100px 1fr}
  .ft-top{grid-template-columns:1fr 1fr}
}