@charset "UTF-8";
/* ============================================================================
   내부(서브) 페이지 공용 스타일 — sub.css
   협회소개 · 안심샵 · 정보마당 · 교육 · 제휴 · 소통마당 · 불공정제보 · 인증 · 마이페이지
   ========================================================================== */

.page { padding: clamp(48px, 6vw, 84px) 0; }
.page-tint { background: var(--c-bg); }
.content-narrow { max-width: 880px; margin: 0 auto; }

/* ---------- prose (본문 글) ----------------------------------------------- */
.prose { font-size: 1.04rem; line-height: 1.85; color: var(--c-ink-2); }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: 1.5rem; margin-top: 40px; }
.prose h3 { font-size: 1.18rem; margin-top: 30px; color: var(--c-primary); }
.prose p { color: var(--c-ink-2); }
.prose strong { color: var(--c-ink); font-weight: var(--fw-bold); }
.prose ul { padding-left: 4px; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 4px; background: var(--c-safe); }
.prose a { color: var(--c-sub); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-bold); }

/* ---------- 인사말 / 소개 그리드 ----------------------------------------- */
.greet-grid { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: start; }
.greet-visual { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 360px; background: linear-gradient(155deg, var(--c-primary-700), var(--c-primary) 60%, var(--c-sub)); display: flex; align-items: flex-end; padding: 28px; color: #fff; box-shadow: var(--sh); }
.greet-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px 220px at 80% 8%, rgba(45,125,210,.4), transparent 60%); }
.greet-visual .g-cap { position: relative; }
.greet-visual .g-cap b { display: block; font-size: 1.3rem; font-weight: var(--fw-xbold); }
.greet-visual .g-cap span { color: rgba(255,255,255,.8); font-size: .92rem; }
.greet-quote { font-size: 1.6rem; line-height: 1.6; font-weight: var(--fw-xbold); letter-spacing: -.02em; color: var(--c-ink); margin-bottom: 22px; }
.greet-quote .accent { color: var(--c-primary); }
.greet-sign { margin-top: 26px; text-align: right; font-weight: var(--fw-bold); color: var(--c-ink); }
.greet-sign span { color: var(--c-gray); font-weight: var(--fw-reg); }

/* ---------- feature 카드 ------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }	/* minmax(240px, 1fr)); 240px -> 320px */
.feature-grid1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 22px; }	/* minmax(240px, 1fr)); 240px -> 320px */
.feature-card { padding: 30px 28px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: transparent; }
.f-ico { width: 56px; height: 56px; border-radius: 4px; background: var(--c-primary-50); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.f-ico .ico { width: 28px; height: 28px; }
.f-ico.is-safe { background: var(--c-safe-50); color: var(--c-safe-600); }
.f-ico.is-point { background: var(--c-point-50); color: var(--c-point); }
.feature-card h3 { font-size: 1.2rem; }
.feature-card p { margin-top: 10px; color: var(--c-gray); line-height: 1.7; }

/* ---------- 번호형 핵심 항목(5대 준수사항 등) ---------------------------- */
.principle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.principle { position: relative; padding: 28px 26px 26px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.principle::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(var(--c-safe), var(--c-primary)); }
.principle .p-no { font-size: .8rem; font-weight: var(--fw-xbold); letter-spacing: .1em; color: var(--c-safe-600); }
.principle h3 { font-size: 1.16rem; margin: 8px 0 10px; display: flex; align-items: center; gap: 10px; }
.principle h3 .ico { width: 22px; height: 22px; color: var(--c-safe); }
.principle p { color: var(--c-gray); font-size: .96rem; line-height: 1.7; }

/* ---------- 리스트 페이지 툴바(검색/카운트) ----------------------------- */
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.list-count { font-weight: var(--fw-bold); color: var(--c-ink-2); }
.list-count b { color: var(--c-primary); }
.search-box { display: flex; gap: 8px; }
.search-box .input { width: clamp(180px, 30vw, 280px); }

/* 카테고리 필터 칩 */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--c-line); background: #fff; font-weight: var(--fw-bold); font-size: .9rem; color: var(--c-ink-2); transition: all var(--dur); }
.chip:hover { border-color: var(--c-primary-100); color: var(--c-primary); }
.chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ---------- 상세 정의 리스트(팝업/현황) --------------------------------- */
.detail-dl { display: grid; gap: 0; }
.detail-dl .d-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--c-line-2); }
.detail-dl .d-row:last-child { border-bottom: 0; }
.detail-dl dt { font-weight: var(--fw-bold); color: var(--c-gray); }
.detail-dl dd { color: var(--c-ink); }
.detail-dl dd.em { color: var(--c-point); font-weight: var(--fw-bold); }

/* ---------- 안내 배너(점선) --------------------------------------------- */
.intro-banner { padding: 24px 28px; border: 1.5px dashed var(--c-primary-100); border-radius: var(--r-lg); background: var(--c-primary-50); text-align: center; color: var(--c-primary-700); line-height: 1.7; font-weight: var(--fw-bold); margin-bottom: 36px; }

/* ---------- 안심샵 소개: 현실 사진 + 핵심 신뢰 정보 ---------------------- */
.safe-story { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 46px; align-items: center; }
.safe-story-copy .sec-desc { margin-top: 18px; }
.safe-story-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.safe-story-points span { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--r); background: #fff; color: var(--c-gray); font-size: .86rem; }
.safe-story-points b { color: var(--c-primary); font-size: 1.08rem; }
.safe-story-visual { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--c-line); box-shadow: var(--sh); background: var(--c-bg); }
.safe-story-visual img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.safe-story-visual figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 12px 14px; border-radius: var(--r); background: rgba(11,42,87,.86); color: #fff; font-size: .88rem; font-weight: var(--fw-bold); backdrop-filter: blur(8px); }

/* ---------- 오시는길 ----------------------------------------------------- */
.location-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.contact-card { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border: 1px solid var(--c-line); border-radius: var(--r); background: #fff; }
.contact-card .c-ico { width: 44px; height: 44px; border-radius: 4px; background: var(--c-primary-50); color: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.contact-card b { display: block; color: var(--c-ink); margin-bottom: 4px; }
.contact-card span { color: var(--c-gray); font-size: .94rem; line-height: 1.6; }

/* ---------- 제휴서비스 카드형 탭 ----------------------------------------- */
.svc-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.svc-tab { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: var(--r-pill); border: 1.5px solid var(--c-line); background: #fff; font-weight: var(--fw-bold); color: var(--c-ink-2); transition: all var(--dur); }
.svc-tab .ico { width: 18px; height: 18px; }
.svc-tab:hover { border-color: var(--c-primary-100); color: var(--c-primary); }
.svc-tab.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ---------- 매장 상세 팝업(안심샵 위치) --------------------------------- */
.shop-pop { display: grid; grid-template-columns: 150px 1fr; gap: 18px; }
.shop-pop .shop-photo { border-radius: var(--r); aspect-ratio: 1; background: linear-gradient(135deg, var(--c-primary-50), var(--c-sub-50)); display: flex; align-items: center; justify-content: center; color: var(--c-sub); border: 1px solid var(--c-line); }
.shop-pop .shop-photo .ico { width: 36px; height: 36px; }

/* ---------- 폼 안내 박스 ------------------------------------------------- */
.form-aside { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; }
.form-aside h4 { font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.form-aside h4 .ico { width: 18px; height: 18px; color: var(--c-sub); }
.form-aside ul { display: grid; gap: 8px; }
.form-aside li { font-size: .9rem; color: var(--c-gray); padding-left: 16px; position: relative; line-height: 1.6; }
.form-aside li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-sub); }

/* ---------- 인증(로그인 등) 카드 레이아웃 ------------------------------- */
.auth-wrap { max-width: 460px; margin: 0 auto; }
.auth-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: clamp(28px, 4vw, 44px); }
.auth-head { text-align: center; margin-bottom: 28px; }
.auth-head .auth-ico { width: 60px; height: 60px; border-radius: 4px; margin: 0 auto 18px; background: var(--c-primary-50); color: var(--c-primary); display: flex; align-items: center; justify-content: center; }
.auth-head .auth-ico .ico { width: 30px; height: 30px; }
.auth-head h1 { font-size: 1.6rem; }
.auth-head p { margin-top: 8px; color: var(--c-gray); }
.auth-links { display: flex; justify-content: center; gap: 10px; margin-top: 20px; font-size: .92rem; color: var(--c-gray); }
.auth-links a { color: var(--c-ink-2); font-weight: var(--fw-bold); }
.auth-links a:hover { color: var(--c-primary); }
.auth-links .sep { color: var(--c-line); }
.auth-foot { text-align: center; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--c-line-2); color: var(--c-gray); font-size: .94rem; }
.auth-foot a { color: var(--c-primary); font-weight: var(--fw-bold); }

/* 완료 페이지 */
.complete-box { max-width: 600px; margin: 0 auto; text-align: center; padding: clamp(40px,6vw,64px) 0; }
.complete-ico { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 28px; background: var(--c-safe-50); color: var(--c-safe); display: flex; align-items: center; justify-content: center; animation: pop-in .5s var(--ease) both; }
.complete-ico .ico { width: 48px; height: 48px; }
@keyframes pop-in { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.complete-box h1 { font-size: 1.9rem; }
.complete-box p { margin-top: 14px; color: var(--c-gray); font-size: 1.06rem; line-height: 1.7; }
.complete-box .btn { margin-top: 30px; }

/* ---------- 마이페이지 --------------------------------------------------- */
.mypage-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.mypage-head .mp-avatar { width: 56px; height: 56px; border-radius: 4px; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.mypage-head .mp-avatar .ico { width: 28px; height: 28px; }
.mypage-head h1 { font-size: 1.5rem; }
.mypage-head p { color: var(--c-gray); font-size: .94rem; }
.mp-tabnav { margin: 28px 0 32px; }

/* 요약 통계 카드 */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { padding: 22px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; }
.stat-card .s-ico { width: 42px; height: 42px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-primary-50); color: var(--c-primary); margin-bottom: 14px; }
.stat-card .s-num { font-size: 1.7rem; font-weight: var(--fw-xbold); color: var(--c-ink); }
.stat-card .s-lbl { color: var(--c-gray); font-size: .9rem; margin-top: 2px; }

/* ---------- 반응형 ------------------------------------------------------- */
@media (max-width: 880px) {
    .greet-grid { grid-template-columns: 1fr; gap: 28px; }
    .greet-visual { min-height: 240px; }
    .shop-pop { grid-template-columns: 1fr; }
    .detail-dl .d-row { grid-template-columns: 100px 1fr; }
}

/* ---------- 안심샵 BI 쇼케이스 ------------------------------------------- */
.bi-grid { display: grid; grid-template-columns: 320px 1fr; gap: 52px; align-items: center; }
.bi-mark-box { aspect-ratio: 1; border-radius: var(--r-xl); background: linear-gradient(150deg, var(--c-primary-700), var(--c-primary) 60%, var(--c-sub)); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-lg); position: relative; overflow: hidden; }
.bi-mark-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px 200px at 74% 14%, rgba(45,125,210,.42), transparent 60%); }
.bi-mark-box .ico { width: 140px; height: 140px; color: #fff; position: relative; }
.bi-meaning { display: grid; gap: 16px; }
.bi-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r); background: #fff; }
.bi-swatch { width: 46px; height: 46px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 2px rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center; color: #fff; }
.bi-swatch .ico { width: 22px; height: 22px; }
.bi-item b { display: block; color: var(--c-ink); margin-bottom: 3px; }
.bi-item span { color: var(--c-gray); font-size: .95rem; line-height: 1.6; }
@media (max-width: 880px) { .bi-grid { grid-template-columns: 1fr; gap: 30px; max-width: 420px; margin: 0 auto; } }

/* ---------- 절차(프로세스) 플로우 --------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.flow-step { position: relative; padding: 28px 22px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); text-align: center; }
.flow-step .fs-no { width: 46px; height: 46px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: var(--fw-xbold); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: var(--sh-primary); }
.flow-step b { display: block; color: var(--c-ink); margin-bottom: 6px; font-size: 1.05rem; }
.flow-step span { color: var(--c-gray); font-size: .9rem; line-height: 1.6; }

/* 교육 개요 표 */
.spec-list { border-top: 2px solid var(--c-primary); }
.spec-list .s-row { display: grid; grid-template-columns: 160px 1fr; border-bottom: 1px solid var(--c-line-2); }
.spec-list dt { padding: 16px 20px; background: var(--c-bg); font-weight: var(--fw-bold); color: var(--c-ink); }
.spec-list dd { padding: 16px 20px; color: var(--c-ink-2); }
@media (max-width: 680px) { .spec-list .s-row { grid-template-columns: 1fr; } .spec-list dt { padding-bottom: 4px; } }

/* ---------- 회원가입 다중 매장 ------------------------------------------ */
.store-list { display: grid; gap: 14px; margin-bottom: 14px; }
.store-item { border: 1px solid var(--c-line); border-radius: var(--r); padding: 18px; background: var(--c-bg); }
.store-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.store-item-head b { color: var(--c-primary); font-weight: var(--fw-xbold); display: flex; align-items: center; gap: 9px; }
.store-no-badge { width: 26px; height: 26px; border-radius: 3px; background: var(--c-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.store-remove { width: 34px; height: 34px; border: 1px solid var(--c-line); background: #fff; border-radius: 3px; color: var(--c-point); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur); }
.store-remove:hover { background: var(--c-point-50); }
.store-grid { display: grid; gap: 12px; }
.add-store-area { border: 1.5px dashed var(--c-primary-100); border-radius: var(--r-lg); padding: 22px; background: var(--c-primary-50); margin-top: 8px; }
.add-store-area > .field-label { margin-bottom: 14px; }

/* 본인/관리자 인라인 체크 + 입력 묶음 */
.inline-check { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- 안심샵 인증현황 / QR --------------------------------------- */
.cert-status-grid { display: grid; grid-template-columns: 1fr 180px; gap: 24px; align-items: start; }
.qr-card { text-align: center; border: 1px solid var(--c-line); border-radius: var(--r); padding: 20px 16px; background: #fff; }
.qr-box { width: 124px; height: 124px; margin: 0 auto 12px; border-radius: 3px; background: repeating-conic-gradient(#13284f 0 25%, #fff 0 50%) 0 0 / 22px 22px; border: 6px solid #fff; box-shadow: inset 0 0 0 1px var(--c-line); }
.qr-card span { font-size: .82rem; color: var(--c-gray); font-weight: var(--fw-bold); }
@media (max-width: 680px) { .cert-status-grid { grid-template-columns: 1fr; } .qr-card { max-width: 220px; } }

/* 자율점검 문항 행 */
.check-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--c-line-2); flex-wrap: wrap; }
.check-q:last-child { border-bottom: 0; }
.check-q .q-text { flex: 1; min-width: 240px; font-weight: var(--fw-bold); color: var(--c-ink-2); }
.check-q .q-text b { color: var(--c-primary); margin-right: 8px; }
.check-q .opt-group { flex: none; }

/* 매장 사진 업로드 슬롯 */
.photo-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-slot { aspect-ratio: 4/3; border: 1.5px dashed var(--c-line); border-radius: var(--r); background: var(--c-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--c-gray); cursor: pointer; position: relative; transition: border-color var(--dur), background var(--dur); }
.photo-slot:hover { border-color: var(--c-primary-100); background: var(--c-primary-50); }
.photo-slot .ico { width: 26px; height: 26px; }
.photo-slot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-slot span { font-size: .82rem; }
@media (max-width: 520px) { .photo-slots { grid-template-columns: 1fr 1fr; } }

/* ---------- 안심샵 지역 찾기 (인터랙티브 시·도 지도) --------------------- */
.shopfinder { display: grid; grid-template-columns: 380px 1fr; gap: 30px; align-items: start; }
.kmap-card { background: linear-gradient(165deg, #EAF2FB 0%, #E8F6EF 100%); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 18px 18px 20px; position: sticky; top: 90px; }
.kmap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.kmap-head h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.kmap-head h3 .ico { width: 20px; height: 20px; color: var(--c-primary); }
.kmap-reset { font-size: .82rem; font-weight: var(--fw-bold); color: var(--c-sub); background: none; border: 0; cursor: pointer; }
.kmap-reset:hover { text-decoration: underline; }
.naver-map-box { width: 100%; min-height: 360px; border-radius: var(--r); border: 1px solid var(--c-line); background: var(--c-bg); overflow: hidden; }
.map-frame { position: relative; min-height: 400px; border-radius: var(--r); overflow: hidden; background: linear-gradient(135deg, var(--c-primary-50), var(--c-safe-50)); border: 1px solid var(--c-line); }
.map-frame #safeShopMap { height: 400px; border-radius: 0; overflow: hidden; background: var(--c-bg); }
.map-frame #safeShopMap.is-unavailable { opacity: .18; filter: grayscale(1); }
.map-fallback { position: absolute; inset: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; border: 1px solid rgba(255,255,255,.72); border-radius: var(--r); background: rgba(255,255,255,.92); box-shadow: var(--sh-sm); color: var(--c-ink-2); }
.map-fallback[hidden] { display: none; }
.map-fallback .ico { width: 30px; height: 30px; color: var(--c-safe); }
.map-fallback b { color: var(--c-primary); }
.map-fallback span { color: var(--c-gray); font-size: .92rem; line-height: 1.6; }
.map-placeholder--compact { min-height: 360px; border-radius: var(--r); }
.kmap { position: relative; width: 100%; aspect-ratio: 320 / 400; margin: 0 auto; max-width: 340px; }
.kmap-land { position: absolute; inset: 4% 12% 6% 12%; background: rgba(45,125,210,.09); border: 2px dashed rgba(45,125,210,.28); border-radius: 46% 54% 48% 52% / 36% 40% 60% 64%; }
.kmap-region { position: absolute; transform: translate(-50%, -50%); }
.kmap-region button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: var(--r-pill); border: 1.5px solid var(--c-line); background: #fff; font-size: .76rem; font-weight: var(--fw-bold); color: var(--c-ink-2); box-shadow: var(--sh-xs); white-space: nowrap; cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur), color var(--dur), background var(--dur); }
.kmap-region button:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translate(0,-2px); }
.kmap-region .km-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--c-line-2); color: var(--c-gray); font-size: .66rem; }
.kmap-region.has button { border-color: var(--c-safe); color: var(--c-safe-600); }
.kmap-region.has .km-cnt { background: var(--c-safe); color: #fff; }
.kmap-region.is-active button { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: var(--sh-primary); }
.kmap-region.is-active .km-cnt { background: rgba(255,255,255,.32); color: #fff; }
.kmap-note { margin-top: 8px; text-align: center; }
.shop-row.is-hidden { display: none; }
@media (max-width: 900px) { .shopfinder { grid-template-columns: 1fr; } .kmap-card { position: static; } }

@media (max-width: 880px) {
  .safe-story { grid-template-columns: 1fr; gap: 28px; }
  .safe-story-visual { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .page { padding: 40px 0 58px; }
  .page-auth .page { padding: 48px 0 58px; }
  .auth-card { padding: 28px 24px; }
  .auth-head { margin-bottom: 24px; }
  .auth-head .auth-ico { width: 56px; height: 56px; margin-bottom: 16px; }
  .auth-head h1 { font-size: 1.5rem; }
  .auth-links { flex-wrap: wrap; row-gap: 6px; }
  .page-form-flow .intro-banner { margin-bottom: 24px; padding: 18px 20px; text-align: left; }
  .list-toolbar { align-items: stretch; }
  .list-toolbar .search-box { width: 100%; }
  .search-box .input { flex: 1 1 0; width: auto; }
  .search-box .btn { width: auto; min-width: 104px; }
  .safe-story-points { grid-template-columns: 1fr; }
  .safe-story-visual figcaption { position: static; border-radius: 0; background: var(--c-primary-700); }
  .table-wrap--cards { overflow: visible; border: 0; border-radius: 0; }
  .table-wrap--cards .table { display: block; min-width: 0; background: transparent; }
  .table-wrap--cards thead { display: none; }
  .table-wrap--cards tbody, .table-wrap--cards tr, .table-wrap--cards td { display: block; width: 100%; }
  .table-wrap--cards tr[hidden] { display: none; }
  .table-wrap--cards tr { padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--r); background: #fff; box-shadow: var(--sh-xs); }
  .table-wrap--cards tr + tr { margin-top: 10px; }
  .table-wrap--cards td { border: 0; padding: 5px 0; text-align: left; color: var(--c-ink-2); }
  .table-wrap--cards td::before { content: attr(data-label); display: inline-block; min-width: 78px; margin-right: 10px; color: var(--c-gray); font-size: .78rem; font-weight: var(--fw-bold); }
  .table-wrap--cards td[data-primary] { padding-top: 0; color: var(--c-ink); font-weight: var(--fw-bold); }
  .table-wrap--cards td[data-primary]::before { display: none; }
  .table-wrap--cards td[data-hide-mobile="true"] { display: none; }
  .table-wrap--cards td .btn { width: 100%; margin-top: 8px; }
  .map-frame, .map-frame #safeShopMap { min-height: 320px; height: 320px; }
}
@media (max-width: 480px) {
  .auth-card { padding: 26px 22px; }
  .page-form-flow .intro-banner { font-size: .94rem; line-height: 1.65; }
}

/* ── 게시판 페이징 (0806 항목7) ───────────────────────────── */
.pager-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.pager-per{font-size:.86rem;color:var(--c-gray)}
.pager-per select{margin-left:4px;padding:5px 8px;border:1px solid var(--c-line);border-radius:4px;background:#fff;font:inherit;color:var(--c-ink-2)}
.pager{display:flex;gap:4px;margin-left:auto}
.pg-btn{min-width:34px;height:34px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--c-line);border-radius:4px;background:#fff;color:var(--c-ink-2);font-weight:700;font-size:.88rem;text-decoration:none}
.pg-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}
.pg-btn.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.pg-btn.is-disabled{opacity:.4;pointer-events:none}
@media(max-width:520px){.pager-bar{justify-content:center}.pager{margin-left:0}}

/* ── 소통마당 댓글 (0806 항목9) ───────────────────────────── */
.cmt-box{margin-top:20px;border-top:1px solid var(--c-line);padding-top:16px}
.cmt-head{font-weight:800;color:var(--c-ink);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cmt-head .ico{width:16px;height:16px;color:var(--c-sub)}
.cmt-head b{color:var(--c-primary);margin-left:2px}
.cmt-list{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.cmt-empty{color:var(--c-gray);font-size:.9rem;padding:8px 0}
.cmt-login{color:var(--c-gray);font-size:.9rem}
.cmt-login a{color:var(--c-primary);font-weight:700}
.cmt-item{background:var(--c-bg);border:1px solid var(--c-line-2);border-radius:6px;padding:10px 12px}
.cmt-meta{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--c-gray);margin-bottom:4px}
.cmt-meta b{color:var(--c-ink-2);font-size:.86rem}
.cmt-del{margin-left:auto;background:none;border:0;color:var(--c-gray-2);font-size:.78rem;cursor:pointer;text-decoration:underline}
.cmt-del:hover{color:var(--c-point)}
.cmt-body{color:var(--c-ink-2);line-height:1.6;font-size:.92rem;white-space:pre-wrap}
.cmt-form{display:flex;gap:8px;align-items:flex-start}
.cmt-form textarea{flex:1;padding:9px 11px;border:1px solid var(--c-line);border-radius:6px;font:inherit;resize:vertical;min-height:44px}
.cmt-form .btn{flex:none;white-space:nowrap}

/* 소형 버튼 + 마감행 (0806 항목5) */
.btn-xs{padding:3px 10px;font-size:.76rem;line-height:1.5}
tr.is-closed .cell-title button{color:var(--c-gray);text-decoration:line-through}

/* 게시판 목록 제목 옆 댓글수 [N] (0813 항목4) */
.cmt-cnt{color:var(--c-primary);font-weight:700;font-size:.85em;margin-left:2px}