@charset "utf-8";

/* ========== 전체 서브페이지  ========== */

/* 체크리스트 구현 */
.chk-wrap {--chk-mint:#5ad3c0; --chk-pt10:#2f7fe2; --chk-pt7:#5ad3c0; --chk-pt5:#f4b740; --chk-pt3:#f07a3a; --chk-pt1:#e0565b; --chk-na:#2c2c2c;}
.chk-title {margin-bottom:40px; color:#2c2c2c; font-size:36px; font-weight:600; line-height:1.3889em; letter-spacing:-0.72px;}
.chk-state {display:inline-flex; align-items:center; gap:6px; padding:6px 16px; color:var(--chk-mint); font-weight:600; line-height:1.625em; letter-spacing:-0.32px; border:1px solid var(--chk-mint); border-radius:80px;}
.chk-state:before {content:""; width:6px; height:6px; background:var(--chk-mint); border-radius:80px;}
/* 진행중 뱃지 — 완료(민트)와 구분되도록 기존 토큰 --chk-pt10 을 쓴다. 점(:before)까지 같이 바뀌어야 해서 CSS 로 둔다(인라인 style 로는 :before 를 못 바꾼다) */
.chk-state.ing {color:var(--chk-pt10); border-color:var(--chk-pt10);}
.chk-state.ing:before {background:var(--chk-pt10);}
.chk-state.approved {color:#7b61d1; border-color:#7b61d1;}	/* 최종승인(관리자 승인 완료) */
.chk-state.approved:before {background:#7b61d1;}
.chk-badge {display:inline-flex; flex-shrink:0; align-items:center; padding:4px 12px; color:#fff; font-size:14px; font-weight:600; line-height:1.7143em; letter-spacing:-0.28px; border-radius:80px;}
.chk-badge.good {background:var(--chk-pt10);}
.chk-badge.bad {background:var(--chk-pt1);}
/* 최종 확인의 미응답 뱃지는 그 문항으로 가는 링크다. a 라서 색을 다시 지정해야 한다 */
a.chk-badge {color:#fff; transition:opacity .12s linear;}
a.chk-badge:hover, a.chk-badge:focus-visible {opacity:.82;}
.chk-badge-go:after {content:"\203A"; margin-left:5px; font-size:15px; font-weight:400; line-height:1;}
.chk-sec-score {display:inline-flex; align-items:center; padding:6px 14px; color:#505050; font-weight:600; line-height:1.625em; letter-spacing:-0.32px; border:1px solid #878787; border-radius:80px;}
.chk-btn {display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; font-weight:600; line-height:1.625em; letter-spacing:-0.32px; border-radius:4px; cursor:pointer;}
.chk-btn.dark {color:#fff; background:#121212; border:0;}
.chk-btn.line {color:#2c2c2c; background:#fff; border:1px solid #2c2c2c;}
.chk-btn.large {padding:16px 32px; font-size:var(--font-size20); line-height:1.7em; letter-spacing:-0.4px;}

/* 목록 (피그마 13264:564) */
.chk-list-top {display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:80px;}
.chk-list-tit {color:#2c2c2c; font-size:48px; font-weight:600; line-height:1.2917em; letter-spacing:-0.02em;}
/* 역할별 목록 페이지 머리(제목 + 역할 태그 + 설명) */
.chk-list-head {display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0;}
.chk-role-tag {display:inline-flex; align-items:center; margin-left:12px; padding:4px 12px; color:#fff; font-size:14px; font-weight:600; line-height:1.5em; letter-spacing:-0.02em; background:var(--color-primary, #2f7fe2); border-radius:80px; vertical-align:middle;}
.chk-list-sub {color:#878787; font-size:16px; font-weight:400; line-height:1.5em; letter-spacing:-0.02em;}
/* 주차 필터 칩 */
.chk-chips {display:flex; flex-wrap:wrap; gap:8px;}
.chk-chips a {display:inline-flex; align-items:center; padding:6px 14px; color:#505050; font-size:15px; font-weight:500; line-height:1.5em; letter-spacing:-0.02em; border:1px solid #dfdfdf; border-radius:80px; transition:color .12s linear, background-color .12s linear, border-color .12s linear;}
.chk-chips a:hover {border-color:#2c2c2c; color:#2c2c2c;}
.chk-chips a.on {color:#fff; background:#121212; border-color:#121212;}
.chk-add-btn {display:inline-flex; align-items:center; justify-content:center; padding:14px 20px; color:#fff; font-size:18px; font-weight:600; line-height:1.5556em; letter-spacing:-0.02em; background:#121212; border-radius:4px;}
.chk-total {padding-bottom:24px; color:#505050; font-size:20px; font-weight:500; line-height:1.5em; letter-spacing:-0.02em; border-bottom:1px solid #2c2c2c;}
.chk-total em {color:var(--color-primary); font-style:normal; font-weight:500;}
.chk-list-layout {display:flex; align-items:stretch; max-width:100%; border-bottom:1px solid #eee;}
.chk-filter {display:flex; flex-direction:column; flex-shrink:0; gap:40px; width:350px; padding:30px 0 0; border-right:1px solid #eee;}
.chk-filter-box {display:flex; flex-direction:column; padding-right:30px;}
.chk-filter-box h3 {margin-bottom:16px; color:#2c2c2c; font-size:20px; font-weight:500; line-height:1.7em; letter-spacing:-0.02em;}
.chk-search {display:flex; align-items:center; justify-content:space-between; gap:8px; height:58px; padding:16px 20px; border:1px solid #dfdfdf; border-radius:4px;}
.chk-search .input {flex:1; min-width:0; height:auto; padding:0; color:#2c2c2c; font-weight:400; line-height:1.625em; letter-spacing:-0.02em; background:none; border:0;}
.chk-search .input::placeholder {color:#a8a8a8;}
.chk-search button {flex-shrink:0; width:18px; height:18px; padding:0; text-indent:-9999px; overflow:hidden; background:url("../images/sub/search-ico.svg") 50% 50% / 18px 18px no-repeat; border:0; cursor:pointer;}
.chk-select {display:block; width:100%; height:60px; padding:0 44px 0 20px; color:#505050; font-size:18px; font-weight:500; line-height:1.5556em; letter-spacing:-0.02em; background:#fff url("../images/bbs/select.svg") right 20px center no-repeat; background-size:12px 6px; border:1px solid #eee; border-radius:4px; appearance:none;}
.chk-filter-box .chk-select + .chk-select {margin-top:8px;}
/* 상위(그룹사·브랜드)를 고르기 전 잠긴 상태. opacity 대신 색을 직접 지정한다 — iOS 사파리가 disabled select 를 제멋대로 흐리게 만든다 */
.chk-select:disabled {color:#aaa; background-color:#fafafa; border-color:#eee; opacity:1; cursor:not-allowed;}
.chk-list-main {flex:1; min-width:0; max-width:100%;}
.chk-board {padding:30px 30px 40px; border-bottom:1px solid #eee; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.chk-board:last-child {padding-bottom:60px; border-bottom:0;}
.chk-board-hd {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; padding-right:8px;}
.chk-board-hd h3 {display:flex; align-items:center; gap:10px; color:#2c2c2c; font-size:22px; font-weight:500; line-height:1.6364em; letter-spacing:-0.02em;}
.chk-sec-ico {display:inline-block; flex-shrink:0; width:24px; height:24px; font-style:normal; background-position:50% 50%; background-repeat:no-repeat; background-size:24px 24px; border-radius:80px;}
.chk-sec-ico.ing {background-image:url("../images/sub/status-ing.png");}
.chk-sec-ico.done {background-image:url("../images/sub/status-complete.png");}
.chk-sort {display:flex; align-items:center; gap:10px;}
.chk-sort a {color:#878787; font-weight:500; line-height:1.625em; letter-spacing:-0.02em;}
.chk-sort a + a:before {content:""; display:inline-block; width:1px; height:12px; margin-right:10px; background:#dfdfdf; vertical-align:middle; position: relative; top: -2px; }
.chk-sort a.on {color:#2c2c2c;}
.chk-board table {width:100%; table-layout:fixed; border-collapse:collapse; border-top:1px solid #ccc;}
.chk-board .col-store {width:320px;}
.chk-board thead th {padding:20px; color:#2c2c2c; font-size:18px; font-weight:500; line-height:1.5556em; letter-spacing:-0.02em; text-align:center; background:#fafafa; border-bottom:1px solid #eee;}
.chk-board tbody td {padding:20px; color:#676767; font-size:18px; font-weight:400; line-height:1.5556em; letter-spacing:-0.02em; text-align:center; vertical-align:middle; border-bottom:1px solid #eee;}
.chk-board tbody td:first-child {color:#2c2c2c; font-weight:500;}
.chk-board tbody td a {color:#2c2c2c;}
/* 빈 목록 안내의 검정 버튼 — 위 규칙(td a 검정 글자)이 더 세서 글자가 배경색에 묻혔다. 흰 글자로 되돌린다 */
.chk-board tbody td a.chk-add-btn {color:#fff;}
.chk-board tbody td[data-label="관리"] {white-space:nowrap;}
.chk-board tbody tr:hover td {background:#fafafa;}
.chk-dot {display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:18px; font-weight:500; line-height:1.5556em; letter-spacing:-0.02em;}
.chk-dot:before {content:""; width:8px; height:8px; border-radius:80px;}
.chk-dot.ing {color:#2f7fe2;}
.chk-dot.ing:before {background:#2f7fe2;}
.chk-dot.done {color:#5ad3c0;}
.chk-dot.done:before {background:#5ad3c0;}
.chk-dot.approved {color:#7b61d1;}
.chk-dot.approved:before {background:#7b61d1;}
.chk-board .paginate {margin-top:50px;}

/* 상세 (피그마 13264:896) */
.chk-view-head {display:flex; flex-direction:column; gap:30px; margin-bottom:80px; padding:32px; border:1px solid #eee; border-radius:8px;}
.chk-view-top {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.chk-view-tit {display:flex; flex:1; align-items:center; gap:10px; min-width:0;}
.chk-view-tit h2 {color:#2c2c2c; font-size:36px; font-weight:600; line-height:1.3889em; letter-spacing:-0.72px;}
.chk-view-acts {display:flex; align-items:center; gap:4px;}
.chk-mini {display:inline-flex; align-items:center; gap:6px; padding:6px 12px; color:#fff; font-weight:600; line-height:1.625em; letter-spacing:-0.32px; border:0; border-radius:4px; cursor:pointer;}
.chk-mini.edit {background:#2c2c2c;}
.chk-mini.edit:before {content:""; width:16px; height:16px; background:url("../images/sub/update-ico.png") 50% 50% no-repeat; background-size:16px;}
.chk-mini.down {background:var(--color-primary);}
.chk-mini.down:before {content:""; width:16px; height:16px; background:url("../images/sub/download-ico.png") 50% 50% no-repeat; background-size:16px;}
.chk-mini.del {background:#e0565b;}
/* 가맹점 검색 선택기 (bbs/chk_branch_picker.php) — 지점이 수백 개라 select 대신 검색 */
.chk-bp {display:flex; flex-direction:column; gap:8px; min-width:0;}
.chk-bp-cur {display:flex; align-items:center; gap:10px; min-height:60px; padding:0 20px; color:#2c2c2c; font-weight:500; line-height:1.5em; letter-spacing:-0.32px; background:#fff; border:1px solid #ddd; border-radius:4px;}
.chk-bp-cur-name {flex:1; min-width:0; word-break:keep-all;}
.chk-bp-change {flex-shrink:0; padding:4px 12px; color:#505050; font-size:14px; font-weight:500; background:#f6f6f6; border:1px solid #ddd; border-radius:80px; cursor:pointer;}
.chk-bp-cur[hidden], .chk-bp-search[hidden] {display:none;}
.chk-bp-search {display:flex; flex-direction:column; gap:6px; padding:12px; background:#f6f6f6; border:1px solid #eee; border-radius:4px;}	/* 검색 영역은 배경으로 묶어 구분 */
.chk-bp-row {display:flex; gap:6px;}
.chk-bp-row .chk-select, .chk-bp-row .input {flex:1; min-width:0;}
.chk-bp-row .chk-btn {flex-shrink:0; min-width:90px; height:60px;}
.chk-bp-list {display:flex; flex-direction:column; gap:6px; max-height:320px; margin-top:4px; overflow-y:auto;}
.chk-bp-item {display:block; width:100%; padding:12px 16px; color:#2c2c2c; font-weight:500; line-height:1.5em; letter-spacing:-0.32px; text-align:left; background:#fafafa; border:1px solid #eee; border-radius:4px; cursor:pointer;}
.chk-bp-item:hover {border-color:var(--color-primary); color:var(--color-primary); background:#fff;}
.chk-bp-note {margin-top:4px; color:#878787; font-size:14px; line-height:1.5em;}
.chk-bp-note.err {color:#e0565b;}
.chk-bp.is-invalid .chk-bp-cur, .chk-bp.is-invalid .chk-bp-kwd {border-color:#e0565b;}
@media (max-width: 640px) {
	.chk-bp-row {flex-wrap:wrap;}
	.chk-bp-row .chk-btn {width:100%;}
}
.chk-meta {display:flex; flex-wrap:wrap; gap:40px; padding:20px; color:#505050; font-size:var(--font-size18); font-weight:500; line-height:1.5556em; letter-spacing:-0.36px; background:#f8f8f8; border-radius:4px;}
.chk-meta li {display:flex; align-items:center; gap:10px;}
.chk-meta li span {color:#aaa;}
/* 상세 총점 블록 — 백분율(큰 숫자) + 획득/만점 + 섹션별 막대. 색은 chkPtColor() 구간 색을 인라인으로 받는다 */
.chk-view-score {display:flex; align-items:stretch; gap:24px; padding:24px 28px; border:1px solid #eee; border-radius:8px;}
.chk-view-score-main {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; flex-shrink:0; min-width:220px; padding:20px 24px; background:#fafafa; border-radius:8px;}
.chk-view-score-main .lbl {color:#878787; font-size:14px; font-weight:500; line-height:1.5em; letter-spacing:-0.28px;}
/* 원형 링 — conic-gradient 채움 비율이 곧 백분율 */
.chk-ring {position:relative; width:150px; height:150px; border-radius:50%;}
.chk-ring-in {position:absolute; inset:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fafafa; border-radius:50%;}
.chk-ring-in strong {font-size:30px; font-weight:700; line-height:1.1em; letter-spacing:-0.02em;}
.chk-ring-in span {color:#505050; font-size:14px; font-weight:600; line-height:1.5em;}
.chk-view-score-main .note {color:#aaa; font-size:12px; font-weight:400; line-height:1.5em;}
/* 섹션별 소계 — 섹션명 / 가로 막대 / 획득·총점, 위에서 아래로 */
.chk-view-score-secs {display:flex; flex:1; flex-direction:column; justify-content:center; gap:12px; min-width:0;}
.chk-view-score-secs li {display:flex; align-items:center; gap:16px;}
.chk-view-score-secs .name {flex-shrink:0; width:150px; color:#2c2c2c; font-size:15px; font-weight:500; line-height:1.5em; letter-spacing:-0.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chk-view-score-secs .bar {flex:1; height:12px; background:#eee; border-radius:80px; overflow:hidden;}
.chk-view-score-secs .bar i {display:block; height:100%; border-radius:80px; transition:width .3s ease;}
.chk-view-score-secs .val {flex-shrink:0; min-width:72px; color:#2c2c2c; font-size:15px; font-weight:600; line-height:1.5em; text-align:right;}
/* 목록 완료 행 점수 뱃지 */
.chk-score-pill {display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.chk-score-pill .main {display:inline-flex; align-items:center; padding:2px 10px; color:#fff; font-size:15px; font-weight:600; line-height:1.6em; border-radius:80px;}
.chk-score-pill .pct {color:#aaa; font-size:12px; font-weight:500;}
.chk-sec {padding:50px 0 60px; border-top:1px solid #ddd;}
.chk-sec:first-of-type {border-top:1px solid #2c2c2c;}
.chk-sec-hd {display:flex; align-items:center; justify-content:space-between; margin-bottom:30px;}
.chk-sec-tit {color:#2c2c2c; font-size:var(--font-size28); font-weight:500; line-height:1.5em; letter-spacing:-0.56px;}
.chk-info-box {display:flex; flex-direction:column; gap:4px; padding:24px; border:1px solid #ddd; border-radius:8px; margin-top: 30px; }
/* 라벨 칸은 고정 폭 + 줄어들지 않게 — 템플릿별 추가 항목("주방 직원 인적사항" 등)은 라벨이 길어 80px 에서는 찌그러졌다.
 * 값은 남은 폭을 쓰고 여러 줄이면 위쪽 정렬 */
.chk-info-box li {display:flex; align-items:flex-start; gap:12px; color:#505050; font-size:var(--font-size18); font-weight:400; line-height:1.5556em; letter-spacing:-0.36px;}
.chk-info-box li span {display:flex; flex:0 0 170px; align-items:center; gap:8px; color:#878787; font-weight:500; word-break:keep-all;}
.chk-info-box li span:before {content:""; width:4px; height:4px; background:#ccc; border-radius:80px;}
.chk-grid {display:flex; flex-wrap:wrap; gap:24px 20px;}
.chk-card {display:flex; flex-direction:column; gap:12px; width:calc(50% - 10px);}
.chk-card.half {width:calc(50% - 10px);}
.chk-card-hd {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.chk-card-hd .num, .chk-q-tit .num, .chk-sum-list .num {display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:22px; height:22px; color:#fff; font-size:13px; font-weight:600; line-height:1.5385em; letter-spacing:-0.02em; background:#1c1c1c; border-radius:80px;}
/* .chk-card-hd .num {margin-top:6px;} */
/* .chk-card-hd .chk-badge {margin-top:5px;} */
.chk-card-hd h4 {flex:1; min-width:0; color:#2c2c2c; font-size:var(--font-size20); font-weight:500; line-height:1.7em; letter-spacing:-0.4px;}
.chk-q-group {margin:-6px 0 12px; color:#878787; font-size:14px; font-weight:500; line-height:1.5em; letter-spacing:-0.28px;}
.chk-q-group i {margin:0 6px; color:#ccc; font-style:normal;}
.chk-answer {padding:20px; border:1px solid #ddd; border-radius:8px;}
.chk-answer p {color:#505050; font-size:var(--font-size18); font-weight:400; line-height:1.5556em; letter-spacing:-0.36px;}
.chk-photos {display:flex; gap:4px;}
.chk-photos .thumb {position:relative; display:block; width:169px; overflow:hidden; border-radius:4px;}
.chk-photos .thumb:before {content:""; display:block; padding-bottom:71.01%;}
.chk-photos .thumb img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.chk-view-btns {display:flex; justify-content:center; padding-top:60px;}

/* 이미지 팝업 */
#PhotoDetail .ws-modal-wrap {background:rgba(0,0,0,.72);}
#PhotoDetail .chk-photo-inner {max-width:1227px; background:transparent; overflow:visible;}
.chk-photo-stage {position:relative; width:100%; overflow:hidden; background:#111; border-radius:8px;}
.chk-photo-stage:before {content:""; display:block; padding-bottom:71.23%;}
.chk-photo-stage img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
#PhotoDetail .ws-modal-close {position:absolute; right:32px; top:32px; z-index:2; display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:16px; background:rgba(0,0,0,.4); background-image:none; border:0; border-radius:80px; backdrop-filter:blur(12px); cursor:pointer;}
#PhotoDetail .ws-modal-close svg, .chk-photo-nav svg {display:block;}
.chk-photo-paginate {position:absolute; left:0; right:0; bottom:32px; z-index:2; display:flex; align-items:center; justify-content:center; gap:8px;}
.chk-photo-nav {display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:14px; background:rgba(0,0,0,.24); border:0; border-radius:4px; backdrop-filter:blur(12px); cursor:pointer;}

/* 작성 */
.chk-write-box {display:flex; align-items:stretch; border-top:1px solid #2c2c2c;}
.chk-side {flex-shrink:0; width:350px; padding:30px 30px 0 0; border-right:1px solid #eee; border-bottom:1px solid #eee;}
.chk-side ul {display:flex; flex-direction:column; gap:8px;}
.chk-side li a {display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 20px; color:#505050; font-size:var(--font-size18); font-weight:500; line-height:1.5556em; letter-spacing:-0.36px; background:#fff; border:1px solid #eee; border-radius:4px;}
.chk-side li a:after {content:""; width:6px; height:6px; background:#ccc; border-radius:80px;}
/* 단계 상태 — 완료(민트) / 일부만 응답(노랑) / 제출을 막는 미응답(빨강).
 * 색은 채점에 쓰는 토큰(--chk-pt5, --chk-pt1)을 그대로 쓴다. .current 보다 앞에 둬야 현재 단계는 어두운 칩이 이긴다 */
.chk-side li.done a {color:var(--chk-mint); background:#e8f8f6; border-color:#e8f8f6;}
.chk-side li.done a:after {background:var(--chk-mint);}
.chk-side li.warn a {color:var(--chk-pt5); background:#fdf6e8; border-color:#fdf6e8;}
.chk-side li.warn a:after {background:var(--chk-pt5);}
.chk-side li.error a {color:var(--chk-pt1); background:#fdf3f3; border-color:#fdf3f3;}
.chk-side li.error a:after {background:var(--chk-pt1);}
.chk-side li.current a {color:#fff; font-weight:600; background:#2c2c2c; border-color:#2c2c2c;}
.chk-side li.current a:after {width:16px; height:16px; background:#2c2c2c url("../images/sub/update-ico.png") 50% 50% no-repeat; background-size:16px; border-radius:0;}
/* 현재 단계는 어두운 칩이라 점 색이 묻힌다. 상태는 칩 안쪽 테두리로 보여준다 */
.chk-side li.current.done a {box-shadow:inset 0 0 0 2px var(--chk-mint);}
.chk-side li.current.warn a {box-shadow:inset 0 0 0 2px var(--chk-pt5);}
.chk-side li.current.error a {box-shadow:inset 0 0 0 2px var(--chk-pt1);}
.chk-main {flex:1; min-width:0;}
.chk-panel {padding:30px 30px 40px; border-bottom:1px solid #eee;}
.chk-panel-tit {color:#2c2c2c; font-size:var(--font-size22); font-weight:500; line-height:1.6364em; letter-spacing:-0.44px;}
.chk-panel-hd {display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.chk-panel-hd .chk-panel-tit {margin:0;}
.chk-fields {display:flex; flex-direction:column; gap:20px; margin-top:30px;}
.chk-field-row {display:flex; gap:20px;}	/* 한 줄에 두 필드(방문일·주차, 직원 수 짝) — 세로 간격(.chk-fields gap 20px)과 같은 폭. 6px 은 너무 붙어 보였다 */
.chk-field {display:flex; flex:1; flex-direction:column; gap:10px; min-width:0;}
.chk-field.half {max-width:calc(50% - 10px);}
.chk-field label, .chk-lbl {color:#505050; font-weight:500; line-height:1.5em; letter-spacing:-0.32px;}
.chk-field label .chk-req {color:#e0565b; font-style:normal;}	/* 기본정보 추가 항목의 필수 표시 */
/* 단위 고정 입력칸 (주차) — 숫자만 치고 단위는 오른쪽에 붙어 있다 */
.chk-unit-wrap {position:relative;}
.chk-unit-wrap .input {padding-right:70px;}
.chk-unit {position:absolute; top:50%; right:20px; transform:translateY(-50%); color:#878787; font-weight:500; pointer-events:none;}
.chk-field .input {display:block; width:100%; height:60px; padding:0 20px; color:#2c2c2c; font-weight:400; line-height:1.5em; letter-spacing:-0.32px; background:#fff; border:1px solid #ddd; border-radius:4px;}
.chk-field .input::placeholder {color:#878787;}
.chk-field textarea.input {height:120px; padding:20px; resize:none;}
.chk-date {display:flex; gap:4px;}
.chk-date .input {flex:1;}
.chk-date-btn {flex-shrink:0; width:60px; height:60px; text-indent:-9999px; overflow:hidden; background:#7b61d1 url("../images/sub/datepicker.png") 50% 50% no-repeat; background-size:24px; border:0; border-radius:4px; cursor:pointer;}

/* 작성 문항 공통 (고객응대~기본점검) */
.chk-q {padding:30px 30px 40px; border-bottom:1px solid #eee;}
.chk-q-head {display:flex; align-items:center; justify-content:space-between; gap:40px;}
.chk-q-tit {display:flex; flex:1; align-items:center; gap:10px; min-width:0;}
.chk-q-tit .num {width:24px; height:24px; margin-top:0; font-size:14px; line-height:1.7143em; letter-spacing:-0.28px;}
.chk-q-tit h3 {color:#2c2c2c; font-size:var(--font-size22); font-weight:500; line-height:1.6364em; letter-spacing:-0.44px;}
.chk-q-hint {margin-top:10px; padding-left:34px; color:#676767; font-size:var(--font-size18); font-weight:400; line-height:1.5556em; letter-spacing:-0.36px;}
.chk-guide-btn {display:inline-flex; flex-shrink:0; align-items:center; gap:6px; color:#2c2c2c; font-weight:500; line-height:1.5em; letter-spacing:-0.32px; background:none; border:0; cursor:pointer;}
.chk-guide-btn:after {content:""; width:16px; height:16px; background:url("../images/sub/write-toggle.png") 50% 50% no-repeat; background-size:16px; transition:.2s;}
.chk-guide-btn.on:after {transform:rotate(180deg);}
.chk-guide-box {display:flex; flex-direction:column; gap:6px; margin-top:14px; padding:16px; background:#f6f6f6; border-radius:4px;}
.chk-guide-box[hidden] {display:none;}
.chk-guide-box p {display:flex; align-items:center; color:#505050; font-weight:500; line-height:1.625em; letter-spacing:-0.32px;}
.chk-guide-box p span {flex-shrink:0; width:48px; color:#878787;}
.chk-q-body {display:flex; flex-direction:column; gap:20px; margin-top:30px;}
.chk-pts {display:flex; flex-wrap:wrap; gap:8px;}
.chk-pt {display:inline-flex; align-items:center; padding:8px 16px; color:#878787; font-weight:500; line-height:1.5em; letter-spacing:-0.32px; background:#fff; border:1px solid #ddd; border-radius:80px; cursor:pointer;}
.chk-pt input {position:absolute; width:0; height:0; opacity:0;}
.chk-pt.on {color:#fff; border-color:transparent;}
.chk-pt.pt10.on {background:var(--chk-pt10);}
.chk-pt.pt7.on {background:var(--chk-pt7);}
.chk-pt.pt5.on {background:var(--chk-pt5);}
.chk-pt.pt3.on {background:var(--chk-pt3);}
.chk-pt.pt1.on {background:var(--chk-pt1);}
.chk-pt.na.on {background:var(--chk-na);}
.chk-pt.sel.on {background:#2c2c2c;}	/* 체크박스 유형의 선택된 항목 */
.chk-pt.sel:hover {border-color:#2c2c2c; color:#2c2c2c;}
.chk-pt.sel.on:hover {color:#fff;}
.chk-files {display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.chk-files .thumb {position:relative; display:block; width:124px; overflow:hidden; border-radius:4px;}
.chk-files .thumb:before {content:""; display:block; padding-bottom:70.97%;}
.chk-files .thumb img {position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); object-fit:contain;}
/* 2026-09-14 고객 요청 14번 — 사진을 가리는 어두운 덮개를 없애고, 삭제(X)는 오른쪽 위 작은 원으로. 작성 중에도 사진을 볼 수 있어야 한다 */
.chk-files .thumb:after {content:""; position:absolute; inset:0; border:1px solid rgba(0,0,0,.12); border-radius:4px; pointer-events:none;}
.chk-files .thumb .del {position:absolute; z-index:2; right:4px; top:4px; left:auto; width:22px; height:22px; text-indent:-9999px; overflow:hidden; background:rgba(0,0,0,.6) url("../images/sub/photo-upload-close.png") 50% 50% no-repeat; background-size:12px; border:0; border-radius:50%; transform:none; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.chk-files .thumb .del:hover {background-color:#e0565b;}
/* 문항 옵션 표시 — 필수(*)·선택 / 사진 미첨부 안내 (2026-09-14 9·17번) */
.chk-q-tit .chk-req {color:#e0565b; font-style:normal; font-weight:600; margin-left:2px;}
.chk-q-tit .chk-opt {flex-shrink:0; color:#878787; font-size:13px; font-weight:400;}
.chk-badge.warn {background:#f4b740;}
.chk-add {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:124px; height:88px; color:#aaa; font-weight:500; line-height:1.5em; letter-spacing:-0.32px; background:#fafafa; border:1px solid #ddd; border-radius:4px; cursor:pointer;}
.chk-add:before {content:""; width:24px; height:18px; border:1.5px solid #aaa; border-radius:3px; box-shadow:0 -4px 0 -2px #aaa;}
.chk-form-btns {display:flex; align-items:center; justify-content:space-between; padding:20px 30px 0 380px;}
.chk-nav {display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:8px 16px 8px 12px; color:#7b61d1; font-weight:600; line-height:1.625em; letter-spacing:-0.32px; background:#f9f8fd; border-radius:4px;}
.chk-nav.next {padding:8px 12px 8px 16px; gap:10px;}
.chk-nav.prev:before {content:""; width:16px; height:16px; background:url("../images/sub/write-prev.png") 50% 50% no-repeat; background-size:16px;}
.chk-nav.next:after {content:""; width:16px; height:16px; background:url("../images/sub/write-next.png") 50% 50% no-repeat; background-size:16px;}
.chk-nav.dim {opacity:.35; pointer-events:none;}
.chk-form-mid {display:flex; gap:8px;}
.chk-info-list {display:flex; flex-direction:column; gap:4px; margin-top: 20px; }
.chk-info-list li {display:flex; align-items:flex-start; gap:12px; min-width:0; color:#505050; font-size:var(--font-size18); font-weight:400; line-height:1.5556em; letter-spacing:-0.36px;}
.chk-info-list li span {display:flex; flex:0 0 170px; align-items:center; gap:8px; color:#878787; font-weight:500; word-break:keep-all;}	/* 최종확인 요약도 상세와 같은 라벨 폭 (템플릿별 긴 라벨 대응) */
.chk-info-list li span:before {content:""; width:4px; height:4px; background:#ccc; border-radius:80px;}
.chk-info-list li strong {color:#2c2c2c; font-size:var(--font-size22); font-weight:600; line-height:1.6364em; letter-spacing:-0.44px;}
.chk-sum-list {display:flex; flex-direction:column; gap:6px;}
.chk-sum-list li {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.chk-sum-q {display:flex; flex:1; align-items:center; gap:10px; min-width:0;}
.chk-sum-q p {flex:1; min-width:0; color:#505050; font-size:var(--font-size18); font-weight:400; line-height:1.5556em; letter-spacing:-0.36px;}
.chk-sum-list .num {margin-top:0;}
.chk-sum-right {display:flex; flex-shrink:0; align-items:center; justify-content:flex-end; gap:4px;}
.chk-sum-list .ico-photo {display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:32px; height:32px; text-indent:-9999px; overflow:hidden; background:#2c2c2c url("../images/sub/photo-ico.png") 50% 50% / 16px no-repeat; border-radius:80px;}

/* 작성 위저드 보조 (미응답 안내·잠금·안내문) */
.chk-empty-box {display:flex; flex-direction:column; align-items:center; gap:20px; padding:80px 20px; color:#505050; font-size:var(--font-size18); line-height:1.5556em; text-align:center; border-top:1px solid #2c2c2c; border-bottom:1px solid #eee;}
.chk-side li a.lock {opacity:.4; cursor:default;}
.chk-q-note {margin-top:8px; color:#878787; font-size:14px; font-weight:400; line-height:1.7143em; letter-spacing:-0.28px;}
.chk-form-alert {margin:30px 30px 0; padding:16px 20px; color:var(--chk-pt1); background:#fdf3f3; border:1px solid #f3cfd1; border-radius:4px;}
.chk-form-alert[hidden] {display:none;}
.chk-form-alert h4 {margin-bottom:6px; font-weight:600; line-height:1.625em; letter-spacing:-0.32px;}
.chk-form-alert li {padding-left:12px; color:#8f4a4d; font-weight:400; line-height:1.75em; letter-spacing:-0.32px; text-indent:-12px;}
.chk-form-alert li:before {content:"· ";}
/* 제출을 막지 않는 안내(사진 미첨부 등, 2026-09-14 17번) — 노란 계열 */
.chk-form-alert.notice {color:#9a6b00; background:#fff8e6; border-color:#f3dfa3;}
.chk-form-alert.notice h4 {color:#9a6b00;}
.chk-form-alert.notice li {color:#7a5a12;}
.chk-q.is-invalid {background:#fffafa;}
.chk-q.is-invalid .chk-q-tit .num {background:var(--chk-pt1);}
.chk-btn[disabled] {opacity:.4; cursor:not-allowed;}
/* 비활성 버튼은 포인터 이벤트를 못 받아 title 툴팁이 안 뜬다. 감싼 span 이 호버를 대신 받는다 */
.chk-btn-hold {display:inline-flex;}
.chk-btn-hold:has(.chk-btn[disabled]) {cursor:not-allowed;}
.chk-btn-hold .chk-btn[disabled] {pointer-events:none;}

/* 점수 눈금 (점수형 문항) — 배점마다 원을 하나씩 두는 라디오 방식.
 * 원 색은 .chk-pt 와 같은 구간 색(chkPtColor)을 따라가고, 가운데에서 멀수록 크게 그린다.
 * 크기는 --chk-opt-min/max 사이를 --chk-opt-d(0=중앙, 1=양끝)로 보간한다 — 반응형은 이 두 값만 바꾼다. */
.chk-score {display:flex; align-items:center; gap:20px; --chk-score-color:#ddd; --chk-opt-size:34px; --chk-opt-n:11;}
.chk-score-body {flex:1; min-width:0; max-width:calc(var(--chk-opt-n) * 66px);}
.chk-score-opts {position:relative; display:flex; align-items:center; justify-content:space-between; gap:6px;}
/* 원과 원 사이를 잇는 선. 원은 배경이 흰색이라 사이 간격에만 보인다.
 * 원 반지름만큼 안쪽에서 시작·끝나야 양 끝 원의 중심에 맞는다 */
.chk-score-opts:before {content:""; position:absolute; left:calc(var(--chk-opt-size) / 2); right:calc(var(--chk-opt-size) / 2); top:calc(var(--chk-opt-size) / 2); height:2px; margin-top:-1px; background:#e8e8e8;}
.chk-score-opt {position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; --chk-opt-color:var(--chk-pt1);}
.chk-score-opt input {position:absolute; left:0; top:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer;}
/* 원 안쪽은 불투명한 흰색이라 연결선이 비쳐 보이지 않는다.
 * 미선택의 옅은 느낌은 요소 전체가 아니라 테두리 링(:before)에만 준다 — 여기에 opacity 를 걸면 배경까지 비친다 */
.chk-score-dot {position:relative; display:block; width:var(--chk-opt-size); height:var(--chk-opt-size); background:#fff; border-radius:80px; transition:background-color .12s linear, box-shadow .12s linear;}
.chk-score-dot:before {content:""; position:absolute; left:0; top:0; right:0; bottom:0; box-sizing:border-box; border:2px solid var(--chk-opt-color); border-radius:80px; opacity:.55; transition:opacity .12s linear;}
.chk-score-opt:hover .chk-score-dot:before {opacity:.85;}
.chk-score-opt input:checked ~ .chk-score-dot {background:var(--chk-opt-color); box-shadow:0 2px 8px rgba(0,0,0,.16);}
.chk-score-opt input:checked ~ .chk-score-dot:before {opacity:1;}
.chk-score-opt input:focus-visible ~ .chk-score-dot {box-shadow:0 0 0 4px rgba(123,97,209,.28);}
.chk-score-no {color:#aaa; font-size:13px; font-style:normal; font-weight:500; line-height:1.5385em; letter-spacing:-0.26px; transition:color .12s linear;}
.chk-score-opt input:checked ~ .chk-score-no {color:#2c2c2c; font-weight:700;}
.chk-score-ends {display:flex; align-items:center; justify-content:space-between; margin-top:2px;}
.chk-score-ends em {color:#aaa; font-size:13px; font-style:normal; font-weight:500; line-height:1.5385em; letter-spacing:-0.26px;}
.chk-score-val {display:flex; flex-shrink:0; align-items:center; justify-content:center; gap:3px; min-width:88px; height:56px; padding:0 10px; background:#fff; border:1px solid var(--chk-score-color); border-radius:4px; transition:border-color .12s linear;}
.chk-score-cur {color:#2c2c2c; font-size:var(--font-size18); font-weight:600; line-height:1.5556em;}
.chk-score-deno {flex-shrink:0; color:#878787; font-weight:500; line-height:1.5em; letter-spacing:-0.32px; white-space:nowrap;}
.chk-score-na {flex-shrink:0;}
.chk-score.is-na .chk-score-body, .chk-score.is-na .chk-score-val {opacity:.35;}
.chk-score.is-na .chk-score-opts {pointer-events:none;}