/* 시안C: 창문 풍경 위에 반투명 유리 카드를 올린 부드러운 모양. 색은 LX 규정 빨강 #A72B2A, 회색 #746661. */
/* 창문 풍경 사진(LX 카탈로그 사진)은 아래 한 줄로만 불러와요. 컴퓨터용과 휴대폰용이 따로 있고, 바꿀 때는 이 두 줄의 파일 이름만 고치세요. */
/* 예전에 그린 그림은 그림/창문풍경.svg 에 그대로 남아 있어요(되돌릴 때 이 줄을 url('/그림/창문풍경.svg') 로). */
:root{--창문풍경:url('/그림/창문풍경.svg');--창문덮개:linear-gradient(transparent,transparent);
--빨강:#A72B2A;--진빨강:#7e1f1e;--옅빨강:#f6e9e8;--회색:#746661;--옅회색:#ece6e3;--글:#2b2523;--진회:#4a3f3b;--회:#746661;--선:#e6dcd8;--칸선:#d9cdc9;--바탕:#f3ece8;--흰:#fff;
--초록:#2f7a52;--단추빨강:linear-gradient(180deg,#b8403e,#A72B2A);--그림자:0 6px 22px rgba(120,90,80,.10);--유리그림자:0 18px 50px rgba(80,50,40,.18)}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:var(--글);background:var(--바탕);line-height:1.6;padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--빨강)}
/* 위쪽 줄: 흐린 흰 유리 */
.상단{background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(230,220,216,.8);display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 24px;padding-top:calc(10px + env(safe-area-inset-top));position:sticky;top:0;z-index:5}
.상단 .이름{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--글)}
.상단 .이름 img{height:38px;display:block}
.공식표{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid #e3dad6;font-size:.78rem;font-weight:700;color:var(--진회);white-space:nowrap;line-height:1.2}
.공식표 img,.상단 .이름 .공식표 img{height:20px;width:auto;display:block}
.바로가기{display:inline-flex;gap:6px;align-items:center}
.바로가기 a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px;border-radius:999px;border:1px solid #e3dad6;background:#fff;color:var(--진회);font-weight:700;font-size:.78rem;text-decoration:none;line-height:1.2;white-space:nowrap}
.바로가기 a:hover{border-color:var(--빨강);color:var(--빨강)}
.바로가기 svg{color:var(--빨강);flex:none}
.상단 nav{display:flex;flex-wrap:wrap;gap:2px 6px;flex:1;justify-content:flex-end}
.상단 nav a{color:var(--진회);text-decoration:none;font-weight:700;padding:10px 14px;border-radius:999px;font-size:.95rem}
.상단 nav a:hover{background:var(--옅빨강)}
.상단 nav a.지금{background:var(--빨강);color:#fff}
.상단 .누구{font-size:.85rem;color:var(--회);min-width:0;max-width:300px;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.상단 .누구 b{color:var(--진회)}
.상단 .나가기{border:1.5px solid var(--칸선);background:#fff;color:var(--진회);border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;font-family:inherit}
.상단 .나가기:hover{border-color:var(--빨강);color:var(--빨강)}
.본문{max-width:1040px;margin:0 auto;padding:26px 20px 12px}
.하단{text-align:center;color:var(--회);font-size:.84rem;padding:34px 12px 40px}
.하단 .줄{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.하단로고{height:32px;display:block}
.하단 .공식표{font-size:.74rem}
.하단 .공식표 img{height:18px}
.하단 .흐림{opacity:.85;margin-top:2px}
h1{font-size:1.6rem;margin:6px 0 18px;letter-spacing:-.01em;line-height:1.4}
h2{font-size:1.12rem;margin:0 0 14px}
/* 카드: 둥글고 그림자만 */
.카드{background:var(--흰);border:0;border-radius:22px;padding:22px;margin-bottom:18px;box-shadow:var(--그림자)}
.좁은{max-width:480px;margin:0 auto}
label{display:block;font-weight:700;font-size:.9rem;margin:16px 0 6px;color:var(--진회)}
input,select,button,textarea{font:inherit}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],select{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--칸선);border-radius:14px;background:#fff;color:var(--글);font-size:1rem}
input[type=file]{width:100%;padding:12px;border:1.5px dashed #c9b9b3;border-radius:14px;background:#fbf8f6}
input:focus,select:focus{outline:3px solid rgba(167,43,42,.25);border-color:var(--빨강)}
.도움{font-size:.84rem;color:var(--회);margin-top:5px}
/* 단추: 빨강 알약 */
.단추{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:52px;background:var(--단추빨강);color:#fff;border:2px solid var(--빨강);border-radius:999px;padding:12px 28px;font-weight:800;font-size:1rem;cursor:pointer;text-decoration:none;text-align:center;box-shadow:0 6px 16px rgba(167,43,42,.28);transition:filter .15s}
.단추:hover{filter:brightness(1.06)}
.단추.옅음{background:#fff;color:var(--빨강);box-shadow:none}
.단추.옅음:hover{background:var(--옅빨강);filter:none}
.단추.빨강{background:var(--진빨강);border-color:var(--진빨강);box-shadow:none}
.단추.초록{background:var(--초록);border-color:var(--초록);box-shadow:none}
.단추.강조{background:var(--단추빨강);border-color:var(--빨강)}
.단추.작게{min-height:44px;padding:8px 20px;font-size:.92rem}
.단추:disabled{opacity:.5;cursor:default;filter:none}
.넓게{width:100%;margin-top:22px}
.알림{padding:13px 15px;border-radius:14px;margin:14px 0;font-size:.94rem}
.알림.오류{background:#fdecea;color:#8e2418;border:1px solid #f3b9b2}
.알림.좋음{background:#e8f4ec;color:#17623a;border:1px solid #b5e0c6}
.알림.안내{background:var(--옅빨강);color:var(--진빨강);border:1px solid #ecd0cd}
.알림.임시{background:#fff7e0;color:#7a5200;border:1px solid #f0d58a}
.가운데{text-align:center}
.큰글{font-size:1.12rem}
/* 창문 풍경 장면 + 유리 카드 */
.장면{flex-direction:column;position:relative;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:40px 20px;margin-bottom:22px;background-color:#e9ddd5}
.장면::before{content:'';position:absolute;inset:0;z-index:0;background:var(--창문덮개),var(--창문풍경) center/cover}
.장면>*{position:relative;z-index:1}
.유리{position:relative;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.9);border-radius:24px;padding:34px 34px 30px;width:100%;box-shadow:var(--유리그림자)}
.유리 h1{margin-top:4px}
.유리 .카드{box-shadow:none;background:rgba(255,255,255,.55);padding:16px}
.유리 .좁은안{max-width:480px;margin:0 auto}
.첫장면{min-height:600px}
.첫화면{text-align:center;max-width:640px}
.첫화면 .큰로고{width:min(260px,72%);display:block;margin:0 auto 8px}
.첫화면 .공식표{margin:10px 0 6px;font-size:.82rem}
.첫화면 h1{font-size:1.9rem;margin:10px 0 8px;line-height:1.4}
.첫화면 p{color:#6b5d58;max-width:520px;margin:0 auto 22px;font-size:1.02rem}
.첫화면 .단추줄{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.첫화면 .단추{min-width:170px}
.첫화면 .단추.투명{background:rgba(255,255,255,.6);color:var(--빨강);box-shadow:none}
.첫화면 .단추.투명:hover{background:#fff;filter:none}
.특징들{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:22px}
@media(min-width:720px){.특징들{grid-template-columns:repeat(3,1fr)}.유리{padding:38px 40px 34px}}
.특징 .숫자{width:34px;height:34px;border-radius:50%;background:#c9726f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:10px}
.특징 b{display:block;font-size:1.05rem;margin-bottom:4px}
.특징 span{color:var(--회);font-size:.92rem}
.순서{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;font-weight:700}
.순서 i{font-style:normal;color:var(--회)}
.순서 span{background:#f3e2df;color:var(--진빨강);padding:8px 18px;border-radius:999px}
/* 앱 설치 안내 */
.설치상자{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);border-radius:22px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--그림자)}
.설치상자 .글{flex:1;min-width:200px}
.설치상자 b{display:block}
.설치상자 .아이콘{width:48px;height:48px;border-radius:12px}
.설치상자 .닫기{background:none;border:0;color:var(--회);cursor:pointer;font-weight:700;padding:8px}
.장면 .설치상자{width:100%;max-width:480px;margin:0 auto 14px}
/* 입력 */
.줄카드{border:1.5px solid var(--선);border-radius:18px;padding:16px;margin-bottom:14px;background:#fcfaf9}
.줄카드 .머리{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:2px}
.칸들{display:grid;grid-template-columns:repeat(2,1fr);gap:0 12px}
.칸들 .전체{grid-column:1/-1}
@media(min-width:760px){.칸들{grid-template-columns:1.1fr 1.6fr 1.8fr}.칸들 .전체{grid-column:auto}}
.아래줄{position:sticky;bottom:0;background:linear-gradient(to top,var(--바탕) 70%,transparent);padding:14px 0 calc(14px + env(safe-area-inset-bottom));margin-top:8px}
.아래줄 .넓게{margin-top:0}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{border:0;border-bottom:1px solid #eee4e0;padding:9px 10px;text-align:left;vertical-align:top}
th{white-space:nowrap;background:var(--옅회색);font-weight:700;color:var(--진회)}
th:first-child{border-radius:10px 0 0 10px}th:last-child{border-radius:0 10px 10px 0}
td.수,th.수{text-align:right;white-space:nowrap}
.표감싸개{overflow-x:auto}
.뱃지{display:inline-block;padding:2px 12px;border-radius:999px;font-size:.8rem;font-weight:700}
.뱃지.대기{background:#fff0cc;color:#7a5200}.뱃지.승인{background:#dff0e6;color:#17623a}.뱃지.거절{background:#f9d9d5;color:#8e2418}
.탭{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.탭 button{min-height:46px;padding:8px 20px;border:2px solid var(--칸선);background:#fff;border-radius:999px;cursor:pointer;font-weight:800;color:var(--진회)}
.탭 button:hover{border-color:var(--빨강)}
.탭 button.지금{background:var(--단추빨강);color:#fff;border-color:var(--빨강)}
.업체줄{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.업체줄 .글{flex:1;min-width:200px}
.작은로고{width:64px;height:64px;object-fit:contain;border:1px solid var(--선);border-radius:14px;background:#fff;padding:3px}
.숫자칸{display:flex;gap:8px;align-items:center}
.숫자칸 input{width:100px}
.작업줄{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
details.카드 summary{cursor:pointer;font-weight:800;color:var(--진빨강)}
/* 가견적서: 화면에서도, 인쇄에서도 흰 종이 */
.견적서{background:#fff;border:1px solid #e6dcd8;border-radius:16px;padding:30px;max-width:820px;margin:0 auto 18px;box-shadow:var(--그림자)}
.견적서 .위{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:4px solid var(--빨강);padding-bottom:16px;flex-wrap:wrap}
.견적서 .공급자{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.견적서 .로고{height:44px;width:auto;display:block}
.견적서 .부제{text-align:center;color:var(--회);font-size:.88rem;margin:-10px 0 16px}
.견적서 .업체글{text-align:right;font-size:.88rem;line-height:1.6}
.견적서 .업체글 b{font-size:1.12rem}
.견적서 h1.제목{text-align:center;letter-spacing:.5em;margin:24px 0 18px;font-size:1.5rem}
.견적서 .현장{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:.95rem;margin-bottom:16px;background:#f9f5f3;padding:12px 14px;border-radius:12px}
.견적서 .합계표{margin:16px 0 0 auto;max-width:360px}
.견적서 .합계표 td{font-size:1rem}
.견적서 .합계표 tr.끝 td{font-weight:800;background:var(--빨강);color:#fff;font-size:1.1rem}
.견적서 .합계표 tr.끝 td:first-child{border-radius:12px 0 0 12px}.견적서 .합계표 tr.끝 td:last-child{border-radius:0 12px 12px 0}
.견적서 .주의{margin-top:18px;padding:12px 14px;border:1px solid #efc9c7;background:#fff3f2;color:var(--진빨강);font-size:.9rem;border-radius:12px}
.견적서 .맺음{margin-top:18px;padding-top:12px;border-top:1px solid var(--선);display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--회);gap:10px}
.견적서 .맺음 img{height:20px;opacity:.85}
.관리상자{border:2px dashed #b9770e;background:#fffaf0;padding:14px 16px;border-radius:16px;max-width:820px;margin:0 auto 18px;font-size:.9rem}
.숨김{display:none!important}
@media(max-width:600px){.본문{padding:18px 14px 8px}.카드{padding:18px}.견적서{padding:18px}.상단{padding-left:14px;padding-right:14px;gap:6px 10px}.상단 .이름{gap:8px}.상단 .이름 img{height:30px}.공식표{font-size:.7rem;padding:4px 9px;gap:6px}.바로가기 a{padding:0;width:34px;justify-content:center}.바로가기 .글{display:none}.상단.로그인함 .바로가기{order:1}.공식표 img,.상단 .이름 .공식표 img{height:16px}.상단 nav{flex:1 0 100%;justify-content:stretch;gap:6px}.상단 nav a{flex:1;text-align:center;white-space:nowrap;padding:10px 6px;background:rgba(255,255,255,.7)}.상단 nav a.지금{background:var(--빨강)}.상단.로그인함 .이름{order:1}.상단.로그인함 .누구{order:2;margin-left:auto}.상단.로그인함 .나가기{order:3}.상단.로그인함 nav{order:4;flex:1 0 100%;gap:6px}.상단.로그인함 nav a{padding:12px 6px}
.장면{border-radius:20px;padding:44px 22px}.유리{padding:24px 18px}.첫장면{min-height:560px}.첫화면 h1{font-size:1.5rem}}
/* 공급가 견적서(빨강)와 고객용 견적서(차분한 청회색)를 한눈에 구분 */
.견적서 .공급가표시{display:inline-block;background:#fdecea;color:var(--진빨강);border:1px solid #efc9c7;border-radius:999px;padding:8px 22px;font-weight:900;font-size:1.25rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.견적서.고객용 .업체글{text-align:right}
.올림상자{max-width:560px;margin:0 auto 18px}
.올림칸{display:flex;gap:10px;align-items:center}
.올림칸 input{flex:1}
.올림칸 .단위{font-weight:800;color:var(--진회);min-width:1.6em}
.단추.고객용단추{background:linear-gradient(180deg,#3f5f7d,#2f4a63);border-color:#2f4a63;box-shadow:0 6px 16px rgba(47,74,99,.28)}
/* 입력 방식 고르기, 단지로 찾기 */
.방식줄{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.방식단추{min-height:56px;border:2px solid var(--칸선);background:#fff;border-radius:16px;font-weight:800;font-size:1rem;cursor:pointer;color:var(--진회)}
.방식단추:hover{border-color:var(--빨강)}
.방식단추.지금{background:var(--단추빨강);border-color:var(--빨강);color:#fff}
.카드.안쪽{box-shadow:none;background:#fcfaf9;border:1px solid var(--선)}
.검색줄{display:flex;gap:10px}
.검색줄 .검색칸{flex:1}
.고르기목록{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0}
@media(min-width:720px){.고르기목록{grid-template-columns:1fr 1fr}}
.고르기{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-height:62px;padding:12px 16px;border:2px solid var(--칸선);border-radius:16px;background:#fff;cursor:pointer;font:inherit;color:var(--글)}
.고르기:hover{border-color:#c9726f}
.고르기.지금{border-color:var(--빨강);background:var(--옅빨강);color:var(--진빨강);box-shadow:none}
/* 노란 실측 안내: 시안C 이전과 같은 노란색 그대로 */
.면책{background:#fff3cd;border:2px solid #e0a800;color:#5c4400;border-radius:14px;padding:14px 16px;font-weight:800;margin:14px 0}
.줄비고{background:#fff7e0;color:#7a5200;border-radius:10px;padding:6px 10px;font-size:.84rem;margin-bottom:6px}
.못한목록{margin:6px 0 6px 18px;padding:0;font-size:.9rem}
.견적서 .단지근거{margin-top:16px;padding:12px 14px;border:2px solid #e0a800;background:#fff3cd;color:#5c4400;border-radius:12px;font-size:.9rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.견적서 .단지근거 b{display:block;font-size:1rem;margin-bottom:4px}
.견적서 .단지근거 .층안내{margin-top:6px;font-weight:700}
@media(max-width:600px){
  .줄표 thead{display:none}
  .줄표,.줄표 tbody,.줄표 tr,.줄표 td{display:block;width:100%}
  .줄표 tr{border:1px solid var(--선);border-radius:14px;margin-bottom:10px;padding:6px 10px}
  .줄표 td{border:0;border-bottom:1px dashed var(--선);padding:7px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .줄표 td:last-child{border-bottom:0;font-weight:800}
  .줄표 td::before{content:attr(data-라벨);color:var(--회);font-weight:700;text-align:left;flex:none}
  .줄표 td .도움{text-align:right}
  .줄표 td[data-라벨="제품"]{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:start}
  .줄표 td[data-라벨="제품"]::before{grid-row:1 / span 2}
  .줄표 td[data-라벨="제품"] .도움{grid-column:2;font-size:.82rem}
}
@media(display-mode:standalone){.설치상자.안드로이드,.설치상자.아이폰{display:none}}
@media print{
  body{background:#fff}
  .상단,.하단,.작업줄,.관리상자,.인쇄안함,.설치상자{display:none!important}
  .본문{padding:0;max-width:none}
  .견적서{border:0;padding:0;max-width:none;box-shadow:none;border-radius:0}
  .견적서 .합계표 tr.끝 td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .견적서 .위{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:14mm}
}

/* 화면 사진 찍을 때만 쓰는 모양(스크립트가 붙임) */
.사진찍는중 .상단,.사진찍는중 .아래줄{position:static!important}

/* 고객용 견적서: 공급가 견적서와 같은 색, 보증 문구 크게 */
.견적서 .보증글{text-align:center;color:var(--진빨강);font-weight:900;font-size:1.35rem;letter-spacing:.04em;margin:-6px 0 18px}
@media (max-width:600px){.견적서 .보증글{font-size:1.1rem}.견적서 .공급가표시{font-size:1.05rem;padding:7px 16px}}
/* 장비대·철거비 줄 */
.줄표 tr.추가행 td{background:#fbf6f4}
.견적서 .줄표 tr.추가행 td{font-weight:600}
@media print{.줄표 tr.추가행 td{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* 줄바꿈은 글자 중간이 아니라 단어(띄어쓰기) 단위로. 너무 긴 한 단어만 예외로 끊는다. */
html,body,button,input,select,textarea{word-break:keep-all;overflow-wrap:break-word;line-break:strict}

/* 직접 입력: 가로·세로 칸의 회색 제한 크기 글씨와 안내 */
.칸들 input::placeholder{color:#9a8f8a;opacity:1}
.칸들 input:disabled,.칸들 select:disabled{background:#f3efed;color:#9a8f8a}
.칸들 .한계안내{grid-column:1/-1;font-size:.82rem;color:#8a7f7a;margin:-2px 0 4px;line-height:1.5}
.칸들 .한계안내.문제{color:#a1342a;font-weight:700}
.한계안내 .보완{margin-left:6px;font-size:.74rem}
.줄카드.문제줄{border-color:#d4574c;background:#fff6f4}
.뱃지.경고무시{background:#fdecea;color:#8e2418;border:1px solid #f3b9b2;white-space:nowrap}
.관리상자 .경고무시상자,.알림.경고무시상자{margin:8px 0}
.경고무시상자 ul{margin:6px 0 0 18px;padding:0;font-size:.9rem}

/* 경고 팝업: 사이트 디자인 안에서 뜨는 자체 창 */
.경고덮개{position:fixed;inset:0;z-index:50;background:rgba(43,37,35,.55);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
body.팝업열림{overflow:hidden}
.경고창{background:#fff;border-radius:22px;max-width:520px;width:100%;max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.35);border-top:8px solid #e0a800;overflow:hidden}
.경고창.막힘{border-top-color:var(--빨강)}
.경고머리{display:flex;align-items:center;gap:12px;padding:18px 20px 6px}
.경고머리 h2{margin:0;font-size:1.15rem;color:var(--글)}
.경고표{flex:none;width:34px;height:34px;border-radius:50%;background:#fff3cd;color:#8a6200;border:2px solid #e0a800;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
.경고창.막힘 .경고표{background:#fdecea;color:var(--빨강);border-color:var(--빨강)}
.경고내용{padding:6px 20px 8px;overflow-y:auto}
.경고안내{margin:6px 0 10px;color:var(--진회);font-size:.95rem}
.경고내용 ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.경고내용 li{background:#fff7e0;border:1px solid #f0d58a;color:#5c4400;border-radius:12px;padding:10px 12px;font-size:.92rem;line-height:1.55}
.경고창.막힘 .경고내용 li{background:#fdecea;border-color:#f3b9b2;color:#7a1f14}
.경고단추{display:flex;flex-direction:column;gap:8px;padding:12px 20px 18px}
@media(min-width:520px){.경고단추{flex-direction:row-reverse}.경고단추 .단추{flex:1}}

/* ---- 관리 화면: 날짜·거래처 조회, 한눈에 보이는 표(옆 스크롤 없음), 폰에서는 카드 ---- */
.본문:has(.관리넓게){max-width:1240px}
.조회칸{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px;padding:12px 14px;background:#faf6f4;border:1px solid var(--선);border-radius:14px}
.조회줄{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.조회줄 label{margin:0;font-weight:800;min-width:44px;font-size:.9rem}
.조회줄 input[type=date],.조회줄 input[type=search]{width:auto;min-height:38px;padding:4px 10px;font-size:.92rem}
.조회줄 input[type=search]{flex:1 1 220px;max-width:340px}
.빠른단추{display:flex;gap:6px;flex-wrap:wrap}
.조회줄 .단추{min-height:38px}
.뱃지.거래처고름{background:#eef2fb;color:#23407c;border:1px solid #c5d0ea}
.뱃지.거래처고름 button{border:0;background:none;cursor:pointer;color:inherit;font-weight:800}
.요약줄{display:flex;flex-wrap:wrap;gap:6px 22px;padding:10px 14px;margin-bottom:6px;background:#fff7e8;border:1px solid #ecd9b0;border-radius:12px;font-size:.95rem}
.요약줄 small{color:var(--회)}
.부가세글{font-size:.85rem;color:var(--회);margin:2px 0 10px}
.관리표{width:100%;table-layout:auto;font-size:.8rem;border-collapse:collapse}
.관리표 th{padding:7px 6px;font-size:.78rem;line-height:1.25;vertical-align:bottom}
.관리표 td{padding:7px 6px;vertical-align:top;border-bottom:1px solid var(--선);line-height:1.35}
.관리표 td.수,.관리표 th.수{white-space:nowrap}
.관리표 .작은글{font-size:.72rem;color:var(--회);font-weight:400}
.견적표 td:nth-child(2){white-space:nowrap}
.견적표 td:nth-child(4){word-break:keep-all;overflow-wrap:anywhere}
.현황표 td,.현황표 th{font-size:.88rem}
.누름줄{cursor:pointer}.누름줄:hover,.누름줄:focus{background:#faf1ee;outline:none}
@media(max-width:700px){
  .관리표,.관리표 tbody,.관리표 tr,.관리표 td{display:block;width:100%}
  .관리표 thead{display:none}
  .관리표 tr{border:1px solid var(--선);border-radius:14px;padding:8px 12px;margin-bottom:10px;background:#fff}
  .관리표 td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border:0;text-align:right;font-size:.88rem}
  .관리표 td::before{content:attr(data-l);color:var(--회);font-weight:700;text-align:left;flex:0 0 auto}
  .관리표 td.수{text-align:right}
  .조회줄 label{min-width:100%}
  .조회줄 input[type=date]{flex:1 1 130px}
  .조회줄 input[type=search]{max-width:none}
}

/* 공급가·고객용 견적서 화면: 위쪽 단추 줄과 안내 글을 아래 견적서 카드와 같은 폭으로 두고 가운데 정렬(카드의 가운데 선과 같게) */
.작업줄.인쇄안함,.도움.인쇄안함{max-width:820px;margin-left:auto;margin-right:auto}
.작업줄.인쇄안함{justify-content:center}
.도움.인쇄안함{text-align:center}
/* 단위절삭 줄 */
.견적서 .합계표 tr.소계줄 td{color:var(--회)}
.견적서 .합계표 tr.절삭줄 td{color:var(--진빨강);font-weight:700}
.견적서 .합계표 td:first-child{word-break:keep-all}
.단추줄작게 { display: flex; flex-wrap: wrap; gap: 6px; }
.단추줄작게 .단추 { white-space: nowrap; }
.목록카드감싸개{overflow:visible}
.목록카드표,.목록카드표 tbody,.목록카드표 tr,.목록카드표 td{display:block;width:100%}
.목록카드표 thead{display:none}
.목록카드표 tr{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px 14px;margin:0 0 12px;background:#fff}
.목록카드표 td{border:0;padding:2px 0;text-align:left}
.목록카드표 .칸번호{display:inline-block;width:auto;margin-right:8px;font-weight:700}
.목록카드표 .칸때{display:inline-block;width:auto;color:#777;font-size:.88rem}
.목록카드표 .칸현장{font-weight:700;font-size:1.05rem;margin-top:4px;word-break:keep-all}
.목록카드표 .칸합계{display:flex;justify-content:space-between}
.목록카드표 .칸합계::before{content:attr(data-이름);color:#777;font-size:.88rem}
.목록카드표 .칸단추{margin-top:10px}
.목록카드표 .단추줄작게{flex-wrap:nowrap}
.목록카드표 .단추줄작게 .단추{flex:1;text-align:center}

@media(min-width:601px){
.목록카드표 tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.목록카드표 tr{margin:0}
}
.목록카드표 tr,.목록카드표 td{box-sizing:border-box}
.목록카드표 .단추줄작게 .단추{min-width:0;padding-left:8px;padding-right:8px;box-sizing:border-box}
.목록카드표 .단추줄작게 .단추:first-child{flex:1 1 0}
.목록카드표 .단추줄작게 .단추:last-child{flex:1.7 1 0}
@media(min-width:601px){.목록카드표 tbody{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
.목록검색줄{margin:0 0 14px}
.목록검색{width:100%;box-sizing:border-box;padding:13px 16px;border:1px solid rgba(0,0,0,.15);border-radius:14px;font-size:1rem;background:#fff}
.목록카드표 tr[hidden]{display:none}
.목록없음{margin:0 0 12px}

/* 워터마크: 견적서 바탕에 윈도우워커 로고를 대각선으로 크게, 아주 흐리게. 글 뒤에 깔려 있어서 클릭·글 읽기에 방해가 없고, 인쇄·저장할 때도 나온다.
   업체용(공급가)에는 「공급가 / 고객에게 보여주지 마세요」 글이 같이 들어 있고, 고객용에는 그 글이 없는 그림을 쓴다. */
.견적서{position:relative;isolation:isolate}
.견적서::before{content:"";position:absolute;inset:0;z-index:50;pointer-events:none;border-radius:inherit;background:url('/그림/워터마크_고객용.png') center center/100% auto no-repeat;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.견적서.업체용::before{background-image:url('/그림/워터마크_업체용.png')}
@media(max-width:600px){.견적서::before{background-size:150% auto}}
@media print{.견적서::before{background-size:100% auto}}
/* 즉석상담 */
.뱃지.즉석{background:#e8f1fb;color:#1d4f8f;border:1px solid #b9d2ee;white-space:nowrap;margin-left:2px}
.즉석안내{margin-bottom:12px;word-break:keep-all}

/* 위치: 고르기 + 직접입력 칸 */
.위치묶음{display:flex;flex-direction:column;gap:6px}
.위치묶음 [hidden]{display:none !important}

/* 포인트샵 · 추천업체 */
.선택표{color:var(--회);font-weight:400;font-size:.88rem}
.작은글{font-size:.82rem;color:var(--회);font-weight:400}
.포인트잔여{text-align:center}
.큰포인트{font-size:2.3rem;line-height:1.2;color:var(--빨강);margin:4px 0 2px;word-break:keep-all}
.상품{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.상품그림{border-radius:18px;overflow:hidden;background:#ece6e3;border:1px solid var(--선);max-height:420px;display:flex;justify-content:center}
.상품그림 img{display:block;width:100%;height:100%;max-height:420px;object-fit:cover;object-position:center 40%}
.상품그림 .그림없음{padding:60px 20px;color:var(--회);font-weight:700}
.상품이름{font-size:1.25rem;font-weight:800;line-height:1.4;word-break:keep-all}
.상품값{font-size:1.15rem;margin:6px 0 4px}
.상품값 b{color:var(--빨강);font-size:1.5rem}
.상품글 .단추{margin-top:12px}
.알림.구매성공{text-align:center;padding:18px 16px}
.알림.구매성공 .큰글{display:block;font-size:1.45rem;margin-bottom:6px}
.포인트표 td.쌓임{color:#17623a;font-weight:800}
.포인트표 td.빠짐{color:#8e2418;font-weight:800}
.포인트표 td.수{white-space:nowrap}
@media(min-width:720px){.상품{grid-template-columns:minmax(220px,300px) 1fr;gap:26px}.상품그림{max-height:none}.상품그림 img{max-height:420px}}
/* 관리자 포인트현황 */
.매출칸{width:150px;text-align:right}
.적립틀{display:grid;gap:8px}
.한줄칸{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.한줄칸 input[type=month]{min-height:46px;padding:8px 12px;border:1.5px solid var(--칸선);border-radius:12px;font-family:inherit;font-size:1rem}
.한줄칸 select{min-height:44px;max-width:100%}
.뱃지.사용대기{background:#fff0cc;color:#7a5200}
.뱃지.사용완료{background:#dff0e6;color:#17623a}
.뱃지.연결안됨{background:#fdecea;color:#8e2418;border:1px solid #f3b9b2}
.뱃지.자동{background:#eef2fb;color:#23407c;border:1px solid #c5d0ea}
.뱃지.수동{background:#dff0e6;color:#17623a}
.관리표 input[type=text],.관리표 input[type=number]{max-width:100%}
@media(max-width:700px){.매출칸{width:100%;flex:1}.관리표 td .한줄칸{justify-content:flex-end;width:100%}.관리표 td.입력칸{display:block;text-align:left}.관리표 td.입력칸::before{display:block;margin-bottom:4px}.관리표 td.입력칸 .한줄칸{justify-content:flex-start}}
.알림.첫발주줄{font-weight:700;margin-top:8px}
.체크줄{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.체크줄 input[type=checkbox]{width:24px;height:24px;accent-color:var(--빨강);flex:none}
.체크줄 label{font-weight:700;margin:0;cursor:pointer}
.관리표 .뱃지{white-space:nowrap}
@media(max-width:700px){.적립표 td,.현황표 td{flex-wrap:wrap;gap:4px 10px}.적립표 td:first-child,.현황표 td:first-child{justify-content:flex-start}}
/* 적립 완료 팝업(업체) */
.경고창.적립창{border-top-color:var(--초록)}
.경고표.좋음표{background:#e8f4ec;color:#17623a;border-color:var(--초록)}
.적립달{margin-bottom:10px}
.적립달제목{font-weight:800;margin:8px 0 6px}
.적립줄{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.경고내용 .적립줄 li{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#f3faf5;border:1px solid #b5e0c6;color:#17623a;border-radius:12px;padding:10px 12px;font-size:.95rem}
.경고내용 .적립줄 li b{white-space:nowrap}
.경고내용 .적립줄 li.첫발주{background:#fff7e0;border-color:#f0d58a;color:#7a5200}
.적립잔여{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin:12px 0 4px;padding:12px;border-radius:12px;background:var(--옅빨강);color:var(--진빨강)}
.적립잔여 b{font-size:1.3rem;white-space:nowrap}

@media(max-width:600px){.상단 .누구{max-width:calc(100vw - 150px);font-size:.8rem}.상단.로그인함 .이름{flex:0 0 auto}}
.상품+.상품{margin-top:22px;padding-top:22px;border-top:1px solid var(--선)}
/* 10-29 블로그·인스타 글자 표기, 워커지갑, 게시판, 매출순위, 자료실 */
@media(max-width:600px){.바로가기{gap:4px}.바로가기 a{flex-direction:column;gap:1px;width:auto;min-width:40px;min-height:0;padding:3px 6px;border-radius:12px}.바로가기 .글{display:block;font-size:.62rem;line-height:1.1}
.상단.로그인함 nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.상단.로그인함 nav a{padding:10px 2px;font-size:.8rem;white-space:normal;word-break:keep-all;display:flex;align-items:center;justify-content:center;min-height:42px;line-height:1.2}}
.지갑규칙{display:grid;gap:6px;margin:6px 0 10px;padding:12px 14px;border-radius:12px;background:#fbf5f3;border:1px solid #f0dcd8;word-break:keep-all}
.지갑규칙 b{color:var(--빨강)}
.지갑카드 .단추줄작게{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.지갑카드 #지갑사용단추{margin-top:8px}
.대기줄{margin:6px 0;font-size:.9rem;word-break:keep-all}
.뱃지.사용대기{background:#fff4d6;color:#8a5a00;border:1px solid #f0d58a}
.뱃지.사용완료{background:#e7f5ea;color:#1f6b35;border:1px solid #b9dfc2}
.게시목록{padding:6px 0}
.게시줄{display:block;padding:14px 18px;border-bottom:1px solid #eee3df;color:inherit;text-decoration:none;word-break:keep-all}
.게시줄:last-child{border-bottom:0}
.게시줄:hover{background:#fbf5f3}
.게시제목{font-weight:700;margin-bottom:4px}
.댓글수{color:var(--빨강);font-weight:700}
.게시글제목{font-size:1.25rem;margin:4px 0 6px;word-break:keep-all}
.게시본문{white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;margin-top:10px;line-height:1.6}
.댓글줄{padding:10px 0;border-bottom:1px solid #eee3df}
.댓글줄 .게시본문{margin-top:4px}
.카드 textarea{width:100%;box-sizing:border-box;font:inherit;padding:10px 12px;border:1px solid #ddd2ce;border-radius:10px;margin:8px 0}
.순위머리 .한줄칸{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.순위목록{list-style:none;margin:0;padding:0}
.순위목록 li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid #eee3df}
.순위목록 li:last-child{border-bottom:0}
.순위목록 li.나{background:#fbf0ee;border-radius:10px}
.순위번호{width:34px;text-align:center;font-weight:800;font-size:1.05rem;flex:none}
.순위이름{flex:1;font-weight:700;word-break:keep-all;display:flex;gap:6px;align-items:center}
.순위값{white-space:nowrap}
.자료줄{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #eee3df}
.자료줄:last-child{border-bottom:0}
.자료글{flex:1;word-break:keep-all;min-width:0}
.닉네임줄{width:100%;margin-top:6px}.닉네임줄 .닉네임칸{max-width:160px}
/* 10-29 16:51 게시판 제목 옆 매출순위 단추와 팝업 */
.게시판머리{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.게시판머리 h1{margin-right:auto}
.순위단추{flex:none;white-space:nowrap}
.경고창.순위창{border-top-color:var(--빨강)}
.순위창 .경고머리 h2{flex:1}
.순위표시{background:#fbf0ee;border-color:var(--빨강)}
.순위엑스{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:#f3ecea;color:var(--진회);font-size:1rem;cursor:pointer}
.순위내용 .순위머리{background:#faf6f4;border:1px solid var(--선);border-radius:14px;padding:12px 14px;margin-bottom:10px}
/* 10-29 16:53 흔한 게시판 모양: 번호·제목·닉네임·날짜 표, 폰에서는 제목 아래 작은 글씨 */
.게시판머리 .글쓰기단추{margin-left:auto}
.게시판머리 h1{margin-right:0}
.게시판머리 .순위단추{margin-right:auto}
.게시안내{margin:2px 0 10px}
.게시표{padding:0;overflow:hidden}
.게시행{display:grid;grid-template-columns:64px 1fr 130px 110px;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid #eee3df;color:var(--글);text-decoration:none}
.게시행:last-child{border-bottom:0}
a.게시행:hover{background:#faf6f4}
.게시행.내글{background:#fdf7f5}
.게시표머리{background:#f5eeeb;font-weight:800;font-size:.86rem;color:var(--진회);padding:10px 16px}
.칸번호,.칸닉,.칸날{text-align:center;font-size:.9rem;color:var(--진회)}
.칸제목{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.칸제목 .댓글수{color:var(--빨강);font-weight:800}
.게시없음{padding:18px 16px;margin:0}
.쪽번호{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:16px 0}
.쪽번호 button{min-width:40px;height:40px;border-radius:10px;border:1px solid var(--선);background:#fff;font-weight:700;cursor:pointer;color:var(--글)}
.쪽번호 button.지금{background:var(--빨강);color:#fff;border-color:var(--빨강)}
.쪽번호 button:disabled{opacity:.4;cursor:default}
.글쓰기단추줄{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.글쓰기단추줄 .단추{min-width:110px}
.아래목록{margin-top:14px}
@media(max-width:600px){
  .게시표머리{display:none}
  .게시행{grid-template-columns:1fr;gap:3px;padding:12px 14px}
  .게시행 .칸번호{display:none}
  .게시행 .칸제목{grid-column:1}
  .게시행 .칸닉,.게시행 .칸날{display:inline;text-align:left;font-size:.8rem}
  .게시행{grid-template-areas:"제목 제목" "닉 날";grid-template-columns:auto 1fr;column-gap:0}
  .게시행 .칸제목{grid-area:제목}
  .게시행 .칸닉{grid-area:닉}
  .게시행 .칸날{grid-area:날}
  .게시행 .칸날::before{content:' · '}
  .게시판머리 h1{width:auto}
  .글쓰기단추줄 .단추{flex:1}
}
.게시판머리{flex-wrap:nowrap}
.순위내용 .순위목록 li{background:none;border:0;border-bottom:1px solid #eee3df;border-radius:0;color:var(--글);padding:12px 4px}
.순위내용 .순위목록 li:last-child{border-bottom:0}
.순위내용 .순위목록 li.나{background:#fbf0ee;border-radius:10px}
@media(max-width:600px){
  .게시판머리{gap:6px}
  .게시판머리 h1{font-size:1.3rem;white-space:nowrap}
  .게시판머리 .단추.작게{padding:6px 10px;font-size:.82rem;min-height:38px;white-space:nowrap}
}

/* ===== 10-29 17:07 대표님: 메인 배경 시안 B(악수) — 배경시안_1658/시안B/시안.css 그대로 ===== */
/* 배경 시안 공통: 로고 아래 「PARTNERS / 윈도우워커 파트너스」 표시, 휴대폰에서 그림 자리 만들기 */
.파트너글{display:flex;flex-direction:column;align-items:center;gap:2px;margin:2px 0 4px}
.파트너글 b{font-family:"Gothic A1","Noto Sans KR",sans-serif;font-weight:900;letter-spacing:.42em;padding-left:.42em;font-size:.95rem;color:#fff;background:var(--빨강);border-radius:4px;line-height:1;padding-top:7px;padding-bottom:7px;padding-right:0;min-width:min(260px,72%)}
.파트너글 span{font-size:.82rem;font-weight:700;color:var(--회색);letter-spacing:.08em}
.첫장면{justify-content:flex-start}
.첫화면 .큰로고{margin-bottom:6px}
@media(max-width:600px){
 .첫장면{padding:22px 14px var(--그림높이,210px);min-height:0}
 .첫화면{padding:22px 18px 22px}
 .첫화면 .큰로고{width:200px}
 .첫화면 h1{font-size:1.38rem;margin:8px 0 6px}
 .첫화면 p{font-size:.95rem;margin-bottom:16px}
 .첫화면 .단추줄{gap:10px}
 .첫화면 .단추{min-width:0;flex:1;white-space:nowrap;padding-left:10px;padding-right:10px}
 .파트너글 b{min-width:200px;font-size:.85rem}
}
@media(min-width:900px){
 .첫장면{align-items:flex-start;justify-content:center;padding:48px 6%;min-height:620px}
 .첫화면{max-width:420px}
}
/* 시안B: 직원과 협력업체 사장님 악수 */
.첫장면{--그림높이:215px}
.첫장면::before{background:
 url('/그림/사람_B.svg') center bottom 6px/auto 200px no-repeat,
 linear-gradient(180deg,transparent calc(100% - 60px),#e7d9d2 calc(100% - 60px)),
 url('/그림/배경_B.svg') center bottom/cover}
.첫장면 .유리{background:rgba(255,255,255,.86);border-top:5px solid var(--빨강)}
.첫장면 .파트너글 b{background:none;color:var(--빨강);font-size:1.35rem;letter-spacing:.3em;padding:2px 0 0 .3em}
@media(min-width:900px){.첫장면::before{background:
 url('/그림/사람_B.svg') right 8% bottom 10px/auto 66% no-repeat,
 linear-gradient(180deg,transparent 88%,#e7d9d2 88%),
 url('/그림/배경_B.svg') right center/cover}}

/* ===== 10-29 17:28 대표님: 사이트 임시 닫기(점검 화면) ===== */
.점검카드{max-width:520px;margin:40px auto;text-align:center;padding:36px 24px}
.점검카드 h1{margin:0 0 12px}
.점검카드 .점검글{font-size:1.15rem;line-height:1.6;margin:0 0 24px;word-break:keep-all}
.점검관리{margin-top:28px;font-size:.8rem}
.점검관리 a{color:#999;text-decoration:underline}

/* ===== 10-29 17:57 대표님: 머리글 「앱 설치」 단추와 설치 안내 팝업 ===== */
.바로가기 .설치단추{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px;border-radius:999px;border:1px solid var(--빨강);background:#fff;color:var(--빨강);font-weight:800;font-size:inherit;font-family:inherit;cursor:pointer}
.바로가기 .설치단추 svg{color:var(--빨강);flex:none}
@media(max-width:600px){.바로가기 .설치단추{flex-direction:column;gap:1px;min-width:40px;min-height:0;padding:3px 6px;border-radius:12px}.바로가기 .설치단추 .글{display:block;font-size:.62rem;line-height:1.1}}
@media(display-mode:standalone){.바로가기 .설치단추{display:none}}
.설치창 .설치아이콘{width:40px;height:40px;border-radius:10px;flex:none}
.설치순서{margin:0;padding-left:1.3em;line-height:1.7;text-align:left}
.설치순서 li{margin:6px 0;word-break:keep-all}
@media print{.바로가기 .설치단추,.설치덮개{display:none!important}}
.설치창 .설치순서 li{background:none!important;border:0!important;padding:0 0 0 2px!important;box-shadow:none!important;color:inherit!important}
.바로가기 .설치단추 .설치단추그림{width:18px;height:18px;border-radius:4px;flex:none;box-shadow:0 0 0 1px #eee}