/* 향동인쇄 테마 v2 (모바일 우선, 단일 파일, 의존성 없음) */
:root{
  color-scheme:light; /* [왜?] 폰이 다크모드여도 흰 바탕 그대로 (댓글 말풍선이 검게 나오던 문제) */
  --navy:#263746; --blue:#2456a6; --sky:#e8f0fd; --ink:#1d2433;
  --muted:#667085; --line:#dfe5ef; --cta:#f2620f; --cta-d:#c94e08;
  --ok:#1e9e6a; --warn:#fff4d6; --card:#ffffff; --bg:#f4f6fb;
}
*{box-sizing:border-box}
body{font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;margin:0;color:var(--ink);background:var(--bg);line-height:1.6}
/* 상단바 */
.topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:10}
.topbar .wrap{max-width:960px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.brand{color:#fff;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.5px}
.brand small{display:block;font-size:11px;font-weight:400;color:#bcd0f5;letter-spacing:0}
.topbar nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a{color:#dbe7ff;text-decoration:none;font-size:14px;padding:6px 10px;border-radius:8px}
.topbar nav a:hover{background:#ffffff22;color:#fff}
/* 로그인 표시 (상단 우측 네이티브 셀렉트. JS·호버 불필요) */
/* 저장 완료 토스트 (하단 중앙 팝업) */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:#101b30;color:#fff;padding:13px 24px;border-radius:14px;font-size:15px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:50;box-shadow:0 10px 28px #00000055;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast i{color:#4ade80;font-style:normal;margin-right:7px}
/* 저장 실패 안내(담당지점 누락 등)는 붉은 계열 */
.toast.warn{background:#8a2c28}
.toast.warn i{color:#fecaca}
/* 말풍선 안내: 버튼 아래에 잠깐 떴다 사라짐 (여러 업체 선택 등 실행 중지 안내) */
.qbub{position:fixed;z-index:60;max-width:min(88vw,470px);background:#101b30;color:#fff;font-size:14px;font-weight:700;line-height:1.5;padding:11px 15px;border-radius:12px;box-shadow:0 12px 30px #00000045;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s;pointer-events:none;word-break:keep-all}
.qbub.show{opacity:1;transform:translateY(0)}
.qbub::after{content:"";position:absolute;left:var(--qbub-arrow,50%);top:-6px;margin-left:-7px;border:7px solid transparent;border-top:0;border-bottom-color:#101b30}
/* 문서 인쇄 버튼 4종 */
.docbtns{margin-left:auto;display:inline-flex;gap:6px}
.docbtns button{margin:0;background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.docbtns button:hover{background:var(--navy);color:#fff}
/* 답변완료·삭제 나란히 */
.qrow{display:flex;gap:8px;align-items:center;margin:4px 0}
.qrow button{margin:0}
button.danger{background:#dc2626;color:#fff}
button.danger:hover{background:#b91c1c;filter:none}
/* 장부 상단 조작부 컴팩트 (조회·일괄·문서 버튼) */
.qfilter{padding:10px 12px}
.qfilter input,.qfilter select{padding:6px 8px;font-size:13px}
.qfilter button,.qfilter .btn{margin:0;padding:7px 14px;font-size:13px}
.qbulk button{padding:7px 14px;font-size:13px}
.qbulk select{padding:6px 8px;font-size:13px}
.docbtns button{padding:7px 12px;font-size:13px}
.btn.big{padding:16px 26px;font-size:17px}
/* 본문 */
main{max-width:960px;margin:0 auto;padding:20px 16px 60px}
/* 와이드 페이지 (견적서 장부·등록. 브라우저 너비만큼) */
main.wide{max-width:none;padding:20px 28px 60px}
.widep .topbar .wrap,.widep footer .wrap{max-width:none;padding-left:28px;padding-right:28px}
h1{font-size:26px;letter-spacing:-.5px;margin:6px 0 12px}
h2{font-size:19px;margin:26px 0 10px}
/* 히어로 */
.hero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:16px;padding:28px 24px;margin-bottom:18px}
.hero h1{color:#fff;margin:0 0 8px;font-size:27px}
.hero p{margin:4px 0;color:#cfe0ff}
.hero .cta-row{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
/* 버튼 */
.btn{display:inline-block;background:var(--cta);color:#fff !important;text-decoration:none;font-weight:700;padding:11px 22px;border-radius:10px;border:0;cursor:pointer;font-size:15px}
.btn:hover{background:var(--cta-d)}
.btn.ghost{background:#fff;color:var(--blue) !important;border:1.5px solid var(--blue)}
/* 주문하기 (대표 행동. 초록 그라데이션으로 눈에 띄게) */
.btn.order{background:linear-gradient(135deg,#1aa85c,#0e7c42);box-shadow:0 4px 14px #12a85c33}
.btn.order:hover{background:linear-gradient(135deg,#158f4d,#0b6a38)}
/* 홈 실시간 현황판 (관람용. 링크 없음 — 개인정보 보호) */
.board{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 2px}
.board section{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.board h3{margin:0 0 6px;font-size:15px;color:var(--navy)}
.brow{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink)}
.brow.empty{border-top:0;color:var(--muted);font-size:13px}
.bt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd{flex:0 0 auto;color:var(--muted);font-size:12px}
.pill{flex:0 0 auto;min-width:64px;text-align:center;font-size:11px;font-weight:800;color:#fff;border-radius:6px;padding:5px 9px}
/* 상태 배지 — 접수·작업중·배송/완료 3단계 (2026-10-20 단순화) */
.pill.p-P01{background:#e0338c}   /* 접수 */
.pill.p-P04{background:#2563eb}   /* 작업중 */
.pill.p-P07{background:#16a34a}   /* 배송/완료 */
.pill.p-P10{background:#0e9f9f}   /* 답변완료 */
/* 견적문의 배지 */
.pill.lime{background:#a3c93a}    /* 견적문의(미답변) */
.pill.blue{background:#4fb3d9}    /* 답변완료 */
@media(max-width:700px){.board{grid-template-columns:1fr}}
button{padding:10px 18px;margin-top:12px;cursor:pointer;background:var(--blue);color:#fff;border:0;border-radius:8px;font-size:15px}
button:hover{filter:brightness(1.1)}
/* 상품 그리드 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;list-style:none;padding:0}
.grid .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;color:var(--ink);display:block}
.grid .card:hover{border-color:var(--blue);box-shadow:0 4px 14px #2456a622}
.grid .card b{font-size:16px}
.grid .card small{color:var(--blue);font-weight:700}
.grid .card p{font-size:13px;color:var(--muted);margin:6px 0 0}
/* 신뢰 박스 */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.trust div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px}
.trust b{color:var(--navy)}
/* 폼 */
form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
label{display:block;margin:10px 0 4px;font-weight:600;font-size:14px}
input,select,textarea{width:100%;padding:9px;border:1.5px solid var(--line);border-radius:8px;font-size:15px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
input[type=checkbox]{width:auto;margin-right:6px}
/* 파일등록 +/- 버튼 (주문서·견적문의 공용) */
.filebox{display:flex;gap:8px;align-items:flex-start}
.filelist{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.filerow{display:flex;gap:8px;align-items:center}
.filerow input[type=file]{flex:1;min-width:0}
.addbtn{flex:0 0 42px;width:42px;height:42px;margin:0;padding:0;border-radius:8px;font-size:22px;font-weight:700;line-height:1}
.addbtn:disabled{background:#c7d2e2;cursor:default}
.delbtn{flex:0 0 42px;width:42px;height:42px;margin:0;padding:0;border-radius:8px;font-size:22px;font-weight:700;line-height:1;background:#e9edf5;color:var(--ink);border:1px solid var(--line)}
.delbtn:hover{background:#dde3ee}
/* 표 */
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:12px;overflow:hidden}
td,th{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left}
th{background:var(--sky);color:var(--navy)}
/* 진행 단계 */
.steps{display:flex;gap:4px;list-style:none;padding:0;font-size:12px;margin:14px 0}
.steps li{flex:1;background:#e3e9f4;padding:8px 2px;text-align:center;border-radius:8px;color:var(--muted)}
.steps .done{background:#c9ecd9;color:#0d6b3f}
.steps .now{background:var(--cta);color:#fff;font-weight:800}
/* 알림·카드(관리자) */
.notice{background:var(--warn);border:1px solid #e6c200;padding:12px 14px;margin:12px 0;font-size:14px;border-radius:10px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center}
.card b{display:block;font-size:26px;color:var(--navy)}
.card span{font-size:13px;color:var(--muted)}
.bars{margin:8px 0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.bar-row{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0}
.bar-row span{width:86px;color:var(--muted)}
.bar{flex:1;background:#edf1f7;border-radius:4px;height:14px}
.bar div{background:var(--blue);height:14px;border-radius:4px}
/* 푸터 */
footer{background:var(--navy);color:#bcd0f5;margin-top:30px}
footer .wrap{max-width:960px;margin:0 auto;padding:22px 16px;font-size:13px}
footer b{color:#fff}
footer a{color:#fff}
/* ---------- 호버 인터랙션 (마우스 올리면 색상·움직임) ---------- */
*{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.topbar nav a:hover{background:#ffffff2e;color:#fff}
.btn:hover{background:var(--cta-d)}
.btn.ghost:hover{background:var(--sky)}
button:hover{filter:brightness(1.12)}
.grid .card:hover{border-color:var(--blue);box-shadow:0 8px 22px #2456a633;transform:translateY(-3px)}
.grid .card:hover .thumb{filter:brightness(1.08)}
.rail a:hover .ico{background:var(--blue);color:#fff;border-color:var(--blue)}
.chips span:hover{border-color:var(--blue)}
table tr:hover td{background:#f2f6ff}
a:hover{color:var(--blue)}
footer a:hover, .topbar a:hover{color:#fff}
.bar-row:hover .bar div{filter:brightness(1.15)}
.product-img{width:100%;height:auto;border-radius:12px;margin-bottom:10px;background:var(--sky)}
/* ---------- 프리미엄 포토 카드 (실사 전환용) ---------- */
.grid .card{padding:0;overflow:hidden}
.grid .card .ph{position:relative;height:170px;overflow:hidden;background:var(--navy)}
.grid .card .ph img.product-img{width:100%;height:100%;object-fit:cover;border-radius:0;margin:0}
.grid .card:hover .ph img{transform:scale(1.06)}
.grid .card .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:56px;background:linear-gradient(transparent,#0f2a52cc)}
.grid .card .ph .badge{position:absolute;left:10px;bottom:8px;z-index:1;background:#ffffffee}
.grid .card .body{padding:12px 14px 16px}
.grid .card .body small{color:var(--blue);font-weight:700}
.grid .card .body b{font-size:17px;letter-spacing:-.3px}
.grid .card .body p{font-size:13px;color:var(--muted);margin:6px 0 0}
/* ---------- 벤치마킹 패턴 (쿠팡·컬리·무신사·배민·숨고·야놀자 실측 반영) ---------- */
/* 혜택 띠배너 (쿠팡·컬리식 상단 띠) */
/* 검색창 (쿠팡·숨고식) */
.searchbar{display:flex;gap:8px;margin:14px 0}
.searchbar input{flex:1;border:2px solid var(--blue);border-radius:12px;padding:12px;font-size:16px}
.searchbar button{margin:0;white-space:nowrap}
/* 숏컷 rail (쿠팡 아이콘행·숨고 카테고리) */
.rail{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 12px}
.rail a{flex:0 0 auto;width:74px;text-align:center;text-decoration:none;color:var(--ink);font-size:12px}
.rail .ico{width:56px;height:56px;margin:0 auto 4px;border-radius:18px;background:linear-gradient(135deg,var(--sky),#fff);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--blue)}
/* 상품 썸네일 타일 (이미지 대체. 무신사식 카드 상단) */
.thumb{height:120px;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;margin-bottom:8px}
.badge{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;background:#e3f6e9;color:#0d6b3f;margin-right:4px}
.badge.hot{background:#ffe3d3;color:#c94e08}
.price{font-size:18px;font-weight:800;color:var(--ink)}
.price small{font-size:12px;color:var(--muted);font-weight:400}
/* 옵션 칩 (스마트스토어식 선택) */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.chips label{margin:0}
.chips input{display:none}
.chips span{display:inline-block;border:1.5px solid var(--line);border-radius:20px;padding:8px 16px;font-size:14px;background:#fff;cursor:pointer}
.chips input:checked+span{border-color:var(--blue);background:var(--sky);color:var(--blue);font-weight:800}
/* [2026-10-31] 후가공 다중 선택 칩 + 안내 링크 */
.chips input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.post-chips{gap:6px}
.post-chips span{padding:7px 12px;font-size:13px}
.field-label .post-guide{margin-left:6px;font-size:12px;font-weight:700;color:#315e4a;white-space:nowrap}
@media(max-width:520px){.post-chips span{padding:6px 10px;font-size:12px}}
/* 하단 고정 합계바 (모바일 주문 핵심) */
.stickybar{position:sticky;bottom:0;background:#fff;border-top:2px solid var(--blue);padding:12px 16px;display:flex;align-items:center;gap:12px;margin:16px -16px -60px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.stickybar .total{font-size:20px;font-weight:800;color:var(--navy)}
.stickybar button{margin:0 0 0 auto}
/* 세로 타임라인 (배민식 진행상태) */
.timeline{list-style:none;padding:0;margin:14px 0}
.timeline li{position:relative;padding:0 0 18px 28px;font-size:14px;color:var(--muted)}
.timeline li::before{content:"";position:absolute;left:8px;top:6px;width:10px;height:10px;border-radius:50%;background:#ccd5e3}
.timeline li::after{content:"";position:absolute;left:12px;top:20px;bottom:0;width:2px;background:#e3e9f4}
.timeline li:last-child::after{display:none}
.timeline li.done{color:var(--ink)}
.timeline li.done::before{background:var(--ok)}
.timeline li.now{color:var(--ink);font-weight:800}
.timeline li.now::before{background:var(--cta);box-shadow:0 0 0 4px #f2620f33}
/* 단계 안내 (숨고식 1-2-3) */
.howto{display:flex;gap:8px;margin:12px 0}
.howto div{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;font-size:13px}
.howto b{display:block;font-size:20px;color:var(--blue)}
/* 채널톡 자리 (키 오면 JS 삽입) */
#channel-talk{position:fixed;right:16px;bottom:16px}
/* [2026-10-15] 플로팅 아이콘 클러스터(격자/chat/+) 전체 삭제 → 관련 규칙 제거 */
.ai-rail b{display:block;font-size:26px}
.appframe{max-width:480px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.apphead{padding:14px 16px;font-size:18px;font-weight:800;border-bottom:1px solid var(--line)}
.appbody{padding:14px 16px;min-height:200px}
.appnav{display:flex;border-top:1px solid var(--line);background:#fafbfe}
.appnav a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font-size:12px;padding:9px 0}
.appnav a.on{color:var(--blue);font-weight:800}
.setrow{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14px}
.setrow small{color:var(--muted)}
.toggle{position:relative;width:46px;height:26px;flex:0 0 auto}
.toggle input{display:none}
.toggle i{position:absolute;inset:0;background:#ccd5e3;border-radius:20px}
.toggle i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff}
.toggle input:checked+i{background:var(--ok)}
.toggle input:checked+i::after{left:23px}
/* ---------- AI상담 (/chat) : 히어로 + 라운드 입력창 ---------- */
/* [2026-10-15] 좌측 대화기록 사이드바 삭제 → .m-side/.m-new/.m-cap/.m-hist/.m-hitem/.m-hdel/.m-links 규칙 제거 */
.m-wrap{display:flex;max-width:1080px;margin:14px auto;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:74vh}
.m-main{flex:1;display:flex;flex-direction:column;min-width:0}
.m-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 22px}
.m-hero[hidden]{display:none}   /* [2026-10-15] display:flex가 [hidden]을 덮어써 대화 중에도 인사말이 남던 문제 */
.m-hero h1{font-size:26px;letter-spacing:-.6px;margin:14px 0 6px}
.m-hero p{color:var(--muted);font-size:14px;margin:0 0 22px;line-height:1.6}
.m-logo{display:inline-flex;align-items:center;gap:6px;font-size:20px;font-weight:800;padding:10px 18px;border-radius:14px;background:linear-gradient(135deg,#f3eaff,#e8f0ff);color:var(--navy)}
.m-logo b{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;border-radius:8px;padding:2px 8px;font-size:15px}
.m-log{flex:1;overflow-y:auto;padding:18px 22px;max-height:52vh}
.m-bub{display:flex;gap:9px;margin:10px 0;align-items:flex-start}
.m-av{flex:0 0 30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.m-txt{max-width:82%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.65}
.m-txt.ai{background:#f2f4f9}
.m-txt.me{background:var(--blue);color:#fff}
.m-txt a{color:var(--blue);font-weight:600}
.m-txt.me a{color:#fff}
.m-hand{display:inline-block;margin-top:4px}
.m-comp{display:flex;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.m-comp input{flex:1;margin:0;border-radius:28px;padding:15px 18px}
.m-comp button{width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,#8b5cf6,#6d28d9);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 56px}
.m-comp button:hover{filter:brightness(1.08)}
@media(max-width:760px){
  .m-wrap{flex-direction:column;margin:8px}
}
.typing{display:inline-block}
.typing i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:#9fb0c9;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
/* 채팅 */
.chatbox{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;max-height:50vh;overflow-y:auto;margin-bottom:10px}
.msg{max-width:80%;padding:8px 12px;border-radius:12px;margin:6px 0;font-size:14px}
/* ---------- 견적서 장부 (엑셀 장부 느낌. PC 가로 스크롤) ---------- */
.qfilter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qfilter input,.qfilter select{width:auto}
.qfilter button{margin:0}
/* 장부 그리드: 화면 높이에 맞춰 세로 스크롤 (445px = 표 상단 389 + 하단 여백 56, 1440×900 실측) */
.qwrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 445px);border:1px solid var(--line);border-radius:12px;background:#fff}
/* 표 폭은 실제 내용에 맞춘다. 고정 최소폭(예전 1680px)은 내용보다 넓어
   가로 스크롤이 빈 구간까지 늘어난다. 장부(qedit)는 아래에서 1960px로 따로 고정한다. */
.qtable{min-width:0;font-size:13px;border-radius:0;overflow:visible}
.qtable th{white-space:nowrap;position:sticky;top:0;z-index:5}
.qtable td{white-space:nowrap}
.qtable td.qmemo{position:relative;width:180px;max-width:180px}
.qtable td.qmemo:hover{z-index:20}
.qmemo::after{content:attr(data-tooltip);display:none;position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:max-content;min-width:80px;max-width:min(360px,70vw);max-height:180px;overflow:auto;box-sizing:border-box;padding:8px 10px;border:1px solid #d6e2dd;border-radius:8px;background:#fff;color:#263746;box-shadow:0 8px 24px #26374624;font-size:12px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none}
.qmemo:hover:not(:focus-within)::after{display:block}
.qmemo[data-tooltip=""]::after{display:none}
.qmemo-open{display:block;width:100%;min-width:0;max-width:180px;height:30px;min-height:30px;margin:0;padding:0 7px;overflow:hidden;border:1px solid #d8e0df;border-radius:6px;background:transparent!important;color:var(--ink);box-shadow:none;text-align:left;font-size:13px;font-weight:500;line-height:28px;text-overflow:ellipsis;white-space:nowrap}
.qmemo-open:hover,.qmemo-open:focus,.qmemo-open:focus-visible,.qmemo-open:active{border-color:#6f9b8b;background:transparent!important;color:var(--ink);filter:none;transform:none}
.qmemo-dialog{position:fixed;display:block;box-sizing:border-box;inset:auto;width:min(400px,calc(100vw - 20px));height:340px;min-width:min(300px,calc(100vw - 20px));min-height:min(250px,calc(100vh - 20px));max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);margin:0;padding:0;resize:both;overflow:auto;border:1px solid #95aaa4;border-radius:12px;background:transparent;box-shadow:0 12px 32px #26374630}
.qmemo-dialog::backdrop{background:#26374655;backdrop-filter:blur(2px)}
.qmemo-editor{display:flex;width:100%;min-width:0;min-height:0;height:100%;box-sizing:border-box;flex-direction:column;margin:0;padding:4px;border:0;border-radius:0;background:transparent;box-shadow:none}
.qmemo-titlebar{flex:0 0 auto;margin:0 0 4px;padding:0 0 4px;border-bottom:1px solid #95aaa488;cursor:move;touch-action:none;user-select:none}
.qmemo-editor h3{margin:0;font-size:18px}
.qmemo-editor textarea{display:block;flex:1 1 auto;align-self:stretch;width:100%;min-width:0;min-height:80px;height:auto;max-height:none;margin:0 0 4px;padding:8px;resize:none;line-height:1.55;box-sizing:border-box}
.qmemo-editor-actions{display:flex;flex:0 0 auto;justify-content:flex-end;gap:6px}
.qmemo-editor-actions button{height:30px;min-height:30px;margin:0;padding:0 10px;line-height:1}
.qtable .c{text-align:center}
.qtable .num{text-align:right;font-variant-numeric:tabular-nums}
.qtable .c-sale{background:#eef6ff}
.qtable .c-total{background:#e2edfd;font-weight:800}
.qtable small a{color:var(--blue)}
/* 견적 등록·수정 폼 (2~4열 그리드) */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 12px}
.fgrid label{margin:6px 0 2px}
.fgrid .span{grid-column:1/-1}
.checks{display:flex;gap:16px;align-items:center;background:none;border:0;padding:4px 0}
.checks label{display:flex;align-items:center;gap:6px;margin:0;font-size:15px}
/* 조회 결과 요약(예: (200건 · 합계 29,056,268원))은 자간 0으로 — h1의 좁은 자간 상속 제거 */
h1 small{font-size:14px;color:var(--muted);font-weight:400;letter-spacing:0}
/* 표 안 인라인 폼(수정·삭제 버튼) */
td form{display:inline;background:none;border:0;padding:0}
td form button{margin:0;padding:6px 12px;font-size:13px}
.qtable .qc{width:36px;text-align:center}
.qtable .qc input,.qtable #qall{width:17px;height:17px;min-width:0}
/* 견적서 일괄 작업 바 */
.qbulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.qbulk select{width:auto}
/* 일괄등록 상단 담당지점 선택 */
.qsite{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:30px}
.qsite label{display:flex;align-items:center;gap:8px;height:30px;margin:0;line-height:30px}
.qsite small{display:inline-flex;align-items:center;min-height:30px;margin:0;line-height:1.2}
.qsite select{width:auto;min-width:260px;height:30px;min-height:30px;margin:0;align-self:center;box-sizing:border-box}
.qbulk button{margin:0}
.qbulk b{color:var(--blue)}
/* 엑셀식 입력 표 */
.qin td{padding:4px}
.qin input,.qin select{padding:6px;font-size:13px;margin:0;min-width:90px}
/* 장부 직접수정 표 */
.qtable.qedit{min-width:1960px}
/* 드래그 범위선택 중 텍스트 선택 방지 (입력칸은 그대로 선택 가능) */
#qlist{user-select:none;-webkit-user-select:none}
#qlist input,#qlist select{user-select:text;-webkit-user-select:text}
.qhidden{display:none !important}
.qact{white-space:nowrap}
.qact button{margin:0 2px;padding:6px 10px;font-size:13px}
.qin input[type=date]{min-width:120px}
.qin input[type=checkbox]{min-width:0;width:18px;height:18px}
.qin .num{text-align:right;min-width:80px}
.msg.me{margin-left:auto;background:var(--blue);color:#fff}
.msg.you{background:#eef2f9}
.msg small{display:block;font-size:11px;opacity:.7}
@media(max-width:640px){
  .trust{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{font-size:10px}
  h1{font-size:22px}
}

/* ---------- dartgram 스튜디오 테마: 따뜻한 소재감과 편안한 가독성 ---------- */
:root{
  --navy:#263746;
  --blue:#4d7b8a;
  --sky:#edf4f4;
  --ink:#2c3438;
  --muted:#707a7e;
  --line:#e7e8e4;
  --cta:#a9753d;
  --cta-d:#8f5f31;
  --ok:#4f806e;
  --warn:#fff7e8;
  --card:#ffffff;
  --bg:#f7f8f6;
  --pico-font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --pico-background-color:var(--bg);
  --pico-color:var(--ink);
  --pico-primary:var(--blue);
  --pico-primary-hover:#3c6675;
  --pico-primary-focus:rgba(77,123,138,.2);
  --pico-muted-color:var(--muted);
  --pico-border-color:var(--line);
  --pico-form-element-background-color:#ffffff;
  --pico-form-element-border-color:#dfe3e1;
  --pico-form-element-active-border-color:var(--blue);
  --pico-form-element-focus-color:rgba(77,123,138,.18);
  --pico-border-radius:10px;
}
body{background:var(--bg);color:var(--ink);line-height:1.72;letter-spacing:-.015em}
::selection{background:#dce9e9;color:var(--navy)}
a{color:var(--blue)}
a:hover{color:#355e6c}
main{width:100%;max-width:1080px;padding:30px clamp(16px,2.5vw,28px) 52px}
main.wide{max-width:none;padding:24px 28px 52px}
h1,h2,h3,h4{color:var(--navy);letter-spacing:-.045em;line-height:1.35}
h1{font-size:clamp(25px,3.2vw,34px);margin:4px 0 20px;font-weight:750}
h2{font-size:22px;margin:34px 0 13px;font-weight:720}
h3{font-size:17px}
p{color:inherit}
.topbar{background:rgba(255,255,255,.96);border-bottom:1px solid #e9ebe7;box-shadow:0 6px 22px #2637460a;backdrop-filter:blur(14px)}
.topbar .wrap{max-width:1080px;min-height:72px;padding:12px 22px;gap:24px}
.brand{display:inline-flex;flex:0 0 auto;align-items:center;gap:10px;color:var(--navy);font-size:inherit;letter-spacing:normal;text-decoration:none}
.brand-mark{display:inline-flex;flex:0 0 42px;width:42px;height:42px;color:#3f7565;filter:drop-shadow(0 3px 5px #315e4a20)}
.brand-mark svg{display:block;width:100%;height:100%}
.brand-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.12}
.brand-name{display:block;color:#233849;font-size:26px;font-weight:800;letter-spacing:-.065em;white-space:nowrap}
.brand-name b{font-weight:800}
.brand-name em{color:#3f7565;font-style:normal;font-weight:800}
.brand small{display:block;margin-top:4px;color:#76847f;font-size:10px;font-weight:600;letter-spacing:.025em}
.topbar nav{gap:5px;align-items:center}
.topbar nav a{padding:9px 12px;border-radius:7px;color:#45545a;font-size:13px}
.topbar nav a:hover{background:#edf3f1;color:var(--navy)}
.topbar nav a.top-public{display:inline-flex;align-items:center;gap:8px;padding:9px 11px;color:#344b52;font-size:18px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}
.topbar nav a.top-public svg{display:block;flex:0 0 19px;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar nav a.top-public:hover{background:#edf3f1;color:#315e4a}
.topbar nav a.top-category{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;color:#364850;font-size:21px;font-weight:750;line-height:1;text-decoration:none}
.topbar nav a.top-category svg{display:block;flex:0 0 19px;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar nav a.top-category:hover{background:#edf3f1;color:#315e4a}
.topbar nav a.admin-alert{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #d94848;border-radius:9px;background:#c63737;color:#fff;font-size:13px;font-weight:800;line-height:1.2;text-decoration:none;white-space:nowrap;box-shadow:0 4px 12px #c6373730;animation:adminAlertPulse 1.5s ease-in-out infinite}
.topbar nav a.admin-alert[hidden],.admin-pending[hidden]{display:none!important}
.topbar nav button.admin-sound-toggle{display:inline-flex;align-items:center;gap:6px;width:auto;height:34px;min-height:34px;margin:0;padding:5px 9px;border:1px solid #cdd8d3;border-radius:8px;background:#fff;color:#465b55;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:none}
.topbar nav button.admin-sound-toggle:hover{border-color:#8ca99d;background:#f2f7f4;color:#315e4a}
.topbar nav button.admin-sound-toggle.is-on{border-color:#77a68f;background:#eaf4ee;color:#28634b}
.admin-sound-toggle svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#adminChatUnread{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#cf3e3e;color:#fff;font-size:11px;font-weight:850}
#adminChatUnread[hidden]{display:none!important}
.admin-alert svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 15%;animation:adminBellMotion 1.2s ease-in-out infinite}
.admin-alert-count{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 5px;border-radius:99px;background:#fff;color:#b62c35;font-size:12px;font-weight:900}
.admin-pending{margin:4px 0 22px;padding:14px 16px;border:1px solid #efb1a8;border-left:5px solid #c63737;border-radius:12px;background:linear-gradient(110deg,#fff1ed,#fffaf5);box-shadow:0 5px 18px #b9363212;animation:adminPanelPulse 2s ease-in-out infinite}
.admin-pending h2{display:flex;align-items:center;gap:9px;margin:0 0 4px;color:#9d3032;font-size:19px}
.admin-pending-pulse{width:10px;height:10px;border-radius:50%;background:#d83b3b;box-shadow:0 0 0 0 #d83b3b66;animation:adminDotPulse 1.2s ease-out infinite}
.admin-pending-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:#c63737;color:#fff;font-size:13px}
.admin-pending>p{margin:0 0 8px;color:#795756;font-size:13px}
.admin-pending ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:7px;margin:0;padding:0;list-style:none}
.admin-pending li a{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border:1px solid #f0c7be;border-radius:8px;background:#fff;color:#34444b;text-decoration:none}
.admin-pending li a:hover{border-color:#d8897c;background:#fff9f6}
.admin-pending li b{flex:0 0 auto;color:#a53536;font-size:12px}
.admin-pending li span{flex:1;overflow:hidden;font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.admin-pending li small{flex:0 0 auto;color:#7b8586;font-size:11px}
@keyframes adminAlertPulse{0%,100%{box-shadow:0 4px 12px #c6373730;transform:scale(1)}50%{box-shadow:0 0 0 5px #d94b4b20,0 5px 18px #c6373755;transform:scale(1.025)}}
@keyframes adminBellMotion{0%,72%,100%{transform:rotate(0)}78%{transform:rotate(13deg)}84%{transform:rotate(-13deg)}90%{transform:rotate(8deg)}96%{transform:rotate(-6deg)}}
@keyframes adminDotPulse{0%{box-shadow:0 0 0 0 #d83b3b66}100%{box-shadow:0 0 0 9px #d83b3b00}}
@keyframes adminPanelPulse{0%,100%{box-shadow:0 5px 18px #b9363212}50%{box-shadow:0 7px 22px #b9363230}}
.customer-chat-widget{position:fixed;right:22px;bottom:22px;z-index:1200}
.customer-chat-toggle{display:inline-flex;align-items:center;gap:8px;margin:0;padding:12px 17px;border:0;border-radius:999px;background:#437d82;color:#fff;font-size:15px;font-weight:750;box-shadow:0 8px 24px #173f4738}
.customer-chat-toggle:hover{background:#315e65}
.customer-chat-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.customer-chat-panel{position:absolute;right:0;bottom:62px;display:flex;flex-direction:column;width:min(360px,calc(100vw - 28px));height:min(520px,calc(100vh - 105px));overflow:hidden;border:1px solid #d9e2dd;border-radius:16px;background:#fff;box-shadow:0 16px 48px #1f34383b}
.customer-chat-panel[hidden]{display:none!important}
.customer-chat-panel>header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#315e65;color:#fff}
.customer-chat-panel>header div{display:flex;flex-direction:column;gap:3px}
.customer-chat-panel>header b{font-size:16px}
.customer-chat-panel>header small{color:#e0eeeb;font-size:12px}
.customer-chat-panel>header button{appearance:none;-webkit-appearance:none;position:relative;display:grid;place-items:center;flex:0 0 34px;width:34px;min-width:34px;height:34px;min-height:34px;margin:0;padding:0;box-sizing:border-box;border:1px solid #ffffff35;border-radius:50%;background:#ffffff18;background-image:none;color:#fff;box-shadow:none;font-size:0;line-height:1;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.customer-chat-panel>header button::before,.customer-chat-panel>header button::after{content:none!important;display:none!important}
.customer-chat-panel>header button svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;pointer-events:none}
.customer-chat-panel>header button:hover{background:#ffffff30;border-color:#ffffff70;filter:none;transform:rotate(90deg)}
.customer-chat-panel>header button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.customer-chat-messages,.admin-chat-messages{display:flex;flex:1;flex-direction:column;gap:10px;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px;background:#f5f8f6}
.chat-empty-note{margin:auto;color:#71807a;font-size:13px;text-align:center}
/* [2026-10-17] 카톡식 시간 표시: 내 말풍선은 시간이 앞(왼쪽), 상대 말풍선은 뒤(오른쪽)
   article 은 Pico 기본 카드(배경·패딩·그림자)를 벗겨 투명하게 — 배경은 .bubble 에만 */
.customer-chat-messages article,.admin-chat-messages article{display:flex;align-items:flex-end;gap:6px;max-width:88%;padding:0;border-radius:0;background:transparent;box-shadow:none}
.customer-chat-messages article>.bubble,.admin-chat-messages article>.bubble{min-width:0;padding:9px 11px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1c34340e}
.customer-chat-messages article.from-visitor,.admin-chat-messages article.from-admin{align-self:flex-end;flex-direction:row-reverse}
.customer-chat-messages article.from-visitor>.bubble,.admin-chat-messages article.from-admin>.bubble{background:#e2f1e9}
.customer-chat-messages article b,.admin-chat-messages article b{display:block;margin-bottom:3px;color:#62726d;font-size:11px}
.customer-chat-messages article p,.admin-chat-messages article p{margin:0;color:#27383b;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.customer-chat-messages .chat-time,.admin-chat-messages .chat-time{flex:0 0 auto;padding-bottom:2px;background:transparent;color:#64736d;font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap}
/* [2026-10-31] 날짜 구분선: 날짜가 바뀔 때만 한 줄 넣어, 말풍선마다 날짜를 반복하지 않는다. */
.chat-day{display:flex;align-items:center;gap:8px;margin:6px 0 2px;color:#64736d;font-size:11px;font-weight:700;line-height:1.4;text-align:center}
.chat-day::before,.chat-day::after{content:"";flex:1 1 0;height:1px;background:#e2eae6}
#customerChatForm{display:grid;gap:7px;margin:0;padding:10px;border-top:1px solid #e5ebe7;background:#fff}
#customerChatForm textarea{min-height:58px;margin:0;padding:7px 9px;border:1px solid #d7e0db;border-radius:8px;background:#fff;font-size:13px}
#customerChatForm textarea{resize:vertical}
.customer-chat-compose{display:flex;align-items:stretch;gap:7px}
.customer-chat-compose textarea{flex:1 1 0%;width:0;min-width:0}
.customer-chat-compose button{flex:0 0 auto;width:auto;min-width:66px;margin:0;padding:0 13px;border-radius:8px;background:#437d82;font-size:13px}
#customerChatStatus{min-height:14px;color:#687a74;font-size:11px}
.admin-chat-shell{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:calc(100vh - 200px);height:calc(100dvh - 200px);min-height:420px;overflow:hidden;border:1px solid #dce5df;border-radius:14px;background:#fff}
.admin-chat-list{overflow:auto;border-right:1px solid #e5ebe7;background:#fbfcfb}
.admin-chat-list h2{display:flex;align-items:center;gap:8px;margin:0;padding:15px;font-size:17px}
.admin-chat-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#d94b4b;color:#fff;font-size:12px}
#adminChatThreads{margin:0;padding:0;list-style:none}
#adminChatThreads li{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:12px 14px;border-top:1px solid #edf1ee;cursor:pointer}
#adminChatThreads li:hover,#adminChatThreads li.selected{background:#edf5f0}
#adminChatThreads li.unread b{color:#b63737}
#adminChatThreads li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
#adminChatThreads li small{color:#74817c;font-size:11px}
#adminChatThreads li span{grid-column:1/-1;overflow:hidden;color:#66736e;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.admin-chat-room{display:flex;min-width:0;min-height:0;flex-direction:column}
.admin-chat-empty{display:grid;flex:1;place-items:center;color:#71807a}
/* [2026-10-31] display:grid 가 [hidden] 을 덮어써, 상담을 열어도 "상담을 선택하세요"가
   남아 대화 영역을 반씩 나눠 쓰던 문제. hidden 이면 확실히 숨긴다. */
.admin-chat-empty[hidden]{display:none!important}
#adminChatActive{display:flex;min-height:0;flex:1;flex-direction:column}
#adminChatActive[hidden]{display:none!important}
#adminChatActive>header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e5ebe7}
#adminChatActive>header div{display:flex;flex-direction:column;gap:3px}
#adminChatActive>header small{color:#75817c;font-size:12px}
#adminChatActive .admin-chat-close{margin:0;padding:6px 12px;background:#fff;border:1px solid #e0cec9;color:#a8433a;font-size:12px;font-weight:700;box-shadow:none}
#adminChatActive .admin-chat-close:hover{background:#fbf1ef;border-color:#d6b9b3;color:#94382f;filter:none}
/* [2026-10-31] 답변 입력칸이 좁던 문제: 안내문(.tr-note)이 flex 한 줄에 끼어
   입력칸 너비를 잡아먹었다 → 입력칸·전송은 1행, 안내문은 2행 전체로 분리. */
#adminChatReply{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:8px;margin:0;padding:10px 10px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #e5ebe7}
/* [2026-10-31] PC 에서도 입력칸이 얇아 불편하다는 요청 → 기본 높이를 5줄(110px)로 키운다.
   (모바일은 아래 미디어쿼리에서 92px·16px 로 따로 잡는다) */
#adminChatReply textarea{grid-column:1;grid-row:1;width:100%;min-width:0;min-height:110px;margin:0;padding:10px 12px;resize:vertical;font-size:15px;line-height:1.55}
#adminChatReply button{grid-column:2;grid-row:1;flex:0 0 auto;align-self:end;width:auto;min-height:44px;margin:0;padding:0 18px;background:#437d82}
#adminChatReply .tr-note{grid-column:1/-1;grid-row:2;margin:0}
/* 모바일: 목록↔대화를 한 화면씩 보여 대화 폭을 넓히고, 입력칸을 3줄 이상으로 키운다. */
.admin-chat-back{display:none}
@media(max-width:640px){
  body.admin .admin-chat-shell{grid-template-columns:minmax(0,1fr)}
  body.admin .admin-chat-shell:not(.is-room) .admin-chat-room{display:none}
  body.admin .admin-chat-shell.is-room .admin-chat-list{display:none}
  body.admin .admin-chat-shell.is-room .admin-chat-room{display:flex}
  .admin-chat-back{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-width:0;min-height:32px;margin:0;padding:0 10px;border:1px solid #cfdcd5;border-radius:8px;background:#fff;color:#315e4a;font-size:12px;font-weight:800;line-height:1;box-shadow:none;cursor:pointer}
  #adminChatActive>header{justify-content:flex-start}
  #adminChatReply{grid-template-columns:minmax(0,1fr) 64px;gap:7px;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  /* [2026-10-31] 전송 버튼과 높이 통일(44px). 입력이 늘면 자동으로 커진다. */
  #adminChatReply textarea{height:44px;min-height:44px;padding:10px;font-size:16px;line-height:1.5}
  #adminChatReply button{align-self:end;height:44px;min-height:44px;padding:0;font-size:14px}
  #adminChatReply .tr-note{font-size:10.5px;line-height:1.45}
}
.profile-menu-wrap{position:relative;align-self:center;flex:0 0 auto;width:max-content;height:40px;min-height:40px;margin:0 0 0 4px;padding:0;overflow:visible}
.profile-trigger{display:flex;align-items:center;box-sizing:border-box;width:max-content;height:40px;min-height:40px;gap:8px;padding:4px 11px 4px 5px;border:1px solid #dfe6e2;border-radius:999px;background:#fff;color:var(--navy);cursor:pointer;list-style:none;white-space:nowrap}
.profile-trigger::-webkit-details-marker{display:none}
.profile-trigger::marker{content:""}
.profile-trigger i{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;background:#e8f0eb;color:#466b59;font-size:13px;font-style:normal;font-weight:750}
.profile-trigger span{font-size:13px;font-weight:700}
.profile-trigger span::after{content:"";display:inline-block;margin:0 1px 3px 7px;border:4px solid transparent;border-top-color:#7c898d;transform:translateY(3px)}
.profile-menu-wrap[open] .profile-trigger span::after{transform:translateY(-1px) rotate(180deg)}
.profile-trigger b{padding:3px 7px;border-radius:999px;background:#f5ecdc;color:#896331;font-size:10px}
.profile-menu-wrap[open] .profile-trigger{border-color:#b9cbc3;background:#f8fbf9}
.profile-menu{position:absolute;z-index:30;top:calc(100% + 8px);right:0;display:grid;gap:2px;min-width:148px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 12px 30px #26374618}
.topbar nav .profile-menu a{display:block;padding:9px 11px;border-radius:7px;color:var(--ink);font-size:13px;text-decoration:none}
.topbar nav .profile-menu a:hover{background:#edf3f1;color:var(--navy)}
.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(118deg,#f0f6f3 0%,#fffaf1 100%);border:1px solid #e8ece7;border-radius:6px 34px 6px 34px;padding:clamp(28px,5vw,56px);margin:8px 0 26px;box-shadow:0 18px 42px #2637460d}
.hero::before{content:"24시간 접수 · 당일제작";display:inline-flex;align-items:center;margin:0 0 18px;padding:6px 11px;border:1px solid #dfe8e1;border-radius:99px;background:#ffffffc9;color:#567466;font-size:12px;font-weight:700;letter-spacing:.025em}
.hero::after{content:"";position:absolute;z-index:-1;width:310px;height:310px;border:1px solid #b6935c28;border-radius:50%;right:-66px;top:-132px;box-shadow:0 0 0 34px #b6935c0c,0 0 0 70px #b6935c08}
.hero h1{color:var(--navy);font-size:clamp(30px,4.4vw,46px);letter-spacing:-.055em;line-height:1.2;max-width:660px}
.hero p{max-width:650px;color:#687579;font-size:16px}
.hero .cta-row{margin-top:24px;gap:10px}
.btn,button{border-radius:7px;font-weight:700;letter-spacing:-.015em;box-shadow:0 4px 12px #26374612}
.btn{padding:12px 20px;background:var(--cta)}
.btn:hover{background:var(--cta-d);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--navy)!important;border:1px solid #bdc9c8;box-shadow:none}
.btn.ghost:hover{background:#fff;border-color:var(--blue)}
.hero .btn.ghost{color:var(--navy)!important;border-color:#a9bcba;background:#ffffff80}
.hero .btn.ghost:hover{background:#fff;border-color:var(--blue)}
.hero .cta-row a[href="/track"]{background:#315e4a!important;color:#fff!important;border-color:#315e4a!important}
.hero .cta-row a[href="/track"] svg,.hero .cta-row a[href="/track"] .button-icon{color:#fff!important;stroke:currentColor}
.hero .cta-row a[href="/track"]:hover{background:#274d3d!important;border-color:#274d3d!important}
.btn.order{background:#477867;color:#fff!important;box-shadow:0 5px 14px #47786726}
.btn.order:hover{background:#386857}
button{background:var(--blue)}
button:hover{filter:none;background:#3c6675}
.board{gap:16px;margin:22px 0 4px}
.board section,.trust div,.howto div,.bars,.chatbox{background:var(--card);border:1px solid var(--line);border-radius:3px 18px 3px 18px;box-shadow:0 6px 22px #28362b08}
.board section{padding:18px 20px}
.board h3{font-size:16px}
.brow{padding:11px 0;font-size:14px}
.pill{border-radius:4px;letter-spacing:.01em}
.pill.p-P01{background:#ad6680}.pill.p-P04{background:#52798a}.pill.p-P07{background:#4f806e}.pill.p-P10{background:#4a8f8f}
.pill.lime{background:#718c62}.pill.blue{background:#548994}
.grid{grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px}
.grid .card{background:var(--card);border:1px solid var(--line);border-radius:3px 20px 3px 20px;box-shadow:0 8px 24px #28362b0a}
.grid .card:hover{border-color:#b5c8c6;box-shadow:0 14px 32px #26374617;transform:translateY(-4px)}
.grid .card .ph{height:205px;background:#edf1ee}
.grid .card .ph::after{height:72px;background:linear-gradient(transparent,#26374655)}
.grid .card .body{padding:17px 18px 20px}
.grid .card .body small{color:#648173;font-size:12px;letter-spacing:.04em}
.grid .card .body b{font-size:18px}
.grid .card .body p{font-size:14px;line-height:1.65}
.badge{background:#e8f0e9;color:#456b58;border-radius:3px 12px 3px 12px;padding:4px 10px}
.badge.hot{background:#f5ead9;color:#8e6331}
.trust{gap:14px;margin-top:22px}
.trust div{padding:18px 20px;font-size:14px;line-height:1.75}
.trust b{color:var(--navy)}
form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:0 8px 28px #28362b0a}
form.qfilter,form#qbulkform{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
label{margin:14px 0 6px;font-size:14px;color:#414b4f;font-weight:650}
input,select,textarea{background:#fff;border:1px solid #dfe3e1;border-radius:7px;padding:11px 12px;font-size:15px;color:var(--ink);box-shadow:none}
/* 권한 없는(읽기전용) 칸은 잠긴 느낌으로 (예: 접수담당자 = 총괄만 수정) */
input[readonly]{background:#f2f5f4;color:#5f6f6a;border-color:#e2e8e5;cursor:default}
input[readonly]:focus{outline:none;border-color:#e2e8e5}
input:focus,select:focus,textarea:focus{outline:3px solid #4d7b8a22;border-color:var(--blue)}
input::placeholder,textarea::placeholder{color:#a2a39b}
.filebox{margin-top:6px}
.steps{gap:6px;margin:22px 0}
.steps li{background:#eff1ee;border-radius:3px 10px 3px 10px;padding:10px 4px}
.steps .done{background:#e4efe9;color:#456b58}
.steps .now{background:var(--navy);color:#fff}
.notice{background:#fff7e8;border:1px solid #eee2c8;border-radius:3px 14px 3px 14px;padding:15px 18px;color:#655b47}
.cards{gap:12px}
.card,.appframe,.m-wrap{background:var(--card);border-color:var(--line);border-radius:3px 18px 3px 18px}
.card{box-shadow:0 5px 18px #28362b08}
.card b{color:var(--navy)}
table{background:var(--card);border:1px solid var(--line);border-radius:3px 16px 3px 16px;box-shadow:0 6px 20px #28362b08}
td,th{border-bottom:1px solid var(--line);padding:11px 12px}
th{background:#edf3f1;color:#425b62;font-weight:700}
table tr:hover td{background:#f5f8f6}
.qwrap{border-color:var(--line);border-radius:3px 16px 3px 16px;box-shadow:0 6px 20px #28362b08}
.qtable th{background:#edf3f1;color:#425b62}
.qtable .c-sale{background:#f0f5f4}
.qtable .c-total{background:#e7efed}
.qtable tr:hover td{background:#fbdee6}
.qtable tr:hover td.c-sale{background:#f8d6e0}
.qtable tr:hover td.c-total{background:#f5cfda}
/* 마우스 오버 = 연한 핑크 / 선택(체크박스) 행 = 오버보다 한 단계 연한 핑크
   ※ 2026-10-17 요청: 오버를 "선택 색" 계열로, 선택은 그보다 더 연하게.
     흰 행과 확실히 구분되도록 진도를 올렸다 (이전 블루 계열 #eef2f8/#f5f9fd 는 거의 안 보였음). */
.qtable tr.qsel-row td{background:#fdecf1}
.qtable tr.qsel-row td.c-sale{background:#fce4eb}
.qtable tr.qsel-row td.c-total{background:#fadde6}
.qtable tr.qsel-row td input:not([type=checkbox]):not([type=hidden]),.qtable tr.qsel-row td select{background:transparent;border-color:#cbd8e8}
.qtable input,.qtable select{border-radius:5px}
.req{color:#ad5f4d;font-weight:800}
/* 필수 업체명: 연한 살구색 바탕으로 눈에 띄게 */
.qtable th.reqh{background:#fff3e8;color:#8a4b32}
.qtable td.qreq input:not(:focus){background:#fffaf5;border-color:#eedccb}
.fgrid label.reqfield input:not(:focus){background:#fffaf5;border-color:#eedccb}
.qfilter,.qbulk{gap:8px}
.qfilter{margin:0 0 12px;align-items:center}
.qfilter input[name="s"]{width:min(220px,22vw)}
.qfilter .docbtns{margin:0 0 0 auto;flex:0 0 auto}
.qbulk{margin:14px 0}
.docbtns button{border-color:#b9c8c7;color:var(--navy)}
.docbtns button:hover{background:var(--navy);color:#fff}
.searchbar input{border-color:#aab7a9;border-radius:7px}
.rail .ico{background:#f0f5f3;border-color:var(--line);color:var(--blue);border-radius:3px 16px 3px 16px}
.thumb{background:linear-gradient(135deg,#6a9180,#b4c5b3);border-radius:3px 14px 3px 14px}
.chips span{border-radius:4px 14px 4px 14px;padding:8px 14px}
.chips input:checked+span{background:#e9f1ee;color:#456b58;border-color:#9db8aa}
.stickybar{border-top:1px solid #d9ddd4;box-shadow:0 -8px 25px #28362b0b;margin-top:46px}
.stickybar.plain{margin-bottom:0}
.stickybar .total{color:var(--navy)}
footer{background:#eef2ef;color:#59686b;border-top:1px solid #e3e9e5;margin-top:42px}
footer .wrap{max-width:1080px;padding-top:26px;padding-bottom:26px;line-height:1.8}
.m-logo{background:#edf3f0;color:var(--navy)}
.m-logo b,.m-av{background:var(--blue)}
.m-comp button{background:var(--navy)}
.m-txt.me,.msg.me{background:var(--blue)}
.m-txt.ai,.msg.you{background:#f0f4f2}
.record-card,.answer-card{margin:14px 0 18px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 6px 20px #26374608}
.record-card h2{margin:0 0 12px;font-size:17px;letter-spacing:-.02em}
.record-card p,.answer-card p{margin:6px 0;font-size:15px;line-height:1.65}
.record-meta{padding-bottom:9px;border-bottom:1px solid #eef0ed}
.record-memo{white-space:pre-wrap}
.answer-card p{margin:0}
.answer-card h2{margin:0 0 10px;font-size:17px}
.answer-card img{max-width:100%;border:1px solid var(--line);border-radius:8px;margin:4px 0}
*{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
@media(max-width:760px){
  .topbar .wrap{min-height:unset;padding:12px 16px;align-items:flex-start;gap:10px}
  .brand{gap:8px}
  .brand-mark{flex-basis:38px;width:38px;height:38px}
  .brand-name{font-size:23px}
  .brand small{font-size:9px}
  .topbar nav{gap:2px;justify-content:flex-end}
  .topbar nav a{padding:7px 8px;font-size:12px}
  .topbar nav a.top-public{gap:6px;padding:7px 8px;font-size:16px}
  .topbar nav a.top-public svg{flex-basis:17px;width:17px;height:17px}
  .topbar nav a.top-category{gap:5px;padding:6px 7px;font-size:19px}
  .topbar nav a.top-category svg{flex-basis:17px;width:17px;height:17px}
  main{padding:24px 16px 60px}
  main.wide{padding:20px 14px 60px}
  .hero{border-radius:3px 24px 3px 24px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:13px}
}
@media(max-width:520px){
  .topbar .wrap{display:block}
  .topbar nav{margin:8px 0 0;justify-content:flex-start;overflow:visible;flex-wrap:wrap;padding-bottom:2px}
  .profile-menu-wrap{flex:0 0 auto}
  .hero{padding:27px 21px}
  .hero p{font-size:14px}
  .hero .cta-row{display:grid;grid-template-columns:1fr 1fr}
  .hero .cta-row .btn{padding:11px 10px;text-align:center;font-size:14px}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .grid .card .ph{height:145px}
  .grid .card .body{padding:12px}
  .grid .card .body b{font-size:15px}
  .grid .card .body p{font-size:12px}
  .qfilter input,.qfilter select{max-width:100%}
  .qsite select{min-width:0}
  .stickybar{margin-left:-16px;margin-right:-16px}
  main.wide{padding:18px 12px 44px}
  .qfilter input[name="s"]{width:100%}
  .qfilter .docbtns{margin-left:0}
  .record-card,.answer-card{padding:16px}
}
/* 전 화면 공통 타이포그래피와 조밀한 입력 컨트롤 */
:root{
  --font-body:14px;
  --font-small:12px;
  --font-label:13px;
  --font-control:14px;
  --font-section:19px;
  --font-subsection:16px;
  --font-title:clamp(24px,2.6vw,30px);
  --control-pad-y:7px;
  --control-pad-x:9px;
  --control-height:40px;
}
body{font-size:var(--font-body);line-height:1.6}
h1{font-size:var(--font-title)}
h2{font-size:var(--font-section)}
h3{font-size:var(--font-subsection)}
small{font-size:var(--font-small)}
label{font-size:var(--font-label)}
button,.btn{font-size:var(--font-control)}
table{font-size:13px}
form{padding:16px 18px}
input,select,textarea{
  min-height:36px;padding:var(--control-pad-y) var(--control-pad-x);
  font-size:var(--font-control);line-height:1.4
}
input[type=checkbox],input[type=radio]{min-height:0;padding:0}
input[type=checkbox],input[type=radio]{
  appearance:auto;-webkit-appearance:auto;accent-color:var(--blue);
  width:18px;height:18px;min-height:0;padding:0;margin:0 6px 0 0;
  background:initial;border:initial;vertical-align:middle;cursor:pointer
}
input:not([type=checkbox],[type=radio],[type=hidden]),select{
  height:var(--control-height);min-height:var(--control-height);
  padding:0 var(--control-pad-x);line-height:1.2
}
textarea{padding:6px var(--control-pad-x)}
.qfilter{gap:7px}
.qfilter input,.qfilter select{min-height:34px;padding:6px 8px;font-size:13px}
.qfilter input[type=date]{width:154px}
.qfilter select[name="proc"]{width:128px}
.qfilter select[name="site"]{width:150px}
.qfilter input[name="s"]{width:min(190px,20vw)}
.qfilter button,.qfilter .btn,.docbtns button,.qbulk button{min-height:34px;padding:6px 10px;font-size:13px}
.qbulk > select,.qbulk > button{height:40px;min-height:40px;margin:0;box-sizing:border-box}
.qbulk > button{display:inline-flex;align-items:center;justify-content:center;padding:0 12px;line-height:1}
.qbulk > b{display:inline-flex;align-items:center;min-height:40px;line-height:1}
.track-actions{gap:10px;margin:12px 0 18px}
.track-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;border-radius:12px;font-size:15px;text-decoration:none}
.track-actions .btn-icon{display:block;flex:0 0 20px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.track-actions .btn-kakao{background:#fee500;border:1px solid #e7d000;color:#342a18!important;box-shadow:0 5px 14px #d8b90030}
.track-actions .btn-kakao .btn-icon circle{fill:currentColor;stroke:none}
.track-actions .btn-kakao:hover{background:#f4dc00;border-color:#ddc800;color:#2b2315!important}
.track-actions .btn-directpay{background:linear-gradient(135deg,#5b8675,#426d5d);border:1px solid #4f7969;color:#fff!important;box-shadow:0 5px 14px #47786726}
.track-actions .btn-directpay:hover{background:linear-gradient(135deg,#4d7667,#385f51);border-color:#3f6959;color:#fff!important}
footer{background:linear-gradient(115deg,#edf3ef,#f5f7f4);color:#46534e;border-top:1px solid #dce5df;margin-top:42px}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;padding:24px clamp(16px,3vw,28px);font-size:14px;line-height:1.9;color:#46534e}
footer .footer-main{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
footer b{display:inline-flex;align-items:center;vertical-align:middle;padding:5px 9px;border:1px solid #dce5df;border-radius:9px;background:#fff;color:var(--navy);font-size:14px}
footer a{color:#3e6c59;font-weight:700;text-decoration:none;text-underline-offset:3px}
footer a:hover{color:#294f41;text-decoration:underline}
footer .footer-copy{flex:0 0 auto;color:#708078;font-size:11px;font-weight:600;letter-spacing:.025em;white-space:nowrap}
@media(max-width:640px){footer .wrap{align-items:flex-start;flex-direction:column;gap:8px}footer .footer-main{gap:3px 6px}footer .footer-copy{font-size:10px}}
.qsite select{min-width:180px;height:30px;min-height:30px;padding-top:0;padding-bottom:0;line-height:1}
.qin input,.qin select{height:30px;min-height:30px;padding:4px 6px;font-size:13px}
.qin input[type=checkbox]{min-height:0;padding:0}
form[action="/admin/quotes"] > button{height:30px;min-height:30px;padding-top:0;padding-bottom:0;line-height:1}
/* 견적서 장부의 필터와 일괄 작업 컨트롤 높이를 한 줄 30px로 통일 */
.qfilter input,.qfilter select,.qfilter button,.qfilter .btn,.qfilter .docbtns button,
.qbulk > select,.qbulk > button{
  box-sizing:border-box;height:30px;min-height:30px;margin-top:0;margin-bottom:0
}
.qfilter input,.qfilter select,.qbulk > select{padding-top:0;padding-bottom:0}
.qfilter button,.qfilter .btn,.qfilter .docbtns button,.qbulk > button{padding-top:0;padding-bottom:0;line-height:1}
.qbulk > b{min-height:30px}
/* 행 추가: 버튼 줄 우측 끝 (flex-wrap 으로 줄이 바뀌어도 자기 줄의 오른쪽 끝) */
.qbulk-add{display:inline-flex;align-items:center;margin-left:auto}
.qbulk .qbulk-add > button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:30px;min-height:30px;margin:0;padding:0 12px;font-size:13px;line-height:1}
/* 담당지점 미선택(새 줄) 표시: 지점을 고르면 스크립트가 지운다 */
.qin select.qneed{border-color:#c0392b!important;box-shadow:0 0 0 2px #c0392b33;background:#fff5f5}
/* 버튼 의미별 아이콘 간격과 색상 */
.action-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.button-icon{display:block;flex:0 0 15px;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.action-search{background:#315e4a!important;color:#fff!important;border:1px solid #315e4a!important}
.action-search:hover{background:#294f3d!important;border-color:#294f3d!important}
.action-save,.action-success{background:#4e806c!important;color:#fff!important;border:1px solid #4e806c!important}
.action-delete{background:#bd5c58!important;color:#fff!important;border:1px solid #bd5c58!important}
.action-edit{background:#bd8a3e!important;color:#fff!important;border:1px solid #bd8a3e!important}
.action-print{background:#687c9b!important;color:#fff!important;border:1px solid #687c9b!important}
.action-document{background:#fff!important;color:#466f7a!important;border:1px solid #a9c0c2!important;box-shadow:none!important}
.action-create{background:#477d8a!important;color:#fff!important;border:1px solid #477d8a!important}
.qfilter .action-create{background:#e5f1e9!important;color:#315e4a!important;border:1px solid #bfd5c7!important;box-shadow:none!important}
.qfilter .action-create:hover{background:#d8eade!important;color:#294f3d!important;border-color:#a9c9b5!important}
.action-muted{background:#68746f!important;color:#fff!important;border:1px solid #68746f!important}
.action-default{background:#477d8a!important;color:#fff!important;border:1px solid #477d8a!important}
.btn.link-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;min-height:30px;padding:0 10px;border-radius:7px;font-size:13px;line-height:1;text-decoration:none;white-space:nowrap}
.btn.link-action .button-icon{width:14px;height:14px;flex-basis:14px}
.action-btn:hover{filter:brightness(.94)}
.action-document:hover{background:#edf4f2!important;color:#345b65!important}
.site-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}
.site-actions form{display:flex;margin:0;padding:0;border:0;background:none}
.site-actions .site-action{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:76px;height:32px;min-height:32px;margin:0;padding:0 8px;gap:6px;border-radius:7px;font-size:13px;line-height:1;text-decoration:none;white-space:nowrap}
.site-actions .site-action .button-icon{flex:0 0 14px;width:14px;height:14px}
.q-text-fit{min-width:90px;max-width:min(520px,100%)}
.q-select-fit{min-width:90px;max-width:min(300px,100%)}
.topbar .brand:hover,.topbar .brand:focus-visible{color:var(--navy)!important;text-decoration:none}
.topbar .brand:hover .brand-mark,.topbar .brand:focus-visible .brand-mark{color:#315e4a;transform:translateY(-1px)}
/* 관리자 화면 로고는 링크가 아니므로(홈 이동 방지) hover 반응도 없앤다 */
.topbar .brand-static{cursor:pointer}
.topbar .brand-static:hover,.topbar .brand-static:focus-visible{color:var(--navy)!important;text-decoration:none}
.topbar .brand-static:hover .brand-mark,.topbar .brand-static:focus-visible .brand-mark{color:#315e4a;transform:translateY(-1px)}
@media(max-width:760px){
  :root{--font-title:24px}
  .qfilter input[type=date]{width:150px}
  .qfilter select[name="site"]{width:150px}
  .admin-chat-shell{grid-template-columns:220px minmax(0,1fr);height:calc(100vh - 225px);height:calc(100dvh - 225px);min-height:380px}
  .customer-chat-widget{right:12px;bottom:12px}
}
@media(max-width:520px){
  .admin-chat-shell{grid-template-columns:minmax(115px,34vw) minmax(0,1fr);height:calc(100vh - 272px);height:calc(100dvh - 272px);min-height:320px}
  .admin-chat-list h2{padding:10px 8px;font-size:14px}
  #adminChatThreads li{padding:10px 8px}
  #adminChatActive>header{padding:9px}
  #adminChatReply{padding:7px}
  #adminChatReply button{padding:0 10px}
  .customer-chat-toggle{padding:11px 14px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =====================================================================
   [2026-10-18] 디자인 v3 "dartgram studio" — 첫인상 개선(홈·공통)
   ---------------------------------------------------------------------
   [참고] 아래 값들은 공개 저장소에서 가져와 그대로 쓴다(의존성 추가 없음).
     · 곡선  : easings.net (github.com/ai/easings.net, src/easings.yml)
     · 색 스케일: tailwindcss (github.com/tailwindlabs/tailwindcss) 기본 팔레트
     · 글꼴  : Pretendard (github.com/orioncactus/pretendard) — 웹폰트 CDN 연결
   [색 비율] 60 : 30 : 10
     · 60% 종이(밝은 바탕) · 30% 네이비(브랜드·본문) · 10% 강조(주황·골드)
   [안전] 관리자·장부·주문 화면의 기존 규칙은 건드리지 않고 "덧칠"만 한다.
   ===================================================================== */

/* ---------- 토큰: 브랜드 네이비(#0f2a52 유지) + 강조 주황(#f2620f 유지) ---------- */
:root{
  --brand-50:#f3f6fc; --brand-100:#e4ecf8; --brand-200:#c6d7ef; --brand-300:#9db8e0;
  --brand-400:#6c91cc; --brand-500:#416ab2; --brand-600:#2b5194; --brand-700:#1e3f79;
  --brand-800:#163263; --brand-900:#0f2a52; --brand-950:#081a35;
  --acc-50:#fff6ef; --acc-100:#ffe9d8; --acc-200:#fed2ae; --acc-300:#fcb37f;
  --acc-400:#f98f4c; --acc-500:#f2620f; --acc-600:#dd4f06; --acc-700:#b53d09;
  --gold:#e8bc68; --gold-d:#c99a44;
  --ord-500:#12a15b; --ord-600:#0d8349; --ord-700:#0a6a3b;
  --paper:#fbfaf8; --sand:#f6f3ee;
  --ink-900:#0b1220; --ink-700:#334155; --ink-500:#64748b; --ink-300:#cbd5e1;
  --e-expo:cubic-bezier(.16,1,.3,1); --e-quint:cubic-bezier(.22,1,.36,1);
  --e-back:cubic-bezier(.34,1.56,.64,1); --e-cubic:cubic-bezier(.33,1,.68,1);
  --sh-1:0 1px 2px rgba(15,42,82,.05),0 1px 3px rgba(15,42,82,.07);
  --sh-2:0 2px 6px -1px rgba(15,42,82,.08),0 8px 24px -8px rgba(15,42,82,.16);
  --sh-3:0 22px 54px -20px rgba(8,26,53,.45);
  --rad:14px; --rad-lg:22px;
  /* 주의: 기존 변수(--navy/--blue/--bg/--line/--muted/--font-* 등)는 건드리지 않는다.
     관리자·장부·주문 화면의 색·크기가 그대로 유지되도록 새 컴포넌트에서만 위 값을 쓴다. */
}

/* ---------- 타이포그래피(기존 크기·색은 그대로 두고 자간만 다듬는다) ---------- */
h1,h2,h3{letter-spacing:-.03em}
.hero-v3,.hero-v3 h1,.board-v3,.trust-v3,.process-v3{word-break:keep-all}
/* 초점 표시(접근성) — 키보드 사용자에게만 보인다 */
:focus-visible{outline:2px solid var(--acc-500);outline-offset:2px;border-radius:6px}
/* 스크롤 진행 막대(상단 2px) */
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--acc-500));transform:scaleX(0);transform-origin:0 50%}
/* 스크롤하면 나타나는 등장 효과(JS가 html.js-reveal 을 붙였을 때만 숨김 → JS 없어도 다 보인다) */
.js-reveal [data-reveal]{opacity:0;transform:translateY(16px)}
.js-reveal [data-reveal].in{opacity:1;transform:none;
  transition:opacity .7s var(--e-expo) var(--d,0ms),transform .85s var(--e-expo) var(--d,0ms)}

/* ---------- 상단바: 기존 흰 유리를 그대로 두고, 스크롤할 때만 그림자 ---------- */
.topbar{transition:box-shadow .28s var(--e-cubic),background .28s var(--e-cubic)}
.topbar.scrolled{background:rgba(255,255,255,.98);box-shadow:0 10px 30px -18px rgba(15,42,82,.45)}
.topbar nav a{transition:background .2s var(--e-cubic),color .2s}
.topbar .brand-mark{transition:transform .3s var(--e-back),color .3s}
.topbar .brand:hover .brand-mark{color:var(--gold-d);transform:translateY(-1px) rotate(-3deg)}

/* ---------- 버튼 ---------- */
.btn{border-radius:12px;padding:12px 22px;font-weight:700;box-shadow:var(--sh-1);
  transition:transform .24s var(--e-back),box-shadow .24s var(--e-cubic),background .2s,color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0) scale(.99)}
.btn.order{background:linear-gradient(135deg,var(--ord-500),var(--ord-600));
  box-shadow:0 8px 20px -8px rgba(18,161,91,.6)}
.btn.order:hover{background:linear-gradient(135deg,var(--ord-600),var(--ord-700));filter:none}
.btn.ghost{background:#fff;color:var(--brand-600)!important;border:1.5px solid var(--brand-200)}
.btn.ghost:hover{background:var(--brand-50);border-color:var(--brand-300)}
button{border-radius:10px;transition:transform .2s var(--e-cubic),filter .2s,background .2s}

/* ---------- 홈: 히어로 ---------- */
.hero-v3{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  border-radius:var(--rad-lg);padding:clamp(26px,4.2vw,54px);margin-bottom:18px;box-shadow:var(--sh-3);
  background:
    radial-gradient(1000px 460px at 8% -12%,rgba(232,188,104,.20),transparent 62%),
    radial-gradient(820px 460px at 92% 6%,rgba(65,106,178,.45),transparent 64%),
    linear-gradient(142deg,var(--brand-950),var(--brand-800) 44%,var(--brand-700))}
/* 인쇄 모눈(그래프) 느낌의 미세 격자 */
.hero-v3::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 72%)}
.hero-v3 .hero-grid{position:relative;z-index:1;display:grid;gap:clamp(20px,3vw,42px);
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 15px;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#dbe7ff;
  font-size:12.5px;font-weight:700;letter-spacing:.01em}
.hero-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(232,188,104,.22);animation:dg-pulse 2.8s var(--e-quint) infinite}
.hero-v3 h1{margin:0;color:#fff;font-size:clamp(29px,4.7vw,50px);line-height:1.13;font-weight:800;letter-spacing:-.038em}
.hero-v3 h1 em{font-style:normal;background:linear-gradient(94deg,var(--gold) 6%,#fff 52%,#cfe0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-v3 .hero-sub{margin:15px 0 0;max-width:47ch;color:#c6d7ef;font-size:clamp(14.5px,1.5vw,16.5px)}
.hero-v3 .cta-row{margin-top:24px;gap:10px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:20px 0 0}
.hero-chips li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  color:#dbe7ff;font-size:12.5px;font-weight:700}
.hero-chips li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hero-v3 .btn.ghost{background:rgba(255,255,255,.1);color:#fff!important;border:1px solid rgba(255,255,255,.34)}
.hero-v3 .btn.ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}

/* ---------- 홈: 인쇄물 연출(히어로 오른쪽) ---------- */
.hero-stage{position:relative;height:clamp(200px,25vw,296px);perspective:900px}
.stage-piece{position:absolute;display:block;border-radius:12px;animation:dg-float 9s var(--e-quint) infinite;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.6)}
.stage-banner{inset:6% 3% auto 3%;height:33%;transform:rotate(-2.4deg);overflow:hidden;
  background:linear-gradient(118deg,#fff,#eef3fb)}
.stage-banner::after{content:"현수막 · 실사출력";position:absolute;left:15px;bottom:11px;
  font-size:12px;font-weight:800;color:var(--brand-700);letter-spacing:-.01em}
.stage-banner::before{content:"";position:absolute;right:16px;top:14px;width:26%;height:8px;border-radius:4px;
  background:linear-gradient(90deg,var(--acc-500),var(--gold))}
.stage-card{width:46%;height:39%;left:6%;bottom:5%;transform:rotate(-5deg);background:#fff;animation-delay:-1.6s}
.stage-card::after{content:"명함 · 리플렛";position:absolute;left:13px;bottom:10px;
  font-size:11.5px;font-weight:800;color:var(--brand-700)}
.stage-card::before{content:"";position:absolute;left:13px;top:14px;width:34%;height:22%;border-radius:6px;
  background:linear-gradient(135deg,var(--brand-700),var(--brand-500));opacity:.85}
.stage-swatch{width:29%;aspect-ratio:1;right:8%;bottom:11%;border-radius:50%;animation:dg-spin 30s linear infinite;
  background:conic-gradient(from 210deg,var(--acc-500),var(--gold),var(--ord-500),var(--brand-500),var(--acc-500))}
/* 출력 헤드가 현수막 위를 지나가는 선(현수막 안에서만 보이도록 잘라둔다) */
.stage-banner .scan{position:absolute;left:4%;right:4%;height:2px;border-radius:2px;top:-4%;
  background:linear-gradient(90deg,transparent,rgba(232,188,104,.95),transparent);
  animation:dg-scan 5.4s var(--e-quint) infinite}
/* 인쇄 교정지 느낌의 가는 줄(빈 사각형으로 보이지 않게) */
.stage-piece .ln{position:absolute;display:block;height:5px;border-radius:3px;
  background:linear-gradient(90deg,#c9d6ea,rgba(201,214,234,.15))}
.stage-banner .ln1{left:15px;top:15px;width:36%}
.stage-banner .ln2{left:15px;top:27px;width:22%}
.stage-card .ln3{left:13px;bottom:25px;width:58%}
.stage-card .ln4{left:13px;bottom:15px;width:38%}
/* CMYK 색상 막대 — 인쇄소라는 걸 한눈에 */
.stage-cmyk{position:absolute;left:7%;top:43%;display:flex;gap:4px;animation:dg-drift 11s var(--e-quint) infinite}
.stage-cmyk i{display:block;width:13px;height:34px;border-radius:4px;box-shadow:0 10px 20px -10px rgba(0,0,0,.65)}
.stage-cmyk i:nth-child(1){background:#00a0df}
.stage-cmyk i:nth-child(2){background:#e6007e}
.stage-cmyk i:nth-child(3){background:#ffd400}
.stage-cmyk i:nth-child(4){background:#20242b}
/* 히어로 오른쪽 위 인쇄 정합(十字) 표시 */
.hero-v3::before{content:"";position:absolute;right:26px;top:22px;width:26px;height:26px;z-index:1;opacity:.4;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  background:
    linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) center/1px 9px no-repeat,
    linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) center/9px 1px no-repeat}
@keyframes dg-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:860px){.hero-v3 .hero-grid{grid-template-columns:1fr}.hero-stage{height:190px}.hero-v3::before{display:none}}

/* ---------- 홈: 진행 3단계 ---------- */
.process-v3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 0}
.pstep{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:18px 18px 16px;box-shadow:var(--sh-1);transition:transform .28s var(--e-back),box-shadow .28s var(--e-cubic)}
.pstep:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pstep b{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;
  margin-bottom:10px;background:var(--brand-50);color:var(--brand-600);font-size:13px;font-weight:800}
.pstep strong{display:block;font-size:15.5px;letter-spacing:-.02em}
.pstep span{display:block;margin-top:3px;color:var(--ink-500);font-size:13px}
@media(max-width:700px){.process-v3{grid-template-columns:1fr}}

/* ---------- 홈: 실시간 현황판 ---------- */
.board-v3{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 0}
.board-v3 section{background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);
  padding:16px 18px;box-shadow:var(--sh-1)}
.board-v3 h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px;color:var(--brand-900)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ord-500);box-shadow:0 0 0 3px rgba(18,161,91,.18);
  animation:dg-pulse 2.4s var(--e-quint) infinite}
.board-v3 .brow{border-top:1px solid var(--line);transition:background .2s}
.board-v3 .brow:hover{background:var(--brand-50)}
.board-v3 .brow:first-child{border-top:0}
@media(max-width:700px){.board-v3{grid-template-columns:1fr}}

/* ---------- 홈: 신뢰 3항목 ---------- */
.trust-v3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.trust-v3 div{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:16px 18px;
  box-shadow:var(--sh-1);transition:transform .28s var(--e-back),box-shadow .28s var(--e-cubic)}
.trust-v3 div:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.trust-v3 b{display:block;color:var(--brand-900);font-size:15px;letter-spacing:-.02em}
.trust-v3 span{display:block;margin-top:4px;color:var(--ink-500);font-size:13px}
@media(max-width:760px){.trust-v3{grid-template-columns:1fr}}

/* ---------- 푸터: 기존 밝은 톤 유지, 밑줄·호버만 다듬기 ---------- */
footer{background:linear-gradient(115deg,#eef4f0,#f8f6f1)}
footer .footer-main a{border-bottom:1px solid transparent;padding-bottom:1px;
  transition:color .2s,border-color .2s}
footer .footer-main a:hover{border-bottom-color:currentColor;text-decoration:none}

/* ---------- 움직임 정의 ---------- */
@keyframes dg-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.65}}
@keyframes dg-float{0%,100%{transform:rotate(-2.4deg) translateY(0)}50%{transform:rotate(-1.4deg) translateY(-7px)}}
@keyframes dg-spin{to{transform:rotate(360deg)}}
@keyframes dg-scan{0%{top:-4%;opacity:0}15%{opacity:1}70%{top:96%;opacity:1}86%{opacity:0}100%{top:-4%;opacity:0}}
/* 카드 위를 지나가는 광택(마우스 올릴 때만) */
.pstep::after,.trust-v3 div::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  opacity:0;transform:translateX(-24%)}
.pstep:hover::after,.trust-v3 div:hover::after{opacity:1;transform:translateX(24%);
  transition:opacity .5s var(--e-cubic),transform .8s var(--e-expo)}
/* 모션 최소화 설정이면 움직이지 않는다 */
@media(prefers-reduced-motion:reduce){
  .stage-piece,.stage-banner .scan,.stage-cmyk,.live-dot,.hero-eyebrow i{animation:none!important}
  .js-reveal [data-reveal]{opacity:1!important;transform:none!important}
}
/* 인쇄(종이)에서 히어로는 잉크를 아끼도록 단순하게 */
@media print{.hero-v3{background:#fff!important;color:#000!important;box-shadow:none}.hero-stage{display:none}}
.delivery-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.delivery-head h1{margin:0}.delivery-head p{margin:6px 0 0;color:#68777a}.delivery-api-note{display:grid;gap:8px;margin:0 0 18px;padding:14px 16px;border:1px solid #d8e6df;border-left:4px solid #477867;border-radius:10px;background:#f4f8f5;color:#465b55;font-size:13px}.delivery-api-note b{font-size:14px}.delivery-api-note div{display:flex;gap:14px;flex-wrap:wrap}.delivery-api-note a,.delivery-table a{color:#2e6f78;font-weight:700}.delivery-create{margin:0 0 24px;padding:15px;border:1px solid #dce5df;border-radius:12px;background:#fff}.delivery-create>summary{cursor:pointer;font-weight:800;color:#263746}.delivery-form{margin-top:14px}.delivery-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.delivery-field{display:grid;gap:5px;color:#53625e;font-size:12px;font-weight:700}.delivery-field input,.delivery-field select,.delivery-inline input,.delivery-inline select{box-sizing:border-box;width:100%;min-width:0;min-height:38px;padding:8px 10px;border:1px solid #d5dfda;border-radius:7px;background:#fff;color:#29383d;font:inherit;font-size:13px}.delivery-form>.btn{margin-top:13px}.delivery-create h2{margin-top:0}.delivery-table-wrap{overflow:auto;border:1px solid #dce5df;border-radius:10px;background:#fff}.delivery-table{width:100%;border-collapse:collapse;font-size:13px}.delivery-table th,.delivery-table td{padding:10px;border-bottom:1px solid #e9eeeb;text-align:left;vertical-align:top}.delivery-table th{background:#eef4f1;color:#435b59;white-space:nowrap}.delivery-table td{min-width:125px}.delivery-table td small{display:block;margin-top:4px;color:#71807c;overflow-wrap:anywhere}.delivery-inline{display:flex;align-items:center;gap:5px;margin-bottom:5px}.delivery-inline .btn{flex:0 0 auto;padding:8px 10px;font-size:12px}.delivery-empty{text-align:center!important;color:#74817c;padding:24px!important}.delivery-head+.delivery-api-note+h2{margin:0 0 10px}.delivery-table h2 small{font-size:12px;color:#78847f}@media(max-width:760px){.delivery-head{align-items:flex-start;flex-direction:column}.delivery-form-grid{grid-template-columns:1fr 1fr}.delivery-table{min-width:850px}}@media(max-width:440px){.delivery-form-grid{grid-template-columns:1fr}}
.delivery-required-note{margin:10px 0 0;font-size:12px;color:#66756f}
.tax-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.tax-head h1{margin:0}.tax-head p{margin:5px 0 0;color:#68777a}.tax-connect{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0;padding:14px 16px;border:1px solid #d7e4df;border-radius:10px;background:#f4f8f6}.tax-connect>div{display:grid;gap:4px}.tax-connect>div b{color:#34564f}.tax-connect>div span{font-size:13px;color:#63716d}.tax-connect form{margin:0}.tax-connect button{margin:0}.tax-notice{margin:12px 0;padding:12px 14px;border:1px solid #e6e1d5;border-radius:8px;background:#fbf8f0;color:#665b45;font-size:13px}.tax-notice.success{border-color:#cfe4d7;background:#f0f8f2;color:#365c46}.tax-notice.error{border-color:#eccfc9;background:#fff5f2;color:#874c42}.tax-editor{margin:18px 0;padding:16px;border:1px solid #dce5df;border-radius:12px;background:#fff}.tax-editor>summary{cursor:pointer;font-size:17px;font-weight:800;color:#293e48}.tax-editor>summary small{margin-left:8px;font-size:12px;font-weight:600;color:#74817c}.tax-section{margin-top:18px;padding-top:14px;border-top:1px solid #e6ece8}.tax-section h2,.tax-docs h2{margin:0 0 12px;font-size:16px}.tax-section h2 small,.tax-docs h2 small{margin-left:6px;font-size:12px;color:#78847f;font-weight:500}.tax-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tax-field{display:grid;align-content:start;gap:5px;margin:0;color:#4d615c;font-size:12px;font-weight:700}.tax-field input,.tax-field select{box-sizing:border-box;width:100%;min-width:0;min-height:39px;margin:0;padding:8px 10px;border:1px solid #d5dfda;border-radius:7px;background:#fff;color:#29383d;font:inherit;font-size:13px}.tax-field input[readonly]{background:#f2f5f3;color:#64726d}.tax-required-note{margin:16px 0 10px;color:#65736e;font-size:12px}.tax-docs{margin:20px 0}@media(max-width:760px){.tax-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tax-head{align-items:flex-start;flex-direction:column}}@media(max-width:440px){.tax-grid{grid-template-columns:1fr}.tax-connect{align-items:flex-start;flex-direction:column}}

/* ---------- 관리자 블로그 (네이버 반자동 발행 도우미) ---------- */
/* 현장에서 폰으로도 쓰므로 좁은 화면 1열 + 버튼 큼직하게 */
.blog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.blog-head h1{margin:0}.blog-head p{margin:5px 0 0;color:#68777a}
.blog-notice{display:grid;gap:6px;margin:12px 0;padding:12px 14px;border:1px solid #e6e1d5;border-radius:8px;background:#fbf8f0;color:#665b45;font-size:13px}
.blog-notice.success{border-color:#cfe4d7;background:#f0f8f2;color:#365c46}
.blog-notice.error{border-color:#eccfc9;background:#fff5f2;color:#874c42}
.blog-notice.warn{border-color:#e3ddcb;background:#fdfaf2;color:#5d543f}
.blog-notice.warn span{display:block;margin-top:4px;color:#6f7873}
.blog-card{margin:16px 0;padding:15px;border:1px solid #dce5df;border-radius:12px;background:#fff}
.blog-card>summary{cursor:pointer;font-weight:800;color:#263746;font-size:16px}
.blog-card>summary small{margin-left:8px;font-size:12px;font-weight:600;color:#74817c}
.blog-card h2{margin:0 0 10px;font-size:17px}.blog-card h2 small{margin-left:6px;font-size:12px;font-weight:500;color:#78847f}
.blog-sub{margin:16px 0 8px;font-size:14px;color:#3d5650}.blog-sub small{margin-left:6px;font-size:12px;font-weight:500;color:#78847f}
.blog-form{margin:10px 0 0}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.blog-field{display:grid;align-content:start;gap:5px;margin:0;color:#4d615c;font-size:12px;font-weight:700}
.blog-field-wide{grid-column:1/-1}
.blog-field input,.blog-field select,.blog-field textarea,.blog-caption-form input,.blog-publish-form input{box-sizing:border-box;width:100%;min-width:0;min-height:39px;margin:0;padding:8px 10px;border:1px solid #d5dfda;border-radius:7px;background:#fff;color:#29383d;font:inherit;font-size:13px}
.blog-field textarea{line-height:1.6;resize:vertical}
.blog-field small{font-weight:600;color:#7b8781;font-size:11px}
.blog-help{margin:10px 0 0;font-size:12px;color:#6c7a75;overflow-wrap:anywhere}
.blog-form>.btn{margin-top:13px}
.blog-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 14px}
.blog-actions .btn,.blog-actions a.btn{flex:0 0 auto}
.blog-actions-sub{margin-top:14px;padding-top:12px;border-top:1px solid #e6ece8}
.blog-actions-sub form{margin:0}
.blog-publish-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 320px}
.blog-publish-form input{flex:1 1 220px;min-width:0}
.blog-table-wrap{overflow:auto;border:1px solid #dce5df;border-radius:10px;background:#fff}
.blog-table{width:100%;border-collapse:collapse;font-size:13px}
.blog-table th,.blog-table td{padding:10px;border-bottom:1px solid #e9eeeb;text-align:left;vertical-align:top}
.blog-table th{background:#eef4f1;color:#435b59;white-space:nowrap}
.blog-table td small{display:block;margin-top:4px;color:#71807c;overflow-wrap:anywhere}
.blog-title-link{color:#2e6f78;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.blog-title-link:hover{text-decoration:underline}
.blog-row-actions{white-space:nowrap}
.blog-row-actions form{display:inline-block;margin:0 0 0 4px}
.blog-row-done{background:#f7fbf8}
.blog-row-current{background:#f0f7f3;box-shadow:inset 3px 0 0 #477867}
.blog-badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.blog-badge.draft{background:#eef1f0;color:#5b6b66}
.blog-badge.done{background:#e2f1e7;color:#2f6146}
.blog-empty{color:#74817c;padding:18px!important;text-align:center}
.blog-photo-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:6px 0 4px}
.blog-photo-pick{position:relative;display:block;padding:6px;border:1px solid #dce5df;border-radius:10px;background:#fbfdfc;cursor:pointer}
.blog-photo-pick.is-checked{border-color:#477867;background:#f1f8f3;box-shadow:0 0 0 1px #477867 inset}
.blog-photo-pick input{position:absolute;top:8px;left:8px;width:18px;height:18px;margin:0}
.blog-photo-pick img{display:block;width:100%;height:88px;object-fit:cover;border-radius:6px;background:#eef1f0}
.blog-photo-pick-no{display:block;margin-top:5px;font-size:11px;font-weight:800;color:#3d5650;text-align:center}
.blog-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:12px}
.blog-photo{margin:0;padding:10px;border:1px solid #dce5df;border-radius:10px;background:#fff}
.blog-photo img{display:block;width:100%;height:140px;object-fit:cover;border-radius:7px;background:#eef1f0}
.blog-photo figcaption{margin-top:8px;font-size:12px;color:#5d6b66;overflow-wrap:anywhere}
.blog-photo figcaption small{display:block;margin-top:3px;color:#82908b}
.blog-photo-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.blog-photo-actions .btn{padding:8px 10px;font-size:12px}
.blog-caption-form,.blog-photo figcaption>form{margin:6px 0 0}
.blog-caption-form{display:flex;gap:5px}.blog-caption-form input{font-size:12px;min-height:34px}
.blog-caption-form .btn{padding:8px 10px;font-size:12px;flex:0 0 auto}
.blog-preview{margin:14px 0 0;padding:12px 14px;border:1px solid #e2e8e4;border-radius:10px;background:#fbfcfb}
.blog-preview>summary{cursor:pointer;font-weight:700;color:#3d5650;font-size:13px}
.blog-preview>summary small{margin-left:6px;font-weight:500;color:#7b8781}
.blog-preview-body{margin:10px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:13px;line-height:1.75;color:#3a4a46}
.blog-photo-slot{display:inline-block;margin:2px 0;padding:2px 6px;border:1px dashed #b9cfc4;border-radius:5px;background:#f0f8f3;color:#2f6146;font-weight:700;font-size:12px}
.blog-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;max-width:92vw;padding:12px 16px;border-radius:10px;background:#22323a;color:#fff;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.blog-upload{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.blog-upload .blog-field{flex:1 1 320px}
.blog-upload>.btn{margin:0}

/* =====================================================================
   주문·견적 상담 댓글 (Thread)
   ---------------------------------------------------------------------
   고객/관리자 공통 말풍선 + 첨부 카드 그리드
   ===================================================================== */
.thread{margin:20px 0 0;padding:0}
.thread-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.thread-head h2{margin:0;font-size:16px;font-weight:700;color:var(--navy)}
.thread-count{font-size:13px;font-weight:700;color:#3f7565;background:#eef5f0;padding:1px 7px;border-radius:999px}
.thread-note{margin:4px 0 0;font-size:12px;color:#7b8781}
.thread-list{display:flex;flex-direction:column;gap:10px;max-height:50vh;overflow-y:auto;padding-right:4px}
.thread-list::-webkit-scrollbar{width:6px}
.thread-list::-webkit-scrollbar-thumb{background:#b9cfc4;border-radius:3px}

/* 말풍선 */
.bubble{display:flex;gap:8px;animation:bubbleIn .15s ease-out}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bubble{animation:none}}
.bubble-avatar{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#3f7565;color:#fff;font-family:inherit;font-size:11px;font-weight:600;line-height:28px;text-align:center;box-shadow:0 2px 6px rgba(60,120,90,.25)}
.from-customer .bubble-avatar{background:#e8bc68}
.from-admin .bubble-avatar{background:#3f7565}
.bubble-main{flex:1;min-width:0}
.bubble-meta{display:flex;align-items:center;gap:8px;margin-bottom:2px;font-size:12px}
.bubble-name{font-weight:700;color:var(--ink)}
.bubble-time{color:#9aa8a3;white-space:nowrap}
.bubble-body{font-size:13px;line-height:1.65;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}

/* 첨부 그리드 */
.attach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:8px}
.attach-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;color:inherit;transition:transform .1s,box-shadow .1s,border-color .1s}
.attach-item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(38,55,70,.12);border-color:#3f7565;z-index:1}
.attach-image{overflow:hidden}
.attach-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#f5f7f6}
.attach-doc{flex-direction:row;align-items:center;text-align:left;padding:6px 10px;gap:8px;min-width:0}
.attach-icon{flex:0 0 22px;width:22px;height:22px;color:#b9cfc4}
.attach-text{display:flex;flex-direction:column;min-width:0}
.attach-name{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attach-size{font-size:11px;color:#9aa8a3}

/* 첨부 구역 (접수 첨부/관리자 답변 첨부/상담 첨부) */
.attach-section{margin:18px 0 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fafbfa}
.attach-section h3{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.attach-count{font-size:12px;font-weight:700;color:#3f7565;background:#eef5f0;padding:1px 7px;border-radius:999px}

/* 폼 */
.thread-form{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.thread-compose{display:flex;gap:8px;margin-bottom:10px}
.thread-compose textarea{flex:1 1 0%;min-width:0;width:auto;min-height:44px;max-height:120px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;resize:vertical;line-height:1.5}
.thread-compose textarea:focus{outline:none;border-color:#3f7565;box-shadow:0 0 0 3px rgba(60,120,90,.12)}
/* [주의] pico css 의 "button[type=submit]{width:100%}" 보다 specificity 가 높아야 한다.
   (그대로 두면 보내기 버튼이 화면 전체 폭으로 퍼진다) */
.thread-compose .thread-send{flex:0 0 auto;width:auto;padding:0 18px;height:44px;border:none;border-radius:10px;background:#3f7565;color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;transition:background .1s,transform .05s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.thread-send-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.thread-send:hover{background:#3d8a6a}
.thread-send:active{transform:scale(.98)}
.thread-send:disabled{opacity:.6;cursor:not-allowed;transform:none}
.thread-filebox{margin-top:6px}
.thread-status{display:block;margin-top:6px;font-size:12px;color:#c04}
.thread-empty{margin:auto;padding:24px;color:#7b8781;font-size:13px;text-align:center}

/* 관리자 대시보드 미확인 댓글 배지 */
.badge.hot{background:#fee;color:#c04;border:1px solid #fcc;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:700;vertical-align:middle}

@media(max-width:760px){
  .blog-head{align-items:flex-start;flex-direction:column}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-table{min-width:560px}
  .blog-actions .btn,.blog-actions a.btn{min-height:44px;padding:12px 14px;font-size:14px}
  .blog-photo-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media(max-width:440px){
  .blog-grid{grid-template-columns:1fr}
  .blog-photo-grid{grid-template-columns:1fr}
  .blog-actions .btn,.blog-actions a.btn{flex:1 1 100%;text-align:center;justify-content:center}
  .blog-photo-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =====================================================================
   일괄입력 그리드 공통 (견적서 일괄등록 · 주문 견적등록 · 배달 · 세금계산서)
   - .bulkgrid    : 행 추가/삭제 (rowtools · rowdel · rowact 칸)
   - .grid-input  : 배달·세금계산서 입력표(input/select 모양)
   ===================================================================== */
.rowtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.rowtools button{margin:0}
.rowtools .rowadd{min-height:38px;padding:8px 14px;font-size:13px}
.rowtools .rowsave,.rowtools .rowprint{min-height:38px;padding:8px 14px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
/* 견적서 저장·인쇄: 아이콘(문서+체크 / 프린터)과 색상을 따로 지정 */
.rowtools .rowsave{background:#2456a6!important;border:1px solid #2456a6!important;color:#fff!important;box-shadow:none!important}
.rowtools .rowsave:hover{background:#1d4789!important;border-color:#1d4789!important}
.rowtools .rowsave:active{transform:scale(.98)}
.rowtools .rowprint{background:#b05a1f!important;border:1px solid #b05a1f!important;color:#fff!important;box-shadow:none!important}
.rowtools .rowprint:hover{background:#974b17!important;border-color:#974b17!important}
.rowtools .rowprint:active{transform:scale(.98)}
.rowtools .rowsave .button-icon,.rowtools .rowprint .button-icon{flex:0 0 15px;width:15px;height:15px;stroke-width:1.9}
.rowtools .rowtools-right{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.rowtools .rowtools-right > button{min-height:38px;padding:8px 14px;font-size:13px}
.rowtools .grid-count{color:#5b6a66;font-size:13px;font-weight:700}
.bulkgrid td.rowact,.bulkgrid th.rowact{width:46px;min-width:46px;padding:4px;text-align:center}
.rowdel{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:auto;min-width:30px;height:30px;min-height:30px;margin:0;padding:0 6px;line-height:1;border:1px solid #e2c6cc;border-radius:8px;background:#fff;color:#c4576b;font-size:17px;font-weight:800;cursor:pointer}
.rowdel:hover{background:#fdecf1;border-color:#d79fab}
.grid-input{width:100%;border-collapse:collapse;font-size:13px}
.grid-input th,.grid-input td{padding:6px;border-bottom:1px solid #e9eeeb;text-align:left;vertical-align:middle}
.grid-input th{background:#eef4f1;color:#435b59;white-space:nowrap;font-size:12px}
.grid-input input,.grid-input select,.grid-input textarea{box-sizing:border-box;width:100%;min-width:110px;min-height:34px;padding:6px 8px;border:1px solid #d5dfda;border-radius:7px;background:#fff;color:#29383d;font:inherit;font-size:13px}
/* 행 높이를 견적서 일괄등록(.qin td{padding:4px} · .qin input/select{height:30px;padding:4px 6px})과 동일하게.
   margin:0 이 없으면 pico 기본 규칙(input/select{ margin-bottom:var(--pico-spacing) } = 21px)이 남아
   셀마다 21px씩 더 높아진다(.qin 은 원래 margin:0 이 있어 견적서만 정상이었다). */
.grid-input td{padding:4px}
.grid-input input,.grid-input select{height:30px;min-height:30px;padding:4px 6px;margin:0}
.grid-input textarea{margin:0}
.grid-input input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.grid-input input[readonly]{background:#f2f5f3;color:#64726d}
.grid-input td.num{text-align:right;font-variant-numeric:tabular-nums}
.delivery-table.grid-input{min-width:1560px}
.tax-table.grid-input{min-width:2280px}
.grid-input .rowact{width:46px}
@media(max-width:700px){
  .rowtools .rowadd{min-height:40px}
}

/* 2026-10-21 track CTA alignment and colors */
.track-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0 18px}
.track-actions-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.track-actions .btn-track-primary{background:linear-gradient(135deg,#2456a6,#163263)!important;border:1px solid #1e4487!important;color:#fff!important;box-shadow:0 8px 20px -8px #2456a666}
.track-actions .btn-track-primary:hover{background:linear-gradient(135deg,#1e4a8f,#0f2a52)!important;border-color:#173b73!important;filter:none}
.track-actions .btn-directpay{background:linear-gradient(135deg,#f2620f,#c94e08);border:1px solid #d95408;color:#fff!important;box-shadow:0 8px 20px -8px #f2620f66}
.track-actions .btn-directpay:hover{background:linear-gradient(135deg,#dd4f06,#b53d09);border-color:#c24a06;filter:none}
@media(max-width:640px){
  .track-actions-right{margin-left:0;width:100%}
  .track-actions-right .btn{flex:1 1 0;justify-content:center;padding-left:10px;padding-right:10px}
}

/* 2026-10-21 admin status form */
.status-form{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:10px 12px}
.status-form select{width:auto;min-width:160px;margin:0;padding:8px 10px;font-size:14px}
.status-form .btn-status{margin:0;padding:9px 18px;border-radius:8px;background:#bd8a3e!important;color:#fff;border:1px solid #bd8a3e!important;font-size:14px;font-weight:700;box-shadow:0 5px 14px #bd8a3e33}
.status-form .btn-status:hover{background:#a9782f!important;border-color:#a9782f!important;filter:none}
/* ===== 견적문의 상태 바 (h1 바로 아래) ===== */
.order-status{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f8fbf9}
.order-status:focus-visible{outline:2px solid #315e4a;outline-offset:2px}
.order-status-info{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 320px}
.order-status-info .badge{flex:0 0 auto;margin:0}
.order-status-info>div{min-width:0}
.order-status-info b{display:block;color:var(--navy);font-size:14px;line-height:1.4}
.order-status-info p{margin:2px 0 0;color:#4b5d54;font-size:12px;line-height:1.55}
.order-status-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.order-status-form{display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;border:0;background:none;box-shadow:none}
.admin-order-detail .order-status-btn{width:auto;min-height:40px;margin:0;padding:0 14px;border:1px solid #c9dcd1;border-radius:9px;background:#fff;color:#315e4a;font:inherit;font-size:13px;font-weight:800;line-height:1.2;cursor:pointer;box-sizing:border-box;box-shadow:none}
.admin-order-detail .order-status-btn:hover{background:#f1f8f3;border-color:#8fb3a0;color:#315e4a}
.admin-order-detail .order-status-btn.primary{background:#315e4a;border-color:#315e4a;color:#fff}
.admin-order-detail .order-status-btn.primary:hover{background:#274d3d;border-color:#274d3d;color:#fff}
.admin-order-detail .order-status-btn:focus-visible{outline:2px solid #315e4a;outline-offset:2px}
.order-status-help{margin:0;color:#4b5d54;font-size:12px;line-height:1.55}
.thread-locked{margin-top:14px;padding:11px 14px;border:1px dashed #cfd9d5;border-radius:9px;background:#f7faf8;color:#64726d}

/* 2026-10-21 견적문의 답변 작성: 내용 오른쪽에 답변완료·삭제 버튼 (카드 안쪽) */
.answer-layout{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.answer-layout #answerform{flex:1 1 420px;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none}
.answer-actions{display:flex;flex-direction:column;gap:8px;flex:0 0 150px;padding-top:39px}
.answer-actions button{width:100%;margin:0}
@media(max-width:640px){
  .answer-actions{flex:1 1 100%;flex-direction:row;padding-top:0}
}

/* =====================================================================
   2026-10-21 관리자 주문·견적문의 상세 모바일
   - 상세 화면에만 적용 (.admin-order-detail)
   - 견적 그리드는 카드 안에서 가로 스크롤, 첫 열 고정
   ===================================================================== */
.order-grid-hint{display:none}
/* 주문·견적문의 상세: 고객이 쓴 여러 줄 내용을 줄바꿈 그대로 보여준다.
   (예전에는 HTML 이 개행을 공백으로 합쳐 한 줄로 보였다) */
.admin-order-detail .card .order-memo{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.75;font-size:15px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:760px){
  .admin-order-detail h1{margin:2px 0 16px;font-size:22px;line-height:1.3}
  .admin-order-detail h3{margin:24px 0 8px;font-size:17px;line-height:1.4}
  .admin-order-detail h3:first-of-type{margin-top:18px}
  .admin-order-detail h3 small{display:block;margin-top:3px;font-size:12px;font-weight:500;color:var(--muted)}
  .admin-order-detail p{line-height:1.7}
  .admin-order-detail .card{padding:14px;border-radius:12px}
  .admin-order-detail .card p{margin:0 0 8px;font-size:14px}
  .admin-order-detail .card p:last-child{margin-bottom:0}
  .admin-order-detail .notice{margin:12px 0;padding:12px 14px;font-size:13px;line-height:1.6}

  /* 견적서 등록 */
  .admin-order-detail .quote-entry-form{padding:12px;border-radius:14px}
  .order-grid-hint{display:flex;align-items:center;gap:6px;margin:0 0 9px;padding:8px 10px;border-radius:8px;background:#f1f7f3;color:#3f6f5c;font-size:12px;font-weight:700;line-height:1.45}
  .order-grid-hint span{font-size:15px;line-height:1}
  .admin-order-detail .qwrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;box-shadow:inset -16px 0 14px -16px #0f2a5233,0 6px 20px #28362b08}
  .admin-order-detail .qtable{border:0;box-shadow:none;border-radius:0;border-collapse:separate;border-spacing:0;overflow:visible}
  .admin-order-detail .qtable th,.admin-order-detail .qtable td{padding:7px 8px}
  .admin-order-detail .qtable th:first-child,
  .admin-order-detail .qtable td:first-child{position:sticky;left:0;z-index:3;width:110px;min-width:110px;padding-left:5px;padding-right:5px;background:#fff}
  .admin-order-detail .qtable th:first-child{background:var(--sky);z-index:5}
  .admin-order-detail .qtable td:first-child{box-shadow:6px 0 6px -6px #26374626}
  .admin-order-detail .qin input[type=date]{width:100%;min-width:0;font-size:14px;padding-left:4px;padding-right:4px}
  .admin-order-detail .qin input,.admin-order-detail .qin select{min-height:36px;font-size:15px}
  .admin-order-detail .rowtools{gap:6px;margin:0 0 10px}
  .admin-order-detail .rowtools .rowadd{min-height:42px;padding:8px 12px}
  .admin-order-detail .rowtools .rowtools-right{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-left:0}
  .admin-order-detail .rowtools .rowtools-right > button{width:100%;min-height:42px;padding:8px 6px;font-size:13px}
  .admin-order-detail .rowtools .grid-count{margin-right:auto}

  /* 상태 변경 */
  .admin-order-detail .status-form{display:flex;width:100%;box-sizing:border-box;padding:10px;gap:8px}
  .admin-order-detail .status-form select{flex:1 1 auto;width:auto;min-width:0;font-size:16px}
  .admin-order-detail .status-form .btn-status{flex:0 0 auto;min-height:44px;padding:9px 18px;font-size:15px}

  /* 견적문의 상태 바 */
  .admin-order-detail .order-status{flex-direction:column;align-items:stretch;padding:11px 12px}
  .admin-order-detail .order-status-info{flex:1 1 auto}
  .admin-order-detail .order-status-actions{width:100%;margin-left:0}
  .admin-order-detail .order-status-form{width:100%}
  .admin-order-detail .order-status-btn{width:100%;min-height:44px;padding:9px 14px;font-size:14px}

  /* 답변 작성 */
  .admin-order-detail .answer-layout{gap:12px;padding:14px;border-radius:12px}
  .admin-order-detail .answer-layout label{margin-top:0}
  .admin-order-detail .answer-layout label + label{margin-top:2px}
  .admin-order-detail .answer-actions button{min-height:46px;font-size:15px}

  /* 상담·댓글: 모바일에서는 안쪽 스크롤 대신 페이지 스크롤 */
  .admin-order-detail .thread{margin-top:24px}
  .admin-order-detail .thread-list{max-height:none;overflow:visible;padding-right:0;gap:12px}
  .admin-order-detail .bubble{gap:9px}
  .admin-order-detail .bubble-body{font-size:14px;line-height:1.7}
  .admin-order-detail .bubble-meta{font-size:12px}
  .admin-order-detail .thread-compose{gap:7px}
  .admin-order-detail .thread-compose .thread-send{height:46px;padding:0 12px;font-size:13px}
  .admin-order-detail .thread-compose textarea{min-height:46px;font-size:16px}
  .admin-order-detail .attach-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}

  /* iOS 입력 확대 방지 */
  .admin-order-detail input:not([type=checkbox]):not([type=file]),
  .admin-order-detail select,
  .admin-order-detail textarea{font-size:16px}
}

/* =====================================================================
   [2026-10-21] 홈 모바일 전용 다듬기
   ---------------------------------------------------------------------
   데스크톱·관리자 화면은 건드리지 않는다. 560px 이하에서만 적용.
   - 상단바: 2줄 145px → 브랜드 1줄 + 3칸 내비 1줄(약 101px)
   - 히어로: 주문 버튼을 한 줄 전체로, 나머지 2개는 반반 배치
   - 진행 3단계: 카드 3장 → 한 장 안의 번호 목록
   - 현황판: 행 높이를 줄여 한 화면에 더 많이 보이게
   - 신뢰 3항목: 카드 3장 → 한 장 안의 구분선 목록
   - 우하단 상담 버튼: 조금 작게 줄여 현황판을 덜 가리게
   ===================================================================== */
@media(max-width:560px){
  /* 상단바 — 브랜드 줄과 내비 줄을 붙여 높이를 줄인다 */
  body.home .topbar{padding:0}
  body.home .topbar .wrap{display:block;padding:8px 14px 9px}
  body.home .brand{display:flex;width:fit-content;gap:7px}
  body.home .brand-mark{flex-basis:32px;width:32px;height:32px}
  body.home .brand-name{font-size:21px}
  body.home .brand small{margin-top:2px;font-size:9px}
  body.home .topbar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
    margin:7px 0 0;padding:0;overflow:visible;flex-wrap:nowrap;justify-content:stretch}
  body.home .topbar nav a.top-public{justify-content:center;gap:5px;min-width:0;min-height:40px;padding:7px 4px;
    border:1px solid #e3ebe7;border-radius:9px;background:#f7faf8;color:#3d5350;font-size:12.5px}
  body.home .topbar nav a.top-public svg{flex-basis:16px;width:16px;height:16px}
  body.home .topbar nav a.top-public[href="/order/new"]{border-color:#d5e6dc;background:#f0f7f3;color:#2e644c}

  /* 히어로 — 1차 행동(주문)을 크게, 보조 행동은 2열로 */
  .hero-v3{padding:24px 20px 22px;margin-bottom:14px;border-radius:18px}
  .hero-eyebrow{margin-bottom:12px;padding:5px 10px;font-size:11.5px}
  .hero-v3 .hero-sub{margin-top:12px;font-size:14px;line-height:1.62}
  .hero-v3 .cta-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:20px}
  .hero-v3 .cta-row .btn{display:flex;align-items:center;justify-content:center;min-height:44px;
    padding:11px 8px;border-radius:10px;font-size:14px;text-align:center;white-space:nowrap}
  .hero-v3 .cta-row .btn.order{grid-column:1/-1}
  .hero-chips{gap:6px;margin-top:14px}
  .hero-chips li{padding:6px 9px;border-radius:8px;font-size:11.5px}
  .hero-stage{height:170px;margin-top:8px}

  /* 진행 3단계 — 한 장의 카드 안에서 번호와 설명을 나란히 */
  .process-v3{display:block;margin-top:14px;padding:2px 16px;border:1px solid var(--line);
    border-radius:18px;background:#fff;box-shadow:var(--sh-1)}
  .pstep{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;align-items:center;
    padding:13px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;
    background:transparent;box-shadow:none;overflow:visible}
  .pstep:last-child{border-bottom:0}
  .pstep b{grid-row:1/3;width:30px;height:30px;margin:0;border-radius:50%;font-size:12.5px}
  .pstep strong{font-size:15px;line-height:1.3}
  .pstep span{margin-top:2px;font-size:12.5px;line-height:1.45}
  .pstep:hover{transform:none;box-shadow:none}
  .pstep::after{display:none}

  /* 현황판 — 행 높이를 줄여 스크롤 부담을 덜어준다 */
  .board-v3{gap:12px;margin-top:14px}
  .board-v3 section{padding:14px 16px;border-radius:18px}
  .board-v3 h3{margin-bottom:4px;font-size:14.5px}
  .board-v3 .brow{gap:6px;padding:8px 0;font-size:12.5px}
  .board-v3 .brow .bt{font-size:12.5px;line-height:1.45}
  .board-v3 .brow .bd{font-size:11px}
  .board-v3 .pill{min-width:58px;padding:4px 7px;font-size:10.5px}

  /* 신뢰 3항목 — 한 장의 카드 안에서 구분선 목록으로 */
  .trust-v3{display:block;margin-top:12px;padding:2px 16px;border:1px solid var(--line);
    border-radius:18px;background:#fff;box-shadow:var(--sh-1)}
  .trust-v3 div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;
    padding:13px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;
    background:transparent;box-shadow:none}
  .trust-v3 div:last-child{border-bottom:0}
  .trust-v3 b{font-size:14px;line-height:1.3}
  .trust-v3 span{margin:0;font-size:12.5px;line-height:1.5}
  .trust-v3 div:hover{transform:none;box-shadow:none}
  .trust-v3 div::after{display:none}

  /* 우하단 상담 버튼 — 현황판·배지를 덜 가리도록 아이콘 버튼으로 */
  body.home .customer-chat-widget{right:14px;bottom:14px}
  body.home .customer-chat-toggle{justify-content:center;width:54px;height:54px;min-height:54px;padding:0;gap:0;
    border-radius:50%;letter-spacing:0;box-shadow:0 8px 22px #173f4740}
  body.home .customer-chat-toggle span{display:none}
  body.home .customer-chat-toggle svg{width:23px;height:23px}
  body.home .customer-chat-panel{right:0;bottom:66px;width:calc(100vw - 28px);height:min(520px,calc(100vh - 90px))}
}

/* =====================================================================
   [2026-10-21] 공개 고객 페이지 디자인 정리
   ---------------------------------------------------------------------
   공개 페이지(body.public)만 대상. 관리자 화면은 건드리지 않는다.
   - 견적문의·주문하기: page hero + 카드형 2열 폼 + 하단 접수바
   - 진행조회: 조회 카드 + 상세 타임라인 + 가로 스크롤 표
   - 유의사항: 2열 카드형 목록
   - 접수 완료: 요약 카드 + 진행 단계 + 다음 행동
   - 모바일: 홈과 같은 101px 3칸 상단바, 상담 버튼 54px
   ===================================================================== */
body.public main{max-width:1080px}
body.public .topbar{padding:0}
body.public .topbar nav a.top-public.is-active{background:#eaf3ee;color:#315e4a;box-shadow:inset 0 0 0 1px #d8e6de}
body.public .topbar nav a.top-public.is-active svg{stroke:#315e4a}
body.public footer{margin-top:36px}

/* ---------- 페이지 대표 영역 ---------- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;margin:0 0 22px;padding:clamp(26px,4vw,44px);border:1px solid #e7ece7;border-radius:8px 32px 8px 32px;background:linear-gradient(120deg,#f1f7f3 0%,#fbfcf9 50%,#fff8ec 100%);box-shadow:0 16px 40px #2637460b}
.page-hero::after{content:"";position:absolute;z-index:-1;right:-90px;top:-150px;width:360px;height:360px;border:1px solid #b6935c24;border-radius:50%;box-shadow:0 0 0 38px #b6935c0b,0 0 0 78px #b6935c07}
.page-kicker{margin:0 0 4px;color:#3f7565;font-size:11px;font-weight:850;letter-spacing:.14em;line-height:1.4;text-transform:uppercase}
.page-hero h1{margin:5px 0 10px;max-width:780px;color:var(--navy);font-size:clamp(27px,3.6vw,40px);font-weight:760;letter-spacing:-.055em;line-height:1.18}
.page-lead{max-width:740px;margin:0;color:#62716d;font-size:clamp(14px,1.5vw,16px);line-height:1.75}
.page-chips{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0;list-style:none}
.page-chips li{display:inline-flex;align-items:center;list-style:none;padding:6px 10px;border:1px solid #dfe9e2;border-radius:999px;background:#ffffffb8;color:#4f6e5e;font-size:12px;font-weight:700;line-height:1.4}
.page-footnote{margin:22px 0 0;color:#7b8781;font-size:12.5px;line-height:1.75;text-align:center}
.page-footnote a{display:inline!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:#3f7565!important;font-weight:700;text-decoration:underline;text-underline-offset:2px;box-shadow:none!important}
.page-footnote a:hover{background:none!important;color:#294f41!important}
.page-footnote a svg{display:none!important}

/* ---------- 2열 본문 + 도움말 카드 ---------- */
.page-grid,.lookup-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}
.page-main{min-width:0}
.page-aside{position:sticky;top:92px;display:grid;gap:14px;min-width:0}
.help-card{padding:22px 22px 18px;border:1px solid #e7ece7;border-radius:6px 22px 6px 22px;background:linear-gradient(160deg,#fff 0%,#f7fbf8 100%);box-shadow:0 10px 30px #2637460b}
.help-card h2{margin:4px 0 10px;font-size:19px;letter-spacing:-.035em}
.help-card>p:not(.page-kicker){margin:0 0 16px;color:#66736e;font-size:13.5px;line-height:1.7}
.help-list{display:grid;gap:0;margin:0 0 16px;border-top:1px solid #e8eeea}
.help-list div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e8eeea;font-size:12.5px;line-height:1.55}
.help-list b{flex:0 0 auto;color:#3f7565;font-weight:750}
.help-list span{color:#6c7873;text-align:right}
.help-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid #e8eeea;color:#3f7565!important;font-size:12.5px;text-decoration:none}
.help-link b{color:var(--navy);font-size:13px;transition:color .15s ease}
.help-link::after{content:"›";color:#9db3a7;font-size:18px;line-height:1}
.help-link:hover b{color:#315e4a}
.help-link:hover::after{color:#3f7565}

/* ---------- 작성 순서 ---------- */
.howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px}
.howto div{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;flex:none;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;box-shadow:0 5px 16px #28362b07}
.howto b{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#eef5f0;color:#3f7565;font-size:13px;font-weight:850;line-height:1}
.howto strong{color:var(--navy);font-size:14px;font-weight:750;line-height:1.35}
.howto span{color:#7b8781;font-size:12px;line-height:1.45}

/* ---------- 공개 폼 ---------- */
.public-form{overflow:visible;margin:0;padding:0;border:1px solid var(--line);border-radius:6px 24px 6px 24px;background:#fff;box-shadow:0 12px 34px #2637460b}
.form-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:24px 28px 20px;border-bottom:1px solid #edf0ec;border-radius:5px 23px 0 0;background:linear-gradient(180deg,#fbfcfb,#fff)}
.form-head h2{margin:4px 0 0;font-size:21px;letter-spacing:-.04em}
.form-required{flex:0 0 auto;color:#7b8781;font-size:12px;font-weight:600;white-space:nowrap}
.form-required i{color:#ad5f4d;font-style:normal;font-weight:850}
.form-section{padding:22px 28px 24px;border-top:1px solid #eef1ee}
.form-head+.form-section{border-top:0}
.form-section-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.form-section-head h3{margin:0;font-size:16px;color:var(--navy);letter-spacing:-.03em}
.form-section-head p{margin:0;color:#7b8781;font-size:12.5px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.field-grid>*{min-width:0}
label.field{display:flex;flex-direction:column;gap:6px;margin:0;color:#414b4f;font-size:13px;font-weight:650}
.field.full{grid-column:1/-1}
.field-label{display:flex;align-items:center;flex-wrap:wrap;gap:0 5px;min-height:20px;line-height:1.5}
.field-label small{flex:0 0 auto;margin-left:auto;color:#8a9691;font-size:11.5px;font-weight:500;line-height:1.4;white-space:nowrap}
.field input:not([type=checkbox]):not([type=radio]),.field textarea,.field select{width:100%;min-width:0;margin:0;padding:12px 13px;border:1px solid #dfe3e1;border-radius:9px;background:#fff;color:var(--ink);font-size:15px;line-height:1.4;box-shadow:none}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid #4d7b8a1f;border-color:#5d8a7c}
.field-hint{display:block;margin-top:1px;padding-right:2px;color:#8a9691;font-size:11.5px;font-weight:500;line-height:1.55;overflow-wrap:anywhere;word-break:break-word}
.field-hint a{color:#3f7565;font-weight:700}
/* 전시부스 선택 시 보여주는 부스 유형 이미지 */
.booth-preview[hidden]{display:none}
.booth-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:2px}
.booth-preview-card{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;border:1px solid #dfe3e1;border-radius:12px;background:#fff;text-align:left;cursor:zoom-in;transition:border-color .15s,box-shadow .15s}
.booth-preview-card:hover,.booth-preview-card:focus,.booth-preview-card:focus-visible,.booth-preview-card:active{background:#fff;color:inherit;border-color:#8fb3a0;box-shadow:0 8px 22px #26374614;outline:none;filter:none}
.booth-preview-card img{display:block;width:100%;height:210px;object-fit:contain;background:#f7f4ee;padding:6px;box-sizing:border-box}
.booth-preview-card span{display:block;padding:0 12px 12px;color:#6b7a73;font-size:12px;line-height:1.5}
.booth-preview-card b{display:block;margin-bottom:1px;color:#233b33;font-size:13px;font-weight:800}
.booth-preview-card span small{display:block;margin-top:6px;color:#8a9691;font-size:11.5px}
.booth-preview-card.is-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,320px) 1fr;align-items:center}
.booth-preview-card.is-wide img{height:300px;padding:8px}
.booth-preview-card.is-wide span{padding:0 22px 0 8px;font-size:12.5px}
.booth-dialog{width:min(1100px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);padding:0;border:0;border-radius:14px;background:#f7f4ee;box-shadow:0 24px 70px #1f3a3155;overflow:auto;box-sizing:border-box}
.booth-dialog::backdrop{background:#1f3a3166;backdrop-filter:blur(2px)}
.booth-dialog img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 64px);margin:0 auto;object-fit:contain;background:#f7f4ee}
.booth-dialog-close{position:absolute;top:10px;right:10px;z-index:3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;margin:0;padding:0;border:1px solid #dbe3df;border-radius:50%;background:#fff;color:#315e4a;font-size:0;line-height:1;cursor:pointer;box-shadow:0 4px 12px #2637461f}
.booth-dialog-close::before,.booth-dialog-close::after{content:"";position:absolute;width:16px;height:2px;border-radius:2px;background:currentColor}
.booth-dialog-close::before{transform:rotate(45deg)}
.booth-dialog-close::after{transform:rotate(-45deg)}
.booth-dialog-close:hover,.booth-dialog-close:focus-visible{background:#f1f7f3;color:#315e4a;border-color:#8fb3a0;filter:none;outline:2px solid #315e4a;outline-offset:2px}
.file-field .filebox{margin-top:1px}
.file-field .filerow{gap:8px}
div.field.full.file-field input[type=file]{display:block;height:44px;min-height:44px;padding:4px 10px;border:1px solid #dfe3e1;border-radius:9px;background:#fbfcfb;color:#6b7873;font-size:13px;font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
div.field.full.file-field input[type=file]:hover{border-color:#b9cfc3;background:#f7fbf8}
div.field.full.file-field input[type=file]::file-selector-button{appearance:none;-webkit-appearance:none;height:34px;margin:0 10px 0 0;padding:0 12px;border:0;border-radius:7px;background:#eef5f0;color:#315e4a;font-family:inherit;font-size:12.5px;font-weight:750;line-height:34px;cursor:pointer}
div.field.full.file-field input[type=file]::file-selector-button:hover{background:#e2efe8}
.file-field .addbtn{flex:0 0 44px;width:44px;height:44px;min-height:44px;border-radius:9px;background:#3f7565;font-size:21px}
.file-field .addbtn:hover{background:#315e4a}
.file-field .delbtn{flex:0 0 44px;width:44px;height:44px;border-radius:9px}

/* 접수 버튼: 폼 맨 아래에서 입력 내용을 확인하고 바로 접수한다. */
.public-form .stickybar{position:relative;bottom:auto;z-index:auto;display:flex;align-items:center;gap:14px;margin:0;padding:16px 28px calc(16px + env(safe-area-inset-bottom));border-top:1px solid #dbe5df;border-radius:0 0 24px 24px;background:#f8fbf9;box-shadow:0 -10px 24px #2637460a}
.sticky-copy{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0}
.sticky-copy b{color:var(--navy);font-size:15px;line-height:1.35}
.sticky-copy small{color:#7b8781;font-size:11.5px;line-height:1.45}
.public-form .stickybar button{flex:0 0 auto;width:auto!important;min-height:48px;margin:0 0 0 auto;padding:0 24px;border:0!important;border-radius:10px;background:linear-gradient(135deg,#477867,#315e4a)!important;color:#fff!important;font-size:15px;font-weight:750;white-space:nowrap;box-shadow:0 8px 20px #315e4a2e}
.public-form .stickybar button:hover{background:linear-gradient(135deg,#3d6b5b,#274d3d)!important;filter:none}

/* 답변 카드가 폼 위에 올 때 간격 */
.page-main>.answer-card{margin:0 0 16px}

/* ---------- 진행조회 ---------- */
.lookup-form{overflow:visible;padding:0}
.lookup-form .form-head{padding:22px 24px 16px}
.lookup-form .field-grid{margin:20px 24px 0}
.lookup-form .notice{margin:16px 24px 0}
.lookup-form .lookup-submit{display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 48px);min-height:48px;margin:16px 24px 0;padding:0 20px;border:0!important;border-radius:10px;background:linear-gradient(135deg,#477867,#315e4a)!important;color:#fff!important;font-size:15px;font-weight:750;text-align:center;box-shadow:0 8px 20px #315e4a2e}
.lookup-form .lookup-submit .button-icon{flex:0 0 16px;width:16px;height:16px;stroke-width:2}
.lookup-form .lookup-submit:hover{background:linear-gradient(135deg,#3d6b5b,#274d3d)!important;filter:none}
.lookup-form .field-hint{margin:10px 24px 22px}
.track-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 16px;padding:22px 26px;border:1px solid #e7ece7;border-radius:6px 22px 6px 22px;background:linear-gradient(120deg,#f5faf7,#fffaf1);box-shadow:0 10px 28px #26374609}
.track-hero h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 4px;font-size:clamp(24px,3vw,32px);letter-spacing:-.05em}
.track-sub{margin:0;color:#6d7a75;font-size:13px}
.track-back{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid #d5e2db;border-radius:9px;background:#fff;color:#3f7565!important;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.track-back:hover{border-color:#a9c3b6;background:#f5faf7}
.track-detail{max-width:980px;margin:0 auto}
.track-detail .thread,.track-detail .answer-card{margin-top:22px}
.track-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:4px 16px 4px 16px;box-shadow:0 6px 20px #28362b08}
.track-table-wrap table{min-width:620px;margin:0;box-shadow:none}
.track-detail .track-actions{margin-top:16px}

/* ---------- 유의사항 ---------- */
.notice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:notice}
.notice-list li{position:relative;counter-increment:notice;min-height:80px;padding:17px 18px 17px 60px;border:1px solid var(--line);border-radius:4px 18px 4px 18px;background:#fff;color:#4a5652;font-size:13.5px;line-height:1.7;box-shadow:0 6px 20px #28362b07}
.notice-list li::before{content:counter(notice,decimal-leading-zero);position:absolute;left:16px;top:17px;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#eef5f0;color:#3f7565;font-size:11px;font-weight:850;line-height:1}

/* ---------- 접수 완료 ---------- */
.result-shell{max-width:900px;margin:0 auto}
.result-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
.result-summary>div{padding:16px 18px;border:1px solid var(--line);border-radius:4px 16px 4px 16px;background:#fff;box-shadow:0 6px 20px #28362b07}
.result-summary span{display:block;margin-bottom:4px;color:#7b8781;font-size:11.5px;line-height:1.4}
.result-summary b{display:block;color:var(--navy);font-size:17px;letter-spacing:-.02em;line-height:1.45;overflow-wrap:anywhere}
.result-note{margin:0 0 18px;padding:14px 16px;border:1px solid #eee2c8;border-radius:3px 14px 3px 14px;background:#fff8e9;color:#655b47;font-size:13px;line-height:1.7}
.result-note p{margin:0}
.result-note p+p{margin-top:5px}
.result-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 20px;padding:0;list-style:none;counter-reset:rstep}
.result-steps li{position:relative;counter-increment:rstep;padding:13px 10px 13px 38px;border:1px solid #e2eae5;border-radius:10px;background:#f8fbf9;color:#4c5b55;font-size:12.5px;font-weight:700;line-height:1.5}
.result-steps li::before{content:counter(rstep);position:absolute;left:12px;top:50%;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#3f7565;color:#fff;font-size:10px;font-weight:850;line-height:1;transform:translateY(-50%)}
.result-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.result-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px}
.result-actions .btn.ghost{background:#fff!important;color:#315e4a!important;border:1.5px solid #a9c3b6!important;box-shadow:none!important}
.result-actions .btn.ghost:hover{background:#f4faf7!important;border-color:#7fa391!important;color:#294f41!important}
.result-actions .btn.ghost svg{stroke:currentColor!important}
.thread-filebox .filerow{gap:8px;align-items:center}
.thread-filebox input[type=file]{display:block;width:auto;height:40px;min-height:40px;margin:0;padding:3px 8px;border:1px solid #dfe3e1;border-radius:9px;background:#fbfcfb;color:#6b7873;font-size:12.5px;font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.thread-filebox input[type=file]::file-selector-button{appearance:none;-webkit-appearance:none;height:32px;margin:0 8px 0 0;padding:0 11px;border:0;border-radius:7px;background:#eef5f0;color:#315e4a;font-family:inherit;font-size:12px;font-weight:750;line-height:32px;cursor:pointer}
.thread-filebox input[type=file]::file-selector-button:hover{background:#e2efe8}
.thread-filebox .addbtn{flex:0 0 40px;width:40px;height:40px;min-height:40px;border:1px solid #315e4a;border-radius:9px;background:#3f7565;font-size:20px;box-shadow:none}
.thread-filebox .addbtn:hover{background:#315e4a}
.thread-filebox .addbtn:disabled{background:#c7d2e2;border-color:#c7d2e2;color:#fff;cursor:default}
.thread-filebox .delbtn{flex:0 0 40px;width:40px;height:40px;border-radius:9px}
.result-shell .thread{padding:18px 20px;border:1px solid var(--line);border-radius:4px 16px 4px 16px;background:#fff}
.result-shell .thread-head{margin-top:0}

/* 상담 위젯이 CTA와 겹치는 화면은 CSS에서도 한 번 더 막는다. */
body.quote .customer-chat-widget,body.order .customer-chat-widget,
body.quote-result .customer-chat-widget,body.order-result .customer-chat-widget{display:none!important}

/* 데스크톱에서 우측 하단 상담 버튼이 푸터 저작권 문구를 가리지 않게 한다. */
@media(min-width:641px){
  body.public:not(.quote):not(.order):not(.quote-result):not(.order-result) footer .footer-copy{padding-right:150px}
}

/* ---------- 태블릿: 폼·조회는 1열 ---------- */
@media(max-width:960px){
  .page-grid,.lookup-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .page-aside{position:static;grid-row:2}
  .help-card{max-width:560px}
  .track-hero{align-items:flex-start;flex-direction:column;gap:12px}
}

/* ---------- 모바일 공통 ---------- */
@media(max-width:760px){
  body.public main{padding-top:22px}
  .page-hero{padding:24px 20px 22px;border-radius:18px;margin-bottom:14px}
  .page-hero h1{font-size:26px}
  .page-hero::after{right:-140px;top:-190px}
  .page-lead{font-size:13.5px}
  .page-chips{gap:6px;margin-top:14px}
  .page-chips li{padding:5px 9px;font-size:11.5px}
  .howto div{padding:11px 12px}
  .form-head{padding:20px 18px 16px}
  .form-section{padding:18px 18px 20px}
  .public-form .stickybar{padding:13px 18px calc(13px + env(safe-area-inset-bottom))}
  .public-form .stickybar button{padding:0 18px;font-size:14px}
  .sticky-copy b{font-size:14px}
  .sticky-copy small{font-size:10.5px}
  .notice-list{grid-template-columns:1fr;gap:10px}
  .notice-list li{min-height:0;padding:15px 16px 15px 54px;font-size:13px}
  .notice-list li::before{left:14px;top:15px;width:27px;height:27px}
  .result-summary{grid-template-columns:1fr;gap:8px}
  .result-summary>div{padding:13px 16px}
  .result-steps{grid-template-columns:1fr;gap:6px}
  .result-steps li{padding:11px 12px 11px 36px}
  .result-actions .btn{flex:1 1 100%}
  .track-hero{padding:18px 20px}
  .track-actions .btn{flex:1 1 100%}
}

/* ---------- 공개 모바일 상단바: 홈과 같은 101px 3칸 ---------- */
@media(max-width:560px){
  body.public .topbar{padding:0}
  body.public .topbar .wrap{display:block;padding:8px 14px 9px}
  body.public .brand{display:flex;width:fit-content;gap:7px}
  body.public .brand-mark{flex-basis:32px;width:32px;height:32px}
  body.public .brand-name{font-size:21px}
  body.public .brand small{margin-top:2px;font-size:9px}
  body.public .topbar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:7px 0 0;padding:0;overflow:visible;flex-wrap:nowrap;justify-content:stretch}
  body.public .topbar nav a.top-public{justify-content:center;gap:5px;min-width:0;min-height:40px;padding:7px 4px;border:1px solid #e3ebe7;border-radius:9px;background:#f7faf8;color:#3d5350;font-size:12.5px}
  body.public .topbar nav a.top-public svg{flex-basis:16px;width:16px;height:16px}
  body.public.home .topbar nav a.top-public[href="/order/new"]{border-color:#d5e6dc;background:#f0f7f3;color:#2e644c}
  body.public .topbar nav a.top-public.is-active{border-color:#cfe2d7;background:#eaf4ee;color:#2e644c;box-shadow:none}

  body.public .customer-chat-widget{right:14px;bottom:14px}
  body.public .customer-chat-toggle{justify-content:center;width:54px;height:54px;min-height:54px;padding:0;gap:0;border-radius:50%;letter-spacing:0;box-shadow:0 8px 22px #173f4740}
  body.public .customer-chat-toggle span{display:none}
  body.public .customer-chat-toggle svg{width:23px;height:23px}
  body.public .customer-chat-panel{right:0;bottom:66px;width:calc(100vw - 28px);height:min(520px,calc(100vh - 90px))}

  .page-hero{padding:22px 18px 20px;border-radius:16px}
  .page-hero h1{font-size:24px}
  .page-grid,.lookup-grid{gap:14px}
  .howto{gap:6px;margin-bottom:14px}
  .howto div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;text-align:center}
  .howto b{width:24px;height:24px;border-radius:8px;font-size:11px}
  .howto strong{font-size:11.5px;line-height:1.35}
  .howto span{font-size:10px;line-height:1.35}
  .form-head{padding:18px 16px 14px}
  .form-head h2{font-size:19px}
  .form-required{font-size:11px}
  .form-section{padding:16px 16px 18px}
  .form-section-head{gap:2px 8px;margin-bottom:12px}
  .form-section-head h3{font-size:15px}
  .form-section-head p{width:100%;font-size:11.5px}
  .field-grid{grid-template-columns:1fr;gap:12px}
  .field.full{grid-column:auto}
  .field input:not([type=checkbox]):not([type=radio]),.field textarea,.field select{font-size:16px;padding:11px 12px}
  .field textarea{min-height:104px}
  .field-label small{font-size:10.5px}
  .booth-preview-grid{grid-template-columns:1fr}
  .booth-preview-card img{height:190px}
  .booth-preview-card.is-wide{grid-template-columns:1fr}
  .booth-preview-card.is-wide img{height:220px}
  .booth-preview-card.is-wide span{padding:0 12px 12px}
  .public-form .stickybar{padding:11px 16px calc(11px + env(safe-area-inset-bottom));gap:10px}
  .public-form .stickybar button{min-height:46px;padding:0 16px;font-size:13.5px;white-space:nowrap}
  .sticky-copy{gap:1px}
  .sticky-copy b{font-size:13px}
  .sticky-copy small{font-size:10px;line-height:1.35}
  .lookup-form .form-head{padding:18px 16px 14px}
  .lookup-form .field-grid{margin:16px 16px 0}
  .lookup-form .notice{margin:14px 16px 0}
  .lookup-form .lookup-submit{width:calc(100% - 32px);margin:14px 16px 0;min-height:46px;font-size:14px}
  .lookup-form .field-hint{margin:9px 16px 18px}
  .help-card{padding:18px 18px 14px;border-radius:4px 18px 4px 18px}
  .help-card h2{font-size:17px}
  .help-card>p:not(.page-kicker){font-size:12.5px}
  .help-list div,.help-link{font-size:12px}
  .track-hero{padding:16px 18px}
  .track-hero h1{font-size:23px}
  .track-sub{font-size:12px}
  .track-back{width:100%;min-height:42px}
  .track-table-wrap{overflow:visible;border-radius:0;box-shadow:none}
  .track-table-wrap table{display:block;min-width:0;border-collapse:separate;border-spacing:0;background:transparent;box-shadow:none}
  .track-table-wrap tbody{display:block}
  .track-table-wrap tr{display:block;margin:0 0 10px;padding:14px 16px;border:1px solid var(--line);border-radius:4px 16px 4px 16px;background:#fff;box-shadow:0 6px 20px #28362b07}
  .track-table-wrap tr:first-child{display:none}
  .track-table-wrap td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 0;border:0;font-size:13px;text-align:right}
  .track-table-wrap td::before{content:attr(data-label);flex:0 0 auto;color:#8a9691;font-size:11.5px;font-weight:650;text-align:left}
  .track-table-wrap td:first-child{padding:0 0 8px;margin-bottom:3px;border-bottom:1px solid #eef1ee;font-size:15px;font-weight:750;text-align:left}
  .track-table-wrap td:first-child::before{display:none}
  .track-table-wrap td:first-child a{color:var(--navy);text-decoration:none}
  .track-table-wrap td .pill{font-size:11px}
  .result-summary>div{padding:12px 14px}
  .result-summary b{font-size:15px}
  .result-note{font-size:12px;padding:12px 14px}
  .result-steps li{font-size:12px}
  .page-footnote{font-size:11.5px;text-align:left}
  .result-shell .thread{padding:14px}
  .thread-head{flex-wrap:wrap;gap:3px 8px}
  .thread-note{flex:1 1 100%;margin-top:0}
}

/* ---------- 관리자 서버현황 (/admin/server-status) ---------- */
.srv-page{display:grid;gap:14px;min-width:0}
.srv-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0}
.srv-head h1{margin:0;font-size:clamp(22px,3vw,28px)}
.srv-headmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-left:auto;color:var(--muted);font-size:12px;line-height:1.5}
.srv-badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border:1px solid transparent;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:-.01em;line-height:1.4;white-space:nowrap}
.srv-badge::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:currentColor}
.srv-badge.srv-ok{background:#e7f4ed;border-color:#c3e2d2;color:#156b4a}
.srv-badge.srv-warn{background:#fff6da;border-color:#efdba1;color:#8a6100}
.srv-badge.srv-danger{background:#fdecea;border-color:#f2c6bf;color:#a92c1c}
.srv-badge.srv-unknown{background:#eef1f5;border-color:#dde3ea;color:#5b6675}
.srv-updated b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:800}
.srv-auto{padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:var(--sky);color:var(--blue);font-size:11px;font-weight:750;white-space:nowrap}
.srv-refresh-fail{color:#a92c1c;font-weight:800}
.srv-refresh-fail[hidden],.srv-note[hidden]{display:none}
.srv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.srv-card{display:grid;gap:12px;margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:6px 18px 6px 18px;background:var(--card);box-shadow:0 8px 24px #26374608;min-width:0}
.srv-card.srv-off{border-style:dashed;background:#f7f8fa}
.srv-card.srv-stale{background:#f7f8fa;border-color:#e3e7ec}
.srv-card.srv-off .srv-val,.srv-card.srv-stale .srv-val{color:var(--muted)}
.srv-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px}
.srv-card-title{display:flex;align-items:center;gap:7px;min-width:0}
.srv-card-title h2{margin:0;font-size:17px;color:var(--navy)}
.srv-role{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:var(--sky);color:var(--blue);font-size:11px;font-weight:800;line-height:1.5;vertical-align:middle;white-space:nowrap}
.srv-note{margin:-4px 0 0;color:var(--muted);font-size:12px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.srv-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin:0}
.srv-metric{margin:0;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fbfcfa;min-width:0}
.srv-metric dt{color:var(--muted);font-size:11.5px;font-weight:750;line-height:1.4}
.srv-metric dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 6px;margin:2px 0 0;min-width:0}
.srv-metric b{color:var(--navy);font-size:19px;line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.srv-metric small{max-width:100%;overflow:hidden;color:var(--muted);font-size:11px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.srv-val.srv-warn,.srv-table td.srv-warn{color:#8a6100}
.srv-val.srv-danger,.srv-table td.srv-danger{color:#a92c1c}
.srv-val.srv-warn,.srv-val.srv-danger{font-weight:800}
.srv-alerts{margin:0;padding:12px 15px;border:1px solid var(--line);border-radius:4px 14px 4px 14px;background:var(--card)}
.srv-alerts h2{margin:0 0 5px;color:var(--muted);font-size:12.5px;letter-spacing:0}
.srv-alerts.srv-has-alert{border-color:#efdba1;background:#fffcf2}
.srv-alerts ul{display:grid;gap:4px;margin:0;padding-left:20px;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.srv-alerts li::marker{color:#a8760a}
.srv-none{margin:0;color:var(--muted);font-size:13px}
.srv-detail{min-width:0}
.srv-detail h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px}
.srv-table-wrap{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:4px 14px 4px 14px;background:var(--card)}
.srv-table{width:100%;min-width:340px;margin:0;border-collapse:collapse;font-size:13px}
.srv-table th,.srv-table td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.srv-table tr:last-child th,.srv-table tr:last-child td{border-bottom:0}
.srv-table thead th{background:#f5f8f5;color:var(--muted);font-size:11.5px;font-weight:800;white-space:nowrap}
.srv-table tbody th{width:34%;color:var(--muted);font-weight:700;white-space:nowrap}
.srv-table td{font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:anywhere}
.srv-table td.srv-warn{font-weight:800}

/* 공인 IP 스트립 (서버현황) — 기존 .srv-* 규칙은 건드리지 않고 추가만 한다 */
.srv-ip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"label line copy" "label meta copy";align-items:center;gap:4px 12px;
  margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfa;min-width:0}
.srv-ip-label{grid-area:label;color:var(--muted);font-size:11.5px;font-weight:750;line-height:1.4;white-space:nowrap}
.srv-ip-line{grid-area:line;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.srv-ip-addr{color:var(--navy);font-size:16px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.srv-ip-addr.srv-ip-long{font-size:14px;letter-spacing:-.03em}
.srv-ip-meta{grid-area:meta;color:var(--muted);font-size:11.5px;line-height:1.45;overflow-wrap:anywhere}
.srv-ip-hint{grid-column:2 / -1;margin:1px 0 0;color:var(--muted);font-size:11.5px;line-height:1.45;overflow-wrap:anywhere}
.srv-ip-badge{display:inline-flex;align-items:center;min-height:22px;padding:1px 8px;border:1px solid transparent;border-radius:999px;
  background:#e7f4ed;color:#156b4a;font-size:10.5px;font-weight:800;line-height:1.5;white-space:nowrap}
.srv-ip-copy{grid-area:copy;margin:0;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--blue);font:inherit;font-size:12.5px;font-weight:800;line-height:1.2;
  box-shadow:none;cursor:pointer;white-space:nowrap}
.srv-ip-copy:hover{background:#f1f8f3;border-color:#b9d3c5}
.srv-ip.changed{background:#fffcf2;border-color:#efdba1}
.srv-ip.changed .srv-ip-badge{background:#fbf1dc;border-color:#efdba1;color:#7a5a1f}
.srv-ip.warn{background:#fffaf0;border-color:#efdba1}
.srv-ip.warn .srv-ip-badge{background:#fff6da;border-color:#efdba1;color:#8a6100}
.srv-ip.unknown,.srv-ip.missing{background:#f7f8fa;border-style:dashed}
.srv-ip.unknown .srv-ip-badge{background:#eef1f5;border-color:#dde3ea;color:#5b6675}
.srv-ip.missing .srv-ip-addr{color:var(--muted);font-weight:700}
.srv-ip-badge[hidden],.srv-ip-meta[hidden],.srv-ip-hint[hidden],.srv-ip-copy[hidden]{display:none}
@media(max-width:760px){
  .srv-ip{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label copy" "line line" "meta meta";gap:5px 10px}
  .srv-ip-addr{font-size:15px}
  .srv-ip-addr.srv-ip-long{font-size:13px}
  .srv-ip-hint{grid-column:1 / -1}
}
@media(max-width:760px){
  .srv-headmeta{width:100%;margin-left:0;gap:6px 8px}
  .srv-grid{grid-template-columns:1fr}
  .srv-metrics{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .srv-card{padding:14px 15px}
  .srv-table{min-width:300px}
}
@media(max-width:420px){
  .srv-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srv-metric b{font-size:18px}
  .srv-table th,.srv-table td{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){
  .srv-page,.srv-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* 서버현황 안의 조작 요소는 손가락 터치 기준(44px)을 지킨다 */
.srv-page a,.srv-page button{min-height:44px}
/* 담당지점 색 — 화면 전용. red/pink 대역(330~20°)은 qneed·선택행과 충돌하므로 비움 */
.qsite-c0{--qsite-bg:#f4f6f5;--qsite-fg:#5b6763}
.qsite-c1{--qsite-bg:#f5ede5;--qsite-fg:#5e3e1e}
.qsite-c2{--qsite-bg:#f6f8e2;--qsite-fg:#616820}
.qsite-c3{--qsite-bg:#eaf5e5;--qsite-fg:#3c6627}
.qsite-c4{--qsite-bg:#e5f5ea;--qsite-fg:#225a35}
.qsite-c5{--qsite-bg:#e6f3f4;--qsite-fg:#24646a}
.qsite-c6{--qsite-bg:#e2e7f4;--qsite-fg:#2b4080}
.qsite-c7{--qsite-bg:#efe9f7;--qsite-fg:#3c235f}
.qsite-c8{--qsite-bg:#f7e5f4;--qsite-fg:#6a2b65}
.qtable select[class*="qsite-c"]{background-color:var(--qsite-bg);color:var(--qsite-fg);-webkit-text-fill-color:var(--qsite-fg);border-color:var(--line,#dfe5ef);color-scheme:light}
.qtable select[class*="qsite-c"]:hover{background-image:linear-gradient(#00000008,#00000008)}
.qtable select[class*="qsite-c"]:focus{border-color:var(--blue);background-image:linear-gradient(#00000005,#00000005)}
.qtable tr.qsel-row td select[class*="qsite-c"]{background-color:var(--qsite-bg)}
.qtable tr.qsel-row td select.qneed{background-color:#fff5f5}
@media print{.qtable select[class*="qsite-c"]{background:#fff!important;color:#000!important;border-color:#c9cfcc!important}}
/* [보강1] qneed(담당지점 미지정)가 지점색보다 우선한다.
   위 qsite 규칙과 특이도가 같아(0,2,1) 뒤에 두어야 이긴다. 선택행은 바로 위 qsel-row 규칙이 담당. */
.qtable select.qneed{background-color:#fff5f5}
/* [보강2] 인쇄에서 글자색은 -webkit-text-fill-color 가 color 를 덮으므로 함께 검정으로 되돌린다. */
@media print{.qtable select[class*="qsite-c"]{-webkit-text-fill-color:#000!important}}

/* ===== 첨부 이미지 라이트박스 (2026-10-26) =====
   PWA(standalone)에서 이미지를 새 창으로 열면 뒤로가기가 앱을 닫는다.
   → 페이지 이동 없이 모달로 띄우고, 뒤로가기는 모달만 닫는다. */
.dg-lightbox{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:calc(58px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:rgba(8,15,26,.92);overflow:auto;overscroll-behavior:contain}
.dg-lightbox[hidden]{display:none}
.dg-lightbox-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.dg-lightbox-figure img{max-width:100%;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.dg-lightbox-cap{max-width:min(92vw,760px);color:#e8eef6;font-size:14px;line-height:1.5;text-align:center;word-break:break-all;
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.dg-lightbox.is-error .dg-lightbox-cap{color:#ffb4a8;font-weight:700}
.dg-lightbox-close{position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;cursor:pointer;z-index:2}
.dg-lightbox-close:hover,.dg-lightbox-close:focus-visible{background:rgba(255,255,255,.3);outline:2px solid #fff;outline-offset:2px}
.dg-lightbox-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dg-lightbox-download{position:relative;color:#cfe0ff;font-size:14px;font-weight:700;text-decoration:underline;
  text-underline-offset:3px;padding:6px 4px}
.dg-lightbox-download:hover,.dg-lightbox-download:focus-visible{color:#fff}
body.dg-lightbox-open{overflow:hidden}
@media (max-width:600px){
  .dg-lightbox-figure img{max-height:82vh}
}

/* ===== 답변 문자 발송 결과·템플릿 편집 (2026-10-26) =====
   주문 상세의 답변 배지와 /admin/push 의 뿌리오 템플릿 textarea.
   기존 .badge/.notice 와 충돌하지 않도록 sms-/answer-/tpl- 접두사만 쓴다. */
.sms-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:800;line-height:1.5;white-space:nowrap;vertical-align:middle}
.sms-badge.ok{background:var(--sms-ok-bg,#eaf4ee);color:var(--sms-ok,#246b4b)}
.sms-badge.fail{background:var(--sms-fail-bg,#fbeeea);color:var(--sms-fail,#9e3b2b)}
.sms-badge.skip{background:var(--sms-skip-bg,#fbf6ea);color:var(--sms-skip,#6f5b2c)}
.sms-reason{display:inline-block;margin-left:6px;color:var(--muted,#5f6e69);font-size:12px;line-height:1.5;word-break:break-all}
.sms-flash{margin:12px 0;padding:11px 14px;border-radius:10px;font-size:14px;font-weight:700;line-height:1.55}
.sms-flash.ok{background:var(--sms-ok-bg,#eaf4ee);border:1px solid #c7e6d3;color:var(--sms-ok,#246b4b)}
.sms-flash.fail{background:var(--sms-fail-bg,#fbeeea);border:1px solid #f0cec7;color:var(--sms-fail,#9e3b2b)}
.sms-flash.skip{background:var(--sms-skip-bg,#fbf6ea);border:1px solid #e8ddbd;color:var(--sms-skip,#6f5b2c)}

.answer-block{display:grid;gap:10px;margin:18px 0}
.answer-block h3{margin:8px 0 0}
.answer-item{text-align:left}
.answer-item p{margin:0 0 8px;white-space:normal}
.answer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding-top:6px;border-top:1px dashed var(--line,#e3e8e4)}
.answer-head small{color:var(--muted,#7b8a86);font-size:12px}
.answer-form{display:grid;gap:10px;padding:16px;border:1px solid var(--line,#dfe5ef);border-radius:12px;
  background:var(--card,#fff)}
.answer-form label{display:grid;gap:6px;font-weight:700}
.answer-form textarea{width:100%;box-sizing:border-box;min-height:110px;padding:10px 12px;resize:vertical;
  border:1px solid var(--line,#dfe5ef);border-radius:8px;font:inherit;line-height:1.6}
.answer-form button{justify-self:start}

.tpl-editor{display:grid;gap:10px;margin:14px 0;padding:16px;border:1px solid var(--line,#dfe5ef);
  border-radius:12px;background:var(--card,#fff)}
.tpl-editor label{display:grid;gap:6px;font-weight:700}
.tpl-editor textarea{width:100%;box-sizing:border-box;min-height:170px;padding:10px 12px;resize:vertical;
  border:1px solid var(--line,#dfe5ef);border-radius:8px;background:#fbfdfc;color:#29383d;
  font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tpl-editor .tpl-help{margin:0;color:var(--muted,#7b8a86);font-size:12.5px;line-height:1.6}
.tpl-editor .tpl-help code{background:#eef4f0;border-radius:4px;padding:1px 4px;font-size:12px}
.tpl-editor button{justify-self:start}

@media (max-width:760px){
  .answer-form,.tpl-editor{padding:12px;border-radius:10px}
  .answer-form textarea{min-height:96px;font-size:14px}
  .tpl-editor textarea{min-height:150px;font-size:13px}
  .answer-head{align-items:flex-start}
}

/* ===== 문자발송 페이지 (/admin/sms) =====
   총괄 전용 템플릿 편집·상태·미리보기·최근 발송 이력.
   데스크톱: 편집 2/3 + 상태 1/3, 모바일: 요약 → 편집 → 상세 → 이력 카드. */
.admin-sms{max-width:1060px;margin-inline:auto}
.admin-sms h2{margin:0;font-size:18px;line-height:1.35}
.sms-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
  grid-template-areas:"editor summary" "editor details";gap:18px;align-items:start}
.sms-status-summary{grid-area:summary;padding:18px 20px;border:1px solid var(--line,#dfe7e2);
  border-radius:6px 18px;background:#fff;box-shadow:0 8px 24px #26374608}
.sms-status-summary.warn{background:#fffdf8;border-color:#efe3c6}
.sms-status-head{display:flex;align-items:flex-start;gap:10px}
.sms-status-head h2{font-size:18px}
.sms-status-head p{margin:5px 0 0;color:var(--muted,#5f6e69);font-size:13px;line-height:1.6}
.sms-dot{flex:0 0 auto;font-size:13px;line-height:1.5}
.sms-dot.ok{color:var(--sms-ok,#246b4b)}
.sms-dot.warn{color:#9a6b18}
.sms-status-line{margin:12px 0 0;padding-top:12px;border-top:1px dashed var(--line,#dfe7e2);
  font-size:13px;line-height:1.7;color:#43524c;overflow-wrap:anywhere}
.sms-muted{color:var(--muted,#5f6e69);font-size:12.5px;line-height:1.6}

.sms-editor-card{grid-area:editor;padding:20px;border:1px solid var(--line,#dfe7e2);
  border-radius:6px 18px;background:linear-gradient(160deg,#fff,#fbfdfb);box-shadow:0 10px 28px #2637460a}
.sms-editor-card h2{margin-bottom:12px}
.sms-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sms-chip{min-height:40px;padding:6px 12px;border:1px solid #d5e2db;border-radius:9px;
  background:#f7fbf8;color:#315e4a;font:inherit;font-size:13px;font-weight:700;line-height:1.2;cursor:pointer}
.sms-chip:hover{background:#eef7f1;border-color:#b9d3c3}
.sms-chip.sms-reset{margin-left:auto;background:#fff;border-style:dashed;color:var(--muted,#5f6e69)}
.sms-editor-card textarea{display:block;width:100%;box-sizing:border-box;min-height:190px;padding:12px 14px;
  resize:vertical;border:1px solid #d5e2db;border-radius:10px;background:#fbfdfc;color:#24332e;
  font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sms-editor-card textarea:focus{border-color:var(--focus,#3f7565)}
.tpl-help{margin:8px 0 0;color:var(--muted,#5f6e69);font-size:13px;line-height:1.6}
.tpl-help code{background:#eef4f0;border-radius:4px;padding:1px 4px;font-size:12px}

.sms-preview-wrap{margin-top:14px}
.sms-preview-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:13px}
.sms-preview-head b{font-size:13px}
.sms-preview-head #smsPreviewMeta{margin-left:auto;color:var(--muted,#5f6e69);font-size:12.5px;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sms-byte-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.5}
.sms-byte-pill.sms{background:var(--sms-ok-bg,#eaf4ee);color:var(--sms-ok,#246b4b)}
.sms-byte-pill.lms{background:var(--sms-lms-bg,#fbf1df);color:var(--sms-lms,#7a5018)}
.sms-byte-pill.over{background:var(--sms-fail-bg,#fbeeea);color:var(--sms-fail,#9e3b2b)}
.sms-preview{min-height:84px;max-height:280px;overflow:auto;padding:14px 16px;border:1px solid #dbe6e1;
  border-radius:4px 14px 14px 14px;background:#fff;box-shadow:0 6px 18px #26374612;
  color:#24332e;font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word}

.sms-save-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid #edf1ef}
.sms-save-message{display:grid;gap:2px;min-width:0}
.sms-save-hint{font-size:12.5px;color:var(--muted,#5f6e69)}
.sms-save-status,.sms-save-error{margin:0;font-size:12.5px;font-weight:700;line-height:1.5}
.sms-save-status:empty,.sms-save-error:empty{display:none}
.sms-save-status{color:var(--sms-ok,#246b4b)}
.sms-save-error{color:var(--sms-fail,#9e3b2b)}
.sms-save{width:auto;min-width:150px;min-height:44px;margin:0;flex:0 0 auto}
body.admin .sms-save[type=submit]{width:auto;flex:0 0 auto}
@media (max-width:760px){
  body.admin .sms-save[type=submit]{width:100%}
}
.sms-save:disabled{background:#f4f7f5;color:#6f7c77!important;border:1px solid #d9e5de;opacity:1;
  cursor:not-allowed;box-shadow:none;transform:none}

.sms-status-details{grid-area:details;padding:18px 20px;border:1px solid var(--line,#dfe7e2);
  border-radius:6px 18px;background:#fff}
.sms-status-details h2{margin-bottom:8px}
.sms-details summary{cursor:pointer;font-size:13px;font-weight:700;color:#315e4a;
  min-height:40px;display:flex;align-items:center}
.sms-detail-list{display:grid;gap:0;margin:8px 0 0;padding:0}
.sms-detail-list>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;
  padding:9px 0;border-top:1px solid #edf1ef}
.sms-detail-list dt{color:var(--muted,#5f6e69);font-size:12.5px;font-weight:700}
.sms-detail-list dd{margin:0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.sms-state{font-weight:800;font-size:12.5px}
.sms-state.on{color:var(--sms-ok,#246b4b)}
.sms-state.off{color:var(--sms-fail,#9e3b2b)}

.sms-history-section{margin-top:28px}
.sms-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.sms-section-head h2{font-size:18px}
.sms-history-table{display:block;overflow-x:auto;border:1px solid var(--line,#dfe7e2);
  border-radius:6px 18px;background:#fff;-webkit-overflow-scrolling:touch}
.sms-history{min-width:820px;width:100%;font-size:13px}
.sms-history caption.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sms-history th{white-space:nowrap;background:#f4f8f6;color:#3f534c;font-size:12px}
.sms-history td{padding:9px 10px;vertical-align:top;border-top:1px solid #edf1ef}
.sms-history .c-time{width:104px}.sms-history .c-no{width:104px}.sms-history .c-kind{width:54px}
.sms-history .c-to{width:118px}.sms-history .c-result{width:150px}
.sms-history .sms-time,.sms-history .sms-to{white-space:nowrap;color:var(--muted,#5f6e69)}
.sms-history .sms-preview{min-width:200px;color:#465650;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sms-history-note{margin-top:8px}
.sms-history-cards{display:none;gap:10px}
.sms-history-card{padding:14px;border:1px solid var(--line,#dfe7e2);border-radius:6px 14px;background:#fff}
.sms-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted,#5f6e69)}
.sms-card-top b{color:#315e4a;font-size:13px}
.sms-kind{padding:1px 7px;border-radius:999px;background:#f1f6f3;color:#456b58;font-size:11px;font-weight:800}
.sms-card-mid{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.sms-card-body{margin:8px 0 0;color:#465650;font-size:13px;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sms-empty-card{display:grid;justify-items:center;gap:6px;padding:30px 18px;text-align:center;
  border:1px solid var(--line,#dfe7e2);border-radius:6px 18px;background:#fff;color:var(--muted,#5f6e69)}
.sms-empty-card svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;color:#8aa197}
.sms-empty-card b{color:#315e4a;font-size:14px}
.sms-empty-card p{margin:0;font-size:13px}

@media (max-width:1023px){
  .sms-layout{grid-template-columns:1fr;grid-template-areas:"summary" "editor" "details"}
}
@media (max-width:760px){
  .admin-sms h2,.sms-section-head h2{font-size:17px}
  .sms-layout{gap:14px}
  .sms-status-summary,.sms-editor-card,.sms-status-details{padding:16px;border-radius:6px 14px}
  .sms-status-summary{padding:12px 14px}
  .sms-status-head h2{font-size:16px}
  .sms-status-head p{font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sms-status-line{display:none}
  .sms-editor-card textarea{height:170px;min-height:170px;font-size:16px}
  .sms-preview{max-height:240px;font-size:14px}
  .sms-toolbar{gap:6px}
  .sms-chip{min-height:40px;padding:6px 10px;font-size:12.5px}
  .sms-chip.sms-reset{margin-left:0}
  .sms-save-bar{position:fixed;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:50;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;
    max-width:calc(100vw - 24px);margin:0;padding:8px 10px;border:1px solid #d9e5de;
    border-radius:12px;background:#fff;box-shadow:0 14px 34px #1f3b2c26}
  .sms-save-message{flex:1 1 auto;min-width:0}
  .sms-save-status,.sms-save-error{overflow-wrap:anywhere}
  .sms-save-hint{display:none}
  .sms-save{width:100%;max-width:100%;min-height:48px;box-sizing:border-box;padding:10px 14px;flex:0 0 auto}
  body.admin.admin-sms-page main{padding-bottom:104px}
  .sms-history-section{margin-top:24px}
  .sms-history-table{display:none}
  .sms-history-cards{display:grid}
  .sms-history-card{padding:14px}
}

/* ===== 아이콘 버튼·빠른 바로가기 (2026-10-26) =====
   텍스트 링크 대신 접근성 있는 <a class="btn btn-icon"> 로 통일. SVG는 currentColor. */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2;text-decoration:none}
.btn-icon svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.btn-icon span{white-space:nowrap}
.admin-quick-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:14px 0 0;max-width:460px}
.admin-quick-links .btn{min-height:44px;margin:0}
.admin-quick-links:has(.btn:only-child){grid-template-columns:minmax(150px,220px);max-width:220px}
@media (max-width:760px){
  .admin-quick-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:none}
  .admin-quick-links:has(.btn:only-child){grid-template-columns:1fr;max-width:none}
  .admin-quick-links .btn{width:100%;margin:0;min-height:44px;padding:9px 10px;font-size:13px}
  .btn-icon svg{width:16px;height:16px}
}

/* 스크린리더 전용 텍스트 */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* =====================================================================
   AI 상담원 위젯 (2026-10-26)
   ---------------------------------------------------------------------
   · 고객 위젯: AI 말풍선·타이핑·정보 카드·상담원 연결·중지 배너
   · 관리자 채팅: AI ON/OFF pill·재개·AI 수집 배지
   · 기존 선택자는 건드리지 않고 아래에서 덮어쓴다(append 전용).
   ===================================================================== */
.ai-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4f806e;vertical-align:middle}
.ai-dot.is-on{background:#4f806e}
.ai-dot.is-off{background:#a9753d}
.customer-chat-head{min-width:0}
.customer-chat-head b{display:flex;align-items:center;gap:5px}
.customer-chat-head-actions{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;flex:0 0 auto}
.chat-handoff{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:6px 9px;border:1px solid #b9cdc8;border-radius:8px;background:#fff;color:#315e65;font-size:11px;font-weight:700;line-height:1.1;box-shadow:none;cursor:pointer}
.chat-handoff:hover{background:#eef5f2;border-color:#8fb0a8}
.chat-handoff[hidden]{display:none!important}
/* 헤더의 상담원 연결 버튼은 닫기 버튼과 달리 글자 버튼이다(기존 header button 규칙 덮어쓰기). */
.customer-chat-panel>header #customerChatHandoffTop{display:inline-flex;flex:0 0 auto;width:auto;min-width:0;height:auto;min-height:0;padding:5px 9px;border:1px solid #ffffff55;border-radius:8px;background:#ffffff18;background-image:none;color:#fff;font-size:11px;font-weight:700;line-height:1.1;letter-spacing:0;box-shadow:none;transform:none}
.customer-chat-panel>header #customerChatHandoffTop:hover{background:#ffffff30;border-color:#ffffff85;filter:none;transform:none}
.customer-chat-panel>header #customerChatHandoffTop::before,.customer-chat-panel>header #customerChatHandoffTop::after{content:none!important;display:none!important}
.chat-handoff.is-paused{margin:0;padding:8px 12px;border:0;border-bottom:1px solid #ecdcc8;border-left:3px solid #a9753d;border-radius:0;background:#fff7e8;color:#7a5326;font-size:12px;font-weight:700;text-align:left;cursor:default}

/* AI 말풍선: 옅은 청록 배경 + 왼쪽 액센트 */
.customer-chat-messages article.from-ai,.admin-chat-messages article.from-ai{align-self:flex-start;flex-direction:row;max-width:92%}
.customer-chat-messages article.from-ai>.bubble,.admin-chat-messages article.from-ai>.bubble{padding:9px 11px;border:1px solid #d8e6e4;border-left:3px solid #4d7b8a;border-radius:12px;background:#f2f7f7}
.customer-chat-messages article.from-ai b.ai-tag,.admin-chat-messages article.from-ai b.ai-tag{color:#3c6675;font-size:11px;font-weight:700}
/* 채팅 시간 대비 AA (기존 #8d9a95 → #5c6b66) */
.customer-chat-messages .chat-time,.admin-chat-messages .chat-time{color:#5c6b66}

/* 타이핑 점 (문서 흐름에 넣지 않고 aria-hidden) */
.customer-chat-messages article.is-typing,.admin-chat-messages article.is-typing{max-width:120px;margin:0}
.ai-typing{display:flex;align-items:center;gap:4px;min-height:58px;padding:0 14px!important;border:1px solid #d8e6e4!important;border-left:3px solid #4d7b8a!important;border-radius:12px;background:#f2f7f7!important}
.ai-typing span{width:5px;height:5px;border-radius:50%;background:#7d9aa3;animation:aiBlink 1.2s infinite ease-in-out}
.ai-typing span:nth-child(2){animation-delay:.15s}
.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes aiBlink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.ai-typing span{animation:none}.ai-typing{opacity:.6}}

/* 첫 진입 안내 + 칩 */
.customer-chat-intro{margin:auto 0;padding:6px 2px;color:#4d5f5a;font-size:13px;line-height:1.55}
.customer-chat-intro p{margin:0 0 10px;color:#3c534d;font-size:13px}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px}
.chat-chip{width:auto;min-width:0;margin:0;padding:7px 10px;border:1px solid #cddbd6;border-radius:999px;background:#fff;color:#315e65;font-size:12px;font-weight:700;box-shadow:none;cursor:pointer}
.chat-chip:hover{background:#eef5f2;border-color:#a9c5bd}

/* 정보 카드: 메시지 영역 밖, 입력창 위. 폴링 때 다시 그리지 않는다. */
.customer-chat-ask{display:grid;gap:6px;margin:0;padding:10px 10px 9px;border-top:1px solid #e5ebe7;background:#f8fbf9;color:#3d514b}
.customer-chat-ask[hidden]{display:none!important}
.customer-chat-ask>b{font-size:12px;color:#315e65}
.customer-chat-ask p{margin:0;color:#5c6b66;font-size:11px;line-height:1.45}
.customer-chat-ask-fields{display:grid;grid-template-columns:1fr 1.2fr;gap:6px}
.customer-chat-ask-fields input{min-width:0;min-height:34px;margin:0;padding:6px 9px;border:1px solid #d7e0db;border-radius:8px;background:#fff;font-size:12px}
.customer-chat-ask-actions{display:flex;gap:6px}
.customer-chat-ask-actions button{flex:1;width:auto;margin:0;padding:7px 10px;border-radius:8px;font-size:12px}
.customer-chat-ask-actions .ghost{background:#eef1ef;color:#4d5f5a;box-shadow:none}
.customer-chat-ask small{min-height:12px;color:#8a5a3a;font-size:11px}

/* 100dvh · visualViewport · safe-area */
.customer-chat-panel{height:min(520px,calc(var(--chat-vh,100dvh) - 105px));max-height:calc(var(--chat-vh,100dvh) - 16px)}
#customerChatForm{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.customer-chat-widget{right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom))}
@media(max-width:760px){
  .customer-chat-widget{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* 관리자 채팅: AI ON/OFF pill·재개·배너·수집 배지 */
.admin-chat-ai{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;flex:0 0 auto}
.ai-state{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:#eaf3ef;color:#2f5f4f;font-size:11px;font-weight:800;white-space:nowrap}
.ai-state.is-off{background:#fbf1e3;color:#8a5a26}
.ai-state.is-error{background:#fbeceb;color:#9b3d36}
/* [2026-10-31] AI ON/OFF 토글 버튼: 배지 모양은 그대로, 누를 수 있다는 것만 보이게. */
#adminChatAiState{appearance:none;-webkit-appearance:none;margin:0;border:1px solid transparent;font-family:inherit;line-height:1.5;box-shadow:none;cursor:pointer}
#adminChatAiState:hover{filter:none;border-color:#b9d0c5;background:#e3efe9}
#adminChatAiState.is-off:hover{background:#f6e7d3;border-color:#e0c8a4}
#adminChatAiState.is-error:hover{background:#f8dedb;border-color:#e3b7b2}
#adminChatAiState:disabled{opacity:.55;cursor:default}
#adminChatAiState:focus-visible{outline:2px solid #315e4a;outline-offset:2px}
.ai-resume{width:auto;min-width:0;margin:0;padding:5px 9px;border:1px solid #c9d8d2;border-radius:8px;background:#fff;color:#315e65;font-size:11px;font-weight:700;box-shadow:none;cursor:pointer}
.ai-resume[hidden]{display:none!important}
#adminChatAiBanner{margin:0;border-left:3px solid #a9753d;border-bottom:1px solid #ecdcc8}
.ai-collected{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:999px;background:#eaf3ef;color:#3c6675;font-size:10px;font-style:normal;font-weight:700;vertical-align:middle}
@media(max-width:520px){.admin-chat-shell{height:calc(100dvh - 180px)}}
@media(max-height:520px){.admin-chat-shell{height:calc(100dvh - 180px)}}

/* ===== 문자발송: 잔액·단가·일별 사용내역 (2026-10-27) ===== */
.sms-status-strip{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:0 0 16px;padding:12px 16px;border-radius:8px}
.sms-status-strip .sms-status-head{display:flex;align-items:center;gap:8px;flex:1 1 320px;min-width:0}
.sms-status-strip .sms-status-head h2{font-size:16px;margin:0}
.sms-status-strip .sms-status-head p{display:none}
.sms-status-strip .sms-status-line{margin:0;padding:0;border:0;font-size:12.5px}
.sms-layout{grid-template-areas:"editor details"}
.sms-money-section{margin:0 0 24px}
.sms-money-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sms-money-card{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line,#dfe7e2);
  border-radius:6px 18px;background:#fff;box-shadow:0 8px 24px #26374608;min-width:0}
.sms-money-label{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted,#5f6e69);
  font-size:12px;font-weight:750;line-height:1.4}
.sms-money-muted{font-weight:500}
.sms-money-value{color:var(--navy);font-size:24px;font-weight:850;line-height:1.25;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sms-money-estimate{display:flex;flex-direction:column;gap:1px;font-size:18px;line-height:1.35}
.sms-money-sub{color:var(--muted,#5f6e69);font-size:11.5px;line-height:1.5;overflow-wrap:anywhere}
.sms-money-note{margin:8px 0 0;color:var(--muted,#5f6e69);font-size:12.5px;line-height:1.6}
.sms-money-badge,.sms-money-default{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;
  font-size:10px;font-weight:800;line-height:1.5;white-space:nowrap}
.sms-money-badge{background:#fbf1dc;border:1px solid #efdba1;color:#7a5a1f}
.sms-money-default{background:#eaf4ee;border:1px solid #c3e2d2;color:#246b4b}
.sms-money-card.is-empty{border-style:dashed;background:#f7f8fa}
.sms-money-card.is-stale7{border-color:#efdba1;background:#fffcf2}
.sms-money-card.is-stale30{border-color:#f2c6bf;background:#fdecea}
.sms-money-details{margin:12px 0 0;border:1px solid var(--line,#dfe7e2);border-radius:10px;background:#fff}
.sms-money-details summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;
  cursor:pointer;font-size:13px;font-weight:800;color:#315e4a}
.sms-money-details summary small{margin-left:auto;color:var(--muted,#5f6e69);font-size:11.5px;font-weight:500}
.sms-money-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 14px 4px}
.sms-money-fields label{display:grid;gap:5px;color:var(--muted,#5f6e69);font-size:12px;font-weight:700}
.sms-money-fields input{width:100%;box-sizing:border-box;min-height:42px;padding:8px 10px;
  border:1px solid #d5dfda;border-radius:8px;background:#fff;color:#24332e;font:inherit;font-size:14px}
.sms-money-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px 14px}
.sms-money-actions .btn{min-height:44px;margin:0}
.sms-money-status,.sms-money-error{margin:0;padding:0 14px 12px;font-size:12.5px;font-weight:700;line-height:1.5}
.sms-money-status:empty,.sms-money-error:empty{display:none}
.sms-money-status{color:#246b4b}
.sms-money-error{color:#9e3b2b}

.sms-usage-section{margin:0 0 24px}
.sms-usage-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sms-usage-head h2{font-size:18px}
.sms-range{display:flex;gap:6px;flex-wrap:wrap}
.sms-range-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:6px 12px;
  border:1px solid var(--line,#dfe7e2);border-radius:8px;background:#fff;color:var(--muted,#5f6e69);
  font-size:12.5px;font-weight:750;text-decoration:none;white-space:nowrap}
.sms-range-link:hover{background:#f1f8f3;border-color:#b9d3c5}
.sms-range-link.is-active{background:#eaf4ee;border-color:#c3e2d2;color:#246b4b;font-weight:800}
.sms-usage-wrap{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line,#dfe7e2);
  border-radius:6px 18px;background:#fff;-webkit-overflow-scrolling:touch}
.sms-usage-table{min-width:620px;width:100%;font-size:13px;border-collapse:collapse}
.sms-usage-table caption.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sms-usage-table th{white-space:nowrap;background:#f4f8f6;color:#3f534c;font-size:11.5px;font-weight:800}
.sms-usage-table td,.sms-usage-table th{padding:9px 10px;text-align:right;border-top:1px solid #edf1ef}
.sms-usage-table th:first-child,.sms-usage-table td:first-child{text-align:left}
.sms-usage-table tbody td{font-variant-numeric:tabular-nums}
.sms-usage-table .sms-usage-day{color:var(--muted,#5f6e69);white-space:nowrap}
.sms-usage-table .sms-usage-cost{font-weight:800;color:var(--navy)}
.sms-usage-table tfoot th,.sms-usage-table tfoot td{border-top:2px solid #dfe7e2;background:#fbfdfb;font-weight:850;color:var(--navy)}
.sms-usage-empty{padding:26px 18px;border:1px dashed var(--line,#dfe7e2);border-radius:6px 18px;
  background:#f7f8fa;color:var(--muted,#5f6e69);font-size:13px;text-align:center}
.sms-usage-note{margin:8px 0 0}
.sales-fill.is-zero{height:2px!important;min-height:2px;background:#dfe7e2!important;box-shadow:none!important;opacity:1}
@media (max-width:1023px){
  .sms-layout{grid-template-areas:"editor" "details"}
  .sms-money-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .sms-status-strip{padding:10px 12px;border-radius:6px 14px;gap:6px 10px}
  .sms-status-strip .sms-status-head{flex:1 1 100%}
  .sms-status-strip .sms-status-line{font-size:12px}
  .sms-money-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sms-money-card{padding:14px;border-radius:6px 14px}
  .sms-money-value{font-size:20px}
  .sms-money-estimate{font-size:16px}
  .sms-money-fields{grid-template-columns:1fr;padding:0 12px 4px}
  .sms-money-actions{padding:10px 12px 14px}
  .sms-money-actions .btn{flex:1}
  .sms-usage-head h2{font-size:17px}
  .sms-usage-wrap{border-radius:6px 14px}
  .sms-usage-table th:first-child,.sms-usage-table td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line,#dfe7e2)}
  .sms-usage-table thead th:first-child,.sms-usage-table tfoot th:first-child{background:#f4f8f6;z-index:2}
}

/* ===== 서버현황 운영 배너·장애 사이렌 (2026-10-27) ===== */
.srv-banner{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--line);
  border-radius:6px 18px;background:#fff;min-width:0}
.srv-banner-ok{background:#e7f4ed;border-color:#c3e2d2;color:#156b4a}
.srv-banner-warn{background:#fff6da;border-color:#efdba1;color:#8a6100}
.srv-banner-danger{background:#fdecea;border-color:#f2c6bf;color:#a92c1c}
.srv-banner-unknown{background:#eef1f5;border-color:#dde3ea;color:#5b6675}
.srv-banner-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#ffffffa8;color:currentColor}
.srv-banner-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.srv-banner-copy{display:grid;gap:3px;min-width:0}
.srv-banner-copy b{font-size:16px;line-height:1.35;color:currentColor}
.srv-banner-copy small{font-size:12px;line-height:1.5;color:#5b6675;font-weight:600;overflow-wrap:anywhere}
.srv-chip{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:2px 9px;border:1px solid transparent;
  border-radius:8px;font-size:10.5px;font-weight:800;line-height:1.5;white-space:nowrap}
.srv-chip-live{background:#e7f4ed;border-color:#c3e2d2;color:#156b4a}
.srv-chip-standby{background:#fff6da;border-color:#efdba1;color:#8a6100}
.srv-chip-muted{background:#eef1f5;border-color:#dde3ea;color:#5b6675}
.srv-strip{position:sticky;top:var(--srv-top,58px);z-index:45;align-self:start;scroll-margin-top:calc(var(--srv-top,58px) + 8px);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:0;padding:11px 14px;border:1px solid #f2c6bf;border-radius:6px 18px;background:#fdecea;color:#a92c1c;box-shadow:0 10px 24px #a92c1c14}
.srv-strip.is-hidden{display:none}
.srv-strip b{font-size:13.5px;line-height:1.5}
.srv-ack-all,.srv-ack{min-height:44px;margin:0;padding:8px 14px;border:1px solid #f2c6bf;border-radius:9px;
  background:#fff;color:#a92c1c;font:inherit;font-size:12.5px;font-weight:800;box-shadow:none;cursor:pointer;white-space:nowrap}
.srv-ack-all:hover,.srv-ack:hover{background:#fff6f4;border-color:#e8a79c}
.srv-ack-row{display:flex;justify-content:flex-end;margin:-2px 0 0}
.srv-ack-row[hidden]{display:none}
.srv-ack{min-height:44px;padding:6px 12px}
.srv-card.srv-alarm{border-color:#f2c6bf;box-shadow:0 10px 26px #a92c1c12}
.srv-card.srv-caution{border-color:#efdba1}
.srv-card.srv-recover{border-color:#c3e2d2;background:#f4fbf6}
.srv-page :focus-visible{outline:2px solid #263746;outline-offset:2px}
/* [2026-11-01] 배포 버전 스트립 (운영 ↔ 폰서버 커밋 비교 · 참고 표시, 경고 집계와 무관) */
.srv-deploy{display:grid;gap:6px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fbfcfa;min-width:0}
.srv-deploy-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0}
.srv-deploy-item{display:inline-flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}
.srv-deploy-name{color:var(--muted);font-size:11.5px;font-weight:750;white-space:nowrap}
.srv-deploy-commit{color:var(--navy);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.srv-deploy-at{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.srv-deploy-note{margin:0;color:var(--muted);font-size:11.5px;line-height:1.45;overflow-wrap:anywhere}
.srv-deploy-row>.srv-chip{margin-left:auto}
@media (max-width:480px){
  .srv-deploy-row{display:grid;grid-template-columns:1fr;gap:4px 0}
  .srv-deploy-row>.srv-chip{margin-left:0;justify-self:start}
}
@media (max-width:760px){
  .srv-banner{padding:12px 14px;gap:10px;border-radius:6px 14px}
  .srv-banner-icon{flex-basis:30px;width:30px;height:30px}
  .srv-banner-copy b{font-size:15px}
  .srv-strip{padding:10px 12px;border-radius:6px 14px}
  .srv-strip b{font-size:12.5px}
}

/* ===== 공개 언어 선택 (ko · en · zh-CN · zh-TW) ===== */
.lang-switch{position:relative;align-self:center;flex:0 0 auto;margin-left:2px}
.lang-trigger{display:inline-flex;align-items:center;gap:6px;width:auto;min-height:44px;margin:0;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#344b52;font:inherit;font-size:13px;font-weight:750;line-height:1.2;white-space:nowrap;cursor:pointer;box-shadow:none}
.lang-trigger:hover{border-color:#b9cfc4;background:#f1f8f3;color:#315e4a}
.lang-trigger:focus-visible{outline:2px solid #315e4a;outline-offset:2px}
.lang-trigger[aria-expanded="true"]{border-color:#8fb3a0;background:#f1f8f3;color:#315e4a}
.lang-globe{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lang-chev{flex:0 0 12px;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.lang-trigger[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:176px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 10px 28px #26374624}
.lang-menu[hidden]{display:none}
.lang-item{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 10px;border-radius:8px;color:#344b52;font-size:13.5px;font-weight:650;text-decoration:none}
.lang-item:hover,.lang-item:focus-visible{background:#f1f8f3;color:#243f35;outline:none}
.lang-item[aria-checked="true"]{color:#315e4a;font-weight:850;background:#eef5f0}
.lang-check{flex:0 0 16px;width:16px;color:#315e4a;font-size:14px;text-align:center}
@media(max-width:560px){
  body.public .topbar .wrap{position:relative}
  .lang-switch{position:absolute;top:4px;right:14px;margin:0;z-index:12}
  .lang-trigger{min-height:44px;padding:0 9px;font-size:12px;gap:5px}
  .lang-globe{flex-basis:16px;width:16px;height:16px}
  .lang-menu{right:0;min-width:168px}
}

/* ===== 수동 문자 발송 (/admin/sms) : 1건 즉시 발송 · 2단계 확인 =====
   잔액·사용 카드 다음, 일별 사용내역 앞. 디자인 확정안 값 그대로(append only). */
.sms-manual-section{margin-top:24px;padding:20px;border:1px solid var(--line,#dfe7e2);border-radius:6px 18px;background:linear-gradient(160deg,#fff,#fbfdfb);box-shadow:0 10px 28px #2637460a}
.sms-manual-desc{margin:0 0 14px}
.sms-manual-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.sms-field{display:grid;gap:6px;min-width:0}
.sms-field-label{font-size:13px;font-weight:700;color:#315e4a}
.sms-manual-section input,.sms-manual-section textarea{display:block;width:100%;box-sizing:border-box;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #d5e2db;border-radius:10px;background:#fbfdfc;color:#24332e;font:inherit;font-size:14px;line-height:1.6}
.sms-manual-section textarea{min-height:160px;resize:vertical;font-size:14px;line-height:1.7}
.sms-manual-section input:focus,.sms-manual-section textarea:focus{border-color:var(--focus,#3f7565)}
.sms-lookup-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.sms-lookup-btn{min-height:44px;margin:0;padding:0 16px;white-space:nowrap}
.sms-manual-loaded{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px solid #dbe6e1;border-radius:10px;background:#f7fbf8}
.sms-overwrite{margin:0 0 0 auto;min-height:44px;padding:0 14px;font-size:13px}
.sms-manual-body{display:grid;gap:8px;margin-top:16px}
.sms-manual-body-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sms-manual-body .sms-preview-head{margin:2px 0 0}
.sms-manual-body #smsManualMeta{margin-left:auto;color:var(--muted,#5f6e69);font-size:12.5px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sms-manual-preview{margin-top:14px}
.sms-manual-confirm{margin-top:16px;padding:16px;border:1px solid #d5e2db;border-radius:12px;background:#fff;box-shadow:0 6px 18px #26374612}
.sms-manual-confirm h3{margin:0 0 10px;font-size:15px;color:#315e4a}
.sms-manual-confirm-list{display:grid;margin:0 0 12px;padding:0}
.sms-manual-confirm-list>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:8px 0;border-top:1px solid #edf1ef}
.sms-manual-confirm-list>div:first-child{border-top:0}
.sms-manual-confirm-list dt{color:var(--muted,#5f6e69);font-size:12.5px;font-weight:700}
.sms-manual-confirm-list dd{margin:0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.sms-manual-confirm-body{margin-bottom:12px}
.sms-manual-warn{margin:0 0 12px;font-size:12.5px;font-weight:700;line-height:1.55;color:var(--sms-fail,#9e3b2b)}
.sms-manual-actions{display:grid;grid-template-columns:auto auto;justify-content:end;gap:8px}
.sms-manual-actions .btn{min-height:44px;margin:0;padding:0 20px}
.sms-manual-sendbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid #edf1ef}
.sms-manual-status{margin:0;flex:1 1 auto;min-width:0;min-height:1.5em;font-size:12.5px;font-weight:700;line-height:1.5;color:var(--sms-ok,#246b4b);overflow-wrap:anywhere}
.sms-manual-send{min-height:44px;margin:0;padding:0 26px;flex:0 0 auto}
.sms-manual-error{margin:0;font-size:12.5px;font-weight:700;line-height:1.5;color:var(--sms-fail,#9e3b2b);overflow-wrap:anywhere}
.sms-manual-error[hidden]{display:none}
.sms-manual-history{margin-top:20px}
.sms-manual-history-head h3{margin:0;font-size:15px;line-height:1.35}
.sms-history.sms-manual-history-table{min-width:0}
@media (max-width:760px){
 .sms-manual-section{padding:16px;border-radius:6px 14px;margin-top:20px}
 .sms-manual-row{grid-template-columns:1fr;gap:12px}
 .sms-manual-section input,.sms-manual-section textarea{font-size:16px}
 .sms-manual-section textarea{min-height:170px}
 .sms-overwrite{margin-left:0;width:100%}
 .sms-manual-actions{grid-template-columns:1fr 1fr}
 .sms-manual-actions .btn{width:100%;min-height:48px;padding:0 12px}
 .sms-manual-sendbar{flex-direction:column;align-items:stretch;gap:8px}
 .sms-manual-send{width:100%;min-height:48px}
 .sms-manual-status{min-height:0}
}
@media (max-width:400px){ .sms-manual-actions{grid-template-columns:1fr} .sms-manual-loaded{flex-direction:column;align-items:flex-start} }

/* =====================================================================
   2026 MODERN EDITORIAL STUDIO — 공개몰(body.public) 전면 리뉴얼
   ---------------------------------------------------------------------
   · 컨셉: 웜 아이보리/화이트 에디토리얼 캔버스 + 비비드 코랄(#ff5a36)/인디고(#2563eb) + 다크 아트보드
   · 범위: body.public 전용 (관리자 화면·장부·채팅 규칙에는 영향 없음)
   ===================================================================== */
body.public{
  --pub-ink:#0b1324;
  --pub-ink-soft:#1e293b;
  --pub-muted:#526077;
  --pub-line:#e2e8f0;
  --pub-line-strong:#cbd5e1;
  --pub-surface:#ffffff;
  --pub-bg:#f5f4f0;
  --pub-accent:#2563eb;
  --pub-accent-dark:#1d4ed8;
  --pub-accent-soft:#eff6ff;
  --pub-coral:#ff5a36;
  --pub-coral-dark:#e04320;
  --pub-emerald:#0d9488;
  --pub-emerald-dark:#0f766e;
  --pub-gold:#f59e0b;
  background:
    radial-gradient(1200px 540px at 8% -4%,rgba(255,90,54,.08),transparent 58%),
    radial-gradient(1000px 520px at 92% 4%,rgba(37,99,235,.08),transparent 58%),
    var(--pub-bg);
  color:var(--pub-ink);
}

/* ---------- 1. 상단바 (Frosted Editorial Studio Header) ---------- */
body.public .topbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
body.public .topbar.scrolled{
  background:rgba(255,255,255,.98);
  box-shadow:0 14px 34px -18px rgba(11,19,36,.16);
}
body.public .brand-mark{
  color:#0b1324;
  filter:drop-shadow(0 4px 10px rgba(15,23,42,.18));
}
body.public .brand-name b{color:#0b1324;letter-spacing:-.04em}
body.public .brand-name em{color:var(--pub-coral);font-style:normal;font-weight:900}
body.public .brand small{color:var(--pub-muted);font-weight:700}
body.public .topbar nav a.top-public{
  border-radius:999px;
  padding:9px 16px;
  font-size:15px;
  font-weight:800;
  color:#1e293b;
  border:1px solid transparent;
  transition:all .18s ease;
}
body.public .topbar nav a.top-public:hover{
  background:#fff;
  color:var(--pub-coral);
  border-color:#e2e8f0;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
body.public .topbar nav a.top-public.is-active,
body.public.home .topbar nav a.top-public[href="/order/new"]{
  background:var(--pub-ink);
  color:#fff!important;
  border-color:var(--pub-ink);
  box-shadow:0 8px 20px -6px rgba(11,19,36,.35);
}
body.public .topbar nav a.top-public.is-active svg,
body.public.home .topbar nav a.top-public[href="/order/new"] svg{
  stroke:#ff7a5c;
}

/* ---------- 2. 메인 히어로 배너 (.hero-v3 에디토리얼 라이트 & 다크 아트보드 스플릿) ---------- */
body.public .hero-v3{
  border-radius:28px;
  padding:clamp(28px,4.2vw,52px);
  margin-bottom:16px;
  color:var(--pub-ink);
  border:1px solid rgba(15,23,42,.1);
  border-top:5px solid var(--pub-coral);
  background:
    radial-gradient(640px 380px at 0% 0%,rgba(255,90,54,.1),transparent 62%),
    radial-gradient(680px 420px at 100% 100%,rgba(37,99,235,.09),transparent 62%),
    linear-gradient(135deg,#ffffff 0%,#fcfbf8 55%,#f4f6fb 100%);
  box-shadow:0 24px 56px -24px rgba(11,19,36,.16);
}
body.public .hero-v3::after{
  opacity:.35;
  background-image:radial-gradient(rgba(15,23,42,.14) 1px,transparent 1.4px);
}
body.public .hero-v3::before{
  border-color:rgba(15,23,42,.25);
}
body.public .hero-eyebrow{
  background:#0b1324;
  border:1px solid #0b1324;
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  padding:6px 14px;
  box-shadow:0 6px 16px -6px rgba(11,19,36,.3);
}
body.public .hero-eyebrow i{
  background:var(--pub-coral);
  box-shadow:0 0 0 4px rgba(255,90,54,.28);
}
body.public .hero-v3 h1{
  color:#0b1324;
  font-size:clamp(32px,4.9vw,54px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.045em;
}
body.public .hero-v3 h1 em{
  background:linear-gradient(92deg,#ff5a36 0%,#2563eb 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
body.public .hero-v3 .hero-sub{
  color:#475569;
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.7;
  font-weight:500;
  max-width:48ch;
}
body.public .hero-v3 .cta-row .btn{
  min-height:50px;
  padding:13px 24px;
  border-radius:14px;
  font-size:15px;
  font-weight:800;
}
body.public .hero-v3 .cta-row .btn.order,
body.public .hero-v3 .cta-row .btn.order.action-btn{
  background:linear-gradient(135deg,#ff5a36,#e03e1a)!important;
  border:1px solid #e03e1a!important;
  color:#fff!important;
  box-shadow:0 14px 28px -8px rgba(255,90,54,.55)!important;
}
body.public .hero-v3 .cta-row .btn.order:hover{
  background:linear-gradient(135deg,#e04320,#c43210)!important;
  transform:translateY(-2px);
}
body.public .hero-v3 .cta-row a.btn[href*="/quote"]{
  background:#0b1324!important;
  border:1px solid #0b1324!important;
  color:#fff!important;
  box-shadow:0 10px 24px -8px rgba(11,19,36,.35)!important;
}
body.public .hero-v3 .cta-row .btn.ghost,
body.public .hero-v3 .cta-row .btn.ghost.action-btn{
  background:#fff!important;
  color:#0b1324!important;
  border:1.5px solid #cbd5e1!important;
  box-shadow:none!important;
}
body.public .hero-v3 .cta-row .btn.ghost:hover{
  background:#f8fafc!important;
  border-color:#0b1324!important;
}
body.public .hero-chips li{
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#1e293b;
  border-radius:999px;
  padding:7px 14px;
  font-size:12.5px;
  font-weight:800;
}
body.public .hero-chips li::before{background:var(--pub-coral)}

/* 우측 키네틱 모션 타이틀 스테이지 (.hero-stage)
   참고: Envato Motion Titles (FALCOM / mdturalhasanov) & Portafolio 2025
   - 5대 주력 품목이 마스크 리빌 + 하이라이트 스윕으로 순환하는 모션 그래픽 릴 */
body.public .hero-stage{
  position:relative;
  height:clamp(260px,28vw,320px);
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(360px 220px at 88% 18%,rgba(37,99,235,.28),transparent 65%),
    radial-gradient(320px 220px at 14% 88%,rgba(255,90,54,.22),transparent 65%),
    #090d16;
  border:1px solid #1e293b;
  box-shadow:0 24px 48px -18px rgba(9,13,22,.45);
}
/* 모션 프레임 4대 코너 브래킷 (Broadcast / Motion Title Viewfinder) */
body.public .stage-corner{
  position:absolute;
  width:14px;
  height:14px;
  border-color:rgba(255,255,255,.38);
  border-style:solid;
  z-index:3;
  pointer-events:none;
}
body.public .stage-corner.sc-tl{top:14px;left:14px;border-width:2px 0 0 2px}
body.public .stage-corner.sc-tr{top:14px;right:14px;border-width:2px 2px 0 0}
body.public .stage-corner.sc-bl{bottom:14px;left:14px;border-width:0 0 2px 2px}
body.public .stage-corner.sc-br{bottom:14px;right:14px;border-width:0 2px 2px 0}

/* 조각 1: 상단 메인 키네틱 타이틀 슬라이드 릴 (.stage-banner) */
body.public .stage-banner{
  z-index:2;
  inset:11% 7% auto 7%;
  height:31%;
  border-radius:12px;
  background:#ffffff;
  padding:11px 16px;
  box-sizing:border-box;
  box-shadow:0 16px 36px rgba(0,0,0,.45);
  transform:none;
  animation:km-slide-main 10s cubic-bezier(.16,1,.3,1) infinite;
}
body.public .stage-banner::before,
body.public .stage-banner::after{display:none!important;content:none!important}
body.public .km-label{
  display:inline-block;
  margin-bottom:3px;
  padding:2px 7px;
  border-radius:4px;
  background:#ff5a36;
  color:#fff;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.12em;
}
body.public .km-reel{
  position:relative;
  display:block;
  height:32px;
  overflow:hidden;
}
body.public .km-slide{
  position:absolute;
  left:0;
  right:0;
  top:0;
  display:flex;
  align-items:center;
  gap:8px;
  color:#090d16;
  font-size:clamp(17px,2vw,23px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:32px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(100%);
  animation:km-reel-5 12.5s cubic-bezier(.16,1,.3,1) infinite;
}
body.public .km-slide em{
  display:inline-grid;
  place-items:center;
  padding:0 6px;
  height:20px;
  border-radius:5px;
  background:#090d16;
  color:#38bdf8;
  font-style:normal;
  font-size:11px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
body.public .km-slide.s1{animation-delay:0s}
body.public .km-slide.s2{animation-delay:2.5s}
body.public .km-slide.s3{animation-delay:5s}
body.public .km-slide.s4{animation-delay:7.5s}
body.public .km-slide.s5{animation-delay:10s}

body.public .stage-banner .ln1,
body.public .stage-banner .ln2{display:none!important}
body.public .stage-banner .scan{
  top:auto;
  bottom:0;
  left:0;
  right:0;
  height:4px;
  border-radius:0;
  background:linear-gradient(90deg,#ff5a36 0%,#2563eb 100%);
  transform-origin:0 50%;
  animation:km-wipe-bar 2.5s cubic-bezier(.16,1,.3,1) infinite;
}

/* 조각 2: 하단 5대 품목 키네틱 시퀀스 리스트 (.stage-card) */
body.public .stage-card{
  z-index:3;
  width:64%;
  height:49%;
  left:7%;
  bottom:8%;
  border-radius:12px;
  padding:8px 12px;
  box-sizing:border-box;
  background:rgba(19,28,46,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px rgba(0,0,0,.5);
  transform:none;
  animation:km-slide-sub 10s cubic-bezier(.16,1,.3,1) infinite;
}
body.public .stage-card::before,
body.public .stage-card::after{display:none!important;content:none!important}
body.public .km-list{
  display:grid;
  grid-template-rows:repeat(5,1fr);
  gap:2px;
  height:100%;
}
body.public .km-row{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 8px;
  border-radius:6px;
  color:#94a3b8;
  font-size:11.5px;
  font-weight:750;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  animation:km-row-5 12.5s cubic-bezier(.16,1,.3,1) infinite;
}
body.public .km-row b{
  color:#38bdf8;
  font-size:10px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
body.public .km-row.r1{animation-delay:0s}
body.public .km-row.r2{animation-delay:2.5s}
body.public .km-row.r3{animation-delay:5s}
body.public .km-row.r4{animation-delay:7.5s}
body.public .km-row.r5{animation-delay:10s}
body.public .stage-card .ln3,
body.public .stage-card .ln4{display:none!important}

/* 조각 3: 미니멀 기하학 키네틱 링 (연도 제거 · 순수 모션 그래픽 링) */
body.public .stage-swatch{
  z-index:2;
  width:68px;
  height:68px;
  aspect-ratio:1;
  right:7%;
  bottom:10%;
  border-radius:50%;
  background:conic-gradient(from 0deg,#ff5a36 0deg 90deg,transparent 90deg 180deg,#38bdf8 180deg 270deg,transparent 270deg 360deg);
  display:grid;
  place-items:center;
  box-shadow:0 0 28px rgba(56,189,248,.25);
  animation:dg-spin 8s linear infinite;
}
body.public .km-orb-ring{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#090d16;
  border:1.5px solid rgba(255,255,255,.28);
}
body.public .km-orb-cross{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ff5a36;
  box-shadow:0 0 0 4px rgba(255,90,54,.25);
}

/* CMYK 4색 모션 스톰프 바 (.stage-cmyk) */
body.public .stage-cmyk{
  z-index:3;
  left:auto;
  right:7%;
  top:49%;
  display:flex;
  align-items:center;
  gap:4px;
}
body.public .stage-cmyk i{
  width:13px;
  height:6px;
  border-radius:3px;
  box-shadow:none;
  animation:km-stomp 1.6s cubic-bezier(.16,1,.3,1) infinite alternate;
}
body.public .stage-cmyk i:nth-child(1){background:#38bdf8;animation-delay:0s}
body.public .stage-cmyk i:nth-child(2){background:#ff5a36;animation-delay:.15s}
body.public .stage-cmyk i:nth-child(3){background:#fbbf24;animation-delay:.3s}
body.public .stage-cmyk i:nth-child(4){background:#ffffff;animation-delay:.45s}

@keyframes km-slide-main{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-3px)}
}
@keyframes km-slide-sub{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}
@keyframes km-reel-5{
  0%{transform:translateY(100%);opacity:0}
  3%,17%{transform:translateY(0);opacity:1}
  20%,100%{transform:translateY(-100%);opacity:0}
}
@keyframes km-row-5{
  0%,20%{background:rgba(255,90,54,.22);color:#ffffff;transform:translateX(4px)}
  21%,100%{background:transparent;color:#94a3b8;transform:translateX(0)}
}
@keyframes km-wipe-bar{
  0%{transform:scaleX(0);transform-origin:0 50%}
  20%,80%{transform:scaleX(1);transform-origin:0 50%}
  100%{transform:scaleX(0);transform-origin:100% 50%}
}
@keyframes km-stomp{
  0%{transform:scaleX(.5);opacity:.45}
  100%{transform:scaleX(1.25);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  body.public .stage-piece,
  body.public .km-slide,
  body.public .km-row,
  body.public .stage-banner .scan,
  body.public .stage-cmyk i{animation:none!important}
  body.public .km-slide.s1{opacity:1!important;transform:none!important}
}

/* ---------- 2-B. 홈 시그니처 품목 쇼케이스 스트립 (.studio-showcase) ---------- */
body.public .studio-showcase{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin:0 0 18px;
}
body.public .showcase-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:6px;
  padding:16px 16px 15px;
  border-radius:18px;
  border:1px solid var(--pub-line);
  background:#fff;
  color:var(--pub-ink)!important;
  text-decoration:none!important;
  box-shadow:0 8px 22px -14px rgba(15,23,42,.08);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
body.public .showcase-card:hover{
  transform:translateY(-3px);
  border-color:var(--pub-coral);
  box-shadow:0 16px 32px -14px rgba(15,23,42,.15);
}
body.public .showcase-card.is-highlight{
  background:linear-gradient(145deg,#0b1324,#1e293b);
  border-color:#0b1324;
  color:#fff!important;
}
body.public .sc-tag{
  display:inline-flex;
  align-self:flex-start;
  padding:2px 8px;
  border-radius:999px;
  background:#f1f5f9;
  color:var(--pub-accent);
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
}
body.public .showcase-card.is-highlight .sc-tag{
  background:var(--pub-coral);
  color:#fff;
}
body.public .showcase-card strong{
  display:block;
  font-size:15px;
  font-weight:850;
  letter-spacing:-.025em;
  line-height:1.3;
}
body.public .showcase-card small{
  display:block;
  color:var(--pub-muted);
  font-size:12px;
  line-height:1.4;
}
body.public .showcase-card.is-highlight small{
  color:#cbd5e1;
}
@media(max-width:960px){
  body.public .studio-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  body.public .studio-showcase{grid-template-columns:1fr}
}

/* ---------- 3. 홈 Bento 섹션 (.process-v3, .board-v3, .trust-v3) ---------- */
body.public .process-v3{gap:16px;margin-top:18px}
body.public .pstep{
  border-radius:18px;
  padding:22px 22px 20px;
  border:1px solid var(--pub-line);
  background:#fff;
  box-shadow:0 8px 24px -12px rgba(15,23,42,.08);
}
body.public .pstep b{
  width:34px;
  height:34px;
  border-radius:11px;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  color:var(--pub-accent);
  font-size:14px;
  font-weight:850;
}
body.public .pstep strong{
  font-size:17px;
  color:var(--pub-ink);
  font-weight:800;
}
body.public .pstep span{
  margin-top:5px;
  color:var(--pub-muted);
  font-size:13.5px;
}

body.public .board-v3{gap:16px;margin-top:18px}
body.public .board-v3 section{
  border-radius:20px;
  padding:20px 22px;
  border:1px solid var(--pub-line);
  box-shadow:0 10px 28px -14px rgba(15,23,42,.08);
}
body.public .board-v3 h3{
  font-size:16px;
  font-weight:800;
  color:var(--pub-ink);
  padding-bottom:10px;
  border-bottom:1px solid #f1f5f9;
  margin-bottom:4px;
}
body.public .board-v3 .brow{
  padding:10px 8px;
  border-radius:10px;
  border-top:1px solid #f1f5f9;
}
body.public .board-v3 .brow:hover{background:#f8fafc}
body.public .board-v3 .bt{color:#1e293b;font-weight:650}
body.public .board-v3 .bd{color:#64748b;font-variant-numeric:tabular-nums}

/* 고대비 모던 소프트 배지 (상태 가독성 개선) */
body.public .pill{
  padding:4px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:-.01em;
}
body.public .pill.lime{background:#ecfdf5!important;color:#047857!important;border:1px solid #a7f3d0}
body.public .pill.blue{background:#eff6ff!important;color:#1d4ed8!important;border:1px solid #bfdbfe}
body.public .pill.p-P01{background:#fef3c7!important;color:#b45309!important;border:1px solid #fde68a}
body.public .pill.p-P04{background:#e0f2fe!important;color:#0369a1!important;border:1px solid #bae6fd}
body.public .pill.p-P07{background:#dcfce7!important;color:#15803d!important;border:1px solid #bbf7d0}
body.public .pill.p-P10{background:#eff6ff!important;color:#1d4ed8!important;border:1px solid #bfdbfe}

body.public .trust-v3{gap:16px;margin-top:18px}
body.public .trust-v3 div{
  border-radius:18px;
  padding:20px 22px;
  border:1px solid var(--pub-line);
  border-top:3px solid var(--pub-accent);
  background:#fff;
  box-shadow:0 8px 24px -12px rgba(15,23,42,.08);
}
body.public .trust-v3 div:nth-child(2){border-top-color:var(--pub-emerald)}
body.public .trust-v3 div:nth-child(3){border-top-color:var(--pub-gold)}
body.public .trust-v3 b{font-size:16px;color:var(--pub-ink);font-weight:800}
body.public .trust-v3 span{margin-top:5px;color:var(--pub-muted);font-size:13.5px}

/* ---------- 4. 서브페이지 상단 히어로 (.page-hero) & 단계 바 (.howto) ---------- */
body.public .page-hero{
  border-radius:22px;
  padding:30px 32px 26px;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(680px 320px at 90% 0%,rgba(56,189,248,.22),transparent 62%),
    radial-gradient(540px 280px at 10% 100%,rgba(37,99,235,.32),transparent 60%),
    linear-gradient(135deg,#0b1324 0%,#152546 60%,#1e3a6d 100%);
  color:#fff;
  box-shadow:0 20px 44px -20px rgba(11,19,36,.42);
}
body.public .page-hero .page-kicker{
  color:#38bdf8;
  font-weight:800;
  letter-spacing:.12em;
}
body.public .page-hero h1{
  color:#fff;
  font-size:clamp(26px,3.6vw,38px);
  letter-spacing:-.035em;
}
body.public .page-hero .page-lead{
  color:#cbd5e1;
  font-size:15px;
  max-width:56ch;
}
body.public .page-chips li{
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#e2e8f0;
  font-weight:700;
}

body.public .howto{
  gap:12px;
  margin-bottom:20px;
}
body.public .howto div{
  border-radius:16px;
  border:1px solid var(--pub-line);
  background:#fff;
  padding:15px 18px;
  box-shadow:0 4px 14px -6px rgba(15,23,42,.06);
}
body.public .howto b{
  border-radius:10px;
  background:#eff6ff;
  color:var(--pub-accent);
  font-weight:850;
}
body.public .howto strong{color:var(--pub-ink);font-weight:800}
body.public .howto span{color:var(--pub-muted)}

/* ---------- 5. 주문하기·견적문의 인터랙티브 폼 (.public-form) ---------- */
body.public .public-form{
  border-radius:22px;
  border:1px solid var(--pub-line);
  background:#fff;
  box-shadow:0 16px 40px -18px rgba(15,23,42,.1);
}
body.public .form-head{
  border-radius:21px 21px 0 0;
  padding:24px 28px 20px;
  background:linear-gradient(180deg,#f8fafc,#ffffff);
  border-bottom:1px solid var(--pub-line);
}
body.public .form-head .page-kicker{color:var(--pub-accent);font-weight:800}
body.public .form-head h2{color:var(--pub-ink);font-size:22px;font-weight:850}
body.public .form-section{
  padding:24px 28px;
  border-top:1px solid #f1f5f9;
}
body.public .form-section-head h3{
  color:var(--pub-ink);
  font-size:17px;
  font-weight:800;
}
body.public .form-section-head p{color:var(--pub-muted);font-size:13px}

body.public .field-sub{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  color:var(--pub-ink-soft);
  font-size:13.5px;
  font-weight:700;
}
body.public .field-label{
  color:var(--pub-ink);
  font-size:13.5px;
  font-weight:750;
}
body.public .field input:not([type=checkbox]):not([type=radio]),
body.public .field textarea,
body.public .field select{
  border-radius:12px;
  border:1.5px solid var(--pub-line);
  background:#f8fafc;
  color:var(--pub-ink);
  font-size:15px;
  padding:12px 14px;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
body.public .field input:not([type=checkbox]):not([type=radio]):hover,
body.public .field textarea:hover,
body.public .field select:hover{
  border-color:#94a3b8;
  background:#fff;
}
body.public .field input:focus,
body.public .field textarea:focus,
body.public .field select:focus{
  background:#fff;
  border-color:var(--pub-accent);
  outline:none;
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
}

/* 라디오·체크박스 칩 (.chips) — 체크 아이콘 + 선명한 액티브 링 */
body.public .chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
body.public .chips label{
  margin:0;
  cursor:pointer;
}
body.public .chips span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:8px 15px;
  border-radius:12px!important;
  border:1.5px solid var(--pub-line);
  background:#f8fafc;
  color:#334155;
  font-size:13.5px;
  font-weight:750;
  transition:all .15s ease;
}
body.public .chips span:hover{
  border-color:#94a3b8;
  background:#fff;
  color:var(--pub-ink);
}
body.public .chips input:checked + span{
  background:#eff6ff!important;
  border-color:var(--pub-accent)!important;
  color:#1d4ed8!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
body.public .chips input:checked + span::before{
  content:"✓";
  display:inline-grid;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:var(--pub-accent);
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
}

body.public .sr-select-sync{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
/* 지점 원클릭 카드 그리드 (.branch-picker) */
body.public .branch-picker{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
body.public .branch-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  width:100%;
  min-height:58px;
  margin:0;
  padding:10px 14px;
  border-radius:12px;
  border:1.5px solid var(--pub-line);
  background:#f8fafc;
  color:var(--pub-ink);
  text-align:left;
  cursor:pointer;
  box-shadow:none;
  transition:all .16s ease;
}
body.public .branch-card:hover{
  border-color:#94a3b8;
  background:#fff;
  transform:translateY(-1px);
}
body.public .branch-card.is-active{
  background:#eff6ff;
  border-color:var(--pub-accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
body.public .branch-card b{
  font-size:14.5px;
  font-weight:850;
  color:var(--pub-ink);
  letter-spacing:-.02em;
}
body.public .branch-card small{
  font-size:11.5px;
  color:#64748b;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.public .branch-card.is-active b{color:#1d4ed8}
body.public .branch-card.is-active small{color:#2563eb}
body.public .branch-addr-box{
  display:block;
  margin-top:4px;
  padding:9px 12px;
  border-radius:10px;
  background:#f8fafc;
  border:1px dashed var(--pub-line-strong);
  color:#475569;
  font-size:12.5px;
  font-weight:650;
}
body.public .branch-addr-box.is-selected{
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  color:#166534;
}

/* 품목 원클릭 칩 그리드 (.item-picker) */
body.public .item-picker{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
body.public .item-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  min-height:40px;
  margin:0;
  padding:7px 14px;
  border-radius:11px;
  border:1.5px solid var(--pub-line);
  background:#f8fafc;
  color:#334155;
  font-size:13.5px;
  font-weight:750;
  cursor:pointer;
  box-shadow:none;
}
body.public .item-chip:hover{
  background:#fff;
  border-color:#94a3b8;
  color:var(--pub-ink);
}
body.public .item-chip.is-featured{
  border-color:#93c5fd;
  background:#f0f7ff;
}
body.public .item-chip-tag{
  font-style:normal;
  font-size:10px;
  font-weight:850;
  padding:2px 6px;
  border-radius:999px;
  background:var(--pub-accent);
  color:#fff;
}
body.public .item-chip.is-active{
  background:#0f172a;
  border-color:#0f172a;
  color:#fff;
  box-shadow:0 6px 14px -6px rgba(15,23,42,.4);
}
body.public .item-chip.is-active .item-chip-tag{
  background:#38bdf8;
  color:#0f172a;
}

/* 사이즈 빠른 프리셋 (.size-presets) & 수량 스테퍼 (.qty-control) */
body.public .size-presets,
body.public .qty-presets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}
body.public .size-chip,
body.public .qty-chip{
  width:auto;
  min-height:32px;
  margin:0;
  padding:4px 10px;
  border-radius:8px;
  border:1px solid var(--pub-line);
  background:#fff;
  color:#475569;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  box-shadow:none;
}
body.public .size-chip:hover,
body.public .qty-chip:hover{
  border-color:var(--pub-accent);
  color:var(--pub-accent);
  background:#eff6ff;
}
body.public .size-chip.is-active,
body.public .qty-chip.is-active{
  background:var(--pub-accent);
  border-color:var(--pub-accent);
  color:#fff;
}
body.public .qty-control{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  gap:6px;
  align-items:center;
}
body.public .qty-control input{
  text-align:center;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
body.public .qty-step{
  width:44px;
  height:46px;
  min-height:46px;
  margin:0;
  padding:0;
  border-radius:11px;
  border:1.5px solid var(--pub-line);
  background:#f8fafc;
  color:var(--pub-ink);
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:none;
}
body.public .qty-step:hover{
  background:#eff6ff;
  border-color:var(--pub-accent);
  color:var(--pub-accent);
}
body.public .post-Selected-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
  padding:2px 9px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:11.5px;
  font-weight:750;
}
body.public .post-Selected-meta[hidden]{display:none!important}
body.public .post-clear-btn{
  width:auto;
  min-height:0;
  margin:0;
  padding:0 4px;
  border:0;
  background:transparent;
  color:#dc2626;
  font-size:11.5px;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
  box-shadow:none;
}
body.public .post-guide{
  margin-left:auto;
  padding:4px 10px;
  border-radius:8px;
  background:#f1f5f9;
  color:#0f172a!important;
  font-size:12px;
  font-weight:750;
  text-decoration:none;
}
body.public .post-guide:hover{background:#e2e8f0}

/* 파일 업로드 스튜디오 드롭존 (.filebox) */
body.public .file-field .filebox{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:14px 16px;
  border-radius:14px;
  border:1.5px dashed #94a3b8;
  background:#f8fafc;
  transition:all .16s ease;
}
body.public .file-field .filebox.is-dragover{
  border-color:var(--pub-accent);
  background:#eff6ff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
body.public .file-field .filerow{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
}
body.public .file-field .filerow.has-file input[type=file]{
  border-color:#93c5fd;
  background:#fff;
  color:#0f172a;
  font-weight:700;
}
body.public .file-meta-badge{
  flex:0 0 auto;
  padding:4px 9px;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:11.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
body.public .file-meta-badge[hidden]{display:none!important}
body.public div.field.full.file-field input[type=file]{
  display:block;
  width:100%;
  min-width:0;
  margin:0;
  padding:12px 14px;
  border:1.5px solid var(--pub-line);
  border-radius:12px;
  background:#fff;
  color:var(--pub-ink);
  font-size:15px;
  line-height:1.4;
  box-shadow:none;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
body.public div.field.full.file-field input[type=file]:hover{
  border-color:#94a3b8;
  background:#f8fafc;
}
body.public div.field.full.file-field input[type=file]::file-selector-button{
  appearance:none;
  -webkit-appearance:none;
  height:34px;
  margin:0 12px 0 0;
  padding:0 14px;
  border:0;
  border-radius:8px;
  background:#0f172a;
  color:#fff;
  font-family:inherit;
  font-size:12.5px;
  font-weight:750;
  line-height:34px;
  cursor:pointer;
}
body.public div.field.full.file-field input[type=file]::file-selector-button:hover{
  background:#1e293b;
}
body.public .file-field .addbtn{
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-height:44px;
  margin:0;
  padding:0;
  border-radius:11px;
  background:var(--pub-accent);
  border-color:var(--pub-accent);
  color:#fff;
  font-size:20px;
  font-weight:800;
  line-height:1;
  box-shadow:none;
}
body.public .file-field .addbtn:hover{background:var(--pub-accent-dark)}
body.public .file-field .delbtn{
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-height:44px;
  margin:0;
  padding:0;
  border-radius:11px;
  background:#f1f5f9;
  border-color:#e2e8f0;
  color:#475569;
  font-size:20px;
  font-weight:800;
  line-height:1;
  box-shadow:none;
}
body.public .file-field .delbtn:hover{
  background:#fee2e2;
  border-color:#fecaca;
  color:#dc2626;
}

/* 하단 접수 바 (.stickybar) — 입력칸을 가리지 않도록 폼 하단 카드 바로 배치 */
body.public .public-form .stickybar{
  position:relative;
  bottom:auto;
  z-index:auto;
  margin:0;
  padding:18px 28px calc(18px + env(safe-area-inset-bottom));
  border-radius:0 0 21px 21px;
  border-top:1px solid #0b1324;
  background:linear-gradient(135deg,#0b1324,#1e293b);
  color:#fff;
  box-shadow:none;
}
body.public .sticky-copy b{color:#fff;font-size:16px}
body.public .sticky-copy small{color:#cbd5e1;font-size:12.5px}
body.public .public-form .stickybar button{
  border-radius:12px;
  background:linear-gradient(135deg,#ff5a36,#e03e1a)!important;
  color:#fff!important;
  font-weight:800;
  padding:0 28px;
  box-shadow:0 10px 24px -8px rgba(255,90,54,.65);
}
body.public .public-form .stickybar button:hover{
  background:linear-gradient(135deg,#e04320,#c43210)!important;
}

/* ---------- 6. 우측 안내 카드 (.help-card), 진행조회, 유의사항, 완료 화면 ---------- */
body.public .help-card{
  padding:24px 22px 20px;
  border-radius:20px;
  border:1px solid var(--pub-line);
  background:#fff;
  box-shadow:0 12px 32px -16px rgba(15,23,42,.08);
}
body.public .help-card .page-kicker{
  display:block;
  margin:0 0 6px;
  color:var(--pub-accent);
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
}
body.public .help-card h2{
  margin:0 0 8px;
  color:var(--pub-ink);
  font-size:19px;
  font-weight:850;
}
body.public .help-card>p:not(.page-kicker){
  margin:0 0 16px;
  color:var(--pub-muted);
  font-size:13.5px;
  line-height:1.65;
}
body.public .help-list{
  display:grid;
  gap:8px;
  margin:0 0 14px;
  padding:0;
  border-top:0;
}
body.public .help-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border-radius:11px;
  background:#f8fafc;
  border:1px solid #eef2f6;
  font-size:13px;
}
body.public .help-list b{
  color:var(--pub-ink);
  font-weight:800;
}
body.public .help-list span{
  color:var(--pub-muted);
  font-weight:600;
}
body.public .help-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--pub-line);
  background:#f8fafc;
  color:var(--pub-ink)!important;
  font-size:13px;
  font-weight:700;
}
body.public .help-link b{
  color:var(--pub-accent);
  font-weight:800;
}
body.public .help-link:hover{
  border-color:var(--pub-accent);
  background:#eff6ff;
}

body.public .lookup-form .lookup-submit{
  border-radius:12px;
  background:linear-gradient(135deg,#0f172a,#1e3a8a)!important;
  box-shadow:0 10px 24px -8px rgba(15,23,42,.4);
}
body.public .track-hero{
  border-radius:20px;
  border:1px solid var(--pub-line);
  background:linear-gradient(135deg,#ffffff,#f8fafc);
}
body.public .record-card,
body.public .answer-card,
body.public .result-summary>div,
body.public .result-shell .thread{
  border-radius:18px;
  border:1px solid var(--pub-line);
}
body.public .notice-list li{
  border-radius:16px;
  border:1px solid var(--pub-line);
  box-shadow:0 6px 18px -10px rgba(15,23,42,.07);
}
body.public .notice-list li::before{
  background:#eff6ff;
  color:var(--pub-accent);
}
body.public footer{
  background:#0b1324;
  color:#cbd5e1;
  border-top:1px solid rgba(255,255,255,.08);
}
body.public footer .wrap{
  color:#cbd5e1;
}
body.public footer b{
  background:var(--pub-coral);
  border-color:var(--pub-coral);
  color:#ffffff!important;
  font-weight:850;
  padding:5px 11px;
  border-radius:8px;
}
body.public footer .footer-main a{color:#f8fafc;font-weight:700}
body.public footer .footer-main a:hover{color:#38bdf8}
body.public footer .footer-copy{color:#94a3b8}

@media(max-width:760px){
  body.public .branch-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.public .hero-stage{height:220px}
  body.public .stage-spec-pill{font-size:10.5px;padding:4px 10px}
  body.public .public-form .stickybar{margin:0 10px 10px;padding:12px 16px;bottom:8px}
}
/* 또한 views.js 의 자동 링크->버튼 변환 스크립트가 .showcase-card 를 건드리지 않게 보호 */
body.public .showcase-card.btn{
  padding:16px 16px 15px!important;
  background:#fff!important;
  border:1px solid var(--pub-line)!important;
}
body.public .showcase-card.is-highlight.btn{
  background:linear-gradient(145deg,#0b1324,#1e293b)!important;
  border-color:#0b1324!important;
  color:#fff!important;
}
body.public .showcase-card .button-icon{display:none!important}