/* 구리시주민편익시설 - 이용자 공통 스타일 */

/* 기본 고딕 웹폰트 */
@font-face{
	font-family:'Pretendard';
	font-weight:400;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Pretendard-Regular.woff2') format('woff2');
}
@font-face{
	font-family:'Pretendard';
	font-weight:600;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face{
	font-family:'Pretendard';
	font-weight:700;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Pretendard-Bold.woff2') format('woff2');
}

/* Paperlogy 웹폰트 : 본문/폼(body, input, select, textarea, button) 기본 서체 */
@font-face{
	font-family:'Paperlogy';
	font-weight:100;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Paperlogy-1Thin.woff2') format('woff2'),
		url('/fonts/Paperlogy-1Thin.woff') format('woff');
}
@font-face{
	font-family:'Paperlogy';
	font-weight:200;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Paperlogy-2ExtraLight.woff2') format('woff2'),
		url('/fonts/Paperlogy-2ExtraLight.woff') format('woff');
}
@font-face{
	font-family:'Paperlogy';
	font-weight:300;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Paperlogy-3Light.woff2') format('woff2'),
		url('/fonts/Paperlogy-3Light.woff') format('woff');
}
@font-face{
	font-family:'Paperlogy';
	font-weight:400;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Paperlogy-4Regular.woff2') format('woff2'),
		url('/fonts/Paperlogy-4Regular.woff') format('woff');
}
@font-face{
	font-family:'Paperlogy';
	font-weight:500;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Paperlogy-5Medium.woff2') format('woff2'),
		url('/fonts/Paperlogy-5Medium.woff') format('woff');
}
@font-face{
	font-family:'Paperlogy';
	font-weight:600;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Paperlogy-6SemiBold.woff2') format('woff2'),
		url('/fonts/Paperlogy-6SemiBold.woff') format('woff');
}
@font-face{
	font-family:'Paperlogy';
	font-weight:700;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Paperlogy-7Bold.woff2') format('woff2'),
		url('/fonts/Paperlogy-7Bold.woff') format('woff');
}
@font-face{
	font-family:'Paperlogy';
	font-weight:800;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Paperlogy-8ExtraBold.woff2') format('woff2'),
		url('/fonts/Paperlogy-8ExtraBold.woff') format('woff');
}
@font-face{
	font-family:'Paperlogy';
	font-weight:900;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Paperlogy-9Black.woff2') format('woff2'),
		url('/fonts/Paperlogy-9Black.woff') format('woff');
}

/* 명조(세리프) 웹폰트 : 주요 타이틀 강조용 */
@font-face{
	font-family:'Noto Serif KR';
	font-weight:700;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/NotoSerifKR-Bold.woff2') format('woff2');
}
@font-face{
	font-family:'Noto Serif KR';
	font-weight:900;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/NotoSerifKR-Black.woff2') format('woff2');
}

/* S-Core Dream 웹폰트 : 로고타이틀 전용 */
@font-face{
	font-family:'S-Core Dream';
	font-weight:400;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/SCoreDream-Regular.woff2') format('woff2');
}
@font-face{
	font-family:'S-Core Dream';
	font-weight:500;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/SCoreDream-Medium.woff2') format('woff2');
}
@font-face{
	font-family:'S-Core Dream';
	font-weight:600;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/SCoreDream-Bold.woff2') format('woff2');
}
@font-face{
	font-family:'S-Core Dream';
	font-weight:700;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/SCoreDream-ExtraBold.woff2') format('woff2');
}
@font-face{
	font-family:'Jalnan2';
	font-weight:400;
	font-style:normal;
	font-display:swap;
	src:url('/fonts/Jalnan2.ttf') format('truetype');
}
html{font-size:62.5%}
body{margin:0;background:#fff;font-family:'Paperlogy','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
input,select,textarea,button{font-family:'Paperlogy','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
/* 모바일에서 화면 끝까지 스크롤(오버스크롤/바운스)했을 때 body 배경이 페이지 배경과 다른 색으로 노출되는
   것을 막는다. 하단 고정 네비게이션이 있는 모바일 화면에서 특히 두드러진다 */
html,body{overscroll-behavior-y:none}
table{border-spacing:0;border-collapse:collapse !important;box-sizing:border-box}

.mt-0{margin-top:0 !important}
.mr-0{margin-right:0 !important}
.mb-0{margin-bottom:0 !important}
.ml-0{margin-left:0 !important}

/* ==========================================================================
   토스트 알림메시지 (common.js showToast()) : layout-blank.html은 tong.css만 로드하므로
   이용자 화면에서도 토스트가 보이도록 여기에도 동일하게 정의한다.
   ========================================================================== */
.toast-container{position:fixed;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.toast-container.top{top:40px}
.toast-container.bottom{bottom:calc(40px + var(--safe-bottom-offset, 0px))}
.toast-container.middle{top:50%;transform:translate(-50%,-50%)}

.toast-message{min-width:300px;max-width:min(92vw,560px);margin-top:10px;padding:12px 22px;border-radius:30px;color:#fff;font-size:1.4rem;line-height:1.5;font-weight:500;word-break:keep-all;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 20px rgba(0,0,0,.1),0 6px 6px rgba(0,0,0,.05);opacity:0;pointer-events:auto;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}
.toast-message i{font-size:1.1em;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
.toast-message__close{flex:0 0 auto;margin-left:6px;padding:2px 6px;border:0;background:transparent;color:inherit;font-size:1.3em;line-height:1;cursor:pointer;opacity:.85}
.toast-message__close:hover{opacity:1}

.toast-container.top .toast-message{transform:translateY(-20px)}
.toast-container.bottom .toast-message{transform:translateY(20px)}
.toast-container.middle .toast-message{transform:scale(.8)}

.toast-message.show{opacity:1;transform:translate(0,0) scale(1) !important}

.toast-message.success{background-color:#2ecc71}
.toast-message.error{background-color:#ff4757}
.toast-message.info{background-color:#1e90ff}
.toast-message.warning{background-color:#f39c12}

/* 페이지 전체 뼈대 : 상단바/하단바는 가로 100%, 내부 컨텐츠만 가운데 정렬 폭 제한 */
.cw-page{min-height:100vh;display:flex;flex-direction:column;background:#fdf6ec;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;font-size:1.7rem;color:#292524}
.cw-page *{box-sizing:border-box}

.cw-container{width:100%;max-width:520px;margin:0 auto}
@media (min-width:768px){ .cw-container{max-width:680px} }
@media (min-width:1024px){ .cw-container{max-width:1200px} }

.cw-topbar{position:relative;width:100%;background:linear-gradient(135deg,#8a4513,#5c2e0e);color:#fff}
.cw-topbar-inner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cw-brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.7rem;text-decoration:none;color:#fff}
.cw-brand-logo{height:32px;width:auto;flex-shrink:0}
.cw-nav{display:flex;gap:22px}
.cw-nav a{color:#fff;text-decoration:none;font-weight:700;font-size:1.4rem;opacity:.85;padding-bottom:2px}
.cw-nav a.is-active{opacity:1;border-bottom:2px solid #fff}
.cw-nav-toggle{display:none;border:none;background:rgba(255,255,255,.16);color:#fff;width:38px;height:38px;border-radius:10px;font-size:1.6rem;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}

.cw-body{flex:1;width:100%}
.cw-body > .cw-container{padding:26px 18px 0}

/* 히어로 : 좌측 텍스트 + 우측 아이콘 비주얼 (PC에서는 폭만 확대) */
.cw-hero{position:relative;text-align:left;margin-bottom:10px;border-radius:18px;padding:22px 20px;
	background-image:url('/img/img_trace_search1.png');
	background-repeat:no-repeat;
	background-position:right -20px bottom -5px;
	background-size:50% auto}
.cw-hero-txt{width:100%}
.cw-hero h1{font-family:'Noto Serif KR',serif;font-size:2rem;font-weight:900;margin:0 0 8px;color:#1c1917;line-height:1.35;white-space:nowrap}
.cw-hero h1 .hl{color:#cd6a19}
.cw-hero p{font-size:1.45rem;color:#6b7280;margin:0;line-height:1.6;padding-right:90px}

.card{background:#fff;border-radius:18px;padding:22px 18px;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.card h2{display:flex;align-items:center;gap:8px;font-size:1.7rem;font-weight:900;margin:0 0 16px;color:#111827}
.card h2 i{color:#c2680f;font-size:2rem}

/* 이력조회 CTA 카드(토굴 소개 화면 하단)의 돋보기 아이콘 배경 */
.cw-link-card .link-icon.ci-cta-icon{background:#fdf1e2;color:#8a4513;font-size:2.7rem}

/* 카드형 세로 배치 로우 (PC에서도 좌우 폭만 넓어질 뿐 세로 스택 유지) */
.cw-row{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.cw-row > .card{margin-bottom:0}

/* QR 스캔 / 식별번호 직접 입력 카드 : 모바일 세로 스택 → PC 3분할(스캔|구분자|입력) */
.scan-search-card{padding:18px}
.ss-grid{display:flex;flex-direction:column;gap:0}

.btn-scan-lg{position:relative;width:100%;min-height:112px;border:none;border-radius:16px;background:linear-gradient(135deg,#c2680f,#8a4513);color:#fff;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 20px;box-shadow:0 4px 14px rgba(138,69,19,.35);text-align:left}
.btn-scan-lg .qr-ic{width:32px;height:32px;flex-shrink:0}
.btn-scan-lg .scan-txt{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.btn-scan-lg .scan-txt strong{font-size:1.7rem;font-weight:900}
.btn-scan-lg .scan-txt em{font-style:normal;font-size:1.25rem;font-weight:600;opacity:.85}
.btn-scan-lg .go-ic{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:1.3rem}

.or-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#9ca3af;font-size:1.3rem;font-weight:700}
.or-divider::before,.or-divider::after{content:'';flex:1;height:2px;background:#e6e0d4}
.or-divider .d-short{display:none;color:#8a4513;font-weight:900;font-size:1.4rem}

.manual-title{display:none;font-size:1.8rem;font-weight:900;margin:0 0 14px;color:#111827}

.search-row{display:flex;flex-direction:column;gap:10px}
.cw-input{width:100%;min-width:0;min-height:56px;font-size:1.7rem;padding:10px 16px;border:2px solid #e6e0d4;border-radius:12px;background:#fff;color:#111827}
.cw-input:focus{outline:none;border-color:#8a4513}
.btn-search{width:100%;height:40px;border:none;border-radius:12px;background:#543c2c;color:#fff;font-size:1.6rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-search:disabled{opacity:.6}
.tip{font-size:1.3rem;color:#9ca3af;margin:12px 0 0;line-height:1.5}
.tip strong{color:#c2410c;font-weight:700;margin-right:4px}

/* 식별번호 위치 안내 카드 (그린 톤) */
.cw-guide{background:#F4F4EB;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:2px solid #dee1cb}
.cw-guide .guide-icon{flex-shrink:0;width:46px;height:46px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cw-guide .guide-icon img{width:100%;height:100%;object-fit:cover}
.cw-guide .guide-txt{flex:1;min-width:180px}
.cw-guide h2{font-size:1.6rem;font-weight:900;margin:0 0 4px;color:#50652D}
.cw-guide p{font-size:1.4rem;color:#50652D;margin:0;line-height:1.5}
.cw-guide .code-sample{flex-shrink:0;width:100%;text-align:center;border:2px solid #c3dcb2;color:#50652D;font-family:monospace;font-size:1.4rem;font-weight:700;padding:8px 20px;border-radius:10px}

.cw-link-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:#111827;height:100%}
.cw-link-card .link-icon{flex-shrink:0;width:42px;height:42px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cw-link-card .link-icon img{width:100%;height:100%;object-fit:cover}
.cw-link-card .txt{flex:1;min-width:0}
.cw-link-card .txt strong{display:block;font-family:'Noto Serif KR',serif;font-size:1.6rem;margin-bottom:2px}
.cw-link-card .txt span{font-size:1.4rem;color:#6b7280}
.cw-link-card .go-arrow{flex-shrink:0;font-size:1.8rem;color:#412616}

/* 특장점 아이콘 4분할 : 흰색 카드 배경 위에 배치 (모바일은 아이콘+타이틀만 한 줄, PC는 설명 문구까지 노출) */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;margin:0 0 16px;text-align:center;background:#fff;border-radius:18px;padding:20px 12px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.feature-item-lg{display:flex;flex-direction:column;align-items:center;gap:8px;border-right:2px solid #f6f1ec}
.feature-item-lg:last-child{border-right:none}
.f-icon-lg{width:50px;height:50px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.f-icon-lg img{width:26px;height:26px;object-fit:contain}
.feature-item-lg strong{font-size:1.35rem;font-weight:700;color:#111827}
.feature-item-lg span{display:none;font-size:1.4rem;color:#6b7280;line-height:1.4}

/* QR 카메라 스캔 모달 */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border-radius:16px;width:100%;max-width:420px;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;font-size:1.7rem;font-weight:900;color:#111827;border-bottom:1px solid #e6e0d4}
.modal-close{border:none;background:transparent;font-size:2rem;color:#6b7280;cursor:pointer;min-width:40px;min-height:40px}
#qrReaderRegion{padding:14px}

/* 홍보 배너 : 카드 스타일로 통일, 모바일 1개씩 / PC(1024px+) 2개씩 */
.cw-banner{position:relative;width:100%;margin:0 0 16px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:12px}
.cw-banner-track{position:relative;width:100%;aspect-ratio:16/7;min-height:120px}
.cw-banner-slide{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .7s ease}
.cw-banner-slide.is-active{opacity:1}
.cw-banner-slide img{display:block;width:100%;height:100%;object-fit:contain}
.cw-banner-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.cw-banner-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.65);padding:0;cursor:pointer}
.cw-banner-dot.is-active{width:20px;border-radius:4px;background:#fff}

/* 하단 공통 푸터 : 배경은 가로 100%, 내부 컨텐츠만 가운데 정렬 */
.cw-footer{width:100%;margin-top:auto;background:#f1ebe0;border-top:1px solid #e6ded0}
.cw-footer-inner{padding:26px 20px calc(26px + env(safe-area-inset-bottom));text-align:center}
.cw-footer .footer-logo{height:30px;margin-bottom:10px}
.cw-footer .org{font-size:1.4rem;font-weight:700;color:#57534e;margin:0 0 4px}
.cw-footer .copy{font-size:1.2rem;color:#a8a29e;margin:0}

@media (max-width:767px){
	.cw-nav-toggle{display:flex}
	.cw-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#5c2e0e;flex-direction:column;padding:14px 20px;gap:14px;z-index:60;box-shadow:0 8px 16px rgba(0,0,0,.18)}
	.cw-nav.is-open{display:flex}
	.cw-nav a{font-size:1.5rem;padding:8px 12px;border-radius:8px}
	.cw-nav a.is-active{border-bottom:none;background:rgba(255,255,255,.18)}
}

@media (min-width:1024px){
	.cw-topbar-inner{padding:20px 40px}
	.cw-body > .cw-container{padding:48px 40px 0}

	.cw-hero{padding:48px 320px 48px 48px;background-position:right 24px center;background-size:auto}
	.cw-hero h1{font-size:4rem}
	.cw-hero p{font-size:1.6rem;padding-right:0}

	.card{padding:28px 26px}

	.scan-search-card{padding:0;background:transparent;box-shadow:none}
	.ss-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:28px}

	.btn-scan-lg{justify-content:flex-start;text-align:left;min-height:220px;padding:32px;gap:20px}
	.btn-scan-lg .qr-ic{width:48px;height:48px}
	.btn-scan-lg .scan-txt{align-items:flex-start;text-align:left}
	.btn-scan-lg .scan-txt strong{font-size:2rem}
	.btn-scan-lg .go-ic{display:none}

	.or-divider{flex-direction:column;margin:0;justify-content:center;gap:10px}
	.or-divider::before,.or-divider::after{width:2px;height:auto;flex:1;background:#d8cdb8}
	.or-divider .d-full{display:none}
	.or-divider .d-short{display:block;flex:none}

	.manual-col{display:flex;flex-direction:column;justify-content:center;background:#fff;border-radius:18px;padding:28px 26px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
	.manual-title{display:block}
	.search-row{flex-direction:row}
	.cw-input{flex:1}
	.btn-search{width:auto;padding:0 26px;white-space:nowrap}

	.cw-guide .guide-txt{min-width:260px}
	.cw-guide .code-sample{width:auto}

	.feature-grid{gap:24px;margin:0 0 24px;padding:36px 32px}
	.f-icon-lg{width:72px;height:72px}
	.f-icon-lg img{width:36px;height:36px}
	.feature-item-lg strong{font-size:1.6rem}
	.feature-item-lg span{display:block;font-size:1.3rem}

	.cw-banner{margin-bottom:24px;padding:16px}
	.cw-banner-track{aspect-ratio:auto;display:flex;gap:16px}
	.cw-banner-slide{position:static;opacity:1;transition:none;flex:0 0 calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2);aspect-ratio:21/7;border-radius:14px;overflow:hidden}
	.cw-banner-dots{display:none}

	.cw-footer-inner{padding:32px 20px}
	.cw-footer .footer-logo{height:50px}
	.cw-footer .org{font-size:1.5rem}
	.cw-footer .copy{font-size:1.3rem}
}

/* ===================================================================
   토굴 소개 화면(trace_cave_intro) 전용 스타일
   =================================================================== */

/* 페이지 전체 배경 : 모바일은 배경 없이 단색만, PC(1024px+)에서만 새우젓 항아리 이미지를 우측 상단에 원본 사이즈로 노출 */
.ci-page-body{background-color:#fdf6ec}

/* .ci-top-banner 안의 .cw-container는 .cw-body의 직계 자식이 아니라서 공통 좌우 패딩(.cw-body > .cw-container)이 적용되지 않으므로 동일한 값으로 별도 지정 */
.ci-top-banner > .cw-container{padding:0 18px}

/* 상단 메뉴 바로 아래 영역 : 배경이미지는 .ci-page-body(페이지 전체)가 담당하므로 여기는 투명하게 둔다 */
.ci-top-banner{width:100%}

/* 히어로 : 좌측 정렬 2줄 타이틀 + 서브텍스트 (배경사진은 우측에 자연스럽게 노출) */
.ci-hero{padding:18px 0;max-width:520px}
.ci-hero h1{margin:0 0 12px;font-family:'Noto Serif KR',serif;line-height:1.4}
.ci-hero-line1{display:block;font-size:1.7rem;font-weight:900;color:#57534e}
.ci-hero-line2{display:block;font-size:2.3rem;font-weight:900}
.ci-hero-hl1{color:#3b1100}
.ci-hero-hl2{color:#78300a}
.ci-hero-desc{font-size:1.4rem;color:#6b7280;margin:0;line-height:1.6}

/* 토굴 속성 환경 : 아이콘(좌) + 값/라벨(우) 가로 배치 타일 */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-tile{position:relative;overflow:hidden;background:#fdf6ec url('/img/img_cave_intro1.png') center/cover no-repeat;border-radius:14px;padding:16px;display:flex;align-items:center;justify-content:center;gap:18px}
.stat-tile .icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#c2680f}
.stat-tile:nth-child(2) .icon{color:#2563a8}
.stat-tile .num{font-size:2rem;font-weight:900;color:#1c1917;line-height:1.2}
.stat-tile .lbl{font-size:1.25rem;color:#6b7280;font-weight:700;margin-top:2px}

/* 토굴 속성의 특징점 : 모바일 1열 → PC(1024px+) 4열 */
.ci-feature-grid{display:grid;grid-template-columns:1fr;gap:16px}
.ci-feature-item{display:flex;gap:12px;align-items:center}
.ci-feature-icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:#fdf6ec;color:#8a4513;display:flex;align-items:center;justify-content:center;font-size:1.9rem}
.ci-feature-item strong{display:block;font-size:1.5rem;color:#111827;margin-bottom:3px}
.ci-feature-item span{display:block;font-size:1.3rem;color:#6b7280;line-height:1.6}

/* 시기별 새우젓 안내 : 모바일은 1행(아이콘+이름+태그) + 2행(설명, 전체 폭) 2줄 구조 */
.jeot-list{display:flex;flex-direction:column;gap:10px}
.jeot-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px;border-radius:14px;background:#fdf6ec}
.jeot-icon{order:1;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#fff;color:#c2680f;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.jeot-body{display:contents}
.jeot-body strong{order:2;flex:1 1 auto;font-size:1.5rem;font-weight:900;color:#111827}
.jeot-tag{order:3;flex-shrink:0;font-size:1.3rem;font-weight:700;padding:5px 12px;border-radius:999px;background:#fff;color:#8a4513;white-space:nowrap}
.jeot-body p{order:4;flex-basis:100%;width:100%;margin:0;padding-left:50px;font-size:1.4rem;color:#6b7280;line-height:1.5}

/* 이력조회 CTA 카드 : 새우젓 그릇 이미지를 카드 배경으로 깔고, 제목/설명 글자 뒤에는 불투명한 흰 배경을 깔아 사진 위에서도 잘 읽히게 함
   모바일 : 아이콘+텍스트를 1행, 버튼을 2행(전체 폭)으로 줄바꿈. 제목/설명은 폭이 넘치면 말줄임표로 한 줄 유지 */
.ci-cta-card{background-color:#fff;background-image:url('/img/cave_intro_link_bg.png');background-repeat:no-repeat;background-position:right center;background-size:cover;flex-wrap:wrap}
.ci-cta-card .txt strong,
.ci-cta-card .txt span{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:rgba(255,255,255,.32);box-shadow:0 1px 6px rgba(0,0,0,.08);padding:3px 8px;border-radius:6px}
.ci-cta-btn{flex-basis:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px;background:#412616;color:#fff;font-size:1.3rem;font-weight:700;padding:11px 16px;border-radius:999px;white-space:nowrap}

@media (min-width:640px){
	.ci-feature-grid{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:1024px){
	.ci-page-body{
		background-image:url('/img/cave_intro_bg.png');
		background-repeat:no-repeat;
		background-position:right top;
		background-size:auto}
	.ci-top-banner > .cw-container{padding:0 40px}

	.ci-hero{padding:40px 0;max-width:640px}
	.ci-hero-line1{font-size:2rem}
	.ci-hero-line2{font-size:3.6rem}
	.ci-hero-desc{font-size:1.5rem}

	.ci-cta-card{flex-wrap:nowrap}
	.ci-cta-card .txt strong,
	.ci-cta-card .txt span{display:block;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;background-color:transparent;box-shadow:none;padding:0;border-radius:0}
	.ci-cta-btn{flex-basis:auto;font-size:1.5rem;padding:14px 24px}
	.td-empty-btn{font-size:1.5rem;padding:14px 24px}

	.stat-tile{padding:22px}
	.stat-tile .icon{width:52px;height:52px;font-size:3.4rem}
	.stat-tile .num{font-size:2.6rem}
	.stat-tile .lbl{font-size:1.35rem}

	.ci-feature-grid{grid-template-columns:repeat(4,1fr)}
	.ci-feature-item{align-items:center;gap:16px;padding-right:16px;border-right:2px solid #f6f1ec}
	.ci-feature-item:last-child{border-right:none}
	.ci-feature-icon{width:64px;height:64px;font-size:3.6rem}

	.jeot-item{flex-wrap:nowrap;align-items:center;padding:16px 20px}
	.jeot-icon{order:1;width:44px;height:44px;font-size:2.8rem}
	.jeot-body{display:block;order:2;flex:1;min-width:0}
	.jeot-body strong{flex:none}
	.jeot-body p{flex-basis:auto;width:auto;padding-left:0;margin:2px 0 0}
	.jeot-tag{order:3}
}

/* ===================================================================
   이력조회 상세 화면(trace_detail) 전용 스타일
   =================================================================== */

/* 정품 인증 배너 : 아이콘은 폰트아이콘(체크) 사용 */
.td-verify{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;color:#fff;border-radius:18px;padding:18px 20px;margin-bottom:16px;box-shadow:0 4px 14px rgba(21,128,61,.3);background:linear-gradient(135deg,#15803d,#166534)}
.td-verify-icon{position:relative;z-index:1;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:#fff}
.td-verify-txt{position:relative;z-index:1}
.td-verify-txt strong{display:block;font-size:1.6rem;font-weight:900}
.td-verify-txt span{font-size:1.3rem;opacity:.9}

/* 상단 요약 카드 : 품목 카드 + D-Day 카드 (모바일 세로 스택 → PC 가로 2열) */
.td-summary-grid{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.td-item-card{position:relative;height:190px;background-color:#fdf6ec;background-image:url('/img/trace_detail_bg.png');background-size:cover;background-position:center;border-radius:18px;padding:28px 18px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.06);display:flex;flex-direction:column;align-items:center;justify-content:center}
.td-item-icon{width:100px;height:100px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.td-item-icon img{width:auto;height:auto}
.td-item-card h3{font-size:2.2rem;font-weight:900;color:#111827;margin:0 0 10px}
.td-status-tag{display:inline-block;font-size:1.3rem;font-weight:700;padding:6px 16px;border-radius:999px;background:#fef3c7;color:#92400e}
.td-status-tag.is-shipped{background:#dbeafe;color:#1d4ed8}
.td-dday-card{height:190px;background:#fff;border-radius:18px;padding:28px 18px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.06);display:flex;flex-direction:column;align-items:center;justify-content:center}
.td-dday-icon{width:72px;height:72px;border-radius:50%;background:#fdf1e2;color:#c2680f;display:flex;align-items:center;justify-content:center;font-size:2.8rem;margin-bottom:14px}
.td-dday-num{font-size:4rem;font-weight:900;color:#c2680f;line-height:1}
.td-dday-num .unit{font-size:1.6rem;font-weight:700;margin-left:4px}
.td-dday-lbl{font-size:1.3rem;color:#6b7280;font-weight:700;margin-top:10px}

/* 상세 정보 카드 그리드 : 모바일 1열(아코디언) → PC 2x2 */
.td-info-grid{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.td-acc-card{margin-bottom:0}
.td-acc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.td-acc-head h2{margin:0}
.td-acc-toggle{display:none;flex-shrink:0;border:none;background:#f6f1ea;color:#8a4513;width:28px;height:28px;border-radius:8px;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease}

/* 라벨-값 로우 (이력 상세 정보 카드 공용) */
.info-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #f3ede1;font-size:1.5rem}
.info-row:last-child{border-bottom:none}
.info-label{color:#9ca3af;font-weight:700}
.info-value{color:#111827;font-weight:900}

/* 입·출고 타임라인 */
.td-timeline{position:relative;padding-left:34px}
.td-timeline-item{position:relative;padding-bottom:26px}
.td-timeline-item:last-child{padding-bottom:0}
.td-timeline-dot{position:absolute;left:-34px;top:2px;width:26px;height:26px;border-radius:50%;background:#e6e0d4;color:#9ca3af;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.td-timeline-item.is-done .td-timeline-dot{background:#15803d;color:#fff}
.td-timeline-item.is-pending .td-timeline-dot{background:#fef3c7;color:#92400e}
.td-timeline-item:not(:last-child)::before{content:'';position:absolute;left:-22px;top:28px;width:2px;height:calc(100% - 4px);background:#e6e0d4}
.td-timeline-item.is-done:not(:last-child)::before{background:#15803d}
.td-timeline-title{font-size:1.5rem;font-weight:900;color:#111827;margin:0 0 4px}
.td-timeline-desc{font-size:1.3rem;color:#6b7280;line-height:1.5}
.td-timeline-item.is-future .td-timeline-title,
.td-timeline-item.is-future .td-timeline-desc{color:#c7c2b8}

/* 조회 결과 없음 안내 (에러페이지와 동일한 구성: 이미지 → 메시지 → 버튼) */
.td-empty{text-align:center;padding:56px 20px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.td-empty-img{width:140px;height:140px;margin:0 0 20px;display:flex;align-items:center;justify-content:center}
.td-empty-img img{width:100%;height:100%;object-fit:contain}
.td-empty-msg{margin:0 0 24px;color:#6b7280;font-size:1.5rem;line-height:1.6}
.td-empty-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#412616;color:#fff;font-size:1.6rem;font-weight:700;padding:11px 16px;border:none;border-radius:999px;white-space:nowrap;text-decoration:none;transition:background .2s ease,transform .2s ease}
.td-empty-btn:hover{background:#2c1a0f;transform:translateY(-2px)}

/* 샘플 화면(식별번호 없이 접근) 안내 배지 */
.td-sample-banner{background:#fef3c7;border:2px dashed #d6a35c;text-align:center;padding:14px 16px}
.td-sample-banner strong{color:#92400e;font-size:1.4rem}
.td-sample-banner p{margin:6px 0 0;font-size:1.3rem;color:#92400e;line-height:1.5}

/* 하단 outline 버튼 (다른 식별번호 조회하기) */
.btn-outline{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;text-align:center;min-height:52px;border-radius:12px;border:2px solid #e6e0d4;color:#374151;font-weight:700;font-size:1.8rem;text-decoration:none;margin:4px 0 20px}

@media (max-width:1023px){
	.td-acc-toggle{display:flex}
	.td-acc-card.is-collapsed .td-acc-body{display:none}
	.td-acc-card.is-collapsed .td-acc-toggle i{transform:rotate(180deg)}
}

@media (min-width:1024px){
	.td-summary-grid{flex-direction:row}
	.td-item-card{flex:3}
	.td-dday-card{flex:1}
	.td-item-card,.td-dday-card{padding:20px 24px}
	.td-item-icon{width:auto;height:auto;padding:10px;background:#fff}

	.td-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

	.btn-outline{max-width:340px;margin-left:auto;margin-right:auto;margin-bottom:24px}
}

/* ===================================================================
   로그인 화면(tong/login/login) 전용 스타일
   이용자 서브페이지 공통 레이아웃(tong/layout/layout.html)의 sub-content__inner 안에
   좌(안내+자물쇠) / 우(입력 폼) 2단 그리드로 들어간다(콘텐츠 서브페이지와 동일한 레이아웃).
   클래스명 충돌 방지를 위해 login-page 고유 Prefix + BEM 네이밍을 적용한다.
   PC(1024px+) 2열, 태블릿/모바일(768px 이하) 1열로 접힘.
   =================================================================== */
.login-page{max-width:960px;margin:0 auto;padding:8px 0}
.login-page__grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}

/* 좌측 : 로그인 안내 + 자물쇠 일러스트 */
.login-page__aside{text-align:center;padding-bottom:28px;border-bottom:1px solid #e2e8f0}
.login-page__title{margin:0 0 12px;font-size:2.6rem;font-weight:800;color:#0f172a;letter-spacing:-.5px}
.login-page__desc{margin:0 0 32px;font-size:1.5rem;color:#64748b;line-height:1.6;word-break:keep-all}
.login-page__lock{width:132px;height:132px;margin:0 auto;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center}
.login-page__lock i{font-size:5rem;color:#1d4ed8}

/* 우측 : 로그인 입력 폼 */
.login-page__form{width:100%}
.login-page__field{margin-bottom:18px}
.login-page__label{display:block;margin-bottom:8px;font-size:1.4rem;font-weight:700;color:#1e293b}
.login-page__input-wrap{position:relative}
.login-page__ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:1.5rem;pointer-events:none}
.login-page__input{width:100%;min-height:48px;padding:0 16px 0 40px;border:1px solid #cbd5e1;border-radius:6px;font-size:1.4rem;color:#0f172a;background:#fff;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
.login-page__input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.login-page__input:-webkit-autofill,
.login-page__input:-webkit-autofill:hover,
.login-page__input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:#0f172a;transition:background-color 9999s ease-in-out 0s}
.login-page__options{display:flex;align-items:center;justify-content:space-between;margin:6px 0 20px;font-size:1.4rem}
.login-page__remember{display:flex;align-items:center;gap:8px;color:#475569;cursor:pointer;user-select:none}
.login-page__remember input{width:16px;height:16px;accent-color:#2563eb;cursor:pointer}
.login-page__find{color:#475569;text-decoration:none}
.login-page__find:hover{text-decoration:underline}
.login-page__submit{width:100%;min-height:48px;background:#0d42b2;color:#fff;border:none;border-radius:6px;font-size:1.5rem;font-weight:700;cursor:pointer;transition:background-color .2s}
.login-page__submit:hover{background:#0a3590}
.login-page__submit:disabled{opacity:.6;cursor:not-allowed}
.login-page__divider{position:relative;text-align:center;margin:24px 0}
.login-page__divider::before{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:#e2e8f0}
.login-page__divider span{position:relative;background:#fff;padding:0 12px;font-size:1.3rem;color:#94a3b8}
.login-page__join{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;background:#fff;color:#0d42b2;border:1.5px solid #0d42b2;border-radius:6px;font-size:1.5rem;font-weight:700;text-decoration:none;transition:background-color .2s}
.login-page__join:hover{background:#f0f7ff}
.login-page__notice{margin-top:24px;padding:16px;background:#f8fafc;border-radius:6px;font-size:1.3rem;color:#64748b}
.login-page__notice-title{display:flex;align-items:center;gap:6px;font-weight:700;color:#1d4ed8;margin-bottom:8px}
.login-page__notice-list{margin:0;padding-left:16px;line-height:1.7}
.login-page__notice-list li{margin-bottom:2px}

/* 비밀번호 입력란 공통 눈 아이콘 토글 (.pwd-field로 input을 감싸면 적용됨, 로그인/비밀번호변경/게시글 비밀글 등 화면 공용) */
.pwd-field{position:relative}
.pwd-field input[type="password"],.pwd-field input[type="text"]{width:100%;padding-right:38px;box-sizing:border-box}
.pwd-field .pwd-toggle-btn{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;margin:0;cursor:pointer;color:#9ca3af;font-size:1.5rem}
.pwd-field .pwd-toggle-btn:hover{color:#4b5563}
.pwd-field .pwd-toggle-btn i{position:static;pointer-events:none;color:inherit;font-size:inherit}

@media (min-width:769px){
	.login-page__grid{grid-template-columns:1fr 1fr;gap:48px}
	.login-page__aside{padding:0 44px 0 0;border-bottom:0;border-right:1px solid #e2e8f0}
	.login-page__title{font-size:2.8rem}
}

/* ===================================================================
   공통 : 당겨서 새로고침(pull-to-refresh) 인디케이터
   모바일 카드 화면(js common.js의 initPullToRefresh())에서 공용으로 사용
   =================================================================== */
.ph-ptr-indicator{position:fixed;top:0;left:50%;width:38px;height:38px;margin-left:-19px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.18);display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:1.5rem;z-index:9999;pointer-events:none;transform:translateY(-56px)}
.ph-ptr-indicator.is-animated{transition:transform .2s ease}
.ph-ptr-indicator.is-ready{color:#1d4ed8}
.ph-ptr-indicator.is-loading i{animation:ph-ptr-spin .7s linear infinite}
@keyframes ph-ptr-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ===================================================================
   작업자 입고승인 화면(tong.history.worker_main #tabInboundApprove) 전용 스타일
   접두어 wia- (Worker Inbound Approve)
   =================================================================== */

/* 상태 필터 칩 (전체/신청중/확정/완료) */
.wia-status-filter{display:flex;gap:8px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px;-ms-overflow-style:none;scrollbar-width:none}
.wia-status-filter::-webkit-scrollbar{display:none}
.wia-status-chip{flex-shrink:0;border:0px solid #d1d5db;background:#EEF0F4;color:#374151;font-size:1.4rem;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.wia-status-chip.is-active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}

/* 전체 선택 행 우측(연도/정렬 셀렉트 옆) '완료포함' 토글 : 체크 시에만 완료(입고처리 또는 수령확인 완료) 건을 목록에 포함한다 */
.wia-include-done-label{display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;font-size:1.3rem;font-weight:700;color:#374151;cursor:pointer;flex-shrink:0;white-space:nowrap}
.wia-include-done-label input[type="checkbox"]{width:16px;height:16px;accent-color:#0f766e;cursor:pointer}

/* 전체 선택 + 연도/정렬 행 (ph-dash-list-toolbar와 같은 좌우 배치) */
.wia-select-all-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 12px}
.wia-select-all-label{display:flex;align-items:center;gap:8px;font-size:1.4rem;font-weight:700;color:#374151;cursor:pointer}
.wia-select-all-label input[type="checkbox"]{width:20px;height:20px;accent-color:#0f766e;cursor:pointer}

/* 카드 목록의 각 행 : 체크박스는 새우젓종류 아이콘 바로 위에 세로로 붙여 아이콘 컬럼의 빈 공간을 없앤다 */
.wia-card-row{margin-bottom:12px}
.wia-card-row .ph-dash-item-card{margin-bottom:0}
.wia-check-icon-col{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.wia-card-check input[type="checkbox"]{width:20px;height:20px;accent-color:#0f766e;cursor:pointer}
.wia-card-check input[type="checkbox"]:disabled{opacity:.35;cursor:not-allowed}

/* 하단 고정 일괄 처리 바(선택 시에만 노출) : 모바일에서는 선택 요약(건수/중량)이 첫 줄,
   예정일 지정/입고 처리 버튼이 다음 줄에 나오도록 세로로 쌓는다 */
.wia-action-bar{display:none;position:fixed;left:0;right:0;bottom:calc(57px + var(--safe-bottom-offset, 0px));max-width:480px;margin:0 auto;background:#fff;border-top:1px solid #e6e9f2;box-shadow:0 -4px 14px rgba(0,0,0,.08);padding:10px 16px;flex-direction:column;align-items:stretch;gap:8px;z-index:90}
.wia-action-bar.is-active{display:flex}
.wia-action-summary{font-size:1.3rem;color:#374151;font-weight:700;line-height:1.5}
.wia-action-summary strong{color:#0f766e;font-size:1.6rem}
.wia-action-btns{display:flex;gap:8px}
.wia-action-btn{flex:1;border:none;border-radius:23px;font-size:1.35rem;font-weight:700;padding:0 14px;height:46px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.wia-action-btn--outline{background:#fff;border:2px solid #0f766e;color:#0f766e}
.wia-action-btn--solid{background:#0f766e;color:#fff}
.wia-action-btn:disabled{opacity:.4;cursor:not-allowed}

/* 액션바가 떠 있는 동안 리스트 마지막 카드가 가려지지 않도록 여백 확보 */
#tabInboundApprove.wia-has-selection,
#tabOutboundApprove.wia-has-selection{padding-bottom:74px}

@media (min-width:600px){
	.wia-action-bar{max-width:680px;flex-direction:row;align-items:center;justify-content:space-between}
	.wia-action-btns{flex-shrink:0}
	.wia-action-btn{flex:none}
}

@media (min-width:1024px){
	.wia-action-bar{max-width:1080px}
}

/* ===================================================================
   대시보드 메인 화면 전용 스타일
   =================================================================== */

.ph-page{min-height:100vh;background:#F7F9FD;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
.ph-page *{box-sizing:border-box}

.ph-container{width:100%;max-width:480px;margin:0 auto;padding:0 16px}

/* 헤더 : 이력조회/토굴소개 페이지 상단바처럼 화면 전체 폭에 색상을 채우고, 내부 콘텐츠만 폭 제한 */
.ph-header{width:100%;background:linear-gradient(135deg,#2451c7,#1a3a8f);color:#fff}
.ph-header-inner{width:100%;max-width:480px;margin:0 auto;padding:22px 16px 26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
/* 아이콘을 제목 컬럼과 분리해 나란히 배치한다. 로고 이미지는 최대 높이 50px까지만 허용하고 세로 중앙 정렬한다 */
.ph-header-titlewrap{display:flex;align-items:center;gap:8px}
.ph-header-icon{flex-shrink:0}
img.ph-header-icon{height:auto;max-height:50px;width:auto;object-fit:contain;display:block}
.ph-header h1{font-size:1.9rem;font-weight:900;margin:0;line-height:1.3}
/* 우측 : 이름 배지 + 로그아웃 버튼. 모바일(기본)에서는 감추고 햄버거 버튼으로 대체한다 */
.ph-header-userwrap{display:none;align-items:center;gap:10px;flex-shrink:0}
.ph-header-user{font-size:1.3rem;font-weight:600;opacity:.9;white-space:nowrap;display:flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.16);cursor:pointer}
/* 개선요청 버튼(헤더) : 이름 배지-로그아웃 사이에 놓이는 텍스트 포함 알약형 버튼 */
.ph-btn-feedback{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;font-size:1.3rem;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
.ph-btn-logout{flex-shrink:0;min-width:42px;min-height:42px;border:none;background:rgba(255,255,255,.16);color:#fff;border-radius:10px;font-size:1.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
/* 모바일 전용 햄버거 버튼(우측 고정) : 태블릿 이상에서는 숨기고 이름 배지+로그아웃을 대신 노출한다(아래 @media 참고) */
.ph-header-hamburger{flex-shrink:0;min-width:42px;min-height:42px;border:none;background:rgba(255,255,255,.16);color:#fff;border-radius:10px;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* 햄버거 클릭 시 열리는 드롭다운. 이름/로그아웃은 각각 배경이 분리된 별도 배지로 줄바꿈해 세로로 쌓고,
   그 아래 하단 네비게이션과 동일한 탭 메뉴(입고신청/입고현황/출고수령)를 노출한다. 이 영역 전체 글자
   크기는 18px로 통일한다. 메뉴 버튼은 하단 네비게이션과 클릭 동작을 공유하기 위해 .ph-nav-item 클래스도
   함께 갖는데, .ph-nav-item의 세로 배치(아이콘 위/텍스트 아래) 스타일이 동일 우선순위로 충돌하므로
   .ph-header-dropdown-menu를 앞에 붙여 우선순위를 높여 가로 배치로 확실히 덮어쓴다 */
.ph-header-dropdown{display:none;width:100%;max-width:480px;margin:0 auto;padding:0 16px 18px;font-size:1.8rem}
.ph-header-dropdown.is-open{display:block}
.ph-header-dropdown-user{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ph-header-dropdown-username{font-size:1.8rem;font-weight:700;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border-radius:10px;padding:11px 14px;cursor:pointer}
.ph-header-dropdown-logout{font-size:1.8rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px;text-decoration:none;opacity:.9;background:rgba(255,255,255,.12);border-radius:10px;padding:11px 14px}
.ph-header-dropdown-menu{display:flex;flex-direction:column;gap:6px}
.ph-header-dropdown-menu .ph-header-dropdown-item{width:100%;flex:none;text-align:left;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.8rem;font-weight:700;padding:11px 14px;border-radius:10px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;cursor:pointer;text-decoration:none}
.ph-header-dropdown-menu .ph-header-dropdown-item i{width:18px;text-align:center;font-size:1.8rem}
.ph-header-dropdown-menu .ph-header-dropdown-item.is-active{background:rgba(255,255,255,.26);color:#fff}

.ph-body{padding:18px 0 96px}
.ph-tab-panel{display:none}
.ph-tab-panel.is-active{display:block}

/* 공통 카드 */
.ph-card{background:#fff;border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04)}
.ph-card h2{font-size:1.6rem;font-weight:900;margin:0 0 12px;color:#111827}
.ph-field-label{display:block;font-size:1.4rem;font-weight:700;color:#374151;margin:0 0 8px}
.ph-mt-20{margin-top:20px}

.ph-input,.ph-select{width:100%;min-width:0;height:52px;font-size:1.6rem;padding:0 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111827}
.ph-input:focus,.ph-select:focus{outline:none;border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.12)}

/* 네이티브 date 입력(입고/출고 희망일 등)이 좁은 모바일 화면에서 내부 콘텐츠(연/월/일 필드 + 달력 아이콘)의
   최소 폭 때문에 카드/모달 영역을 옆으로 벗어나지 않도록 폭을 강제로 맞추고, 내부 여백을 축소한다 */
input[type="date"].ph-input{display:block;width:100%;max-width:100%;min-width:0;height:52px;box-sizing:border-box;line-height:49px;-webkit-appearance:none;appearance:none;text-align:center}
input[type="date"].ph-input::-webkit-datetime-edit{overflow:hidden;max-width:100%}
input[type="date"].ph-input::-webkit-date-and-time-value{text-align:center}
input[type="date"].ph-input::-webkit-calendar-picker-indicator{margin-left:2px;padding:4px}

@media (max-width:390px){
	input[type="date"].ph-input{padding:0 8px;font-size:1.4rem}
}

/* 새우젓 품목별 색상 팔레트 클래스 : TONG_SHRIMP_ITEM.ITEM_ICON 값('1'~'6')을 그대로 클래스명 접미사로
   붙여 쓴다(예: item-color-1). 색상 값은 CSS 변수로만 지정하고, 실제 배경/글자색 적용은 아래 각
   요소(.item-icon, .ph-dash-item-icon, .csd-item-icon, 숙성 배지, 간편입고 품목 버튼 등)에서
   var(--ic-solid)/var(--ic-tint)로 참조한다. 차트(도넛/막대) 색상은 대상이 아니므로 기존 dashColorForKey()
   해시 팔레트를 그대로 사용한다 */
.item-color-1{--ic-solid:#2563eb;--ic-tint:#dbeafe}
.item-color-2{--ic-solid:#16a34a;--ic-tint:#dcfce7}
.item-color-3{--ic-solid:#7c3aed;--ic-tint:#ede9fe}
.item-color-4{--ic-solid:#ea580c;--ic-tint:#ffedd5}
.item-color-5{--ic-solid:#0891b2;--ic-tint:#cffafe}
.item-color-6{--ic-solid:#db2777;--ic-tint:#fce7f3}

/* 품목 카드형 라디오 : 모바일 2열 → 600px 이상 4열 한 줄. 입고 현황 대시보드 리스트 카드(.ph-dash-item-icon)와
   동일한 사각 라운드 색상 아이콘을 라벨 왼쪽에 배치한다(아이콘 배경색은 item-color-N 클래스로 품목별 지정) */
.ph-item-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ph-item-card-input{position:absolute;opacity:0;width:0;height:0}
.ph-item-card-label{display:flex;align-items:center;gap:10px;min-height:56px;border:1px solid #d1d5db;border-radius:12px;background:#fff;cursor:pointer;font-size:1.5rem;font-weight:700;color:#374151;padding:8px 12px;transition:all .15s ease}
.ph-item-card-label .item-icon{flex-shrink:0;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;background:var(--ic-solid,#9ca3af)}
.ph-item-card-label.is-selected{border-color:#1d4ed8;background:#eff6ff;color:#1d4ed8}

/* 입고 신청 희망 중량 : 직접입력 대신 표준 중량(250/200/150kg) 중 하나를 선택하는 방식(작업자
   입고처리 화면의 .wip-weight-preset-grid와 동일한 패턴, 선택 항목이므로 다시 누르면 해제된다) */
.ph-weight-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ph-weight-preset-btn{min-height:52px;border:1px solid #e2e8f0;background:#fff;color:#111827;font-size:1.8rem;font-weight:900;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ph-weight-preset-btn.is-active{border-color:#1d4ed8;background:#eff6ff;color:#1d4ed8}

.ph-btn-primary-lg{width:100%;min-height:52px;font-size:1.6rem;font-weight:900;background:#1d4ed8;color:#fff;border:none;border-radius:10px;cursor:pointer;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 3px 10px rgba(29,78,216,.28)}
.ph-btn-primary-lg:disabled{opacity:.6}

.ph-btn-refresh{border:none;background:#eef2f7;color:#374151;font-weight:700;font-size:1.4rem;border-radius:8px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ph-list-toolbar{display:flex;justify-content:space-between;align-items:center;margin:2px 0 12px}
.ph-list-toolbar h2{margin:0;font-size:1.6rem;font-weight:900;color:#111827}

/* 입고 신청 현황 상태 필터 칩 : 가로 스크롤 가능, 선택된 상태만 파란색으로 강조 */
.ph-status-filter{display:flex;gap:8px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px;-ms-overflow-style:none;scrollbar-width:none}
.ph-status-filter::-webkit-scrollbar{display:none}
.ph-status-chip{flex-shrink:0;border:0px solid #d1d5db;background:#EEF0F4;color:#374151;font-size:1.4rem;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.ph-status-chip.is-active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}

/* 무한 스크롤 리스트 내 월별 구분선 */
.ph-month-divider{font-size:1.4rem;font-weight:700;color:#6b7280;margin:18px 2px 8px}
.ph-month-divider:first-child{margin-top:0}

/* 입고 신청 폼 : 새우 종류/원산지/입고희망일/희망중량이 하나의 .ph-card 안에 모여 있고,
   원산지/입고희망일/희망중량 3개 항목은 모바일은 세로 스택, PC(1024px+)는 가로 3열로 배치.
   min-width:0 : flex 항목의 기본 min-width:auto 때문에 날짜(date) 입력창의 내부 콘텐츠 최소 너비가
   부모 폭을 넘어서면서 모바일에서 항목이 화면 우측으로 밀려나던 문제를 막는다 */
.ph-form-grid{display:flex;flex-direction:column;gap:16px}
.ph-form-field{min-width:0}
.ph-form-field h2{font-size:1.6rem;font-weight:900;margin:0 0 12px;color:#111827}

/* 상태 배지 */
.ph-status-badge{display:inline-block;font-size:1.4rem;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0}
/* 숙성기간 배지에 item-color-N이 함께 붙으면 품목별 색상(연한 배경 + 진한 글자)으로 표시한다 */
.ph-status-badge[class*="item-color-"]{background:var(--ic-tint);color:var(--ic-solid)}
.ph-badge-req{background:#fef3c7;color:#92400e}
.ph-badge-scheduled{background:#dbeafe;color:#1d4ed8}
.ph-badge-done{background:#d1fae5;color:#047857}
.ph-badge-reject{background:#fee2e2;color:#b91c1c}
.ph-badge-confirmed{background:#e0e7ff;color:#4338ca}

/* 입고 신청/재고/출고 요청 카드(.ph-dash-item-card) 하단 액션 버튼 : 항상 .ph-dash-item-body(세로 flex)의
   마지막 자식으로 쓰이므로 기본은 폭 100%, PC(1024px+)에서는 아래에서 작게 줄여 우측 정렬한다 */
.ph-btn-outbound{display:block;width:100%;margin-top:10px;min-height:42px;font-size:1.4rem;font-weight:700;background:#1d4ed8;color:#fff;border:none;border-radius:8px;cursor:pointer}
.ph-btn-confirm{display:block;width:100%;margin-top:10px;min-height:42px;font-size:1.4rem;font-weight:700;background:#10b981;color:#fff;border:none;border-radius:8px;cursor:pointer}

.ph-empty-box{text-align:center;padding:36px 12px;color:#9ca3af;font-size:1.4rem;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ph-empty-box i{font-size:2.8rem;display:block;margin-bottom:10px;opacity:.5}

/* 무한 스크롤 : 다음 페이지 로딩 중 표시 */
.ph-load-more{text-align:center;padding:14px 12px;color:#9ca3af;font-size:1.4rem}

/* 출고 서브탭 */
.ph-sub-switch{display:flex;gap:8px;margin-bottom:14px;background:#eef2f7;padding:5px;border-radius:10px}
.ph-sub-tab{flex:1;border:none;background:transparent;padding:10px 6px;font-size:1.4rem;font-weight:700;color:#475569;border-radius:8px;cursor:pointer}
.ph-sub-tab.is-active{background:#1d4ed8;color:#fff}
.ph-sub-panel{display:none}
.ph-sub-panel.is-active{display:block}

/* 출고요청 모달 */
.ph-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;padding:20px}
.ph-modal-box{background:#fff;border-radius:14px;width:100%;max-width:420px;overflow:hidden}
.ph-modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:1.6rem;font-weight:900;color:#111827;border-bottom:1px solid #eef2f7}
.ph-modal-close{border:none;background:transparent;font-size:1.9rem;color:#6b7280;cursor:pointer;min-width:38px;min-height:38px}
.ph-modal-body{padding:16px}
.ph-modal-foot{padding:12px 16px 16px}

/* 하단 고정 네비게이션 : 상단 헤더와 동일하게 전체 폭에 배경을 채우고, 내부 메뉴만 폭 제한 컨테이너로 정렬 */
.ph-bottom-nav{position:fixed;left:0;right:0;bottom:var(--safe-bottom-offset, 0px);width:100%;background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom);z-index:100}
.ph-bottom-nav-inner{display:flex;width:100%;max-width:480px;margin:0 auto}
.ph-nav-item{flex:1;border:none;background:transparent;padding:9px 4px 8px;font-size:1.4rem;font-weight:700;color:#9ca3af;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.ph-nav-item i{font-size:1.9rem}
.ph-nav-item.is-active{color:#1d4ed8}

/* 입고 현황 대시보드(탭2) : 요약 카드 / 토굴·품목 차트 / 필터 / 리스트 */
.ph-dash-summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
/* 요약 카드 : 아이콘은 좌측, 라벨/수치/보조문구는 우측에 배치 (380px 이하 초소형 모바일에서는 아이콘 상단/정보 하단으로 세로 배치) */
.ph-dash-stat-card{background:#fff;border-radius:14px;padding:14px;display:flex;flex-direction:row;align-items:center;gap:12px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04)}
.ph-dash-stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex-shrink:0}
.ph-dash-stat-icon.is-blue{background:#dbeafe;color:#1d4ed8}
.ph-dash-stat-icon.is-green{background:#dcfce7;color:#16a34a}
.ph-dash-stat-icon.is-amber{background:#fef3c7;color:#b45309}
.ph-dash-stat-icon.is-purple{background:#ede9fe;color:#7c3aed}
.ph-dash-stat-label{font-size:1.3rem;color:#6b7280;font-weight:700;margin:0 0 2px}
.ph-dash-stat-value{font-size:2rem;font-weight:900;color:#111827;margin:0}
.ph-dash-stat-value .unit{font-size:1.3rem;font-weight:700;color:#6b7280;margin-left:2px}
.ph-dash-stat-sub{font-size:1.3rem;color:#9ca3af;font-weight:700;margin:2px 0 0}

/* 초소형 모바일(380px 이하)에서만 요약 카드를 세로 배치(아이콘 상단/정보 하단)로 전환한다. PC(1024px+)는 위 가로 배치 그대로 유지 */
@media (max-width:380px){
	.ph-dash-stat-card{flex-direction:column;align-items:flex-start;gap:8px}
}

.ph-dash-chart-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px}
.ph-dash-chart-canvas-wrap{position:relative;height:180px;max-width:220px;margin:0 auto}
/* 도넛 차트 가운데에 겹쳐 표시하는 총 건수 */
.ph-dash-chart-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.ph-dash-chart-center-num{display:block;font-size:2.2rem;font-weight:900;color:#111827;line-height:1.1}
.ph-dash-chart-center-lbl{display:block;font-size:1.3rem;font-weight:700;color:#9ca3af;margin-top:2px}
.ph-dash-chart-legend{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.ph-dash-legend-item{display:flex;align-items:center;gap:8px;font-size:1.35rem}
.ph-dash-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ph-dash-legend-label{flex:1;font-weight:700;color:#374151;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-dash-legend-pct{font-weight:900;color:#111827;min-width:36px;text-align:right;flex-shrink:0}
.ph-dash-legend-kg{font-weight:700;color:#9ca3af;min-width:64px;text-align:right;font-size:1.3rem;flex-shrink:0}
.ph-dash-chart-total{text-align:right;font-size:1.3rem;font-weight:700;color:#6b7280;margin-top:10px;padding-top:10px;border-top:1px solid #f1f5f9}

/* 토굴별 숙성 물량 현황 : 막대그래프 상단 단위(건) / 총 건수 표시 줄 */
.ph-dash-bar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ph-dash-bar-unit{font-size:1.2rem;font-weight:700;color:#9ca3af}
.ph-dash-bar-total{font-size:1.3rem;font-weight:700;color:#374151}
.ph-dash-bar-canvas-wrap{position:relative;height:190px}

/* 새우젓 종류별 비중 : 도넛 차트 + 우측 범례를 나란히 배치 */
.ph-dash-donut-row{display:flex;align-items:center;gap:14px}
.ph-dash-chart-canvas-wrap--sm{height:120px;max-width:120px;flex-shrink:0;margin:0}
.ph-dash-chart-legend--side{margin-top:0;flex:1;min-width:0}

.ph-dash-filter-label{font-size:1.3rem;font-weight:700;color:#6b7280;margin:0 0 8px}
.ph-dash-filter-label:not(:first-child){margin-top:14px}
.ph-dash-cave-tabs{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.ph-dash-cave-tabs::-webkit-scrollbar{display:none}
.ph-dash-item-select-row{display:flex;gap:8px;align-items:stretch}
.ph-dash-item-select-row .ph-select{flex:1;height:52px}
.ph-btn-filter-reset{flex-shrink:0;border:1px solid #d1d5db;background:#fff;color:#374151;font-weight:700;font-size:1.3rem;border-radius:8px;padding:0 12px;height:52px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

.ph-dash-list-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 12px}
.ph-dash-list-toolbar h2{margin:0;font-size:1.6rem;font-weight:900;color:#111827}
.ph-dash-toolbar-controls{display:flex;gap:8px;flex-shrink:0}
.ph-dash-sort-select{height:38px;font-size:1.3rem;font-weight:700;padding:0 10px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#374151;flex-shrink:0}

/* 입고 현황 리스트 카드 : 사각 라운드 품목 아이콘 + 구분 세로바 + 식별번호 옆 세부정보 + 하단 펼치기 토글 */
.ph-dash-item-card{background:#fff;border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.ph-dash-item-card-main{display:flex;align-items:stretch;gap:12px}
.ph-dash-item-icon{flex-shrink:0;align-self:flex-start;width:48px;height:48px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:2px;background:var(--ic-solid,#9ca3af)}
.ph-dash-item-icon i{font-size:1.6rem}
/* 42px 뱃지 안에 들어가는 2글자 축약 라벨이라 13px까지는 못 키우지만, 뱃지 자체를 키워 최대한 확보했다 */
.ph-dash-item-icon span{font-size:1.2rem;font-weight:700;line-height:1}
.ph-dash-item-divider{flex-shrink:0;width:1px;border-radius:2px;align-self:stretch;background:#f1f5f9}
.ph-dash-item-body{flex:1;min-width:0;display:flex;flex-direction:column}
.ph-dash-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.ph-dash-item-id-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ph-dash-item-id{font-size:1.5rem;font-weight:900;color:#111827;flex-shrink:0}
.ph-dash-item-fields{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:1.4rem;color:#374151;font-weight:700}
.ph-dash-item-fields i{color:#9ca3af;font-size:1.3rem;margin-right:4px}

/* 카드 하단 펼치기 토글 : 우측 화살표(>) 대신 카드 하단에 배치, 클릭 시 원 입고 신청 정보를 토글 */
.ph-dash-item-toggle{width:100%;border:none;background:transparent;padding:10px 0 0;margin-top:10px;border-top:1px dashed #eef2f7;font-size:1.3rem;font-weight:700;color:#6b7280;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.ph-dash-item-toggle i{font-size:1.3rem;transition:transform .2s ease}
.ph-dash-item-card.is-expanded .ph-dash-item-toggle i{transform:rotate(180deg)}
.ph-dash-item-expand{display:none;margin-top:10px;padding-top:10px;border-top:1px solid #f1f5f9;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:1.3rem}
.ph-dash-item-card.is-expanded .ph-dash-item-expand{display:grid}
.ph-dash-item-expand-label{color:#9ca3af;font-weight:700}
.ph-dash-item-expand-value{color:#111827;font-weight:700;text-align:right}
.ph-dash-item-expand-empty{grid-column:1 / -1;color:#9ca3af;font-size:1.3rem;text-align:center;padding:4px 0}

/* 진행 단계 스텝퍼 : 입고 신청(신청 → 확정 → 입고완료) / 출고 요청(요청 → 확정 → 출고 → 수령확인) 공용.
   .ph-dash-item-card-main(아이콘+구분바+본문) 바깥의 형제 요소로 배치되어, 아이콘 아래 영역까지 포함한
   카드 전체 폭으로 표시된다 */
.ph-dash-stepper{display:flex;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid #f1f5f9}
.ph-dash-step{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.ph-dash-step::before{content:'';position:absolute;top:12px;left:-50%;width:100%;height:2px;background:#e5e7eb;z-index:0}
.ph-dash-step:first-child::before{display:none}
.ph-dash-step .dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:#e5e7eb;color:#9ca3af;font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.ph-dash-step-text{display:flex;align-items:baseline;gap:0}
.ph-dash-step .lbl{font-size:1.3rem;font-weight:700;color:#9ca3af;white-space:nowrap}
.ph-dash-step .date{font-size:1.2rem;font-weight:600;color:#8b8578;white-space:nowrap}
.ph-dash-step.is-done::before{background:#10b981}
.ph-dash-step.is-done .dot{background:#10b981;color:#fff}
.ph-dash-step.is-done .lbl{color:#111827}
.ph-dash-step.is-done .date{color:#9ca3af}
/* 직전 완료 단계 → 현재(진행중) 단계로 이어지는 연결선도 완료 색으로 채운다 */
.ph-dash-step.is-active::before{background:#10b981}
.ph-dash-step.is-active .dot{background:#1d4ed8;color:#fff}
.ph-dash-step.is-active .lbl{color:#1d4ed8;font-weight:900}
.ph-dash-step.is-active .date{color:#1d4ed8}
.ph-dash-stepper-reject{margin:12px 0 4px;padding:9px 10px;border-radius:8px;background:#fee2e2;color:#b91c1c;font-size:1.3rem;font-weight:700;text-align:center}

@media (min-width:600px){
	.ph-container{max-width:680px}
	.ph-header-inner{max-width:680px}
	.ph-bottom-nav-inner{max-width:680px}
	.ph-item-card-grid{grid-template-columns:repeat(4,1fr)}

	/* 태블릿 이상에서는 모바일 전용 햄버거 메뉴 대신 이름 배지+로그아웃을 그대로 노출한다 */
	.ph-header-userwrap{display:flex}
	.ph-header-hamburger{display:none}
	.ph-header-dropdown{display:none!important}
}

@media (min-width:1024px){
	.ph-container{max-width:960px;padding:0 24px}
	.ph-header-inner{max-width:960px;padding:26px 24px 30px}
	.ph-header h1{font-size:2.4rem}
	.ph-header-user{font-size:1.4rem}
	.ph-bottom-nav-inner{max-width:960px}

	.ph-form-grid{flex-direction:row;align-items:stretch}
	.ph-form-grid > .ph-form-field{flex:1}

	.ph-card{padding:20px}

	.ph-dash-summary-grid{grid-template-columns:repeat(4,1fr)}
	.ph-dash-chart-grid{grid-template-columns:repeat(2,1fr)}

	/* PC(마우스 사용 환경)에서는 모바일처럼 스크롤바를 숨기지 않고 하단에 슬라이드(스크롤바)를 노출해
	   전체 탭이 가로 스크롤 가능하다는 것을 알 수 있게 하고, 드래그로도 이동할 수 있게 한다 */
	.ph-dash-cave-tabs{-ms-overflow-style:auto;scrollbar-width:thin;padding-bottom:8px}
	.ph-dash-cave-tabs::-webkit-scrollbar{display:block;height:6px}
	.ph-dash-cave-tabs::-webkit-scrollbar-track{background:#f1f5f9;border-radius:999px}
	.ph-dash-cave-tabs::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:999px}
	.ph-dash-cave-tabs::-webkit-scrollbar-thumb:hover{background:#9ca3af}

	/* PC(출고/수령 > 토굴 재고에서 요청)에서는 "출고 요청" 버튼을 모바일처럼 전체 폭으로 늘리지 않고
	   작게 줄여 카드 우측 하단에 정렬한다 */
	.ph-dash-item-body > .ph-btn-outbound,
	.ph-dash-item-body > .ph-btn-confirm{align-self:flex-end;width:auto;min-height:38px;padding:0 20px;font-size:1.3rem}
}

/* ===================================================================
   작업자 메인 화면(tong.history.worker_main) 전용 스타일
   =================================================================== */

.wm-wrap{padding:0 0 92px;font-size:1.7rem;color:#111827;background:#f7fafc;min-height:100vh;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
.wm-wrap *{box-sizing:border-box}

/* 상단 헤더 : (.ph-header/.ph-header-inner)와 동일하게, 배경은 화면 전체 폭으로 채우고
   내부 콘텐츠(제목/로그아웃 버튼)만 컨테이너 폭으로 제한해 가운데 정렬한다 */
.wm-header{width:100%;background:#0f766e;color:#fff}
/* 오프라인 상태 배너(작업자 화면 전용) : navigator.onLine이 false가 되면 js/offline-worker.js가 노출한다 */
.wm-offline-banner{width:100%;padding:10px 16px;background:#B91C1C;color:#fff;font-size:1.5rem;font-weight:700;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
/* 전송 대기열 바(작업자 화면 전용, 오프라인 지원 Phase 3) : 입고/출고 등록이 대기열(IndexedDB writeQueue)에
   쌓이면 js/offline-queue.js가 OfflineQueue.onChange로 이 바를 보여주고 건수를 갱신한다. 기본은 접힌 상태이고
   헤드(.wm-queue-bar__head)를 누르면 목록이 펼쳐진다 */
.wm-queue-bar{width:100%;max-width:480px;margin:0 auto;background:#FFFBEB;border-bottom:1px solid #FDE68A}
.wm-queue-bar__head{width:100%;border:none;background:none;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font:inherit;color:#92400E}
.wm-queue-bar__title{font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:8px}
.wm-queue-bar__title strong{font-size:1.7rem}
.wm-queue-bar__chevron{transition:transform .15s ease}
.wm-queue-bar.is-open .wm-queue-bar__chevron{transform:rotate(180deg)}
.wm-queue-bar__body{display:none;padding:0 16px 14px}
.wm-queue-bar.is-open .wm-queue-bar__body{display:block}
.wm-queue-bar__sync-btn{width:100%;margin-top:10px;min-height:40px;border:1px solid #F59E0B;background:#fff;color:#92400E;border-radius:10px;font-size:1.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.wm-queue-bar__sync-btn:disabled{opacity:.6;cursor:default}
.wm-queue-list{display:flex;flex-direction:column;gap:8px}
.wm-queue-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:#fff;border:1px solid #FDE68A;border-radius:10px;padding:10px 12px}
.wm-queue-item--error{border-color:#FCA5A5;background:#FEF2F2}
.wm-queue-item__label{font-size:1.5rem;font-weight:700;color:#111827}
.wm-queue-item__waiting{font-size:1.4rem;color:#92400E;margin-top:2px}
.wm-queue-item__error{font-size:1.4rem;color:#B91C1C;margin-top:2px;display:flex;align-items:flex-start;gap:4px}
.wm-queue-item__del{flex-shrink:0;width:28px;height:28px;border:none;background:rgba(0,0,0,.06);color:#6B7280;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wm-header-inner{width:100%;max-width:480px;margin:0 auto;padding:22px 18px 26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.wm-header h1{font-size:1.9rem;font-weight:900;margin:0;line-height:1.3}
/* 로고를 제목 컬럼과 분리해(.ph-header-titlewrap과 동일한 방식) 배치한다.
   로고 이미지는 최대 높이 50px까지만 허용하고 세로 중앙 정렬한다 */
.wm-header-titlewrap{display:flex;align-items:center;gap:8px}
.wm-header-icon{flex-shrink:0}
img.wm-header-icon{height:auto;max-height:50px;width:auto;object-fit:contain;display:block}
/* 우측 : 이름 배지 + 로그아웃 버튼. 모바일(기본)에서는 감추고 햄버거 버튼으로 대체한다 */
.wm-header-userwrap{display:none;align-items:center;gap:10px;flex-shrink:0}
.wm-header-user{font-size:1.3rem;font-weight:600;opacity:.9;white-space:nowrap;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.15);cursor:pointer}
/* 개선요청 버튼(작업자 헤더) : 이름 배지-로그아웃 사이에 놓이는 텍스트 포함 알약형 버튼 */
.wm-wrap .btn-feedback{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.15);color:#fff;font-size:1.3rem;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
.wm-wrap .btn-logout{flex-shrink:0;min-width:44px;min-height:44px;border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:12px;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
/* 모바일 전용 햄버거 버튼(우측 고정) : 태블릿 이상에서는 숨기고 이름 배지+로그아웃을 대신 노출한다(아래 @media 참고) */
.wm-header-hamburger{flex-shrink:0;min-width:44px;min-height:44px;border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:12px;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* 햄버거 클릭 시 열리는 드롭다운. 이름/로그아웃은 각각 배경이 분리된 별도 배지로 줄바꿈해 세로로 쌓고,
   그 아래 하단 네비게이션과 동일한 탭 메뉴(입고관리/출고관리/토굴재고/입출고내역)를 노출한다. 이 영역
   전체 글자 크기는 18px로 통일한다. 메뉴 버튼은 하단 네비게이션과 클릭 동작을 공유하기 위해 .wm-nav-item
   클래스도 함께 갖는데, .wm-nav-item의 세로 배치(아이콘 위/텍스트 아래) 스타일이 동일 우선순위로
   충돌하므로 .wm-header-dropdown-menu를 앞에 붙여 우선순위를 높여 가로 배치로 확실히 덮어쓴다 */
.wm-header-dropdown{display:none;width:100%;max-width:480px;margin:0 auto;padding:0 18px 18px;font-size:1.8rem}
.wm-header-dropdown.is-open{display:block}
.wm-header-dropdown-user{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.wm-header-dropdown-username{font-size:1.8rem;font-weight:700;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border-radius:12px;padding:11px 14px;cursor:pointer}
.wm-header-dropdown-logout{font-size:1.8rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px;text-decoration:none;opacity:.9;background:rgba(255,255,255,.12);border-radius:12px;padding:11px 14px}
.wm-header-dropdown-menu{display:flex;flex-direction:column;gap:6px}
.wm-header-dropdown-menu .wm-header-dropdown-item{width:100%;flex:none;text-align:left;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.8rem;font-weight:700;padding:11px 14px;border-radius:12px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;cursor:pointer;text-decoration:none}
.wm-header-dropdown-menu .wm-header-dropdown-item i{width:18px;text-align:center;font-size:1.8rem}
.wm-header-dropdown-menu .wm-header-dropdown-item.is-active{background:rgba(255,255,255,.26);color:#fff}

/* 작업자 홈 헤더 : 간편 연속 QR 입고/출고 바로가기 (고령 작업자가 정식 승인/처리 탭을 거치지 않고
   QR 스캔만으로 즉시 입고/출고 처리할 수 있는 전용 화면으로 바로 이동) */
.wm-easyqr-links{width:100%;max-width:480px;margin:0 auto;padding:0 18px 18px}
.wm-easyqr-link{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;font-size:1.8rem;font-weight:700;text-decoration:none}

.wm-body{max-width:480px;margin:0 auto;padding:18px 16px 0}
.wm-wrap .tab-panel{display:none}
.wm-wrap .tab-panel.is-active{display:block}

.wm-wrap .card{background:#fff;border-radius:16px;padding:18px 16px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.wm-wrap .card h2{font-size:1.8rem;font-weight:900;margin:0 0 14px;color:#111827}
.wm-wrap .field-label,
#scheduleModal .field-label,
#profileModal .field-label{display:block;font-size:1.5rem;font-weight:700;color:#374151;margin:0 0 8px}
.wm-wrap .field-hint{font-size:1.3rem;color:#9ca3af;margin:6px 0 0}
.wm-wrap .mt-20px{margin-top:20px}

.wm-input,.wm-select{width:100%;min-height:52px;font-size:1.8rem;padding:10px 14px;border:2px solid #cbd5e1;border-radius:12px;background:#fff;color:#111827}
.wm-input:focus,.wm-select:focus{outline:none;border-color:#0f766e}

/* 네이티브 date 입력(예정일 지정 모달, 입고일자 등)이 좁은 모바일 화면에서 내부 콘텐츠(연/월/일 필드 +
   달력 아이콘)의 최소 폭/높이 때문에 모달·카드 영역을 옆이나 아래로 벗어나지 않도록 폭과 높이를 옆의
   select(.wm-select, 예: 원산지)와 동일하게 강제로 맞추고, 넘치는 내부 콘텐츠는 잘라낸다 */
input[type="date"].wm-input{display:block;width:100%;max-width:100%;min-width:0;height:52px;min-height:0;line-height:48px;box-sizing:border-box;overflow:hidden;-webkit-appearance:none;appearance:none;text-align:center}
input[type="date"].wm-input::-webkit-datetime-edit{overflow:hidden;max-width:100%}
input[type="date"].wm-input::-webkit-date-and-time-value{text-align:center}
input[type="date"].wm-input::-webkit-calendar-picker-indicator{margin-left:2px;padding:4px}

@media (max-width:390px){
	input[type="date"].wm-input{padding:0 8px;font-size:1.6rem}
}

.wm-wrap .list-toolbar{display:flex;justify-content:space-between;align-items:center;margin:2px 0 14px}
.wm-wrap .list-toolbar h2{margin:0;font-size:1.9rem;font-weight:900;color:#111827}
.wm-wrap .btn-refresh{border:none;background:#e6e9f2;color:#374151;font-weight:700;font-size:1.4rem;border-radius:10px;padding:8px 14px;cursor:pointer}

.wm-wrap .empty-box{text-align:center;padding:40px 12px;color:#9ca3af;font-size:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center}
.wm-wrap .empty-box i{font-size:3.2rem;display:block;margin-bottom:10px;opacity:.5}

/* QR 스캔 영역 */
.wm-wrap .qr-input-row{display:flex;flex-direction:column;gap:10px}
.wm-wrap .btn-camera{width:100%;min-height:52px;font-size:1.7rem;font-weight:700;background:#0f766e;color:#fff;border:none;border-radius:12px;cursor:pointer}
.wm-wrap .btn-camera i{margin-right:6px}
.wm-wrap .uniqno-result{margin-top:10px;font-size:1.5rem;font-weight:700;min-height:20px}
.wm-wrap .uniqno-result.is-ok{color:#10b981}
.wm-wrap .uniqno-result.is-dup{color:#ef4444}
.wm-wrap .uniqno-result.is-mismatch{color:#ef4444}
.wm-wrap .uniqno-result.is-warn{color:#f59e0b}
/* [추가] 버튼 바로 위의 입력값 검증 오류 영역은 내용이 없을 때 여백을 차지하지 않도록 한다 */
.wm-wrap #outboundScanInputResult:empty{margin-top:0;min-height:0}

/* QR 3분할 입력(박스1 GC 고정값 / 박스2 발행차수 Select / 박스3 일련번호 Input)
   작업자 입고/출고처리(worker_main.html)와 간편입출고(easy_qr_form.html, .eq-wrap)가 동일 패턴을 공유한다 */
.wm-wrap .qr-split-row,.eq-wrap .qr-split-row{display:flex;align-items:center;gap:6px;margin-top:12px}
.wm-wrap .qr-split-row .wm-input,.eq-wrap .qr-split-row .wm-input,
.wm-wrap .qr-split-row .wm-select,.eq-wrap .qr-split-row .wm-select{min-height:48px;padding:8px 4px;font-size:1.7rem;text-align:center;font-weight:800;color:#0f766e}
.wm-wrap .qr-split-gc,.eq-wrap .qr-split-gc{flex:0 0 58px;background:#f1f5f9;color:#6b7280;cursor:default}
.wm-wrap .qr-split-dash,.eq-wrap .qr-split-dash{flex:0 0 auto;font-size:1.8rem;font-weight:800;color:#9ca3af}
.wm-wrap .qr-split-prefix,.eq-wrap .qr-split-prefix{flex:0 0 72px}
.wm-wrap .qr-split-seq,.eq-wrap .qr-split-seq{flex:1;min-width:0}
.wm-wrap .qr-split-preview,.eq-wrap .qr-split-preview{text-align:center;font-size:1.5rem;font-weight:700;color:#9ca3af;letter-spacing:.5px;margin:8px 0 0}

/* 처리 대상 선택 요약 */
.wm-wrap .target-summary{background:#f7fafc;border:2px solid #e6e9f2;border-radius:12px;padding:4px 14px;margin-top:6px}
.wm-wrap .ts-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #e6e9f2;font-size:1.5rem}
.wm-wrap .ts-row:last-child{border-bottom:none}
.wm-wrap .ts-label{color:#6b7280;font-weight:700}
.wm-wrap .ts-value{color:#111827;font-weight:900}
.wm-wrap .ts-value.ts-uniqno{color:#0f766e;background:#e6f5f2;padding:3px 10px;border-radius:8px;font-family:monospace}

.wm-wrap .btn-primary-lg,
#scheduleModal .btn-primary-lg,
#profileModal .btn-primary-lg{width:100%;min-height:58px;font-size:1.9rem;font-weight:700;background:#10b981;color:#fff;border:none;border-radius:14px;cursor:pointer;margin-top:16px;box-shadow:0 3px 10px rgba(16,185,129,.3)}
.wm-wrap .btn-primary-lg i,
#scheduleModal .btn-primary-lg i,
#profileModal .btn-primary-lg i{margin-right:8px}
.wm-wrap .btn-primary-lg:disabled,
#scheduleModal .btn-primary-lg:disabled,
#profileModal .btn-primary-lg:disabled{opacity:.6}

/* 입고 완료 버튼의 괄호 설명 문구 : 모바일 좁은 화면에서는 "(" 앞에서 줄바꿈해 두 줄로 보여준다 */
@media (max-width:599px){
	.wm-wrap .btn-primary-lg .wip-confirm-sub{display:block;font-size:1.3rem;font-weight:700;margin-top:2px}
}

/* 작업자 일괄 입고처리(탭2) : 페이지 제목 */
.wip-page-head{margin:2px 0 16px}
.wip-page-head h2{margin:0;font-size:1.9rem;font-weight:900;color:#111827}
.wip-page-desc{margin:6px 0 0;font-size:1.3rem;color:#9ca3af}

/* 상단 진행 현황 + 작업 Queue 캐러셀 : 모바일은 세로로 쌓고, PC는 좌(진행 현황)/우(Queue) 로 나란히 배치.
   박스 자체는 일반 카드(.card)와 동일한 스타일을 사용한다 */
.wm-wrap .wip-queue-bar{background:#fff;border-radius:16px;padding:18px 16px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:12px}
.wip-queue-top{display:flex;flex-direction:column;gap:16px}
.wip-queue-progress{min-width:0}
.wip-queue-progress-head{font-size:1.3rem;font-weight:700;color:#111827;margin-bottom:8px}
.wip-queue-progress-total{font-weight:700;color:#0f766e}
.wip-queue-progress-count{font-size:1.5rem;font-weight:900;color:#0f766e;margin-bottom:6px}
.wip-queue-progress-count strong{font-size:1.9rem}
.wip-progress-row{display:flex;align-items:center;gap:8px}
.wip-progress-track{flex:1;height:8px;border-radius:999px;background:#c9e9e3;overflow:hidden}
.wip-progress-fill{height:100%;background:#0f766e;border-radius:999px;transition:width .25s ease}
.wip-progress-pct{flex-shrink:0;font-size:1.4rem;font-weight:900;color:#0f766e}
.wip-queue-progress-remain{font-size:1.2rem;color:#0f766e;opacity:.8;margin:4px 0 0}

.wip-queue-cards-col{min-width:0}
.wip-queue-cards-head{font-size:1.3rem;font-weight:700;color:#111827;margin-bottom:8px}
.wip-queue-cards-head em{font-style:normal;font-weight:900}

.wip-queue-scroll-wrap{display:flex;align-items:center;gap:6px}
.wip-queue-cards{flex:1;display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.wip-queue-cards::-webkit-scrollbar{height:0}
.wip-queue-scroll-btn{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid #0f766e;background:#fff;color:#0f766e;cursor:pointer;display:none;align-items:center;justify-content:center}

.wip-queue-card{flex:0 0 108px;background:#fff;border:1px solid #d7ece7;border-radius:12px;padding:8px 10px;font-size:1.2rem}
.wip-queue-card-idx{font-weight:900;color:#0f766e;font-size:1.3rem}
.wip-queue-card-label{font-weight:700;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0}
.wip-queue-card-qty{color:#6b7280;font-weight:700}
.wip-queue-card-state{margin-top:4px;font-weight:700;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:1.1rem;background:#f1f5f9;color:#6b7280}
.wip-queue-card.is-current{border-color:#0f766e;background:#0f766e;box-shadow:0 2px 8px rgba(15,118,110,.3)}
.wip-queue-card.is-current .wip-queue-card-idx,
.wip-queue-card.is-current .wip-queue-card-label,
.wip-queue-card.is-current .wip-queue-card-qty{color:#fff}
.wip-queue-card.is-current .wip-queue-card-state{background:rgba(255,255,255,.25);color:#fff}
.wip-queue-card.is-done{opacity:.55}
.wip-queue-card.is-done .wip-queue-card-state{background:#dcfce7;color:#15803d}

/* 현재 작업 대상 요약 바 : 데스크톱은 한 줄로 나란히, 모바일은 값만 간결하게 나열 */
.wm-wrap .wip-current-summary{background:#fff;border:2px solid #e6e9f2;border-radius:14px;padding:14px 16px;margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.wip-current-label{font-weight:700;color:#0f766e;font-size:1.3rem;flex-shrink:0}
.wip-current-idx{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;background:#0f766e;color:#fff;font-weight:900;font-size:1.2rem;border-radius:999px;flex-shrink:0}
.wip-current-fields{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;flex:1;min-width:0}
.wip-current-field{font-size:1.3rem;white-space:nowrap}
.wip-current-field .wcf-label{color:#9ca3af;font-weight:700;margin-right:6px}
.wip-current-field .wcf-value{color:#111827;font-weight:900}

@media (max-width:599px){
	.wip-current-field .wcf-label{display:none}
	.wip-current-fields{gap:6px 10px}
	.wip-current-field:not(:last-child)::after{content:'';margin-left:6px;padding-right:6px;border-right:1px solid #e6e9f2}

	/* "현재 작업 중" 라벨이 한 줄을 다 차지하게 만들어, 순번 배지(원형)와 나머지 값들이
	   그 아래 줄로 자연스럽게 넘어가도록 한다 */
	.wip-current-label{flex:0 0 100%}
	.wip-current-idx{width:32px;height:32px;min-width:32px;padding:0;border-radius:50%;font-size:1.4rem}
}

/* 4단계 입력 영역(QR 스캔/대상 정보/토굴 선택/중량 입력) : 토글 아코디언 없이 항상 모든 단계를
   펼친 상태로 보여준다(모바일은 세로 1열, PC는 그리드로 나란히 배치) */
.wip-step-grid{display:flex;flex-direction:column}
.wm-wrap .wip-step-card{padding:0;overflow:hidden}
.wip-step-head{width:100%;display:flex;align-items:center;gap:10px;border:none;background:transparent;cursor:default;padding:18px 16px 6px;text-align:left;font:inherit}
.wip-step-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#0f766e;color:#fff;font-weight:900;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.wm-wrap .wip-step-card h2{margin:0;font-size:1.7rem}
.wip-step-body{padding:0 16px 18px}
.wip-step-desc{font-size:1.3rem;color:#9ca3af;margin:0 0 12px}
.wip-scan-or{text-align:center;font-size:1.2rem;color:#9ca3af;margin:10px 0}

/* 3단계 : 구역별 토굴 번호 버튼 그리드 */
.cave-btn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cave-btn{min-height:46px;border:2px solid #cbd5e1;background:#fff;color:#374151;font-weight:700;font-size:1.8rem;border-radius:10px;cursor:pointer}
.cave-btn.is-active{border-color:#0f766e;background:#0f766e;color:#fff}
.cave-btn.is-full,.cave-btn:disabled{border-color:#e5e7eb;background:#f3f4f6;color:#9ca3af;cursor:not-allowed}

/* 4단계 : 실제 중량 입력용 터치 키패드 */
/* 입고처리 4단계 중량 입력 : 직접입력 대신 표준 중량(250/200/150kg) 중 하나를 선택하는 방식 */
.wip-weight-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wip-weight-preset-btn{min-height:46px;border:2px solid #cbd5e1;background:#fff;color:#111827;font-size:2.2rem;font-weight:800;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wip-weight-preset-btn.is-active{border-color:#0f766e;background:#e6f5f2;color:#0f766e}

/* PC 해상도 : 진행 현황/Queue 캐러셀을 좌우로 나란히, 4단계 카드를 그리드로 배치한다 */
@media (min-width:1024px){
	.wip-queue-top{flex-direction:row;align-items:stretch}
	.wip-queue-progress{flex:0 0 260px;padding-right:20px;border-right:1px solid #e6e9f2}
	.wip-queue-cards-col{flex:1;padding-left:20px}
	.wip-queue-scroll-btn{display:flex}

	.wip-step-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
}

@media (min-width:1440px){
	.wip-step-grid{grid-template-columns:repeat(4,1fr)}
}

/* 출고처리 탭은 입력 단계가 2개뿐이므로(대상 정보/QR 스캔), 4단계인 입고처리와 달리 넓은 화면에서도
   2열을 유지한다 */
@media (min-width:1440px){
	#tabOutboundProcess .wip-step-grid{grid-template-columns:repeat(2,1fr)}
}

/* 1단계 : 예정건 연동 / 직접 입력(소급 등록) 전환 */
.wm-wrap .sub-switch{display:flex;gap:8px;margin-bottom:16px;background:#e6e9f2;padding:5px;border-radius:12px}
.wm-wrap .sub-tab{flex:1;border:none;background:transparent;padding:11px 6px;font-size:1.4rem;font-weight:700;color:#475569;border-radius:9px;cursor:pointer}
.wm-wrap .sub-tab.is-active{background:#0f766e;color:#fff}
.wm-wrap .sub-tab:disabled{opacity:.4;cursor:not-allowed}
.wm-wrap .sub-panel{display:none}
.wm-wrap .sub-panel.is-active{display:block}

/* 새우젓 품목 카드형 라디오 (직접 입력 패널용) : 입고 현황 대시보드 리스트 카드와 동일하게
   사각 라운드 색상 아이콘을 라벨 왼쪽에 배치한다(아이콘 배경색은 JS dashColorForKey()가 품목별로 지정) */
.wm-wrap .item-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wm-wrap .item-card-input{position:absolute;opacity:0;width:0;height:0}
.wm-wrap .item-card-label{display:flex;align-items:center;gap:10px;min-height:56px;border:2px solid #cbd5e1;border-radius:14px;background:#fff;cursor:pointer;font-size:1.8rem;font-weight:700;color:#374151;padding:6px 12px;transition:all .15s ease}
.wm-wrap .item-card-label .item-icon{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;background:var(--ic-solid,#9ca3af)}
.wm-wrap .item-card-label.is-selected{border-color:#0f766e;background:#e6f5f2;color:#0f766e}

/* 1단계 대상 정보 : 입고 예정 건 카드형 라디오 선택(2열 그리드). 카드 전체 클릭으로 라디오가 선택되고
   등록자명 + 종류/중량/원산지 3열 요약이 함께 표시된다. 5번째 카드부터는 "더 많은 입고 예정 건 보기"를
   눌러 펼치기 전까지 숨겨둔다(itc-card--extra) */
.wm-wrap .itc-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:6px}
.wm-wrap .itc-card{position:relative;border:2px solid #cbd5e1;border-radius:14px;background:#fff;padding:12px 30px 12px 14px;cursor:pointer;transition:all .15s ease}
.wm-wrap .itc-card.is-selected{border-color:#0f766e;background:#0f766e;box-shadow:0 3px 10px rgba(15,118,110,.35)}
.wm-wrap .itc-card--extra{display:none}
.wm-wrap .itc-grid.is-expanded .itc-card--extra{display:block}
.wm-wrap .itc-radio,
.wm-wrap .itc-checkbox{position:absolute;top:14px;right:12px;width:18px;height:18px;accent-color:#0f766e}
.wm-wrap .itc-producer{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.wm-wrap .itc-producer-icon{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#e6f5f2;color:#0f766e;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.wm-wrap .itc-card.is-selected .itc-producer-icon{background:#fff;color:#0f766e}
.wm-wrap .itc-producer-nm{font-size:1.9rem;font-weight:800;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-wrap .itc-card.is-selected .itc-producer-nm{color:#fff}
.wm-wrap .itc-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wm-wrap .itc-detail-grid + .itc-detail-grid{margin-top:6px}
.wm-wrap .itc-detail-grid--2col{grid-template-columns:repeat(2,1fr)}
.wm-wrap .itc-detail-grid--3col{grid-template-columns:repeat(3,1fr)}
.wm-wrap .itc-detail{display:flex;flex-direction:column;gap:2px;min-width:0}
.wm-wrap .itc-detail-value{font-size:1.6rem;color:#0f766e;font-weight:800;word-break:break-all}
.wm-wrap .itc-card.is-selected .itc-detail-value{color:#fff}
/* 출고 예정 건 카드 : 확정일(또는 미확정 시 희망일)을 상세 정보 그리드와 구분되는 별도 줄로 표시 */
.wm-wrap .itc-schedule{margin-top:8px;padding-top:8px;border-top:1px solid #e6e9f2;font-size:1.4rem;font-weight:700;color:#6b7280}
.wm-wrap .itc-schedule i{margin-right:4px;color:#0f766e}
.wm-wrap .itc-card.is-selected .itc-schedule{color:#e0f2f1;border-top-color:rgba(255,255,255,.25)}
.wm-wrap .itc-card.is-selected .itc-schedule i{color:#fff}
.wm-wrap .itc-empty{text-align:center;padding:24px 12px;color:#9ca3af;font-size:1.4rem}
/* 예정 건 카드가 이미 대기열(오프라인 지원 Phase 3, writeQueue)에 저장돼 서버 응답을 기다리는 중임을
   표시한다. 재선택 시 안내 토스트만 뜨고 실제 선택은 막힌다(js의 itc-card--queued 클릭 가드 참고) */
.wm-wrap .itc-card--queued{cursor:default;opacity:.65;border-style:dashed}
.wm-wrap .itc-card--queued.is-selected{border-color:#cbd5e1;background:#fff;box-shadow:none}
.wm-wrap .itc-queued-badge{display:inline-flex;align-items:center;gap:5px;margin-bottom:8px;padding:4px 10px;border-radius:999px;background:#FFFBEB;color:#92400E;font-size:1.4rem;font-weight:700}
/* "직접 입력" 탭(현재 재고 QR 스캔) 안내 문구 : 카드 대신 노출되는 유일한 내용이라 itc-empty보다 크게 */
.wm-wrap .oqv-manual-hint{text-align:center;padding:32px 12px;color:#6b7280;font-size:1.8rem;font-weight:700}
.wm-wrap .itc-more-btn{width:100%;border:none;background:transparent;color:#0f766e;font-weight:700;font-size:1.3rem;padding:8px 0 2px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.wm-wrap .itc-more-btn i{transition:transform .15s ease}
.wm-wrap .itc-more-btn.is-expanded i{transform:rotate(180deg)}

/* 출고처리 : 반출 QR 검증 결과 / 출고 처리 대기 목록 카드(성공-녹색/경고-주황/에러-빨강). 스캔·직접입력으로
   식별번호를 추가할 때마다 카드가 쌓이며, 성공(oqv-card--ok) 건만 실제 출고 완료 처리 대상으로 집계된다 */
.wm-wrap .oqv-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.wm-wrap .oqv-card{position:relative;display:flex;align-items:flex-start;gap:10px;border:2px solid;border-radius:14px;padding:12px 38px 12px 14px}
.wm-wrap .oqv-card--ok{background:#ecfdf5;border-color:#10b981}
.wm-wrap .oqv-card--warn{background:#fffbeb;border-color:#f59e0b}
.wm-wrap .oqv-card--error{background:#fef2f2;border-color:#ef4444}
.wm-wrap .oqv-icon{flex-shrink:0;font-size:2rem;margin-top:2px}
.wm-wrap .oqv-card--ok .oqv-icon{color:#10b981}
.wm-wrap .oqv-card--warn .oqv-icon{color:#f59e0b}
.wm-wrap .oqv-card--error .oqv-icon{color:#ef4444}
.wm-wrap .oqv-body{flex:1;min-width:0}
.wm-wrap .oqv-msg-uniqno{font-size:1.5rem;font-weight:800;color:#111827;word-break:break-all}
.wm-wrap .oqv-msg-text{margin-top:2px;font-size:1.4rem;font-weight:700;color:#0960ea;word-break:break-all}
.wm-wrap .oqv-detail{margin-top:2px;font-size:1.3rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-wrap .oqv-del{position:absolute;top:10px;right:10px;border:none;background:transparent;color:#9ca3af;font-size:1.6rem;cursor:pointer;min-width:32px;min-height:32px}

/* [추가] 버튼 위 반출 QR 검증 결과(정상 아닌 경우만) : 대기 목록 카드와 동일한 oqv-card를 그대로 재사용 */
.wm-wrap #outboundScanInputResult .oqv-card{padding-right:14px}

/* 출고 처리 대기 목록 카드 맨 아래에 놓이는 [출고 완료 처리] 버튼 행(고정bar 아님 - 다른 탭으로 이동하면
   함께 사라진다) */
.wm-wrap .oqv-submit-row{margin-top:14px;padding-top:14px;border-top:1px solid #e6e9f2}
.wm-wrap .oqv-submit-summary{font-size:1.4rem;font-weight:700;color:#374151;margin-bottom:2px}
.wm-wrap .oqv-submit-summary strong{color:#0f766e;font-size:1.7rem}

/* 모달 공통(예정일 지정 / QR 카메라) : 기존 공용 .modal-overlay/.modal-box 등과 디자인이 달라
   충돌하지 않도록 wm- 접두사를 붙인다 */
.wm-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;padding:20px}
.wm-modal-box{background:#fff;border-radius:16px;width:100%;max-width:420px;overflow:hidden}
.wm-modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;font-size:1.7rem;font-weight:900;color:#111827;border-bottom:1px solid #e6e9f2}
.wm-modal-close{border:none;background:transparent;font-size:2rem;color:#6b7280;cursor:pointer;min-width:40px;min-height:40px}
.wm-modal-body{padding:18px}
.wm-modal-foot{padding:14px 18px 18px}

/* 하단 네비게이션 : (.ph-bottom-nav/.ph-bottom-nav-inner)와 동일하게, 흰색 바는 화면
   전체 폭으로 채우고 내부 탭 버튼들만 컨테이너 폭으로 제한해 가운데 정렬한다 */
.wm-bottom-nav{position:fixed;left:0;right:0;bottom:var(--safe-bottom-offset, 0px);width:100%;background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.1);padding-bottom:env(safe-area-inset-bottom);z-index:100}
.wm-bottom-nav-inner{display:flex;width:100%;max-width:480px;margin:0 auto}
.wm-nav-item{flex:1;border:none;background:transparent;padding:9px 2px 8px;font-size:1.1rem;font-weight:700;color:#9ca3af;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.wm-nav-item i{font-size:1.9rem}
.wm-nav-item.is-active{color:#0f766e}

@media (min-width:600px){
	.wm-body{max-width:680px}
	.wm-header-inner{max-width:680px}
	.wm-bottom-nav-inner{max-width:680px}
	.wm-easyqr-links{max-width:680px}
	.wm-queue-bar{max-width:680px}

	/* 태블릿 이상에서는 모바일 전용 햄버거 메뉴 대신 이름 배지+로그아웃을 그대로 노출한다 */
	.wm-header-userwrap{display:flex}
	.wm-header-hamburger{display:none}
	.wm-header-dropdown{display:none!important}
}

/* PC 해상도 : 입고승인 등 카드 리스트 화면이 한 줄짜리 넓은 행 레이아웃으로 펼쳐지도록 컨테이너 폭을 넓힌다 */
@media (min-width:1024px){
	.wm-body{max-width:1080px}
	.wm-header-inner{max-width:1080px}
	.wm-bottom-nav-inner{max-width:1080px}
	.wm-easyqr-links{max-width:1080px}
	.wm-queue-bar{max-width:1080px}
}

/* 이용자 사이트 전역 하단 탭바 (메뉴관리 > 하단탭 노출 로 등록된 메뉴, 최대 5개) :
   토굴관리 흐름 전용 하단탭(.ph-bottom-nav/.wm-bottom-nav)과 동일한 시각 언어를 쓰되,
   특정 업무 흐름에 종속되지 않고 layout-blank를 쓰는 모든 이용자 페이지에 공통으로 노출된다 */
body.has-site-bottom-nav{padding-bottom:calc(58px + var(--safe-bottom-offset, 0px))}
.site-bottom-nav{position:fixed;left:0;right:0;bottom:var(--safe-bottom-offset, 0px);width:100%;background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.1);padding-bottom:env(safe-area-inset-bottom);z-index:100}
.site-bottom-nav-inner{display:flex;width:100%;max-width:480px;margin:0 auto}
.site-bottom-nav-item{flex:1;border:none;background:transparent;padding:9px 2px 8px;font-size:1.1rem;font-weight:700;color:#9ca3af;text-decoration:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.site-bottom-nav-item i{font-size:1.9rem}
.site-bottom-nav-item.is-active{color:#0f766e}

@media (min-width:600px){
	.site-bottom-nav-inner{max-width:680px}
}
@media (min-width:1024px){
	.site-bottom-nav-inner{max-width:1080px}
}

/* 토굴재고(탭0) : 토굴별 재고 카드 */
.wm-wrap .cst-cave-card{margin-bottom:12px}
.cst-cave-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cst-cave-dot{flex-shrink:0;width:12px;height:12px;border-radius:50%}
.cst-cave-name{flex:1;font-size:1.7rem;font-weight:900;color:#111827}
.cst-badge{flex-shrink:0;font-size:1.2rem;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.cst-badge--ok{background:#dcfce7;color:#15803d}
.cst-badge--empty{background:#f1f5f9;color:#6b7280}
.cst-badge--off{background:#fee2e2;color:#b91c1c}

/* 보관 건수 / 가능 건수 막대 */
.cst-capacity{margin-bottom:12px}
.cst-capacity-head{display:flex;justify-content:space-between;align-items:baseline;font-size:1.3rem;font-weight:700;color:#6b7280;margin-bottom:6px}
.cst-capacity-count{font-weight:900;color:#111827}
.cst-capacity-track{width:100%;height:10px;border-radius:999px;background:#e6e9f2;overflow:hidden}
.cst-capacity-fill{height:100%;background:#0f766e;border-radius:999px;transition:width .25s ease}

.cst-field-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #f1f5f9;font-size:1.4rem}
.cst-field-row:last-of-type{border-bottom:none}
.cst-field-label{color:#9ca3af;font-weight:700}
.cst-field-value{color:#111827;font-weight:700;text-align:right}

.cst-cave-off-msg,
.cst-cave-empty-msg{text-align:center;padding:22px 10px;color:#9ca3af;font-size:1.4rem;line-height:1.6}
.cst-cave-off-msg i,
.cst-cave-empty-msg i{display:block;font-size:2.4rem;margin-bottom:8px;opacity:.6}

.cst-cave-actions{display:flex;gap:8px;margin-top:14px}
.cst-btn-audit{flex:1;min-height:44px;border-radius:10px;font-size:1.4rem;font-weight:700;cursor:pointer;background:#0f766e;border:none;color:#fff}
.cst-cave-card--off .cst-btn-audit{opacity:.4;pointer-events:none}

@media (min-width:1024px){
	#caveStockListArea{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
	.wm-wrap .cst-cave-card{margin-bottom:0}
}

@media (min-width:1440px){
	#caveStockListArea{grid-template-columns:repeat(3,1fr)}
}

/* 토굴재고(탭0) : "상세 현황" 팝업 */
.wm-modal-box--wide{max-width:560px}
.csd-modal-body{max-height:70vh;overflow-y:auto}

.csd-item-row{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #f1f5f9;border-radius:14px;margin-bottom:10px}
.csd-item-row:last-child{margin-bottom:0}
.csd-item-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:2px;font-size:1.5rem;background:var(--ic-solid,#9ca3af)}
.csd-item-icon span{font-size:1.1rem;font-weight:700}
.csd-item-body{flex:1;min-width:0}
.csd-aging-badge{display:inline-flex;align-items:center;gap:4px;font-size:1.2rem;font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:8px}
.csd-aging-badge[class*="item-color-"]{background:var(--ic-tint);color:var(--ic-solid)}
.csd-item-main{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.csd-item-uniqno{font-weight:900;color:#111827;font-family:monospace}
.csd-item-field{display:inline-flex;align-items:center;gap:5px;font-size:1.3rem;color:#6b7280;font-weight:700}
.csd-item-field i{font-size:1.3rem;color:#9ca3af}
.csd-producer-badge{flex-shrink:0;font-size:1.2rem;font-weight:700;padding:5px 10px;border-radius:999px;background:#fef3c7;color:#92400e;white-space:nowrap}

@media (max-width:479px){
	.csd-item-row{flex-wrap:wrap}
	.csd-producer-badge{margin-left:60px}
}

/* ===================== 작업자 화면 : 입고관리/출고관리 그룹 탭 내부 서브탭 =====================
   기존 QR 스캔 대상 선택(.sub-switch/.sub-tab/.sub-panel)과 시각적으로 동일하되, 하단 네비게이션
   그룹 탭(입고관리/출고관리) 내부의 승인·처리 전환 전용으로 클래스를 분리해 서로 충돌하지 않게 한다. */
.wm-wrap .wm-subnav{display:flex;gap:8px;margin-bottom:16px;background:#e6e9f2;padding:5px;border-radius:12px}
.wm-wrap .wm-subnav-item{flex:1;border:none;background:transparent;padding:11px 6px;font-size:1.4rem;font-weight:700;color:#475569;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.wm-wrap .wm-subnav-item i{font-size:1.5rem}
.wm-wrap .wm-subnav-item.is-active{background:#0f766e;color:#fff}
.wm-wrap .wm-subpanel{display:none}
.wm-wrap .wm-subpanel.is-active{display:block}

/* ===================== 작업자 화면 : 입출고내역(탭 입출고내역) =====================
   구분(입고/출고) 강조색은 시안 기준 파란 계열(#1E6091/#2F80ED)·주황 계열(#E05638/#F9A826)을 사용해
   나머지 화면의 딥그린(#0f766e) 톤과 시각적으로 구분되도록 한다. */

.hist-trend-card{padding-bottom:20px}
.hist-card-unit{font-size:1.2rem;font-weight:700;color:#9ca3af;margin-left:6px}
.hist-trend-legend{display:flex;flex-wrap:wrap;gap:12px 16px;margin:4px 0 14px}
.hist-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:1.3rem;font-weight:700;color:#475569}
.hist-legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.hist-legend-dot--in{background:#2F80ED}
.hist-legend-dot--out{background:#F9A826}
/* 건수(막대) 계열은 중량(선) 계열과 구분되도록 사각형 아이콘으로 표시한다 */
.hist-legend-dot--in-cnt{background:rgba(47,128,237,.35);border-radius:3px}
.hist-legend-dot--out-cnt{background:rgba(249,168,38,.35);border-radius:3px}
.hist-trend-canvas-wrap{position:relative;height:220px}

.hist-cumulative-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.hist-cumulative-item{background:#f7fafc;border-radius:12px;padding:14px 8px}
.hist-cumulative-label{font-size:1.25rem;font-weight:700;color:#6b7280;margin:0 0 6px}
.hist-cumulative-value{font-size:1.7rem;font-weight:900;color:#111827;margin:0}
.hist-cumulative-value.is-positive{color:#0f766e}
.hist-cumulative-value.is-negative{color:#dc2626}
.hist-cumulative-sub{font-size:1.2rem;font-weight:700;color:#9ca3af;margin:2px 0 0}

/* 섹션 2 : 검색 및 필터 */
.hist-period-btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.hist-period-btn{border:1px solid #e6e9f2;background:#fff;color:#475569;font-size:1.3rem;font-weight:700;padding:9px 14px;border-radius:999px;cursor:pointer}
.hist-period-btn.is-active{background:#0f766e;border-color:#0f766e;color:#fff}
.hist-date-range-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.hist-date-range-row .wm-input{flex:1}
.hist-date-sep{color:#9ca3af;font-weight:700}

/* 섹션 3 : 입출고 내역 카드 리스트 */
.hist-record-grid{display:flex;flex-direction:column;gap:12px}
.hist-record-card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hist-record-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f1f5f9}
.hist-badge{flex-shrink:0;font-size:1.2rem;font-weight:900;padding:5px 12px;border-radius:999px;color:#fff}
.hist-badge--in{background:#1E6091}
.hist-badge--out{background:#E05638}
.hist-record-dt{font-size:1.3rem;font-weight:700;color:#374151}
.hist-record-dt i,
.hist-record-cave i{color:#9ca3af;margin-right:3px}
.hist-record-cave{font-size:1.3rem;font-weight:700;color:#374151;margin-left:auto;display:flex;align-items:center;gap:4px}
.hist-record-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:14px}
.hist-record-field{display:flex;flex-direction:column;gap:3px}
.hrf-label{font-size:1.2rem;font-weight:700;color:#9ca3af;display:flex;align-items:center;gap:5px}
.hrf-label i{font-size:1.2rem}
.hrf-value{font-size:1.45rem;font-weight:700;color:#111827;word-break:break-all;display:flex;align-items:center;gap:6px}
/* 토굴/새우젓 종류 값 앞에 표시하는 색상 점(품목·토굴 ID 해시 기반, dashColorForKey()와 동일한 팔레트) */
.hrf-color-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%}

.hist-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin:18px 0 6px;flex-wrap:wrap}
.hist-page-btn{min-width:36px;height:36px;border:1px solid #e6e9f2;background:#fff;color:#374151;font-size:1.3rem;font-weight:700;border-radius:9px;cursor:pointer}
.hist-page-btn.is-active{background:#0f766e;border-color:#0f766e;color:#fff}
.hist-page-btn.is-disabled{opacity:.35;cursor:not-allowed}

@media (min-width:1024px){
	.hist-record-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ===================== 간편 입출고(.eq-) : 간편입고(.eqi-) / 간편출고(.eqo-) 탭 통합 화면 =====================
   고령 작업자용 전용 화면. 팝업 없이 상단 탭(간편입고/간편출고)으로 전환하며, 각 탭은 상단 카메라
   연속 스캔 영역 + 하단 카드 리스트 구조를 가진다. 입고 카드는 새우젓 종류/토굴을 카드 안에서
   바로 원터치로 선택하고, 출고 카드는 스캔 즉시 조회된 재고 정보를 읽기 전용으로 보여준다. */

.eq-wrap{max-width:480px;margin:0 auto;padding:16px 16px 110px;font-size:1.6rem;color:#111827;background:#f7fafc;min-height:100vh}
.eq-wrap *{box-sizing:border-box}

.eq-header{display:flex;align-items:center;gap:10px;padding:8px 0 14px}
.eq-back{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;color:#374151;font-size:1.6rem;text-decoration:none}
.eq-header h1{font-size:2rem;font-weight:900;color:#1e3a8a;margin:0 0 4px}
.eq-header p{font-size:1.3rem;color:#6b7280;margin:0;line-height:1.4}

.eq-tab-switch{display:flex;gap:8px;margin-bottom:14px;background:#e6e9f2;padding:6px;border-radius:14px}
.eq-tab-btn{flex:1;border:none;background:transparent;padding:13px 8px;font-size:1.6rem;font-weight:700;color:#475569;border-radius:10px;cursor:pointer;min-height:48px}
.eq-tab-btn.is-active{background:#1e3a8a;color:#fff;box-shadow:0 2px 6px rgba(30,58,138,.35)}

.eq-tab-panel{display:none}
.eq-tab-panel.is-active{display:block}

.eqi-scan-panel,.eqo-scan-panel{background:#fff;border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.eqi-reader,.eqo-reader{border-radius:12px;overflow:hidden}

.eqi-btn-scan,.eqo-btn-scan{width:100%;min-height:52px;font-size:1.7rem;font-weight:700;background:#1d4ed8;color:#fff;border:none;border-radius:12px;cursor:pointer;margin-top:10px}
.eqi-btn-scan.is-active,.eqo-btn-scan.is-active{background:#dc2626}
.eqi-btn-scan i,.eqo-btn-scan i{margin-right:6px}

/* 모바일에서는 입력창과 "+ 추가" 버튼을 세로로 줄바꿈해 각각 터치 폭을 넓게 확보하고,
   화면이 넓어지는 태블릿/PC(600px 이상)부터 한 줄로 배치한다 */
.eqi-manual-row,.eqo-manual-row{display:flex;flex-direction:column;gap:8px;margin-top:10px}

/* 간편입고/간편출고 [추가] 버튼은 작업자 화면의 .wm-wrap .btn-primary-lg / #scheduleModal .btn-primary-lg와 동일 스타일 */
.eqi-btn-manual-add,.eqo-btn-manual-add{width:100%;min-height:58px;font-size:1.9rem;font-weight:700;background:#10b981;color:#fff;border:none;border-radius:14px;cursor:pointer;margin-top:16px;box-shadow:0 3px 10px rgba(16,185,129,.3)}
.eqi-btn-manual-add i,.eqo-btn-manual-add i{margin-right:8px}
.eqi-btn-manual-add:disabled,.eqo-btn-manual-add:disabled{opacity:.6}

/* [추가] 버튼 위 검증 결과 : 작업자 출고처리(worker_main.html)의 oqv-card를 그대로 재사용 */
.eq-wrap .eq-scan-result:empty{margin:0}
.eq-wrap .oqv-card{position:relative;display:flex;align-items:flex-start;gap:10px;border:2px solid;border-radius:14px;padding:12px 14px}
.eq-wrap .oqv-card--warn{background:#fffbeb;border-color:#f59e0b}
.eq-wrap .oqv-card--error{background:#fef2f2;border-color:#ef4444}
.eq-wrap .oqv-icon{flex-shrink:0;font-size:2rem;margin-top:2px}
.eq-wrap .oqv-card--warn .oqv-icon{color:#f59e0b}
.eq-wrap .oqv-card--error .oqv-icon{color:#ef4444}
.eq-wrap .oqv-body{flex:1;min-width:0}
.eq-wrap .oqv-msg-uniqno{font-size:1.5rem;font-weight:800;color:#111827;word-break:break-all}
.eq-wrap .oqv-msg-text{margin-top:2px;font-size:1.4rem;font-weight:700;color:#374151;word-break:break-all}

.eqi-list-empty,.eqo-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 10px;color:#9ca3af}
.eqi-list-empty i,.eqo-list-empty i{font-size:3.2rem;margin-bottom:10px;opacity:.5}
.eqi-list-empty p,.eqo-list-empty p{font-size:1.4rem;margin:0}

.eqi-scan-list,.eqo-scan-list{display:flex;flex-direction:column;gap:12px}

.eqi-card,.eqo-card{position:relative;background:#fff;border-radius:16px;padding:14px 46px 14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:2px solid transparent}
.eqi-card.is-done,.eqo-card.is-done{border-color:#10b981;background:#f0fdf9}
.eqo-card.is-error{border-color:#ef4444;background:#fef2f2}

.eqi-card-top,.eqo-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.eqi-card-uniqno,.eqo-card-uniqno{font-weight:900;font-size:1.8rem;letter-spacing:.02em;color:#1e3a8a;background:#dbeafe;padding:5px 10px;border-radius:8px;flex:1;word-break:break-all}
/* 모바일에서는 식별번호가 카드 전체 폭을 차지하는 자기 줄로 줄바꿈되고, 배지는 그 아래 줄에 배치된다
   (삭제 버튼은 카드 우측 상단에 절대 위치로 고정되어 이 줄바꿈과 무관하다) */
.eqi-card-uniqno{flex-basis:100%}

@media (min-width:600px){
	.eqi-card-uniqno{flex-basis:0}
}
.eqi-badge,.eqo-badge{flex-shrink:0;font-size:1.2rem;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.eqi-badge:empty,.eqo-badge:empty{display:none;padding:0}
.eqi-badge--wait,.eqo-badge--wait{background:#fef3c7;color:#92400e}
.eqi-badge--err,.eqo-badge--err{background:#fee2e2;color:#b91c1c}
.eqi-badge--ok,.eqo-badge--ok{background:#dcfce7;color:#15803d}
/* 삭제 버튼은 카드 우측 상단에 고정 배치한다 */
.eqi-card-del,.eqo-card-del{position:absolute;top:12px;right:12px;flex-shrink:0;border:none;background:#f1f5f9;color:#ef4444;width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:1.3rem}
.eqi-card-msg,.eqo-card-msg{font-size:1.3rem;color:#6b7280;margin:6px 0 0;font-weight:600}
.eqi-card-msg:empty,.eqo-card-msg:empty{display:none}

.eqi-card-fields{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.eqi-card-field{display:flex;flex-direction:column;gap:6px}
.eqi-card-field-label{font-size:1.2rem;font-weight:700;color:#9ca3af}
.eqi-card-field-hint{font-weight:600;color:#c7cdd6;text-transform:none}
/* 새우젓 종류/토굴/중량은 원산지와 동일한 가로 스크롤 칩 방식을 사용한다.
   품목별 item-color-N(솔리드 색상 채움)은 이 카드에서는 적용하지 않는다 */
.eqi-card-item-grid,.eqi-card-cave-grid,.eqi-card-weight-grid,
.eqi-card-producer-scroll,.eqi-card-origin-scroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.eqi-card-item-btn,.eqi-card-cave-btn,.eqi-card-weight-btn,
.eqi-card-producer-chip,.eqi-card-origin-chip{flex-shrink:0;min-height:40px;padding:0 14px;border:2px solid #e6e9f2;border-radius:999px;background:#fff;font-size:1.5rem;font-weight:700;color:#374151;cursor:pointer;white-space:nowrap}
.eqi-card-item-btn.is-selected,.eqi-card-cave-btn.is-selected,.eqi-card-weight-btn.is-selected{border-color:#0f766e;background:#e6f5f2;color:#0f766e}
.eqi-card-producer-chip.is-selected{border-color:#b45309;background:#fef3c7;color:#92400e}
.eqi-card-origin-chip.is-selected{border-color:#6d28d9;background:#f3e8ff;color:#6d28d9}

.eqi-card.is-locked .eqi-card-fields{opacity:.55;pointer-events:none}

.eqo-card-fields{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.eqo-card-field{display:flex;align-items:center;gap:6px;font-size:1.35rem;font-weight:700;color:#374151}
.eqo-card-field i{color:#9ca3af;width:16px;text-align:center}

.eqi-bottom-bar,.eqo-bottom-bar{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,.08);max-width:480px;margin:0 auto;z-index:50}
.eqi-btn-process-all,.eqo-btn-process-all{width:100%;min-height:60px;font-size:1.9rem;font-weight:900;background:#10b981;color:#fff;border:none;border-radius:14px;cursor:pointer}
.eqi-btn-process-all:disabled,.eqo-btn-process-all:disabled{opacity:.6}

@media (min-width:600px){
	.eq-wrap{max-width:680px}
	.eqi-bottom-bar,.eqo-bottom-bar{max-width:680px}
}

@media (min-width:1024px){
	.eq-wrap{max-width:960px}
	.eqi-bottom-bar,.eqo-bottom-bar{max-width:960px}
	.eqi-scan-list,.eqo-scan-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
}

@media (min-width:1440px){
	.eqi-scan-list,.eqo-scan-list{grid-template-columns:repeat(3,1fr)}
}

/* ===================================================================
   라벨디자인 투표 화면 (vote- 접두사, tong.vote 업무 전용)
   =================================================================== */
.vote-page{min-height:100vh;padding:24px 16px 40px;background:#f5f1ea;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
.vote-page *{box-sizing:border-box}
.vote-shell{width:100%;max-width:520px;margin:0 auto}

/* 브랜드 로고 이미지 공통 헬퍼 (vote 등 .ic 클래스로 로고 <img>를 텍스트 높이에 맞출 때 사용) */
img.ic{height:1em;width:auto;display:inline-block;flex-shrink:0;object-fit:contain;vertical-align:middle}

.vote-header{text-align:center;margin-bottom:18px}
.vote-header .vote-brand{display:inline-flex;align-items:center;gap:8px;font-family:'Noto Serif KR',serif;font-weight:900;color:#1c1917;font-size:1.8rem;margin-bottom:16px;text-align:left}
.vote-header .vote-brand .ic{font-size:2.4rem;min-height:50px;flex:none}
.vote-header h1{font-size:2.2rem;font-weight:900;color:#1a365d;margin:0 0 4px}
.vote-header p{font-size:1.5rem;color:#6b7280;margin:0}

.vote-progress{display:flex;align-items:center;justify-content:center;gap:6px;margin:20px 0}
.vote-progress__step{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:1.3rem;color:#9ca3af;width:80px}
.vote-progress__badge{width:32px;height:32px;border-radius:50%;background:#e5e7eb;color:#6b7280;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem}
.vote-progress__step.active .vote-progress__badge,
.vote-progress__step.done .vote-progress__badge{background:#2E387D;color:#fff}
.vote-progress__step.active,
.vote-progress__step.done{color:#2E387D;font-weight:700;cursor:pointer}
.vote-progress__line{width:32px;height:2px;background:#e5e7eb;margin-bottom:20px}
.vote-progress__line.done{background:#2E387D}

.vote-card{background:#fff;border-radius:18px;box-shadow:0 4px 20px rgba(0,0,0,.05);padding:24px 20px}

.vote-field{margin-bottom:16px}
.vote-field label{display:block;font-size:1.6rem;font-weight:700;color:#374151;margin-bottom:8px}
.vote-input-wrap{position:relative}
.vote-input-wrap i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:1.7rem;pointer-events:none}
.vote-input-wrap input{width:100%;min-height:56px;font-size:1.7rem;padding:12px 16px 12px 44px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#111827}
.vote-input-wrap input:focus{outline:none;border-color:#1a365d}
.vote-guide{display:flex;align-items:flex-start;gap:8px;font-size:1.4rem;color:#6b7280;line-height:1.6;background:#f9fafb;border-radius:10px;padding:12px 14px;margin-top:14px}
.vote-guide i{color:#2E387D;margin-top:2px}

.vote-q-list{display:block}
.vote-q-panel{display:none}
.vote-q-panel.active{display:block}
.vote-q-panel .vote-q-panel{margin-top:20px}
.vote-q-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.vote-q-badge{width:34px;height:34px;border-radius:50%;background:#2E387D;color:#fff;font-weight:900;font-size:1.6rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vote-q-title{font-size:1.9rem;font-weight:900;color:#111827;margin:0}
.vote-q-desc{font-size:1.4rem;color:#6b7280;margin:2px 0 0}

.vote-option{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,background-color .15s}
.vote-option:last-child{margin-bottom:0}
.vote-option.selected{border-color:#2E387D;background:#F5F7FF}
.vote-option__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vote-option__label{flex:1;min-width:0;font-size:1.7rem;font-weight:700;color:#111827;margin:0}
.vote-option__desc{font-size:1.4rem;color:#6b7280;margin:0}
.vote-option__radio{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center}
.vote-option__thumb{width:100%;min-height:120px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;overflow:hidden}
.vote-option__thumb img{width:100%;height:auto;display:block}
.vote-option__thumb.is-broken{color:#9ca3af;background:#f1f3f5}
.vote-option.selected .vote-option__radio{border-color:#2E387D}
.vote-option.selected .vote-option__radio::after{content:'';width:10px;height:10px;border-radius:50%;background:#2E387D}

.vote-nav{display:flex;gap:10px;margin-top:20px}
.vote-nav__btn{flex:1;min-height:54px;border-radius:8px;font-size:1.7rem;font-weight:800;cursor:pointer;border:none}
.vote-nav__btn--prev{background:#f1f3f5;color:#374151}
.vote-nav__btn--next{background:#2E387D;color:#fff}
.vote-nav__btn--next:disabled{opacity:.5;cursor:not-allowed}

.vote-done{text-align:center;padding:36px 12px}
.vote-done__icon{width:68px;height:68px;border-radius:50%;background:#2E387D;color:#fff;font-size:3rem;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.vote-done__title{font-size:2.3rem;font-weight:900;color:#111827;margin:0 0 8px}
.vote-done__desc{font-size:1.6rem;color:#6b7280;margin:0 0 28px;line-height:1.6}

.vote-blocked{text-align:center;padding:36px 12px}
.vote-blocked__icon{width:68px;height:68px;border-radius:50%;background:#f1f3f5;color:#9ca3af;font-size:2.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.vote-blocked__title{font-size:2.1rem;font-weight:900;color:#111827;margin:0 0 8px}
.vote-blocked__desc{font-size:1.5rem;color:#6b7280;margin:0 0 24px;line-height:1.6}

@media (min-width:1024px){
	.vote-shell{max-width:960px}
	.vote-shell[data-step="2"]{max-width:960px}
	.vote-q-panel{display:block !important}
	.vote-q-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
	.vote-q-panel + .vote-q-panel{margin-top:0}
}

/* ===================================================================
   투표 결과 확인 화면 (vres- 접두사, tong.vote/voteResult 전용)
   =================================================================== */
.vres-page{min-height:100vh;padding:24px 16px 40px;background:#f5f1ea;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
.vres-page *{box-sizing:border-box}
.vres-shell{width:100%;max-width:560px;margin:0 auto}

.vres-header{text-align:center;margin-bottom:18px}
.vres-header .vres-brand{display:inline-flex;align-items:center;gap:8px;font-family:'Noto Serif KR',serif;font-weight:900;color:#1c1917;font-size:1.8rem;margin-bottom:16px;text-align:left}
.vres-header .vres-brand .ic{font-size:2.4rem;min-height:50px;flex:none}
.vres-header__icon{width:60px;height:60px;border-radius:50%;background:#eef2fb;color:#1a365d;font-size:2.6rem;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.vres-header h1{font-size:2.4rem;font-weight:900;color:#1a365d;margin:0 0 8px}
.vres-header p{font-size:1.5rem;color:#6b7280;margin:0;line-height:1.6}

.vres-summary{display:flex;background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.05);padding:18px 12px;margin:20px 0}
.vres-summary__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 6px;position:relative}
.vres-summary__item + .vres-summary__item::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:#eee}
.vres-summary__icon{color:#1a365d;font-size:1.8rem}
.vres-summary__label{font-size:1.3rem;color:#9ca3af;font-weight:700}
.vres-summary__value{font-size:1.6rem;font-weight:900;color:#111827}

.vres-grid{display:block}

.vres-q-card{background:#fff;border-radius:18px;box-shadow:0 4px 20px rgba(0,0,0,.05);padding:18px 20px;margin-bottom:16px;overflow:hidden}
.vres-q-card__head{display:flex;align-items:center;gap:12px;cursor:pointer}
.vres-q-badge{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#2E387D;color:#fff;font-weight:900;font-size:1.5rem;display:flex;align-items:center;justify-content:center}
.vres-q-card__title{flex:1;min-width:0;font-size:1.8rem;font-weight:900;color:#111827;margin:0}
.vres-q-card__toggle{flex-shrink:0;color:#9ca3af;font-size:1.6rem;transition:transform .15s}
.vres-q-card.open .vres-q-card__toggle{transform:rotate(180deg)}

.vres-q-card__body{display:none;margin-top:16px}
.vres-q-card.open .vres-q-card__body{display:block}

.vres-option-row{display:flex;flex-direction:column;gap:10px;padding:10px 0}
.vres-option-row + .vres-option-row{border-top:1px solid #f3f4f6}
.vres-option-row.is-top{background:#fef9ef;border-radius:10px;padding:10px 8px;margin:0 -8px}
.vres-option-row.is-top + .vres-option-row{border-top:none}
.vres-option-top{display:flex;align-items:center;gap:12px}
.vres-rank{flex-shrink:0;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:900;font-size:1.4rem;display:flex;align-items:center;justify-content:center;background:#c7ccd3}
.vres-rank.rank-1{background:#f5b301}
.vres-rank.rank-2{background:#e0932c}
.vres-rank.rank-3{background:#b98f5e}
.vres-rank.rank-4{background:#c7ccd3}

.vres-option-body{flex:1;min-width:0}
.vres-option-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.vres-option-label{font-size:1.6rem;font-weight:700;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vres-option-stat{flex-shrink:0;font-size:1.5rem;color:#374151}
.vres-option-stat strong{font-weight:900;color:#111827}
.vres-option-stat span{color:#9ca3af;font-size:1.3rem;margin-left:3px}

.vres-progress-track{width:100%;height:8px;border-radius:6px;background:#eef0f3;overflow:hidden}
.vres-progress-fill{height:100%;border-radius:6px;background:#94a3b8}
.vres-option-row:nth-child(1) .vres-progress-fill{background:#1a365d}

.vres-thumb{width:100%;min-height:120px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;color:#fff;overflow:hidden;background:#2E387D}
.vres-thumb img{width:100%;height:auto;display:block}
.vres-option-row:nth-of-type(4n+1) .vres-thumb{background:#2f6fb0}
.vres-option-row:nth-of-type(4n+2) .vres-thumb{background:#3f8f5f}
.vres-option-row:nth-of-type(4n+3) .vres-thumb{background:#c2680f}
.vres-option-row:nth-of-type(4n+4) .vres-thumb{background:#7a5230}

.vres-note{display:flex;align-items:flex-start;gap:8px;font-size:1.4rem;color:#6b7280;line-height:1.6;background:#fff;border-radius:12px;padding:14px 16px;margin:8px 0 20px}
.vres-note i{color:#2E387D;margin-top:2px}

.vres-btn-main{display:block;width:100%;text-align:center;text-decoration:none;min-height:52px;line-height:52px;border-radius:10px;background:#1a365d;color:#fff;font-size:1.7rem;font-weight:800;margin-bottom:18px}

.vres-footer{text-align:center;font-size:1.3rem;color:#9ca3af;line-height:1.7}

.vres-empty{text-align:center;padding:36px 12px}
.vres-empty__icon{width:68px;height:68px;border-radius:50%;background:#f1f3f5;color:#9ca3af;font-size:2.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.vres-empty__title{font-size:2.1rem;font-weight:900;color:#111827;margin:0 0 8px}
.vres-empty__desc{font-size:1.5rem;color:#6b7280;margin:0 0 24px;line-height:1.6}

.vres-pin-card .vres-empty__icon{background:#eef2fb;color:#1a365d}
.vres-pin-form{display:flex;gap:8px;max-width:280px;margin:0 auto}
.vres-pin-input{flex:1;min-width:0;min-height:52px;font-size:1.8rem;letter-spacing:4px;text-align:center;padding:0 12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#111827}
.vres-pin-input:focus{outline:none;border-color:#1a365d}
.vres-pin-btn{flex-shrink:0;min-height:52px;padding:0 18px;border:none;border-radius:8px;background:#1a365d;color:#fff;font-size:1.6rem;font-weight:800;cursor:pointer}
.vres-pin-btn:disabled{opacity:.6;cursor:not-allowed}

@media (min-width:1024px){
	.vres-shell{max-width:1140px}
	.vres-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
	.vres-q-card{margin-bottom:0}
	.vres-q-card__head{cursor:default}
	.vres-q-card__toggle{display:none}
	.vres-q-card__body{display:block !important;margin-top:16px}
}

/* ==========================================================================
   PC 대시보드 - tong.office (시스템 관리자 화면과는 별도의 독립 페이지)
   PC 전용 사이드바+헤더+콘텐츠 레이아웃, 딥 블루톤(#1E293B/#1E3A8A) 테마.
   .office-dashboard 스코프 안에서만 동작하도록 전부 접두/후손 선택자로 작성하며,
   위쪽 이용자(모바일 카드 UI) 스타일과 클래스명이 겹치지 않도록 한다
   (단, 이 파일에 이미 없는 이름은 그대로 재사용해도 안전함을 확인 후 사용함).
   rem 단위는 <html> 루트 폰트 크기에 종속되어 이 파일의 다른 화면과 어긋날 수 있으므로
   전부 px로 고정한다(10px = tongcms 관리자 화면의 1rem 기준과 동일한 결과값).
   ========================================================================== */
.office-dashboard,.office-dashboard *{box-sizing:border-box}
.office-dashboard{background:#f4f7f9;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;font-size:1.4rem;color:#333;line-height:1.5}
.office-dashboard ul,.office-dashboard ol,.office-dashboard li{list-style:none;margin:0;padding:0}
.office-dashboard h1,.office-dashboard h2,.office-dashboard h3,.office-dashboard h4{margin:0;padding:0;font-weight:500;line-height:1.1;color:inherit}
.office-dashboard input,.office-dashboard textarea{height:38px;padding:0 10px;color:#1E293B;border:solid 1px #d1d5db;border-radius:8px;outline:none;font-size:1.5rem;vertical-align:middle;font-family:inherit;transition:border-color .2s ease,box-shadow .2s ease}
.office-dashboard select{display:inline-block;width:auto;min-width:100px;height:38px;padding:0 35px 0 15px;font-size:1.5rem;font-weight:400;line-height:38px;color:#1E293B;vertical-align:middle;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.office-dashboard select:disabled{background-color:#F1F5F9;color:#64748B;cursor:default;opacity:1;background-image:none}
.office-dashboard select:focus,.office-dashboard input:focus,.office-dashboard textarea:focus{border-color:#3B82F6;outline:0;box-shadow:0 0 0 3px rgba(59,130,246,.1)}

/* 레이아웃 뼈대 (사이드바/헤더/콘텐츠) */
.office-dashboard .admin-container{display:flex;min-height:100vh;width:100%}
.office-dashboard .sidebar{width:240px;background-color:#1E2A66;border-right:none;display:flex;flex-direction:column;height:100vh;position:sticky;left:0;top:0;transition:transform .3s ease;overflow-x:hidden;overflow-y:auto;z-index:200}
.office-dashboard .sidebar-logo{height:70px;display:flex;align-items:center;gap:10px;padding:0 18px;background:#1E2A66}
.office-dashboard .sidebar-logo-icon{flex-shrink:0}
.office-dashboard img.sidebar-logo-icon{height:auto;max-height:50px;width:auto;object-fit:contain;display:block}
.office-dashboard .sidebar-logo-text{display:flex;flex-direction:column;font-size:1.4rem;font-weight:700;color:#fff;line-height:1.35}
.office-dashboard .nav-menu{padding:10px 12px}
.office-dashboard .nav-menu li{position:relative;margin-bottom:6px}
.office-dashboard .nav-menu li a{display:flex;align-items:center;width:100%;text-decoration:none;transition:all .2s ease;box-sizing:border-box;cursor:pointer}
.office-dashboard .nav-menu li a span{display:block;width:100%;white-space:normal;word-break:keep-all;line-height:1.4;padding-right:0}
.office-dashboard .nav-menu > li > a{padding:14px 16px;font-size:1.5rem;font-weight:600;color:#94a3b8;background-color:transparent;border-bottom:none;border-radius:14px}
.office-dashboard .nav-menu > li > a i{width:20px;margin-right:10px;color:#94a3b8;font-size:1.6rem}
.office-dashboard .nav-menu li a:hover{background-color:rgba(255,255,255,.08) !important;color:#fff}
.office-dashboard .nav-menu li a:hover i{color:#fff}
.office-dashboard .nav-menu li.active > a{background-color:#fff !important;color:#2563EB !important;font-weight:700 !important;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.office-dashboard .nav-menu li.active > a i{color:#2563EB !important}
.office-dashboard .nav-menu li.active > a::before{content:none}

.office-dashboard .main-content{flex:1;display:flex;min-width:0;flex-direction:column;background-color:#F8FAFC;transition:all .3s ease}
.office-dashboard .header{height:70px;background:#002A83;border-bottom:none;display:flex;justify-content:space-between;align-items:center;padding:0 30px}
.office-dashboard .header-left{display:flex;align-items:center;gap:15px}
.office-dashboard .header-left .menu-toggle{display:none;cursor:pointer;background:transparent;border:none;font-size:2rem;color:#fff}
.office-dashboard .header-right{display:flex;align-items:center;gap:12px;font-size:1.4rem}
.office-dashboard .header-pill{display:inline-flex;align-items:center;gap:8px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 18px;text-decoration:none;font-weight:500;white-space:nowrap}
.office-dashboard .header-pill--action{cursor:pointer;transition:background .2s ease}
.office-dashboard .header-pill--action:hover{background:rgba(255,255,255,.2)}

/* 모바일/태블릿(<=1024px) LNB Drawer: 기본적으로 화면 밖으로 숨겨두고, 헤더 햄버거 클릭 시
   body.mobile-nav-open가 붙으면서 슬라이딩 노출 + Dimmed 오버레이가 함께 뜬다 */
.office-mobile-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:150}
@media only screen and (max-width:1024px){
.office-dashboard .sidebar{position:fixed;top:0;left:0;transform:translateX(-100%);box-shadow:0 0 28px rgba(15,23,42,.25)}
.office-dashboard .main-content{width:100%}
.office-dashboard .header-left .menu-toggle{display:inline-flex}
.office-dashboard.mobile-nav-open .sidebar{transform:translateX(0)}
body.mobile-nav-open .office-mobile-overlay{display:block}
}

.office-dashboard .content-body{padding:25px 30px;background:transparent}
.office-dashboard .content-body.border-line{border:none}
.office-content-body{background:transparent;border-radius:0;padding:0;border:none}

.office-dashboard .main-footer{display:none}
.office-dashboard .footer-content{display:flex;justify-content:space-between}
.office-dashboard .system-info span{margin-left:15px}

/* 로딩 오버레이 */
.office-dashboard .loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.7);display:none;align-items:center;justify-content:center;z-index:9999}
.office-dashboard .spinner{font-size:3rem;color:#1E3A8A;animation:office-spin 1s linear infinite}
@keyframes office-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* 상단 요약 통계 카드 */
.office-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.office-stat-card{background:#fff;border:1px solid #e2e8f0;border-left:4px solid #1E3A8A;border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.office-stat-card .label{font-size:1.3rem;color:#64748b;margin-bottom:8px}
.office-stat-card .label i{color:#1E3A8A;margin-right:5px}
.office-stat-card .value{font-size:2.4rem;font-weight:700;color:#1E293B}

/* 탭 메뉴 */
.office-dashboard .nav-tabs{border-bottom:1px solid #ddd;list-style:none;padding:0;margin:0}
.office-dashboard .nav-item{margin-bottom:-1px}
.office-dashboard .nav-link{display:block;padding:10px;border:1px solid transparent;color:#666;text-decoration:none !important;cursor:pointer}
.office-nav-tabs{border-bottom:2px solid #e2e8f0;margin-bottom:20px}
.office-nav-tabs .nav-link{color:#64748b;font-weight:600;text-align:center;padding:12px 10px}
.office-nav-tabs .nav-link.active{color:#1E3A8A;border:1px solid #e2e8f0;border-bottom-color:#fff;background:#fff;font-weight:700}
.office-tab-panel{display:block}

/* 안내 문구 */
.office-dashboard .info-notice{background:#eff6ff;border:1px solid #bfdbfe;padding:15px;border-radius:4px;font-size:1.4rem;margin-bottom:20px}
.office-dashboard .info-notice strong{display:block;font-size:1.5rem;font-weight:700;margin-bottom:10px;color:#1E3A8A}
.office-dashboard .info-notice p{margin:0;font-size:1.5rem;font-weight:300;letter-spacing:-.03em;color:#333;line-height:1.4}
.office-dashboard .info-notice p strong{display:inline;font-size:1.5rem;font-weight:700}

/* 검색영역 */
.office-dashboard .search-section{background:#fff;padding:20px 24px;border:1px solid #F1F5F9;border-radius:14px;box-shadow:0 4px 20px 0 rgba(15,23,42,.03);margin-bottom:20px}
.office-dashboard .search-grid{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.office-dashboard .search-item{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.office-dashboard .search-item label{font-weight:700;font-size:1.3rem;color:#475569}
.office-dashboard .flex-grow{flex-grow:1}
.office-dashboard .date-input-group{display:flex;align-items:center;gap:8px}
.office-dashboard .date-input-group input{padding:0 12px;height:42px;border:1px solid #E2E8F0;border-radius:8px;font-size:1.4rem;width:150px}
.office-dashboard .date-input-group span{color:#94A3B8}
.office-dashboard .search-actions{margin-left:auto;align-self:flex-end;display:flex;gap:8px}
.office-dashboard .search-item select.form-select,
.office-dashboard .search-item input.form-control{height:42px;border:1px solid #E2E8F0;border-radius:8px;padding:0 32px 0 12px;font-size:1.4rem;color:#1E293B;background-color:#fff}
.office-dashboard .search-item input.form-control{padding:0 12px}
.office-search-btn{background:#2563EB;color:#fff;border:none;height:42px;padding:0 22px;border-radius:8px;cursor:pointer;font-weight:600;box-shadow:0 2px 4px rgba(37,99,235,.2);transition:background .2s ease}
.office-search-btn:hover{background:#1D4ED8}

/* 목록 테이블 영역 */
.office-dashboard .table-container{background:#fff;padding:24px;border-radius:14px;border:1px solid #F1F5F9;box-shadow:0 4px 20px 0 rgba(15,23,42,.03)}
.office-dashboard .table-top-info{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #F1F5F9}
.office-dashboard .total-count{font-size:1.5rem;color:#64748B}
.office-dashboard .total-count strong{color:#2563EB}
.office-dashboard .data-table{table-layout:fixed;width:100%;border-collapse:collapse;margin-bottom:20px}
.office-dashboard .data-table th{background:#F8FAFC;border-top:none;border-bottom:1px solid #E2E8F0;padding:14px 10px;font-size:1.5rem;font-weight:700;color:#475569;border-right:1px solid #E2E8F0}
.office-dashboard .data-table td{padding:16px 10px;border-bottom:1px solid #E2E8F0;text-align:center;font-size:1.5rem;color:#334155;border-right:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s ease}
.office-dashboard .list-table tbody tr:last-child td{border-bottom:none}
.office-dashboard .list-table tbody tr:hover td{background-color:#EFF6FF}
.office-dashboard .pointer-row:hover{background-color:#EFF6FF;cursor:pointer}
.office-dashboard .write-table th{border-top:1px solid #E2E8F0;font-weight:600;text-align:left;padding-left:20px !important}
.office-dashboard .write-table td{border-top:1px solid #E2E8F0}
/* 출고신청 등록 모달의 출고 대상 재고 카드 - 프리픽스: .office-stock-card */
.office-stock-card__wrap{max-height:320px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding:2px}
.office-stock-card__wrap .office-empty-box{grid-column:1/-1}
.office-stock-card{position:relative;display:flex;gap:10px;background:#fff;border:1px solid #E2E8F0;border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.office-stock-card:hover{border-color:#93C5FD;background:#F8FAFC}
.office-stock-card.is-selected{border-color:#2563EB;background:#EFF6FF;box-shadow:0 0 0 1px #2563EB inset}
.office-stock-card__check{flex-shrink:0;display:flex;align-items:flex-start;padding-top:2px}
.office-stock-card__check input{display:none}
.office-stock-card__box{width:20px;height:20px;border-radius:6px;border:1px solid #CBD5E1;background:#fff;display:flex;align-items:center;justify-content:center;color:transparent;font-size:1.2rem;transition:background-color .15s ease,border-color .15s ease}
.office-stock-card__check input:checked + .office-stock-card__box{background:#2563EB;border-color:#2563EB;color:#fff}
.office-stock-card__body{flex:1;min-width:0}
.office-stock-card__row{display:flex;align-items:center;gap:6px;font-size:1.5rem;color:#64748B;margin-top:7px}
.office-stock-card__row:first-child{margin-top:0}
.office-stock-card__row i{width:14px;flex-shrink:0;text-align:center;color:#94A3B8}
.office-stock-card__row--head{justify-content:space-between;font-size:1.6rem}
.office-stock-card__row--between{justify-content:space-between}
.office-stock-card__row--muted{color:#94A3B8;font-size:1.3rem}
.office-stock-card__item{font-weight:700;color:var(--ic-solid,#1E293B);background:var(--ic-tint,transparent);padding:3px 9px;border-radius:7px}
.office-stock-card__aging{font-weight:700;color:#EA580C;white-space:nowrap}
.office-stock-card__weight{font-weight:700;color:#2563EB}
.office-stock-card__uniqno{display:inline-flex;align-items:center;gap:6px;background:#F1F5F9;color:#334155;font-weight:700;padding:3px 10px;border-radius:7px;letter-spacing:.2px}
.office-stock-card__uniqno i{color:#64748B}
.office-stock-card__cave{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--cave-solid,#475569);background:var(--cave-tint,#EFF2F9);padding:3px 9px;border-radius:7px}
.office-stock-card__cave i{width:auto;color:inherit}

/* 뱃지 */
.office-dashboard .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:1.2rem;font-weight:500;text-align:center;color:#fff}
.office-dashboard .badge-i{background-color:#1E3A8A}
.office-dashboard .badge-c{background-color:#28a745}

/* 체크박스 */
.office-dashboard .custom-check input{display:none}
.office-dashboard .custom-check{display:flex;align-items:center;cursor:pointer;font-size:1.5rem;color:#333;user-select:none}
.office-dashboard .check-mark{display:inline-block;width:20px;height:20px;background:#fff;border:1px solid #ddd;margin-right:8px;position:relative;border-radius:3px;transition:all .2s ease}
.office-dashboard .custom-check input:checked + .check-mark{background:#1E3A8A;border-color:#1E3A8A}
.office-dashboard .check-mark::after{content:'\f00c';font-family:'Font Awesome 7 Free','Font Awesome 6 Free','Font Awesome 5 Free';font-weight:900;font-size:1.2rem;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease}
.office-dashboard .custom-check input:checked + .check-mark::after{transform:translate(-50%,-50%) scale(1)}

/* 버튼 */
.office-dashboard .btn-register{background:#1E3A8A;color:#fff;border:none;padding:10px 35px;border-radius:20px;font-weight:600;cursor:pointer;box-shadow:0 2px 4px rgba(30,58,138,.2);transition:background .2s ease}
.office-dashboard .btn-register:hover{background:#172554}
.office-dashboard .btn-cancel{background:#F8FAFC;color:#64748B;padding:10px 35px;border-radius:20px;font-weight:600;cursor:pointer;border:1px solid #E2E8F0;transition:background .2s ease,color .2s ease}
.office-dashboard .btn-cancel:hover{background:#F1F5F9;color:#0F172A}
.office-dashboard .btn-list{background:#F8FAFC;color:#64748B;border:1px solid #E2E8F0;padding:10px 35px;border-radius:20px;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease}
.office-dashboard .btn-list:hover{background:#F1F5F9;color:#0F172A}
.office-dashboard .btn-sm{background:#1E3A8A;color:#fff;border:none;padding:4px 10px;border-radius:4px;font-weight:400;cursor:pointer}

/* 페이징 */
.office-dashboard .pagination{display:flex;justify-content:center;gap:6px;margin:24px 0 0;padding-top:20px;border-top:1px solid #F1F5F9}
.office-dashboard .pg-btn,.office-dashboard .pg-num{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #E2E8F0;background:#fff;color:#64748B;font-size:1.3rem;font-weight:600;cursor:pointer;border-radius:8px;transition:all .15s ease}
.office-dashboard .pg-btn:hover:not(:disabled),.office-dashboard .pg-num:hover{border-color:#2563EB;color:#2563EB;background:#EFF6FF}
.office-dashboard .pg-num.active{background:#2563EB;color:#fff;border-color:#2563EB;box-shadow:0 2px 6px rgba(37,99,235,.3)}
.office-dashboard .pg-btn:disabled{opacity:.4;cursor:not-allowed;background:#F8FAFC}

/* 토굴재고현황(탭3) 토굴별 상세 현황 카드. 환경정보(수용량/온도/습도) 수정은 카드 내 인라인 입력이 아니라
   톱니바퀴 버튼으로 여는 별도 수정 모달(caveEditModal)에서 처리한다 */
.office-cave-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.office-cave-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;transition:opacity .2s ease}
.office-cave-card.is-inactive{opacity:.55;background:#f8fafc}
.office-cave-card__head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.office-cave-card__name{font-size:1.6rem;font-weight:700;color:#1E293B}
.office-cave-card__detail{margin-left:auto;flex-shrink:0;width:28px;height:28px;border:none;background:#EFF6FF;color:#2563EB;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.office-cave-card__detail:hover{background:#DBEAFE;color:#1D4ED8}
.office-cave-card__gear{flex-shrink:0;width:28px;height:28px;border:none;background:#F1F5F9;color:#64748B;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.office-cave-card__gear:hover{background:#E2E8F0;color:#334155}
.office-cave-card__metrics{display:flex;justify-content:space-between;gap:6px;margin-bottom:10px}
.office-cave-card__metric{display:flex;flex-direction:column;gap:2px;min-width:0}
.office-cave-card__metric .m-label{font-size:1.2rem;color:#94A3B8;white-space:nowrap}
.office-cave-card__metric .m-value{font-size:1.5rem;font-weight:700;color:#1E293B;white-space:nowrap}
.office-cave-card__metric .m-value--danger{color:#EF4444}
.office-cave-card .capacity-bar{height:7px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin-bottom:12px}
.office-cave-card .capacity-bar-fill{height:100%;transition:width .3s ease}
.office-cave-card__foot{display:flex;justify-content:space-between;gap:6px;padding-top:10px;border-top:1px solid #f1f5f9;font-size:1.2rem;color:#64748B}
.office-cave-card__foot span{display:flex;align-items:center;gap:5px;white-space:nowrap}

@media only screen and (max-width:1400px){
.office-cave-grid{grid-template-columns:repeat(4,1fr)}
}
@media only screen and (max-width:1100px){
.office-cave-grid{grid-template-columns:repeat(3,1fr)}
}
@media only screen and (max-width:768px){
.office-cave-grid{grid-template-columns:repeat(2,1fr)}
}
@media only screen and (max-width:480px){
.office-cave-grid{grid-template-columns:1fr}
}

/* 유틸리티 (office 전용) */
.office-dashboard .d-flex{display:flex !important}
.office-dashboard .flex-1{flex:1 1 0% !important}
.office-dashboard .text-center{text-align:center !important}
.office-dashboard .p-20px{padding:20px !important}
.office-dashboard .text-right{text-align:right !important}
.office-dashboard .text-muted{color:#6c757d !important}
.office-dashboard .text-required{color:#d32f2f !important;font-weight:bold;margin-right:2px}
.office-dashboard .mb-0px{margin-bottom:0 !important}
.office-dashboard .mr-5px{margin-right:5px !important}
.office-dashboard .mt-10px{margin-top:10px !important}
.office-dashboard .mt-20px{margin-top:20px !important}
.office-dashboard .mt-5px{margin-top:5px !important}
.office-dashboard .fs-12{font-size:1.2rem !important}
.office-dashboard .fs-15{font-size:1.5rem !important}
.office-dashboard .w-40px{width:40px !important}
.office-dashboard .w-90px{width:90px !important}
.office-dashboard .w-100px{width:100px !important}
.office-dashboard .w-110px{width:110px !important}
.office-dashboard .w-120px{width:120px !important}
.office-dashboard .w-140px{width:140px !important}
.office-dashboard .w-150px{width:150px !important}
.office-dashboard .w-200px{width:200px !important}
.office-dashboard .w-300px{width:300px !important}
.office-dashboard .w-full{width:100% !important}

@media only screen and (max-width:992px){
.office-stat-grid{grid-template-columns:repeat(2,1fr)}
.office-nav-tabs{flex-wrap:wrap}
.office-nav-tabs .nav-item{flex:1 1 50%}
}

/* ==========================================================================
   입고신청현황 화면 전용 (office_inbound_list) - 프리픽스: .office-inbound-
   ========================================================================== */
.office-inbound-page-head{margin-bottom:20px}
.office-inbound-title{font-size:2.4rem;font-weight:700;color:#0F172A;margin-bottom:6px}
.office-inbound-subtitle{font-size:1.4rem;color:#64748B}
.office-inbound-page-head--inline{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.office-inbound-page-head--inline .office-inbound-title{margin-bottom:0}

.office-inbound-card{background:#fff;border-radius:14px;box-shadow:0 4px 20px 0 rgba(15,23,42,.03);border:1px solid #e1e4e8;padding:22px 24px;margin-bottom:20px}

.office-inbound-filter-row{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.office-inbound-filter-item{display:flex;flex-direction:column;gap:8px}
.office-inbound-filter-item label{font-size:1.5rem;font-weight:600;color:#475569}
.office-inbound-filter-item select{min-width:170px;height:42px;padding:0 36px 0 14px;border:1px solid #d1d5db;border-radius:8px;font-size:1.5rem;color:#0F172A;background-color:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.office-inbound-filter-item select:focus{border-color:#3B82F6;outline:0;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.office-inbound-filter-item select:disabled{background-color:#F1F5F9;color:#64748B;cursor:default;opacity:1;background-image:none}
.office-inbound-filter-item input{min-width:150px;height:42px;padding:0 14px;border:1px solid #d1d5db;border-radius:8px;font-size:1.5rem;color:#0F172A;background-color:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.office-inbound-filter-item input:focus{border-color:#3B82F6;outline:0;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.office-inbound-filter-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

.office-inbound-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 22px;border-radius:8px;font-size:1.5rem;font-weight:600;cursor:pointer;white-space:nowrap;border:1px solid transparent;transition:background .2s ease,color .2s ease}
.office-inbound-btn-outline{background:#F8FAFC;color:#64748B;border-color:#d1d5db}
.office-inbound-btn-outline:hover{background:#F1F5F9;color:#0F172A}
.office-inbound-btn-solid{background:#2563EB;color:#fff;box-shadow:0 2px 4px rgba(37,99,235,.2)}
.office-inbound-btn-solid:hover{background:#1D4ED8}
.office-inbound-btn--sm{height:30px;padding:0 10px;font-size:1.3rem;gap:6px}

.office-inbound-actions{display:flex;flex-direction:column;align-items:stretch;gap:6px}

.office-inbound-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.office-inbound-result-count{font-size:1.5rem;color:#334155}
.office-inbound-result-count i{color:#2563EB}
.office-inbound-result-count strong{color:#2563EB;font-size:1.7rem;margin:0 2px}
.office-inbound-toolbar-actions{display:flex;align-items:center;gap:10px}
.office-inbound-toolbar-actions select{height:38px;padding:0 32px 0 12px;border:1px solid #d1d5db;border-radius:8px;font-size:1.5rem;color:#334155;background-color:#fff;min-width:100px;transition:border-color .2s ease,box-shadow .2s ease}
.office-inbound-toolbar-actions select:focus{border-color:#3B82F6;outline:0;box-shadow:0 0 0 3px rgba(59,130,246,.1)}

.office-inbound-table-card{background:#fff;border-radius:14px;border:1px solid #e1e4e8;box-shadow:0 4px 20px 0 rgba(15,23,42,.03);overflow:hidden;margin-bottom:20px}
.office-inbound-table-wrap{overflow-x:auto}
.office-inbound-table{width:100%;border-collapse:collapse;table-layout:fixed}
.office-inbound-table th{background:#EFF2F9;color:#475569;font-size:1.5rem;font-weight:700;padding:14px 10px;text-align:center;border-bottom:1px solid #E2E8F0;white-space:nowrap}
.office-inbound-table td{padding:16px 10px;text-align:center;font-size:1.5rem;color:#334155;border-bottom:1px solid #E2E8F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s ease}
.office-inbound-table tbody tr:last-child td{border-bottom:none}
.office-inbound-table tbody tr:hover td{background:#EFF6FF}
.office-inbound-table th input[type="checkbox"],
.office-inbound-table td input[type="checkbox"]{width:20px;height:20px;cursor:pointer;vertical-align:middle}
.office-inbound-table td.office-inbound-table__actions-cell{overflow:visible;white-space:normal}

.office-inbound-badge{display:inline-block;padding:5px 14px;border-radius:999px;font-size:1.5rem;font-weight:700;white-space:nowrap}
.office-inbound-badge-pending{background:#EBF5FF;color:#2563EB}
.office-inbound-badge-approved{background:#ECFDF5;color:#059669}
.office-inbound-badge-completed{background:#F3E8FF;color:#7C3AED}
.office-inbound-badge-rejected{background:#FEE2E2;color:#DC2626}
.office-inbound-badge-warning{background:#FFF7ED;color:#EA580C}
.office-inbound-badge-empty{background:#F1F5F9;color:#64748B}

.office-inbound-action-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid #E2E8F0;background:#fff;color:#64748B;cursor:pointer;transition:all .15s ease}
.office-inbound-action-btn:hover{background:#EFF6FF;color:#2563EB;border-color:#BFDBFE}

.office-inbound-pagination-row{display:flex;align-items:center;justify-content:center;padding:16px 20px;border-top:1px solid #F1F5F9}
.office-inbound-pagination{display:flex;align-items:center;gap:6px}
.office-inbound-pg-btn,.office-inbound-pg-num{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #E2E8F0;background:#fff;color:#64748B;cursor:pointer;border-radius:8px;font-size:1.5rem;font-weight:600;transition:all .15s ease}
.office-inbound-pg-btn:hover:not(:disabled),.office-inbound-pg-num:hover{border-color:#2563EB;color:#2563EB;background:#EFF6FF}
.office-inbound-pg-btn:disabled{opacity:.4;cursor:not-allowed;background:#F8FAFC}
.office-inbound-pg-num.active{background:#2563EB;color:#fff;border-color:#2563EB;font-weight:700;box-shadow:0 2px 6px rgba(37,99,235,.3)}

.office-inbound-form-card .info-notice{margin-bottom:20px}

@media only screen and (max-width:992px){
.office-inbound-filter-actions{margin-left:0;width:100%}
}

/* ==========================================================================
   단일 통합 화면 전용 (assistant_main) - 상태 필터칩/선택바/일괄처리바/
   차트카드/모달. .office-inbound-* 컴포넌트(카드/버튼/테이블/뱃지/페이징)를
   4개 탭 전체에서 공통으로 재사용하고, 여기서는 그 세트에 없는 것만 추가한다.
   ========================================================================== */
.office-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.office-chip{display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:999px;border:1px solid #E2E8F0;background:#fff;color:#64748B;font-size:1.5rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.office-chip:hover{border-color:#93C5FD;color:#2563EB}
.office-chip.is-active{background:#1E3A8A;border-color:#1E3A8A;color:#fff;box-shadow:0 2px 6px rgba(30,58,138,.25)}

.office-select-all-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:4px 2px 14px}
.office-select-all-row .custom-check{font-weight:600;color:#334155}
.office-select-all-row .custom-check strong{color:#2563EB;margin:0 2px}

.office-bulk-bar{display:none;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:12px;padding:14px 20px;margin-bottom:16px}
.office-bulk-bar.is-visible{display:flex}
.office-bulk-bar .obb-summary{font-size:1.4rem;color:#1E3A8A;font-weight:600}
.office-bulk-bar .obb-summary strong{font-size:1.6rem;margin:0 2px}
.office-bulk-bar .obb-actions{display:flex;gap:8px}

.office-chart-row{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin-bottom:20px;align-items:stretch}
.office-chart-card h3{font-size:1.5rem;font-weight:700;color:#1E293B;margin-bottom:16px}
.office-chart-canvas-wrap{position:relative;height:230px}
.office-chart-legend{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-height:150px;overflow-y:auto}
.office-chart-donut-row{display:flex;align-items:center;gap:20px}
.office-chart-donut-row .office-chart-canvas-wrap{flex:1 1 55%;min-width:0}
.office-chart-donut-row .office-chart-legend{flex:1 1 45%;min-width:0;margin-top:0;max-height:230px}
.office-legend-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.office-legend-item{display:flex;align-items:center;gap:8px;font-size:1.3rem;color:#475569}
.office-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.office-legend-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.office-legend-value{font-weight:700;color:#1E293B;white-space:nowrap}

.office-modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:1000;align-items:center;justify-content:center;padding:20px}
.office-modal-overlay.is-open{display:flex}
.office-modal-box{background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(15,23,42,.3)}
.office-modal-box--wide{max-width:760px}

/* 토굴 변경 이력(caveHistModal)/토굴 재고 상세(caveStockDetailModal) 모달 표는 다른 목록 표(office-inbound-table)와
   달리 말줄임(...) 없이 내용을 그대로 줄바꿈해 보여주고, 글자 크기도 14px로 통일한다 */
#caveHistModal .office-inbound-table th,
#caveHistModal .office-inbound-table td,
#caveStockDetailModal .office-inbound-table th,
#caveStockDetailModal .office-inbound-table td{font-size:1.4rem;white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}
.office-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #F1F5F9;position:sticky;top:0;background:#fff;z-index:1}
.office-modal-head h3{font-size:1.7rem;font-weight:700;color:#0F172A;margin:0}
.office-modal-close{background:transparent;border:none;font-size:1.8rem;color:#94A3B8;cursor:pointer;padding:4px}
.office-modal-close:hover{color:#0F172A}
.office-modal-body{padding:22px 24px}
.office-modal-foot{padding:16px 24px;border-top:1px solid #F1F5F9;display:flex;justify-content:flex-end;gap:8px}

/* office 등록폼 공용 입력 카드 컴포넌트. 토굴 등록/정보 설정, 입고신청 등록, 출고신청
   등록 모달이 모두 이 패턴(라벨+입력을 한 줄에 배치하는 카드형 폼)을 공유한다.
   BEM 프리픽스 office-form__로 다른 화면 클래스와 충돌을 방지한다 */
.office-form-modal--narrow{max-width:560px}
.office-form__body{padding-top:16px}
.office-form__card{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:18px}
.office-form__row{margin-bottom:14px}
.office-form__row:last-child{margin-bottom:0}
/* 라벨과 입력박스를 한 줄에 배치: 라벨은 고정폭, 입력영역은 남은 공간을 채운다 */
.office-form__row--inline{display:flex;align-items:center;gap:12px}
.office-form__label{display:block;font-size:1.3rem;font-weight:600;color:#475569;margin-bottom:6px}
.office-form__row--inline .office-form__label{margin-bottom:0;flex:0 0 100px;white-space:nowrap}
.office-form__row--inline input.form-control,
.office-form__row--inline select.form-select{flex:1;min-width:0}
.office-form__row--inline .pwd-field{flex:1;min-width:0}
.office-form__row--inline .office-form__input-unit{flex:1;min-width:0}
.office-form__row--inline .office-form__toggle{flex:1;justify-content:flex-end}
.office-form__input-unit{display:flex;align-items:center;gap:8px}
.office-form__input-unit input{flex:1;min-width:0}
.office-form__unit{font-size:1.3rem;color:#64748B;font-weight:600;white-space:nowrap}
.office-form__row textarea.form-control{display:block;width:100%;box-sizing:border-box;height:auto;min-height:88px;padding:8px 10px;line-height:1.4;resize:vertical}
.office-form__row select.form-select{width:100%}

/* 새우젓 종류/토굴처럼 검색필터 select 여러 개를 한 줄에 나란히 배치할 때 사용 */
.office-form__row--cols3{display:flex;gap:12px}
.office-form__col{flex:1;min-width:0}
.office-form__col .office-form__label{margin-bottom:6px}
.office-form__col select.form-select{width:100%}
@media only screen and (max-width:576px){
.office-form__row--cols3{flex-direction:column;gap:14px}
}
/* 출고 희망일처럼 달력 입력만 있는 인라인 행의 입력폭을 좁게 제한 */
.office-form__row--inline .office-form__date--narrow{flex:0 0 180px}

/* "현재 재고 목록" 상세정보 수정 모달 상단의 식별정보 + QR 코드/인쇄 영역 */
.cst-edit-qr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.cst-edit-qr-head__info{flex:1;min-width:0}
.cst-edit-qr-head__info .office-form__row{margin-bottom:8px}
.cst-edit-qr-head__info .office-form__row:last-child{margin-bottom:0}
#cstEditUniqNo,#cstEditProducerNm,#cstEditInDt{font-size:1.8rem}
.cst-edit-qr-head__code{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.cst-edit-qr-head__img{width:96px;height:96px;border:1px solid #E2E8F0;border-radius:8px;background:#fff;object-fit:contain}
.cst-edit-qr-head__print-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;font-size:1.2rem;font-weight:600;cursor:pointer;white-space:nowrap;background:#F8FAFC;color:#64748B;border:1px solid #d1d5db}
.cst-edit-qr-head__print-btn:hover{background:#F1F5F9;color:#0F172A}
@media only screen and (max-width:576px){
.cst-edit-qr-head{flex-direction:column;align-items:center;text-align:center}
}

/* 입출고내역현황(탭4) 상세정보 모달의 기본정보(+QR)/입고정보/출고정보 3개 구획 */
.hist-detail__modal-box{max-width:600px}
.hist-detail__section{margin-bottom:16px}
.hist-detail__section:last-child{margin-bottom:0}
.hist-detail__section-title{font-size:1.4rem;font-weight:700;color:#0F172A;margin-bottom:8px}
.hist-detail__section-title--row{display:flex;align-items:center;justify-content:space-between}
.hist-detail__qr-uniqno{font-size:1.4rem;font-weight:700;color:#0F172A;margin-top:2px}
.hist-detail__section .office-form__row--inline .office-form__label{flex:0 0 132px}
/* 신청 중량처럼 한눈에 확인해야 하는 중요 항목 강조 */
.hist-detail__value--accent{font-weight:700;color:#2563EB}
/* 입고정보/출고정보를 좌우 2단으로 배치 */
.hist-detail__section-row{display:flex;gap:16px;margin-bottom:16px}
.hist-detail__section-row:last-child{margin-bottom:0}
.hist-detail__section-row .hist-detail__section{flex:1;min-width:0;margin-bottom:0}
.hist-detail__section-row .office-form__label{flex:0 0 68px}

/* 사용여부 토글 스위치 */
.office-form__toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.office-form__toggle input{display:none}
.office-form__toggle-track{position:relative;width:44px;height:24px;background:#CBD5E1;border-radius:999px;transition:background .2s ease;flex-shrink:0}
.office-form__toggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 2px rgba(15,23,42,.25)}
.office-form__toggle input:checked + .office-form__toggle-track{background:#2563EB}
.office-form__toggle input:checked + .office-form__toggle-track .office-form__toggle-thumb{transform:translateX(20px)}
.office-form__toggle-text{font-size:1.4rem;font-weight:600;color:#334155}

/* 푸터: 좌측(취소/초기화) - 우측(저장) 분리 배치 */
.office-form__foot{justify-content:space-between}
.office-form__foot-left{display:flex;gap:8px}

.office-empty-box{text-align:center;padding:40px 20px;color:#94A3B8;font-size:1.5rem}
.office-empty-box i{display:block;font-size:2.4rem;margin-bottom:10px;color:#CBD5E1}

/* 입고신청현황(탭1) 상단 요약 현황 카드 - 프리픽스: .office-summary- */
.office-summary-section{margin-bottom:22px}

.office-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.office-summary-grid-2{grid-template-columns:repeat(2,1fr)}
.office-summary-grid-6{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.office-summary-grid-6 .office-summary-card{padding:16px}
.office-summary-grid-6 .office-summary-icon{width:40px;height:40px;font-size:1.6rem}
.office-summary-grid-6 .office-summary-value{font-size:2.2rem}
.office-summary-card{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid #EEF2F6;border-radius:16px;padding:20px;box-shadow:0 4px 16px rgba(15,23,42,.04)}
.office-summary-icon{flex-shrink:0;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.9rem}
.office-summary-icon--warning{background:#FEF3E2;color:#F59E0B}
.office-summary-icon--primary{background:#EAF2FF;color:#2563EB}
.office-summary-icon--success{background:#E9FBF1;color:#16A34A}
.office-summary-icon--purple{background:#F3EBFE;color:#7C3AED}
.office-summary-icon--teal{background:#E6FBFA;color:#0D9488}
.office-summary-icon--pink{background:#FDF0F6;color:#DB2777}
.office-summary-body{flex:1;min-width:0}
.office-summary-label{font-size:1.5rem;color:#64748B;font-weight:600;margin-bottom:6px}
.office-summary-value{font-size:2.6rem;font-weight:800;color:#0F172A;line-height:1.2;white-space:nowrap}
.office-summary-desc{font-size:1.5rem;color:#94A3B8;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media only screen and (max-width:1200px){
.office-summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media only screen and (max-width:576px){
.office-summary-grid{grid-template-columns:1fr}
}

/* 입고신청현황(탭1) 목록의 새우젓 종류 태그 : 동일한 item-color-N 팔레트 재사용 */
.office-item-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:1.5rem;font-weight:700;background:var(--ic-tint,#EFF2F9);color:var(--ic-solid,#475569)}
.office-item-tag i{font-size:1.3rem}

/* 출고신청현황(탭2) 목록의 토굴 태그 : 토굴재고현황 차트와 동일한 해시 색상 팔레트(chartColorForKey)를
   자바스크립트에서 --cave-solid/--cave-tint로 주입해 토굴별로 구분되는 색상을 적용한다 */
.office-cave-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:1.5rem;font-weight:700;background:var(--cave-tint,#EFF2F9);color:var(--cave-solid,#475569)}
.office-cave-tag i{font-size:1.3rem}

/* 입고신청현황(탭1) 상태 배지 : 작업자(tong.history) 입고승인 화면과 동일한 .ph-status-badge 색상 재사용 */
.office-dashboard .ph-status-badge{font-size:1.5rem}

/* ===================================================================
   게시판(tong.board) 공용 화면 : 목록/글쓰기/상세. (.ph-*)와
   동일한 모바일 우선 톤(파란 그라디언트 상단바 + 흰 카드)을 공유한다.
   =================================================================== */
.bbs-page{min-height:100vh;background:#F7F9FD;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
.bbs-page *{box-sizing:border-box}

.bbs-topbar{width:100%;background:linear-gradient(135deg,#2451c7,#1a3a8f);color:#fff}
.bbs-topbar-inner{width:100%;max-width:640px;margin:0 auto;padding:18px 16px;display:flex;align-items:center;gap:10px}
.bbs-back-btn{flex-shrink:0;min-width:38px;min-height:38px;border:none;background:rgba(255,255,255,.16);color:#fff;border-radius:10px;font-size:1.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bbs-topbar-title{flex:1;text-align:center;font-size:1.7rem;font-weight:900;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbs-topbar-spacer{flex-shrink:0;min-width:38px}

.bbs-container{width:100%;max-width:640px;margin:0 auto;padding:16px 16px 96px}

/* 검색 */
.bbs-search-row{display:flex;gap:8px;margin-bottom:14px}
.bbs-search-input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid #d1d5db;border-radius:10px;font-size:1.5rem;background:#fff}
.bbs-search-input:focus{outline:none;border-color:#1d4ed8}
.bbs-search-btn{flex-shrink:0;min-width:44px;height:44px;border:none;background:#1d4ed8;color:#fff;border-radius:10px;font-size:1.5rem;cursor:pointer}

/* 목록 상단 툴바 */
.bbs-list-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.bbs-total-count{font-size:1.4rem;color:#6b7280}
.bbs-total-count strong{color:#111827}
.bbs-btn-write{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:#1d4ed8;color:#fff;border-radius:8px;font-size:1.4rem;font-weight:700;text-decoration:none}

/* 목록 카드 */
.bbs-list{list-style:none;margin:0;padding:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04)}
.bbs-item{padding:14px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer}
.bbs-item:last-child{border-bottom:none}
.bbs-item:hover{background:#f8fafc}
.bbs-item.is-notice{background:#eff6ff}
.bbs-item-titlerow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bbs-item-title{font-size:1.5rem;font-weight:700;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bbs-reply-icon{color:#9ca3af;font-size:1.3rem}
.bbs-badge-notice{flex-shrink:0;background:#fee2e2;color:#b91c1c;font-size:1.2rem;font-weight:700;padding:2px 8px;border-radius:999px}
.bbs-badge-category{flex-shrink:0;background:#e0e7ff;color:#4338ca;font-size:1.2rem;font-weight:700;padding:2px 8px;border-radius:999px}
.bbs-secret-icon,.bbs-file-icon{color:#9ca3af;font-size:1.3rem;flex-shrink:0}
.bbs-comment-count{color:#1d4ed8;font-size:1.3rem;font-weight:700;flex-shrink:0}
.bbs-item-metarow{margin-top:6px;font-size:1.3rem;color:#9ca3af;display:flex;align-items:center;gap:6px}
.bbs-meta-dot{color:#d1d5db}
.bbs-empty{padding:48px 16px;text-align:center;color:#9ca3af;font-size:1.4rem;cursor:default}
.bbs-empty i{font-size:2.6rem;display:block;margin-bottom:10px;opacity:.5}

/* 비밀글 확인 모달 (.ph-modal-* 패턴과 동일 톤) */
.bbs-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;padding:20px}
.bbs-modal-overlay.is-open{display:flex}
.bbs-modal-box{background:#fff;border-radius:14px;width:100%;max-width:380px;overflow:hidden}
.bbs-modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:1.6rem;font-weight:900;color:#111827;border-bottom:1px solid #eef2f7}
.bbs-modal-close{border:none;background:transparent;font-size:1.9rem;color:#6b7280;cursor:pointer;min-width:38px;min-height:38px}
.bbs-modal-body{padding:16px}
.bbs-modal-foot{padding:12px 16px 16px;display:flex;gap:8px;justify-content:flex-end}

/* 글쓰기 폼 */
.bbs-form-card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04)}
.bbs-form-row{margin-bottom:16px}
.bbs-form-row:last-child{margin-bottom:0}
.bbs-field-label{display:block;font-size:1.6rem;font-weight:700;color:#374151;margin:0 0 8px}
.bbs-required{color:#dc2626}
.bbs-input,.bbs-select,.bbs-textarea{width:100%;min-width:0;font-size:1.5rem;padding:0 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111827}
.bbs-input,.bbs-select{height:46px}
.bbs-textarea{padding:12px;line-height:1.6;resize:vertical}
.bbs-input:focus,.bbs-select:focus,.bbs-textarea:focus{outline:none;border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.bbs-editor-loading{padding:16px 14px;border:1px solid #d1d5db;border-radius:8px;background:#f8fafc;color:#6b7280;font-size:1.4rem}
.bbs-form-row .cke{border-radius:8px;overflow:hidden}
/* 이용자 글쓰기 CKEditor 알림(붙여넣기 서식/이미지 업로드 등) 영역 숨김 */
.cke_notifications_area{display:none !important}
.bbs-checkline{display:flex;align-items:center;gap:8px;font-size:1.4rem;font-weight:600;color:#374151;cursor:pointer}

/* 파일첨부 */
.bbs-file-upload{border:1px dashed #d1d5db;border-radius:10px;padding:14px}
.bbs-btn-file-select{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:#eef2f7;color:#374151;border-radius:8px;font-size:1.4rem;font-weight:700;cursor:pointer}
.bbs-file-name-display{margin-top:10px;font-size:1.3rem;color:#9ca3af}
.bbs-file-name-display.active{color:#111827;font-weight:600;display:flex;flex-direction:column;gap:6px}
.bbs-file-queue-item{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f8fafc;border-radius:8px;padding:8px 10px}
.bbs-file-queue-name{font-size:1.3rem;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbs-file-queue-remove{flex-shrink:0;border:none;background:transparent;color:#9ca3af;cursor:pointer;font-size:1.4rem;min-width:24px;min-height:24px}
.bbs-file-queue-remove:hover{color:#dc2626}
.bbs-file-edit-list{margin-top:12px;padding-top:12px;border-top:1px solid #f1f5f9}
.bbs-file-edit-title{font-size:1.3rem;font-weight:700;color:#374151;margin:0 0 8px}
.bbs-file-edit-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bbs-file-guide{margin-top:12px;font-size:1.2rem;color:#9ca3af;line-height:1.6}

/* 하단 액션 버튼 */
.bbs-bottom-actions{display:flex;gap:8px;margin-top:16px}
.bbs-btn-primary{flex:1;min-height:48px;font-size:1.5rem;font-weight:900;background:#1d4ed8;color:#fff;border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.bbs-btn-outline{flex:1;min-height:48px;font-size:1.5rem;font-weight:700;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}

/* 상세/글쓰기 미리보기 공용 본문 타이포 (CKEditor bodyClass 로도 사용됨) */
.bbs-view-content{font-size:1.55rem;line-height:1.85;color:#374151;word-break:break-word;white-space:pre-wrap}
.bbs-view-content--html{white-space:normal}

/* ===================================================================
   게시판 상세보기(tong/board/board_view.html) - 열린광장 시안 기반.
   .board-view 컨테이너 + 업무 Prefix(board-view) BEM 네이밍.
   폭/중앙정렬은 상위 .bbs-page--embedded 규칙이 담당한다.
   =================================================================== */
.board-view{width:100%;font-family:inherit}
.board-view__card{background:#fff;border:1px solid #eceff4;border-radius:14px;padding:28px 28px 30px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
/* 본문 컨테이너에 공용 클래스(content-container)가 붙어 있어도 카드 안에서는 폭/여백을 해제 */
.board-view__card .content-container{max-width:none;margin:0;padding:0}

/* 게시판명 헤더 : "게시판명 | {게시판명}" (관리자 .post-view__board-name 과 동일 스타일) */
.board-view__board-name{margin:0 0 18px;font-size:1.8rem;font-weight:700;color:#1f2937;line-height:1.4}
.board-view__board-name .board-view__board-label{color:#2563eb;margin-right:10px}
.board-view__board-name .board-view__board-sep{color:#c7d0e0;margin-right:10px;font-weight:400}

/* 배지 : 공지 / 카테고리 / 비밀글 */
.board-view__badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.board-view__badge{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:999px;font-size:1.25rem;font-weight:700;line-height:1}
.board-view__badge--notice{background:#fdecec;color:#d64545}
.board-view__badge--category{background:#eef2ff;color:#4338ca;border-radius:7px}
.board-view__badge--secret{background:#f1f5f9;color:#64748b}
.board-view__badge--secret i{font-size:1.1rem}

/* 제목 */
.board-view__title{margin:0;font-size:2.4rem;font-weight:800;line-height:1.4;color:#1f2937;word-break:break-word}

/* 메타(작성자·작성일·조회수). 공유/인쇄 도구는 .content-share 바(.sub-content__inner 직속)로 분리됨 */
.board-view__subhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;padding-bottom:20px;border-bottom:1px solid #eef1f6}
.board-view__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:1.4rem;color:#8a94a3}
.board-view__meta-item{display:inline-flex;align-items:center;gap:6px}
.board-view__meta-item i{font-size:1.3rem;color:#aab3c0}
.board-view__meta-dot{color:#d0d6e0}

/* 첨부파일 : 확장자별 색상 아이콘 + 파일명 + 용량 + 다운로드 아이콘 */
.board-view__files{margin-top:20px}
.board-view__files-title{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:1.4rem;font-weight:700;color:#374151}
.board-view__files-title i{color:#8a94a3}
.board-view__file-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.board-view__file-item{min-width:0;max-width:100%}
.board-view__file-link{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:10px 14px;border:1px solid #e5e8ee;border-radius:10px;background:#f9fafc;font-size:1.35rem;color:#475569;text-decoration:none;transition:all .15s ease}
.board-view__file-link:hover{border-color:#2563eb;background:#f0f5ff;color:#1d4ed8}
.board-view__file-icon{font-size:1.6rem;flex-shrink:0}
.board-view__file-icon--pdf{color:#e2483d}
.board-view__file-icon--excel{color:#1d7044}
.board-view__file-icon--word{color:#2b579a}
.board-view__file-icon--ppt{color:#d24726}
.board-view__file-icon--hwp{color:#2f6fb0}
.board-view__file-icon--zip{color:#f5a623}
.board-view__file-icon--img{color:#7c3aed}
.board-view__file-icon--etc{color:#6b7280}
.board-view__file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:#334155}
.board-view__file-size{flex-shrink:0;color:#9aa4b2;font-size:1.2rem}
.board-view__file-download{flex-shrink:0;margin-left:2px;color:#94a3b8;font-size:1.3rem}
.board-view__file-link:hover .board-view__file-download{color:#1d4ed8}

/* 구분선 + 본문 */
.board-view__divider{margin:22px 0;border:none;border-top:1px solid #eef1f6}
.board-view__content{min-height:120px}
.board-view__content img{max-width:100%;height:auto}
.board-view__content > :first-child{margin-top:0}
.board-view__content > :last-child{margin-bottom:0}

/* 액션 버튼 (목록 / 수정·삭제·답글) */
.board-view__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.board-view__actions--owner{justify-content:flex-end}
.board-view__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:10px;font-size:1.45rem;font-weight:700;cursor:pointer;border:1px solid transparent;transition:all .15s ease;font-family:inherit}
.board-view__btn--list{background:#f7f9fd;border-color:#e0e5ee;color:#334155}
.board-view__btn--list:hover{background:#eef2fb;border-color:#c7d0e0}
.board-view__btn--outline{background:#fff;border-color:#d1d9e6;color:#475569}
.board-view__btn--outline:hover{border-color:#2563eb;color:#2563eb}
.board-view__btn--primary{background:#2563eb;color:#fff}
.board-view__btn--primary:hover{background:#1d4ed8}
.board-view__btn--danger{background:#fff;border-color:#f0c4c4;color:#d64545}
.board-view__btn--danger:hover{background:#fdecec;border-color:#e2483d}

/* 이전글 / 다음글 네비게이션 */
.board-view__nav{margin-top:24px;border:1px solid #eceff4;border-radius:12px;overflow:hidden}
.board-view__nav-row{display:flex;align-items:center;gap:16px;padding:15px 18px;min-height:54px}
.board-view__nav-row + .board-view__nav-row{border-top:1px solid #eef1f6}
.board-view__nav-label{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;width:88px;padding:6px 0;border-radius:8px;background:#f4f6fa;color:#64748b;font-size:1.3rem;font-weight:700}
.board-view__nav-label i{font-size:1.1rem}
.board-view__nav-link{flex:1;min-width:0;font-size:1.45rem;color:#374151;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-view__nav-link:hover{color:#2563eb;text-decoration:underline}
.board-view__nav-none{flex:1;min-width:0;font-size:1.4rem;color:#9aa4b2}
.board-view__nav-date{flex-shrink:0;font-size:1.3rem;color:#9aa4b2}

/* 댓글 */
.board-view__comments{margin-top:24px;background:#fff;border:1px solid #eceff4;border-radius:14px;padding:22px}
.board-view__comments-heading{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:1.55rem;font-weight:800;color:#1f2937}
.board-view__comments-heading i{color:#2563eb}
.board-view__comments-heading #commentCount{color:#2563eb}
.board-view__comment-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.board-view__comment-empty{margin:0;padding:24px 0;text-align:center;color:#9aa4b2;font-size:1.35rem}
.board-view__comment-item{background:#f8fafc;border:1px solid #eef1f6;border-radius:10px;padding:12px 14px}
.board-view__comment-item-head{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:1.25rem;color:#9aa4b2}
.board-view__comment-writer{font-weight:700;color:#374151}
.board-view__comment-del{margin-left:auto;border:none;background:transparent;color:#b0b8c4;cursor:pointer;font-size:1.3rem}
.board-view__comment-del:hover{color:#e2483d}
.board-view__comment-item-content{font-size:1.4rem;line-height:1.6;color:#374151;white-space:pre-wrap;word-break:break-word}
.board-view__comment-write{display:flex;flex-direction:column;gap:10px}
.board-view__comment-write .board-view__btn{align-self:flex-end;min-height:42px;padding:0 24px}
.board-view__comment-textarea{width:100%;min-height:88px;padding:12px 14px;border:1px solid #d1d9e6;border-radius:10px;font-size:1.4rem;line-height:1.6;font-family:inherit;color:#1f2937;resize:vertical}
.board-view__comment-textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.board-view__comment-guide{margin:0;padding:16px 0;text-align:center;color:#9aa4b2;font-size:1.35rem}

/* 태블릿 / 모바일 */
@media (max-width:767px){
	.board-view__card{padding:20px 16px 22px}
	.board-view__title{font-size:1.9rem}
	.board-view__subhead{gap:12px}
	.board-view__file-link{width:100%}
	.board-view__file-name{flex:1}
	.board-view__nav-row{flex-wrap:wrap;gap:8px 12px}
	.board-view__nav-date{width:100%;padding-left:100px}
	.board-view__comments{padding:18px 16px}
}

@media (min-width:768px){
	.bbs-topbar-inner{max-width:720px;padding:22px 24px}
	.bbs-container{max-width:720px;padding:24px 24px 48px}
}

/* --------------------------------------------------------------------
   서브페이지(tong/layout/layout.html) 안에서 게시판(.bbs-*)을 재사용할 때 전용 처리.
   .bbs-page 는 원래 회색 배경 위 풀높이 독립 화면(모바일 우선 + 자체 파란 상단바)으로
   설계됐지만, 서브페이지에서는 공통 헤더 / 서브 비주얼(타이틀·Breadcrumb) / 서브탭 / 푸터와
   sub-content(상하) + sub-content__inner(좌우) 여백이 페이지 레벨을 전부 담당한다.
   여기서는 풀높이 / 회색배경을 걷어내고, PC에서 한 컬럼 목록·폼이 지나치게 넓어지지 않도록
   폭만 중앙으로 잡아준다.
   (tong/content/content_page.html 의 .content-view-card 재사용 처리와 동일한 취지) */
.sub-content__inner .bbs-page--embedded{min-height:0;background:none;font-family:inherit}
@media (min-width:768px){
	.sub-content__inner .bbs-page--embedded{max-width:860px;margin:0 auto}
	/* 게시글 상세보기(board_view)는 목록(.board-list)과 동일하게 sub-content__inner 전체 폭을 사용한다 */
	.sub-content__inner .bbs-page--embedded.bbs-page--full{max-width:none}
}

/* --------------------------------------------------------------------
   일반게시판 목록(tong/board/board_list.html) - 열린광장 시안 기반.
   PC(≥768px): 6열 테이블. 모바일(<768px): 행 단위 카드형으로 반응형 전환.
   업무 Prefix(board-list) + BEM 네이밍으로 향후 CSS 통합 시 충돌을 방지한다. */
.board-list{width:100%;font-family:inherit}
.board-list__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}

/* 검색 바 */
.board-list__search{display:flex;justify-content:center;gap:10px;margin:0 auto 22px;max-width:620px}
.board-list__search-input{flex:1;min-width:0;height:48px;padding:0 18px;border:1px solid #cdd5e0;border-radius:10px;font-size:1.5rem;color:#1f2937;background:#fff}
.board-list__search-input::placeholder{color:#9aa4b2}
.board-list__search-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.board-list__search-btn{flex-shrink:0;width:56px;height:48px;border:none;border-radius:10px;background:#2563eb;color:#fff;font-size:1.6rem;cursor:pointer;transition:background .15s ease}
.board-list__search-btn:hover{background:#1d4ed8}

/* 목록 상단 툴바 */
.board-list__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.board-list__total{font-size:1.45rem;color:#4b5563}
.board-list__total strong{color:#2563eb;font-weight:800}
.board-list__write-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:8px;background:#2563eb;color:#fff;font-size:1.4rem;font-weight:700;text-decoration:none;transition:background .15s ease}
.board-list__write-btn:hover{background:#1d4ed8}

/* 테이블 */
.board-list__table-wrap{width:100%;overflow-x:auto;border-top:2px solid #2563eb}
.board-list__table{width:100%;border-collapse:collapse;table-layout:fixed}
.board-list__col--no{width:90px}
.board-list__col--writer{width:120px}
.board-list__col--date{width:130px}
.board-list__col--views{width:90px}
.board-list__table thead th{padding:14px 10px;font-size:1.4rem;font-weight:700;color:#374151;background:#f7f9fd;border-bottom:1px solid #e5e8ee;text-align:center}
.board-list__cell{padding:15px 10px;font-size:1.45rem;color:#4b5563;border-bottom:1px solid #eef1f6;text-align:center;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-list__row{cursor:pointer;transition:background .12s ease}
.board-list__row:hover{background:#f5f8ff}
.board-list__row:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.board-list__row--notice{background:#eff5ff}
.board-list__row--notice:hover{background:#e4eeff}

/* 번호 셀 */
.board-list__cell--no{color:#6b7280;font-size:1.4rem}

/* 제목 셀 */
.board-list__cell--title{text-align:left;white-space:normal}
.board-list__title-text{color:#1f2937;font-weight:500}
.board-list__row--notice .board-list__title-text{font-weight:700}
.board-list__row:hover .board-list__title-text{color:#2563eb;text-decoration:underline}
.board-list__reply-icon{margin-right:6px;color:#9ca3af;font-size:1.2rem}
.board-list__icon-secret{margin-left:6px;color:#9ca3af;font-size:1.25rem}
.board-list__comment-cnt{margin-left:6px;color:#2563eb;font-size:1.3rem;font-weight:700}

/* 뱃지 (공지 / 카테고리 / N) */
.board-list__badge{display:inline-flex;align-items:center;justify-content:center;font-weight:700;line-height:1;vertical-align:middle}
.board-list__badge--notice{min-width:46px;height:26px;padding:0 10px;border:1px solid #2563eb;border-radius:999px;background:#fff;color:#2563eb;font-size:1.25rem}
.board-list__badge--category{height:24px;padding:0 9px;margin-right:6px;border-radius:6px;background:#e0e7ff;color:#4338ca;font-size:1.2rem}
.board-list__badge--new{width:20px;height:20px;margin-left:8px;border-radius:5px;background:#2563eb;color:#fff;font-size:1.15rem;font-weight:800}

/* 첨부 아이콘 (확장자별 색상) */
.board-list__file-icon{font-size:1.7rem}
.board-list__file-icon--inline{margin-left:6px;font-size:1.4rem;vertical-align:baseline}
.board-list__file-icon--pdf{color:#e2483d}
.board-list__file-icon--excel{color:#1d7044}
.board-list__file-icon--word{color:#2b579a}
.board-list__file-icon--ppt{color:#d24726}
.board-list__file-icon--hwp{color:#2f6fb0}
.board-list__file-icon--zip{color:#f5a623}
.board-list__file-icon--img{color:#7c3aed}
.board-list__file-icon--etc{color:#6b7280}

/* 빈 목록 */
.board-list__empty{padding:60px 16px;text-align:center;color:#9aa4b2;font-size:1.45rem;border-bottom:1px solid #eef1f6}
.board-list__empty i{display:block;margin-bottom:10px;font-size:2.6rem;opacity:.5}

/* 페이징 (paging 조각 재사용 : .pagination / .pg-btn / .pg-num) */
.board-list__paging{margin-top:26px}
.board-list__paging .pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.board-list__paging .pg-btn,.board-list__paging .pg-num{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border:1px solid #e0e5ee;border-radius:8px;background:#fff;color:#64748b;font-size:1.35rem;font-weight:600;cursor:pointer;transition:all .15s ease}
.board-list__paging .pg-btn:hover,.board-list__paging .pg-num:hover{border-color:#2563eb;color:#2563eb;background:#eff6ff}
.board-list__paging .pg-num.active{background:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.3)}

/* 모바일 : 테이블 → 카드형 전환 */
@media (max-width:767px){
	.board-list__search{gap:8px;margin-bottom:18px}
	.board-list__search-input{height:44px;font-size:1.45rem}
	.board-list__search-btn{width:50px;height:44px}
	.board-list__table-wrap{overflow-x:visible;border-top:2px solid #2563eb}
	.board-list__table,.board-list__table tbody,.board-list__table tr,.board-list__table td{display:block;width:100%}
	.board-list__table colgroup,.board-list__table thead{display:none}
	.board-list__row{padding:14px 4px;border-bottom:1px solid #eef1f6}
	.board-list__row--notice{border-radius:10px;padding:14px 12px;border-bottom:1px solid #dbe6ff}
	.board-list__cell{padding:3px 4px;border:none;text-align:left;white-space:normal}
	.board-list__cell--title{order:-1;margin-bottom:6px;font-size:1.55rem}
	.board-list__cell--title .board-list__title-text{font-weight:700}
	.board-list__cell--no,.board-list__cell--writer,.board-list__cell--date,.board-list__cell--views{display:inline-block;width:auto;color:#8a94a3;font-size:1.3rem}
	.board-list__cell--no::before{content:none}
	.board-list__cell--writer::before{content:"· "}
	.board-list__cell--date::before{content:"· "}
	.board-list__cell--views::before{content:"· 조회 "}
	.board-list__empty{padding:44px 12px}
}

/* --------------------------------------------------------------------
   사진게시판 목록(tong/board/photo_list.html) - 열린광장 시안 기반.
   목록형(썸네일+요약 한 줄) ↔ 갤러리형(카드 그리드) 을 컨테이너 클래스로 전환. */
.photo-list{width:100%;font-family:inherit}
.photo-list__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}

.photo-list__search{display:flex;justify-content:center;gap:10px;margin:0 auto 22px;max-width:620px}
.photo-list__search-input{flex:1;min-width:0;height:48px;padding:0 18px;border:1px solid #cdd5e0;border-radius:10px;font-size:1.5rem;color:#1f2937;background:#fff}
.photo-list__search-input::placeholder{color:#9aa4b2}
.photo-list__search-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.photo-list__search-btn{flex-shrink:0;width:56px;height:48px;border:none;border-radius:10px;background:#2563eb;color:#fff;font-size:1.6rem;cursor:pointer;transition:background .15s ease}
.photo-list__search-btn:hover{background:#1d4ed8}

.photo-list__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.photo-list__total{font-size:1.45rem;color:#4b5563}
.photo-list__total strong{color:#2563eb;font-weight:800}
.photo-list__toolbar-right{display:flex;align-items:center;gap:10px}
.photo-list__viewtoggle{display:inline-flex;border:1px solid #e0e5ee;border-radius:9px;overflow:hidden;background:#fff}
.photo-list__viewbtn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:none;background:#fff;color:#94a3b8;font-size:1.45rem;cursor:pointer;transition:all .15s ease}
.photo-list__viewbtn + .photo-list__viewbtn{border-left:1px solid #e0e5ee}
.photo-list__viewbtn:hover{color:#2563eb;background:#f5f8ff}
.photo-list__viewbtn.is-active{background:#2563eb;color:#fff}
.photo-list__write-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:8px;background:#2563eb;color:#fff;font-size:1.4rem;font-weight:700;text-decoration:none;transition:background .15s ease}
.photo-list__write-btn:hover{background:#1d4ed8}

.photo-list__items{list-style:none;margin:0;padding:0;border-top:2px solid #2563eb}

/* 썸네일 공통 */
.photo-list__thumb{position:relative;flex-shrink:0;background:#eef2f8;overflow:hidden}
.photo-list__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-list__thumb img.is-error{display:none}
.photo-list__thumb-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#c2cbd8;font-size:3rem}
.photo-list__count{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;background:rgba(17,24,39,.72);color:#fff;font-size:1.2rem;font-weight:700}

.photo-list__title{margin:0;font-size:1.55rem;font-weight:700;color:#1f2937;line-height:1.4;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.photo-list__title-text{overflow:hidden;text-overflow:ellipsis}
.photo-list__icon-secret{color:#9ca3af;font-size:1.25rem}
.photo-list__desc{margin:6px 0 0;font-size:1.35rem;color:#8a94a3;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.photo-list__meta{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:14px;font-size:1.3rem;color:#9aa4b2}
.photo-list__meta-item{display:inline-flex;align-items:center;gap:5px}
.photo-list__meta-item--comment{color:#2563eb;font-weight:700}

.photo-list__badge{display:inline-flex;align-items:center;justify-content:center;font-weight:700;line-height:1;vertical-align:middle}
.photo-list__badge--notice{height:24px;padding:0 9px;border:1px solid #2563eb;border-radius:999px;background:#fff;color:#2563eb;font-size:1.2rem}
.photo-list__badge--category{height:24px;padding:0 9px;border-radius:6px;background:#e0e7ff;color:#4338ca;font-size:1.2rem}
.photo-list__badge--new{width:20px;height:20px;border-radius:5px;background:#2563eb;color:#fff;font-size:1.15rem;font-weight:800}

/* 목록형 레이아웃 */
.photo-list__items--list .photo-list__item{display:flex;gap:20px;padding:20px 6px;border-bottom:1px solid #eef1f6;cursor:pointer;transition:background .12s ease}
.photo-list__items--list .photo-list__item:hover{background:#f5f8ff}
.photo-list__items--list .photo-list__item:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.photo-list__items--list .photo-list__thumb{width:200px;height:126px;border-radius:10px}
.photo-list__items--list .photo-list__body{flex:1;min-width:0}
.photo-list__items--list .photo-list__item:hover .photo-list__title-text{color:#2563eb}

/* 갤러리형 레이아웃 */
.photo-list__items--gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px;padding-top:24px}
.photo-list__items--gallery .photo-list__item{display:flex;flex-direction:column;border:1px solid #eceff4;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}
.photo-list__items--gallery .photo-list__item:hover{box-shadow:0 8px 20px rgba(15,23,42,.1);transform:translateY(-2px)}
.photo-list__items--gallery .photo-list__item:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.photo-list__items--gallery .photo-list__thumb{width:100%;aspect-ratio:4/3}
.photo-list__items--gallery .photo-list__body{padding:14px 14px 16px}
.photo-list__items--gallery .photo-list__title{font-size:1.45rem}
.photo-list__items--gallery .photo-list__desc{display:none}
.photo-list__items--gallery .photo-list__meta{gap:10px;font-size:1.25rem}

.photo-list__empty{padding:64px 16px;text-align:center;color:#9aa4b2;font-size:1.45rem;list-style:none}
.photo-list__empty i{display:block;margin-bottom:10px;font-size:2.8rem;opacity:.5}

.photo-list__paging{margin-top:26px}
.photo-list__paging .pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.photo-list__paging .pg-btn,.photo-list__paging .pg-num{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border:1px solid #e0e5ee;border-radius:8px;background:#fff;color:#64748b;font-size:1.35rem;font-weight:600;cursor:pointer;transition:all .15s ease}
.photo-list__paging .pg-btn:hover,.photo-list__paging .pg-num:hover{border-color:#2563eb;color:#2563eb;background:#eff6ff}
.photo-list__paging .pg-num.active{background:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.3)}

@media (max-width:1023px){
	.photo-list__items--gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
	.photo-list__search{gap:8px;margin-bottom:18px}
	.photo-list__search-input{height:44px;font-size:1.45rem}
	.photo-list__search-btn{width:50px;height:44px}
	.photo-list__items--gallery{grid-template-columns:repeat(2,1fr);gap:16px 12px}
	.photo-list__items--list .photo-list__item{gap:12px;padding:14px 2px}
	.photo-list__items--list .photo-list__thumb{width:120px;height:84px}
	.photo-list__items--list .photo-list__title{font-size:1.45rem}
	.photo-list__items--list .photo-list__desc{display:none}
	.photo-list__meta{gap:10px}
}

/* --------------------------------------------------------------------
   FAQ게시판 목록(tong/board/faq_list.html) - 열린광장 시안 기반. 질문 클릭 → 답변 아코디언. */
.faq-list{width:100%;font-family:inherit}
.faq-list__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}

.faq-list__search{display:flex;gap:10px;margin:0 0 20px;width:100%}
.faq-list__search-input{flex:1;min-width:0;height:50px;padding:0 18px;border:1px solid #cdd5e0;border-radius:10px;font-size:1.5rem;color:#1f2937;background:#fff}
.faq-list__search-input::placeholder{color:#9aa4b2}
.faq-list__search-input:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.faq-list__search-btn{flex-shrink:0;width:58px;height:50px;border:none;border-radius:10px;background:#4f46e5;color:#fff;font-size:1.6rem;cursor:pointer;transition:background .15s ease}
.faq-list__search-btn:hover{background:#4338ca}

.faq-list__filterbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.faq-list__chips{display:flex;flex-wrap:wrap;gap:8px}
.faq-list__chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border:1px solid #e2e6ee;border-radius:999px;background:#fff;color:#64748b;font-size:1.35rem;font-weight:600;text-decoration:none;transition:all .15s ease}
.faq-list__chip:hover{border-color:#4f46e5;color:#4f46e5}
.faq-list__chip.is-active{background:#4f46e5;border-color:#4f46e5;color:#fff}
.faq-list__chip-ico{font-size:1.2rem;opacity:.9}
.faq-list__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.faq-list__total{font-size:1.4rem;color:#64748b;white-space:nowrap}
.faq-list__total strong{color:#4f46e5;font-weight:800}
.faq-list__write-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:8px;background:#4f46e5;color:#fff;font-size:1.4rem;font-weight:700;text-decoration:none}
.faq-list__write-btn:hover{background:#4338ca}

.faq-list__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.faq-list__item{border:1px solid #e8ebf2;border-radius:12px;background:#fff;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.faq-list__item.is-open{border-color:#c7d0f7;box-shadow:0 4px 14px rgba(79,70,229,.08)}

.faq-list__q{width:100%;display:flex;align-items:center;gap:12px;padding:18px 20px;border:none;background:transparent;cursor:pointer;text-align:left;font-size:1.5rem;color:#1f2937}
.faq-list__mark{flex-shrink:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:800;font-size:1.4rem}
.faq-list__mark--q{background:#4f46e5;color:#fff}
.faq-list__mark--a{background:#e6e9fb;color:#4f46e5}
.faq-list__cat-tag{flex-shrink:0;height:24px;padding:0 10px;display:inline-flex;align-items:center;border-radius:6px;background:#eef0fb;color:#4f46e5;font-size:1.2rem;font-weight:700}
.faq-list__q-text{flex:1;min-width:0;font-weight:600}
.faq-list__comment-cnt{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;color:#4f46e5;font-size:1.3rem;font-weight:700}
.faq-list__chevron{flex-shrink:0;color:#9aa4b2;font-size:1.35rem;transition:transform .2s ease}
.faq-list__item.is-open .faq-list__chevron{transform:rotate(180deg)}

.faq-list__a{display:none;gap:12px;padding:0 20px 20px;align-items:flex-start}
.faq-list__item.is-open .faq-list__a{display:flex}
.faq-list__a-body{flex:1;min-width:0;padding:14px 16px;background:#f8f9fd;border-radius:10px;font-size:1.4rem;line-height:1.7;color:#4b5563}
.faq-list__a-text{white-space:pre-wrap;word-break:break-word;margin:0}
.faq-list__a-html{word-break:break-word}
.faq-list__a-html :first-child{margin-top:0}
.faq-list__a-html :last-child{margin-bottom:0}

.faq-list__empty{padding:64px 16px;text-align:center;color:#9aa4b2;font-size:1.45rem}
.faq-list__empty i{display:block;margin-bottom:10px;font-size:2.8rem;opacity:.5}

.faq-list__paging{margin-top:26px}
.faq-list__paging .pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.faq-list__paging .pg-btn,.faq-list__paging .pg-num{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border:1px solid #e0e5ee;border-radius:8px;background:#fff;color:#64748b;font-size:1.35rem;font-weight:600;cursor:pointer;transition:all .15s ease}
.faq-list__paging .pg-btn:hover,.faq-list__paging .pg-num:hover{border-color:#4f46e5;color:#4f46e5;background:#eef0fb}
.faq-list__paging .pg-num.active{background:#4f46e5;border-color:#4f46e5;color:#fff;box-shadow:0 2px 6px rgba(79,70,229,.3)}

@media (max-width:767px){
	.faq-list__search-input{height:46px;font-size:1.45rem}
	.faq-list__search-btn{width:52px;height:46px}
	.faq-list__filterbar{gap:10px}
	.faq-list__chip{height:34px;padding:0 12px;font-size:1.3rem}
	.faq-list__q{padding:15px 14px;gap:9px;font-size:1.4rem}
	.faq-list__a{padding:0 14px 16px}
}

@media only screen and (max-width:768px){
.office-chart-row{grid-template-columns:1fr}
.office-chart-donut-row{flex-direction:column;align-items:stretch}
.office-select-all-row{flex-direction:column;align-items:flex-start}
.office-bulk-bar{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   내 프로필 모달 공용 컴포넌트 (관리자/이용자 화면 공통, profile_modal.html)
   탭(계정 정보 / 비밀번호 변경) 구조 + 라벨-값 가로 정렬 Card UI
   ========================================================================== */
.profile-modal__overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:1000;align-items:center;justify-content:center;padding:20px}
.profile-modal__overlay.is-open{display:flex}
.profile-modal__box{background:#fff;border-radius:16px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(15,23,42,.3)}
.profile-modal__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 12px;position:sticky;top:0;background:#fff;z-index:1}
.profile-modal__head h3{margin:0;font-size:1.7rem;font-weight:700;color:#0F172A;display:flex;align-items:center;gap:8px}
.profile-modal__close{background:transparent;border:none;font-size:1.8rem;color:#94A3B8;cursor:pointer;padding:4px}
.profile-modal__close:hover{color:#0F172A}

.profile-modal__tabs{display:flex;gap:4px;padding:0 24px;border-bottom:1px solid #E2E8F0}
.profile-modal__tab{flex:1;background:transparent;border:none;border-bottom:2px solid transparent;padding:10px 4px;font-size:1.4rem;font-weight:600;color:#94A3B8;cursor:pointer}
.profile-modal__tab.is-active{color:#2563EB;border-bottom-color:#2563EB}

.profile-modal__body{padding:20px 24px 24px}
.profile-modal__panel{display:none}
.profile-modal__panel.is-active{display:block}

.profile-modal__card{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:16px;margin-bottom:14px}
.profile-modal__card:last-of-type{margin-bottom:0}
.profile-modal__group-title{font-size:1.3rem;font-weight:700;color:#2563EB;margin-bottom:10px}
.profile-modal__row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.profile-modal__row:last-child{margin-bottom:0}
.profile-modal__row--stack{flex-direction:column;align-items:stretch;gap:6px}
.profile-modal__label{flex:0 0 78px;font-size:1.3rem;font-weight:600;color:#475569;white-space:nowrap}
.profile-modal__row--stack .profile-modal__label{flex:0 0 auto}
.profile-modal__value{flex:1;min-width:0;font-size:1.4rem;font-weight:600;color:#0F172A;word-break:break-all}
.profile-modal__input{flex:1;min-width:0;height:38px;padding:0 10px;border:1px solid #D1D5DB;border-radius:8px;font-size:1.4rem;color:#0F172A;background:#fff}
.profile-modal__input:focus{outline:none;border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.profile-modal__row--stack .profile-modal__input{width:100%;box-sizing:border-box}
.profile-modal__row--stack .pwd-field{width:100%}
.profile-modal__row--stack .pwd-field .profile-modal__input{width:100%}

.profile-modal__foot{margin-top:16px}
.profile-modal__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border-radius:10px;font-size:1.5rem;font-weight:700;cursor:pointer;border:none}
.profile-modal__btn--primary{background:#2563EB;color:#fff}
.profile-modal__btn--primary:hover{background:#1D4ED8}

@media only screen and (min-width:1024px){
.profile-modal__box{max-width:560px}
}

/* ==========================================================================
   문의전화 안내 모달 공용 컴포넌트 (메인화면 공통, contact_modal.html)
   전화번호 + 요일별 운영시간 표 + 안내 문구로 구성된 정적 안내 팝업
   ========================================================================== */
.contact-modal__overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:1000;align-items:center;justify-content:center;padding:20px}
.contact-modal__overlay.is-open{display:flex}
.contact-modal__box{background:#fff;border-radius:16px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(15,23,42,.3)}

.contact-modal__head{position:relative;padding:22px 24px 14px;text-align:center;border-bottom:1px solid #E2E8F0}
.contact-modal__head h3{margin:0;font-size:2rem;font-weight:700;color:#0F172A}
.contact-modal__close{position:absolute;top:16px;right:16px;background:transparent;border:none;font-size:1.8rem;color:#94A3B8;cursor:pointer;padding:4px}
.contact-modal__close:hover{color:#0F172A}

.contact-modal__body{padding:24px}

.contact-modal__tel{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px}
.contact-modal__tel-icon{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:#2563EB;color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem}
.contact-modal__tel-num{font-size:2.6rem;font-weight:800;color:#1D4ED8;letter-spacing:.2px}

.contact-modal__table{list-style:none;margin:0 0 18px;padding:0;border:1px solid #E2E8F0;border-radius:12px;overflow:hidden}
.contact-modal__row{display:flex;align-items:stretch;border-bottom:1px solid #E2E8F0}
.contact-modal__row:last-child{border-bottom:none}
.contact-modal__row-label{flex:0 0 42%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 8px;background:#F8FAFC;color:#475569;font-size:1.6rem;font-weight:600;border-right:1px solid #E2E8F0}
.contact-modal__row-label i{color:#2563EB;font-size:1.3rem}
.contact-modal__row-value{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 8px;color:#0F172A;font-size:1.5rem;font-weight:600}

.contact-modal__notice{display:flex;align-items:flex-start;gap:10px;background:#EFF6FF;border-radius:10px;padding:14px 16px;margin-bottom:20px}
.contact-modal__notice i{flex:0 0 auto;margin-top:2px;color:#2563EB;font-size:1.4rem}
.contact-modal__notice p{margin:0;font-size:1.4rem;line-height:1.5;color:#475569}

.contact-modal__btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border-radius:10px;background:#2563EB;color:#fff;font-size:1.5rem;font-weight:700;border:none;cursor:pointer}
.contact-modal__btn:hover{background:#1D4ED8}

@media only screen and (min-width:1024px){
.contact-modal__box{max-width:480px}
}

/* ===================================================================
   독립 콘텐츠(tong.content) 단일 게시 화면 : /content/page.do 및 관리자
   미리보기 팝업(contentPreview.do)이 동일한 레이아웃을 공유한다.
   게시판(.bbs-*)과 동일한 모바일 우선 톤(파란 그라디언트 상단바 + 흰 카드)
   =================================================================== */
.content-page{min-height:100vh;background:#F7F9FD;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
.content-page *{box-sizing:border-box}

.content-topbar{width:100%;background:linear-gradient(135deg,#2451c7,#1a3a8f);color:#fff}
.content-topbar-inner{width:100%;max-width:720px;margin:0 auto;padding:18px 16px;display:flex;align-items:center;gap:10px}
.content-back-btn{flex-shrink:0;min-width:38px;min-height:38px;border:none;background:rgba(255,255,255,.16);color:#fff;border-radius:10px;font-size:1.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.content-topbar-title{flex:1;text-align:center;font-size:2.2rem;font-weight:900;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content-topbar-spacer{flex-shrink:0;min-width:38px}

.content-container{width:100%;max-width:720px;margin:0 auto;padding:16px 16px 96px}

.content-view-card{background:#fff;border-radius:14px;padding:20px 18px}
.content-view-title{font-size:2rem;font-weight:900;color:#111827;margin:0 0 12px;line-height:1.4;background:#EDF4FA;padding:10px 20px;border-radius:14px}
.content-view-body{font-size:1.5rem;line-height:1.8;color:#1f2937;word-break:break-word}
.content-view-body img{max-width:100%;height:auto;border-radius:8px}
.content-view-body table{max-width:100%;border-collapse:collapse}
.content-view-body a{color:#1d4ed8}

/* content-view-body 안(CKEditor 본문)의 첫/마지막 자식이 자체 margin을 가지고 있어도
   카드 padding과 겹쳐 상하 여백이 이중으로 쌓이지 않도록 바깥쪽 margin만 상쇄한다. */
.content-view-body > :first-child{margin-top:0}
.content-view-body > :last-child{margin-bottom:0}

/* tong/layout/layout.html(서브페이지) 안에서 content-view-card를 재사용하는 경우 전용 처리.
   .content-view-card는 원래 회색 배경(.content-page) 위에 흰 카드를 띄우는 독립 팝업
   (content_preview_pop.html) 전용으로 만들어졌다. 서브페이지는 이미 흰 body 위에서
   sub-content(상하)+sub-content__inner(좌우)가 페이지 레벨 여백을 전부 담당하므로,
   같은 흰 배경 위에 안 보이는 카드 배경/그림자와 그 자체 패딩까지 겹치면 상하좌우 여백이
   3중으로 쌓인다. 이 컨텍스트에서는 카드 비주얼을 걷어내고 페이지 여백만 남긴다. */
.sub-content__inner .content-view-card{background:none;border-radius:0;padding:0}

/* 관리자 미리보기 팝업 전용 안내 배너 */
.content-preview-banner{background:#fef3c7;color:#92400e;font-size:1.3rem;font-weight:700;text-align:center;padding:10px 16px}

@media (min-width:768px){
	.content-topbar-inner{max-width:1240px;padding:22px 24px}
	.content-container{max-width:1240px;padding:28px 24px 56px}
	.content-view-card{padding:32px 36px}
	.content-view-title{font-size:2.4rem}
}

/* --------------------------------------------------------------------------
   콘텐츠 상세(content_page.html) : 소셜 공유 + 인쇄 바
   - 화면에서는 카드 상단에 노출되고, 인쇄 시(@media print)에는 숨긴다.
   - .content-print-title / .content-print-meta 는 화면에서는 숨기고 인쇄 시에만 노출한다.
   - 클래스명 충돌 방지를 위해 화면 고유 Prefix(content-share) + BEM 네이밍을 적용한다.
   -------------------------------------------------------------------------- */
.content-share{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin:0;padding:0;background:none;border:0}
.content-share__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 12px;border:1px solid #d7dee7;border-radius:9px;background:#fff;color:#334155;font-size:1.3rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.content-share__btn:hover{background:#f1f5f9;border-color:#94a3b8}
.content-share__btn:focus-visible{outline:2px solid #0f766e;outline-offset:2px}
.content-share__btn i{font-size:1.5rem;line-height:1}
.content-share__btn--naver:hover{background:#03c75a;border-color:#03c75a;color:#fff}
.content-share__btn--x:hover{background:#000;border-color:#000;color:#fff}
.content-share__btn--facebook:hover{background:#1877f2;border-color:#1877f2;color:#fff}
.content-share__btn--copy:hover{background:#e0f2fe;border-color:#38bdf8;color:#075985}
.content-share__btn--print{order:2;background:#0f766e;border-color:#0f766e;color:#fff}
.content-share__btn--print:hover{background:#0b5c55;border-color:#0b5c55;color:#fff}
.content-print-title,.content-print-meta{display:none}

/* 공유 바는 우측 정렬(.content-share justify-content:flex-end).
   [공유하기] 토글은 order:1 로 인쇄 버튼 바로 좌측에 두고, 펼쳐지는 세부 소셜 버튼(order 기본 0)은
   그보다 더 좌측에 나열되게 한다. → [블로그][X][페북][주소복사] [공유하기] [인쇄] */
.content-share__toggle{order:1}
.content-share__toggle .fa-chevron-down{font-size:1.05rem;transition:transform .15s ease}
.content-share__toggle.is-active{background:#0f766e;border-color:#0f766e;color:#fff}
.content-share__toggle.is-active .fa-chevron-down{transform:rotate(180deg)}
.content-share__group{display:contents}
.content-share__group[hidden]{display:none}

/* 게시글 상세에서 .content-share 를 .sub-content__inner 직속에 둘 때 본문(860px) 폭에 맞춘다 */
@media (min-width:768px){
	.content-share--embedded{max-width:860px;margin-left:auto;margin-right:auto}
	/* 본문을 전체 폭으로 쓰는 상세보기(board_view)에서는 공유/인쇄 바도 동일하게 전체 폭에 맞춘다 */
	.content-share--embedded.content-share--full{max-width:none}
}

@media (max-width:640px){
	.content-share{gap:6px}
	.content-share__btn{flex:1 1 auto;min-width:0;padding:0 8px}
	.content-share__btn-text{display:none}
	.content-share__toggle{flex-basis:100%}
	.content-share__toggle .content-share__btn-text{display:inline}
	.content-share__btn--print{flex-basis:100%}
	.content-share__btn--print .content-share__btn-text{display:inline}
}

/* ==========================================================================
   이용자 메인(main.html) : 상단 유틸바 / 헤더 GNB / 비주얼 슬라이더 / 2행2열 콘텐츠 / 푸터
   PC(1024px 이상)에서 2열 Grid로 확장되며, 그 미만은 모바일 카드 UI로 세로 스택된다.
   GNB(.main-gnb)는 1025px 이상에서 대메뉴 마우스오버/포커스 시 서브메뉴 드롭다운을 노출하고,
   1024px 이하에서는 햄버거 버튼(.main-gnb__hamburger)으로 열리는 오프캔버스 아코디언 메뉴로 전환된다.
   ========================================================================== */
.main-page{background:#fff;color:#1f2937;font-family:'Paperlogy','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}

.main-topbar{background:#f8fafc;border-bottom:1px solid #eef2f7}
.main-topbar__inner{max-width:1200px;margin:0 auto;padding:8px 20px;display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:1.4rem}
.main-topbar__link{color:#64748b;text-decoration:none}
.main-topbar__link:hover{color:#0f766e;text-decoration:underline}
.main-topbar__sep{color:#d1d5db}

.main-header{background:#fff;border-bottom:1px solid #eef2f7;position:relative}
.main-header__inner{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.main-header__logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#111827;font-weight:900;font-size:2rem;flex-shrink:0}
.main-header__logo img{height:34px;width:auto}

/* GNB 공통(모바일 기본값) : 화면 우측에서 슬라이드되는 오프캔버스 드로어 */
.main-gnb{position:fixed;top:0;right:-320px;z-index:1200;width:300px;max-width:85vw;height:100%;height:100dvh;background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.14);overflow-y:auto;-webkit-overflow-scrolling:touch;transition:right .3s ease;padding-bottom:env(safe-area-inset-bottom)}
.main-gnb.is-active{right:0}

.main-gnb__drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eef2f7}
.main-gnb__drawer-title{font-size:1.6rem;font-weight:900;color:#111827}
.main-gnb__drawer-close{width:32px;height:32px;border:none;background:transparent;color:#6b7280;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.main-gnb__drawer-close:hover{color:#111827}

.main-gnb__depth1{list-style:none;margin:0;padding:0}
.main-gnb__depth1-item{border-bottom:1px solid #f1f5f9}
.main-gnb__item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 20px;color:#1f2937;font-weight:700;font-size:1.8rem;text-decoration:none}
.main-gnb__depth2-toggle-icon{font-size:1.3rem;color:#9ca3af;flex-shrink:0;transition:transform .25s ease}
.main-gnb__depth1-item.is-open > .main-gnb__item .main-gnb__depth2-toggle-icon{transform:rotate(180deg)}

.main-gnb__depth2{list-style:none;margin:0;padding:0;background:#f8fafc;display:none}
.main-gnb__depth1-item.is-open > .main-gnb__depth2{display:block}
.main-gnb__depth2-item{display:block;padding:12px 20px 12px 40px;color:#4b5563;font-size:1.4rem;text-decoration:none}
.main-gnb__depth2-item:hover{color:#0f766e}

/* 메가메뉴 카드는 PC 전용이므로 모바일/태블릿 기본값은 숨김 */
.main-gnb__mega{display:none}

/* 모바일 배경 딤 레이어 */
.main-gnb__dim{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1100;opacity:0;visibility:hidden;transition:opacity .3s ease}
.main-gnb__dim.is-active{display:block;opacity:1;visibility:visible}
body.main-gnb-open{overflow:hidden}

/* 모바일/태블릿(1024px 이하) 전용 햄버거 버튼 */
.main-gnb__hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;border:none;background:transparent;cursor:pointer;flex-shrink:0}
.main-gnb__hamburger span{display:block;width:22px;height:2px;background:#1f2937;border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.main-gnb__hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.main-gnb__hamburger.is-active span:nth-child(2){opacity:0}
.main-gnb__hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.main-hero{position:relative;background-size:cover;background-position:center center;color:#fff;overflow:hidden}
.main-hero__track{position:relative;width:100%;aspect-ratio:1920/800;min-height:340px}
.main-hero__slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .7s ease}
.main-hero__slide.is-active{position:relative;opacity:1;visibility:visible}
.main-hero__inner{position:relative;z-index:1;max-width:1200px;width:100%;margin:0 auto;padding:64px 20px 140px}
.main-hero__kicker{margin:0 0 10px;font-size:2.4rem;font-weight:700;color:#1a2e53}
.main-hero__title{margin:0 0 16px;font-family:'Jalnan2',sans-serif;font-size:3.2rem;line-height:1.35;font-weight:400;color:#1a2e53}
.main-hero__title strong{display:block;color:#03479c;font-weight:400}
.main-hero__desc{margin:0;font-size:1.8rem;line-height:1.5;color:#1a2e53}
.main-hero__controls{position:absolute;left:0;right:0;bottom:20px;display:flex;align-items:center;justify-content:center;gap:10px;z-index:2}
.main-hero__ctrl{width:34px;height:34px;border-radius:50%;border:none;background:rgba(15,23,42,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.3rem}
.main-hero__ctrl:hover{background:rgba(15,23,42,.8)}
.main-hero__counter{min-width:64px;text-align:center;padding:8px 14px;border-radius:999px;background:rgba(15,23,42,.55);color:#fff;font-size:1.3rem;font-weight:700}

/* 비주얼 이미지 하단을 물결 모양으로 잘라내는 정적 SVG 디바이더(움직임 없음). g(레이어) 3장을 y만
   다르게 겹쳐서 은은한 입체감을 주고, 맨 앞(g--3)은 흰색 그라데이션(heroWaveGradient)을 채워
   배경 이미지와 자연스럽게 이어지도록 한다. */
.main-hero__wave{position:absolute;left:0;right:0;bottom:-1px;height:90px;line-height:0;overflow:hidden;pointer-events:none}
.main-hero__wave svg{display:block;width:100%;height:100%}
.main-hero__wave-g--1{fill:#fff;opacity:.3}
.main-hero__wave-g--2{fill:#fff;opacity:.55}
.main-hero__wave-g--3{fill:url(#heroWaveGradient)}

.main-grid{position:relative;z-index:10;max-width:1200px;margin:min(calc(400px - 41.667vw), 60px) auto 0;padding:20px 20px 0;display:grid;grid-template-columns:1fr;gap:16px}
.main-grid > *{min-width:0}
.main-grid__col2,.main-grid__col3{display:flex;flex-direction:column;gap:16px}

.main-quick{background:#4a9f78;border-radius:10px;padding:22px 20px;color:#fff;box-shadow:0 10px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.05)}
.main-quick__title{margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.3);font-size:2rem;font-weight:800;text-align:center}
.main-quick__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.main-quick__item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#3d8a68;color:#fff;text-decoration:none;font-size:1.6rem;font-weight:500;white-space:nowrap}
.main-quick__item:hover{background:#357a5b}
.main-quick__item img{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.main-quick__item span{flex:1}

.main-notice{background:#fff;border:1px solid #d6dee9;border-radius:10px;padding:20px;box-shadow:0 10px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.05)}
.main-notice__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;border-bottom:1px solid #f1f5f9}
.main-notice__head h2{margin:0;font-size:2rem;font-weight:800;color:#111827}
.main-notice__more{width:30px;height:30px;border-radius:50%;color:#6b7280;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.3rem}
.main-notice__more:hover{background:#f3f4f6}
/* 게시글이 5개보다 적거나 AJAX 로딩 중이어도 영역이 줄어들지 않도록, 5개 행(=item 1개 36px * 5) 높이를 최소높이로 고정 */
.main-notice__list{list-style:none;margin:0;padding:0;min-height:180px}
.main-notice__item{display:flex;align-items:center;gap:10px;padding:6px 2px}
.main-notice__item .main-notice__title{line-height:1.5}
.main-notice__badge{flex-shrink:0;background:#2563eb;color:#fff;font-size:1.1rem;font-weight:800;padding:3px 8px;border-radius:999px}
.main-notice__badge--notice{background:#dc2626}
.main-notice__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.6rem;color:#1f2937;text-decoration:none}
.main-notice__title:hover{text-decoration:underline}
.main-notice__file{margin-left:4px;font-size:1.1rem;color:#94a3b8}
.main-notice__date{flex-shrink:0;font-size:1.2rem;color:#9ca3af}
.main-notice__empty{padding:20px 2px;text-align:center;color:#9ca3af;font-size:1.4rem}

.main-facility{background:#f3f6fd;border:1px solid #d6dee9;border-radius:10px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.06);flex-grow:1}
.main-facility__title{margin:0 0 16px;font-size:2rem;font-weight:800;color:#111827}
.main-facility__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}
.main-facility__item{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#374151;font-size:1.5rem;font-weight:600;text-align:center;padding:10px 4px;border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(30,58,138,.1);transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease}
.main-facility__item:hover{box-shadow:0 4px 10px rgba(30,58,138,.12);transform:translateY(-2px)}
.main-facility__item img{width:44px;height:44px;object-fit:contain;border-radius:50%;background:#eef2fb;padding:8px;box-sizing:border-box;transition:background-color .15s ease}
.main-facility__item:hover img{background:#bfdbfe}

.main-info{background:#eef4fb;border:1px solid #d6dee9;border-radius:10px;padding:18px;box-shadow:0 10px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.05)}
.main-info__title{margin:0 0 16px;font-size:2rem;font-weight:800;color:#111827}
.main-info__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.main-info__item{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#1e3a8a;font-size:1.5rem;font-weight:600;text-align:center;padding:14px 2px;border-radius:14px;background:#fff;border:1px solid transparent;box-shadow:0 1px 4px rgba(30,58,138,.1);box-sizing:border-box;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.main-info__item:hover{border-color:#93c5fd;box-shadow:0 6px 14px rgba(30,58,138,.2);transform:translateY(-2px)}
.main-info__item img{width:50px;height:50px;object-fit:contain}

.main-schedule{background:linear-gradient(160deg,#1e3a8a,#152a63);border:1px solid #6c83a3;border-radius:10px;padding:20px;color:#fff;flex-grow:1}
.main-schedule__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);gap:8px;flex-wrap:wrap}
.main-schedule__head h2{margin:0;font-size:1.8rem;font-weight:800;display:flex;align-items:baseline;gap:10px}
.main-schedule__date{font-size:1.5rem;font-weight:600;color:#bfdbfe}
.main-schedule__more{color:#bfdbfe;text-decoration:none;font-size:1.3rem;font-weight:700;display:flex;align-items:center;gap:4px}
.main-schedule__more:hover{color:#fff}
.main-schedule__list{list-style:none;margin:0;padding:0}
.main-schedule__item{display:flex;align-items:center;gap:14px;padding:5px 2px;font-size:1.4rem}
.main-schedule__time{flex-shrink:0;width:105px;color:#e2e8f0}
.main-schedule__type{flex-shrink:0;width:72px;color:#5eead4}
.main-schedule__facility{flex:1;text-align:right}
.main-schedule__empty{padding:16px 2px;text-align:center;color:#bfdbfe;font-size:1.3rem}

/* 메인 콘텐츠 카드 순차 슬라이드업(Fade-In Up) 등장 애니메이션.
   .main-grid 하위 카드(빠른메뉴/공지사항/시설안내/이용안내/오늘의 일정)를 DOM 순서대로
   0.1s씩 지연시켜 페이지 로딩 시 아래에서 위로 부드럽게 나타나도록 한다. */
@keyframes mainCardFadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.main-quick,.main-notice,.main-facility,.main-info,.main-schedule{opacity:0;animation:mainCardFadeInUp .6s ease both}
.main-quick{animation-delay:.1s}
.main-notice{animation-delay:.2s}
.main-facility{animation-delay:.3s}
.main-info{animation-delay:.4s}
.main-schedule{animation-delay:.5s}
@media (prefers-reduced-motion: reduce){
	.main-quick,.main-notice,.main-facility,.main-info,.main-schedule{animation:none;opacity:1}
}

/* 아주 넓은 화면(예: 2545px 이상)에서는 .main-hero가 aspect-ratio로 인해 매우 커져서 .main-grid의
   margin-top 겹침만으로는 다 가려지지 않고, 그 뒤(.main-hero__track 등 position:relative 요소)에 깔린
   .main-footer-wave-wrap/.main-footer가 hero 뒤로 가려 보이지 않는 문제가 있었다. 이 두 요소에도
   position+z-index를 명시로 줘서(같은 auto-스택 레벨이라도 DOM 순서만으로는 확실히 이기지 못했다)
   hero 콘텐츠보다 항상 위에 그려지도록 한다. */
.main-footer{position:relative;z-index:1;margin-top:0;background:#1f2937;color:#cbd5e1}

/* 푸터 바로 위 웨이브 구역 : 실제 <svg viewBox preserveAspectRatio="none">라 화면 폭에 관계없이 항상
   이음매/잘림 없이 늘어난다. 원본 웨이브 데이터가 상단 기준이라 뒤집어서(transform:rotate(180deg))
   하단(푸터) 기준으로 쓰고, currentColor로 아래 정책 링크 바(#15244c)와 같은 색을 준다. */
.main-footer__wave-wrap{position:relative;z-index:1;width:100%;height:50px;margin-top:100px;background:#fff;overflow:hidden}
.main-footer__wave-svg{display:block;width:100%;height:100%;color:#15244c;transform:rotate(180deg)}

@media (max-width:1024px){
.main-footer__wave-wrap{height:30px}
}

.main-footer__inner{max-width:1200px;margin:0 auto;padding:15px 20px calc(28px + env(safe-area-inset-bottom))}

.main-footer__links{width:100%;background:#15244c}
.main-footer__links-inner{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;flex-wrap:wrap;gap:14px;font-size:1.4rem}
.main-footer__links a{color:#e5e7eb;text-decoration:none;font-weight:700}
.main-footer__links a:first-child{color:#efc00e}
.main-footer__links a:hover{color:#fff}
.main-footer__body{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.main-footer__brand-group{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.main-footer__brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.main-footer__brand img{height:26px;width:auto}
.main-footer__brand span{color:#fff;font-size:1.8rem;font-weight:800}
.main-footer__addr{font-size:1.4rem;line-height:1.7;color:#9ca3af}
.main-footer__addr-tel{display:inline}

@media (max-width:600px){
.main-footer__addr-tel{display:block}
}
/* 관련기관(패밀리사이트) 드롭다운 : 푸터 하단에 있어 위쪽으로 펼쳐진다. 관리자 [패밀리사이트 관리]
   등록 데이터(familySiteList)를 서버 렌더링하며, 토글 JS는 footer.html 프래그먼트에 포함돼 있다. */
.main-footer__family{position:relative;flex-shrink:0}
.main-footer__family-toggle{display:inline-flex;align-items:center;gap:8px;background:#374151;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px 14px;font-size:1.3rem;line-height:1.2;cursor:pointer;transition:background .15s}
.main-footer__family-toggle:hover{background:#4b5563}
.main-footer__family-arrow{font-size:1.1rem;transition:transform .2s}
.main-footer__family.is-open .main-footer__family-arrow{transform:rotate(180deg)}
.main-footer__family-list{position:absolute;right:0;bottom:calc(100% + 8px);min-width:200px;max-height:280px;overflow-y:auto;margin:0;padding:6px 0;list-style:none;background:#374151;border:1px solid rgba(255,255,255,.16);border-radius:8px;box-shadow:0 -6px 20px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:20}
.main-footer__family.is-open .main-footer__family-list{opacity:1;visibility:visible;transform:translateY(0)}
.main-footer__family-list li{margin:0;padding:0}
.main-footer__family-list a{display:block;padding:9px 16px;color:#e5e7eb;font-size:1.3rem;text-decoration:none;white-space:nowrap}
.main-footer__family-list a:hover{background:#4b5563;color:#fff}
.main-footer__family-list a.is-empty{color:#9ca3af;cursor:default}
.main-footer__family-list a.is-empty:hover{background:transparent;color:#9ca3af}

@media (max-width:600px){
	.main-footer__family{width:100%}
	.main-footer__family-toggle{width:100%;justify-content:space-between}
	.main-footer__family-list{left:0;right:0;min-width:0}
}

@media (max-width:1024px){
	/* .main-hero__track는 aspect-ratio:1920/800에 min-height:340px가 함께 걸려 있어, 816px 미만 폭에서는
	   높이가 340px로 고정되고, 816~1024px 구간도 데스크톱용 padding(64px/140px)을 감당할 만큼 충분히
	   자라지 못한다. 이 구간 전체(= main-gnb 등 다른 곳에서도 "모바일"로 취급하는 1024px 이하)에서는
	   padding을 줄여 콘텐츠가 .main-hero(overflow:hidden) 밖으로 잘리지 않게 한다. */
	.main-hero__inner{padding:24px 20px 64px}
	.main-hero__desc-break{display:none}
	.main-hero__wave{height:50px}
	.main-grid{margin-top:0}

	/* .main-quick__item의 white-space:nowrap은 PC에서 한 줄 정렬을 위한 것인데, 모바일 그리드(1열)에서는
	   이 nowrap 때문에 항목 폭이 줄어들지 못해 .main-grid 트랙 전체가 화면 밖으로 밀려나면서 우측 여백이
	   사라지는 원인이 되므로 모바일에서는 줄바꿈을 허용한다. */
	.main-quick__item{white-space:normal}

	/* 이용안내 항목명은 음절 단위로 아무 데서나 잘리지 않고 "이용자 / 준수사항"처럼 어절(단어) 단위로만
	   줄바꿈되게 한다. */
	.main-info__item span{word-break:keep-all}

	/* 시설안내/이용안내 : 모바일에서는 4열 아이콘 카드 대신, 좌측 아이콘 + 우측 문구가 한 줄로 나오는
	   1열 리스트로 전환한다. */
	.main-facility__grid,.main-info__grid{grid-template-columns:1fr;gap:8px}
	.main-facility__item,.main-info__item{flex-direction:row;justify-content:flex-start;text-align:left;padding:10px 12px}
	.main-facility__item img,.main-info__item img{width:32px;height:32px;flex-shrink:0}

	/* 오늘의 일정 : 모바일에서는 시간/구분 칸의 폭을 고정하지 않고, 내용만큼만 차지한 뒤 약간의 여백만 두어
	   한 줄에 자연스럽게 나오게 한다. */
	.main-schedule__item{gap:8px}
	.main-schedule__time,.main-schedule__type{width:auto;margin-right:4px;white-space:nowrap}
	.main-schedule__facility{min-width:0}
}

@media (max-width:359px){
	.main-hero__kicker{font-size:2rem}
	.main-hero__title{font-size:2.6rem}
	.main-hero__desc{font-size:1.5rem}
}

@media (min-width:1025px){
	/* PC : GNB를 헤더 안쪽 정적 레이아웃으로 되돌리고, 대메뉴 하나에 마우스오버/포커스 시 전체 대메뉴의 서브메뉴를
	   1:1 컬럼으로 정렬한 하나의 메가메뉴 카드(.main-gnb__mega)로 함께 노출한다. 모바일 아코디언용 .main-gnb__depth2는
	   PC에서 쓰지 않으므로 숨긴다. */
	.main-gnb{position:relative;top:auto;right:auto;z-index:auto;width:auto;max-width:none;height:auto;background:transparent;box-shadow:none;overflow:visible;transition:none;padding-bottom:0}
	.main-gnb__drawer-head,.main-gnb__hamburger,.main-gnb__dim{display:none}

	.main-gnb__depth1{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
	.main-gnb__depth1-item{position:relative;border-bottom:none}
	.main-gnb__item{padding:4px 30px 6px;font-size:2.2rem;font-weight:700;border-bottom:2px solid transparent}
	.main-gnb__item:hover{color:#0f766e}
	.main-gnb__depth1-item:hover > .main-gnb__item,
	.main-gnb__depth1-item:focus-within > .main-gnb__item{color:#2563eb;border-bottom-color:#2563eb}
	.main-gnb__depth2-toggle-icon,.main-gnb__depth2{display:none}

	/* 메가메뉴 카드 : 헤더 바로 아래에 전체 폭으로 걸쳐 노출되는 흰색 카드 */
	.main-gnb__mega{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:14px;box-shadow:0 20px 45px rgba(15,23,42,.14);padding:28px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;z-index:50}
	.main-gnb:hover .main-gnb__mega,
	.main-gnb:focus-within .main-gnb__mega{opacity:1;visibility:visible;transform:translateY(0)}
	.main-gnb__mega-inner{display:flex}
	.main-gnb__mega-col{flex:1;min-width:0;padding:0 25px;border-right:1px solid #f1f5f9}
	.main-gnb__mega-col:last-child{border-right:none}
	.main-gnb__mega-link{display:block;padding:8px 0;color:#374151;font-size:1.5rem;text-decoration:none}
	.main-gnb__mega-link:hover{color:#2563eb}

	.main-hero__title{font-size:4.4rem}
	.main-hero__controls{top:346px;bottom:auto}
	.main-grid{display:flex;align-items:flex-start;padding:28px 20px 0}
	.main-grid > .main-quick{flex:0 0 auto;align-self:stretch}
	.main-grid > .main-grid__col2{flex:4;min-width:0;align-self:stretch}
	.main-grid > .main-grid__col3{flex:5;min-width:0;align-self:stretch}
}

/* ==========================================================================
   이용자 서브페이지 공통 레이아웃(tong/layout/layout.html) : 센터소개/시설안내/이용안내 등
   GNB 대메뉴 하위 모든 페이지가 공유한다.
   구성 : 서브 비주얼(히어로, 대메뉴별 배경 전환) → 서브메뉴 탭(비주얼에 절반 겹침) →
          콘텐츠 영역(가변, 페이지마다 다름) → 우측 고정 퀵메뉴(PC 전용) / 준비중 화면
   ========================================================================== */

/* 서브 비주얼(히어로) : 기본값은 메인과 같은 수영장 이미지를 옅은 흰색 그라디언트로 덮어 좌측 텍스트 가독성을 확보한다.
   대메뉴별 이미지는 아래 .sub-visual--menu{menuId} 수정자로 덮어쓴다(관리자에서 대메뉴 추가 시 menuId에 맞춰 규칙 추가). */
.sub-visual{position:relative;min-height:220px;display:flex;align-items:center;background-color:#EDF4FA;background-image:url('/img/bg_sub.png');background-size:80%;background-repeat:no-repeat;background-position:right top;overflow:hidden;color:#111827}
.sub-visual::before{content:'';position:absolute;inset:0;pointer-events:none}
.sub-visual__inner{position:relative;z-index:1;max-width:1200px;width:100%;margin:0 auto;padding:56px 20px 64px}
.sub-visual__title-box{max-width:640px}
.sub-visual__title{margin:0 0 12px;font-size:2.6rem;font-weight:900;color:#111827;line-height:1.3}
.sub-visual__desc{margin:0 0 20px;font-size:1.4rem;line-height:1.6;color:#4b5563;word-break:keep-all}

.sub-visual__breadcrumb{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(4px);font-size:1.3rem;color:#374151;border:1px solid #DDE6F2;box-shadow:0 2px 8px rgba(15,23,42,.08)}
.sub-visual__breadcrumb-home{display:flex;align-items:center;color:#6b7280;text-decoration:none}
.sub-visual__breadcrumb-home:hover{color:#0284c7}
.sub-visual__breadcrumb-sep{font-size:1rem;color:#9ca3af}
.sub-visual__breadcrumb-item{color:#374151}
.sub-visual__breadcrumb-item:last-child{color:#0056b3;font-weight:700}

/* 대메뉴별 배경 이미지 전환 예시(센터소개=연혁 이미지) : 다른 대메뉴가 생기면 실제 menuId로 같은 방식으로 추가 */
.sub-visual--menu1{background-image:url('/img/bg_history.png')}

/* 서브메뉴 탭 : 비주얼 영역 하단에 절반 겹쳐 입체감 있게 배치 */
.sub-tabmenu{position:relative;z-index:5;margin-top:-30px}
.sub-tabmenu__inner{max-width:1200px;margin:0 auto;padding:0 20px;text-align:center}
.sub-tabmenu__list{list-style:none;margin:0 auto;padding:6px;display:flex;justify-content:center;gap:4px;overflow-x:auto;background:#fff;border-radius:14px;box-shadow:0 10px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.05);-webkit-overflow-scrolling:touch}
.sub-tabmenu__item{flex:0 0 auto}
.sub-tabmenu__link{display:block;padding:12px 18px;border-radius:10px;font-size:1.4rem;font-weight:700;color:#4b5563;text-decoration:none;white-space:nowrap;text-align:center}
.sub-tabmenu__link:hover{background:#f1f5f9}
.sub-tabmenu__item.is-active .sub-tabmenu__link{background:#0059A9;color:#fff}

/* 콘텐츠 영역 : 실제 본문(게시판/단일콘텐츠/예약폼 등)은 각 서브페이지가 pageContent 조각으로 채운다 */
.sub-content{padding:36px 0 72px;min-height:320px}
.sub-content__inner{max-width:1200px;margin:0 auto;padding:0 20px}

/* 우측 고정 퀵메뉴 : 모바일은 본문을 가릴 만큼 폭이 좁아 PC(1025px 이상)에서만 노출한다 */
.sub-quickmenu{display:none}

/* 준비중 화면(연결 링크 없음 / 콘텐츠 없음 공용 Fallback) */
.sub-preparing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;background:#fff;border-radius:14px}
.sub-preparing__img{margin-bottom:24px}
.sub-preparing__menu-name{margin:0 0 8px;font-size:3.5rem;font-weight:700;color:#2C6AD9;letter-spacing:.02em}
.sub-preparing__text{margin:0;font-size:3rem;font-weight:700;color:#374151;line-height:1.6}
.sub-preparing__highlight{color:#2C6AD9}

@media (max-width:767px){
	.sub-preparing__img{width:180px;max-width:60%;height:auto}

	/* sub-visual/sub-tabmenu/sub-content의 기본값은 PC 화면 비중을 기준으로 잡힌 px라서,
	   뷰포트가 작은 폰에서는 실제 콘텐츠가 나오기 전까지 헤더+비주얼+탭메뉴+콘텐츠 상단
	   패딩만으로 화면 절반 이상을 차지해 콘텐츠가 화면에 거의 안 보이는 문제가 있었다.
	   폰 전용으로 비주얼 높이/패딩과 콘텐츠 상하 패딩을 줄여 첫 화면에 실제 콘텐츠가
	   보이도록 한다. */
	.sub-visual{min-height:0}
	.sub-visual__inner{padding:28px 20px 36px}
	.sub-visual__title{font-size:2.2rem;margin-bottom:8px}
	.sub-visual__desc{margin-bottom:14px}

	.sub-content{padding:20px 0 48px}

	/* 서브메뉴 탭 : 폰에서는 가로 슬라이드(스크롤) 대신 줄바꿈으로 모든 항목을 한눈에 노출한다. */
	.sub-tabmenu__list{flex-wrap:wrap;overflow-x:visible;gap:6px;row-gap:6px}
	.sub-tabmenu__item{flex:0 1 auto}
	.sub-tabmenu__link{padding:10px 14px;font-size:1.5rem;white-space:normal}
}

@media (min-width:1025px){
	.sub-visual{min-height:330px}
	.sub-visual__inner{padding:80px 20px 96px}
	.sub-visual__title{font-size:4rem;font-weight:700}
	.sub-visual__desc{font-size:1.6rem}
	.sub-visual__breadcrumb{font-size:1.4rem}

	.sub-tabmenu{margin-top:-36px}
	.sub-tabmenu__list{display:inline-flex;padding:8px}
	.sub-tabmenu__link{padding:14px 28px;font-size:1.8rem}

	.sub-content{padding:56px 0 100px}

	.sub-quickmenu{display:flex;flex-direction:column;position:fixed;right:20px;bottom:20px;z-index:99;width:132px;background:#fff;border-radius:16px;box-shadow:0 20px 45px rgba(15,23,42,.14);overflow:hidden}
	.sub-quickmenu__head{padding:14px 10px;text-align:center;font-size:1.2rem;font-weight:900;letter-spacing:.05em;color:#fff;background:#0056b3}
	.sub-quickmenu__list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px}
	.sub-quickmenu__item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:10px;color:#374151;text-decoration:none;font-size:1.4rem;font-weight:600;text-align:center}
	.sub-quickmenu__item img{width:40px;height:40px;object-fit:contain}
	.sub-quickmenu__item:hover{background:#eff6ff}
	.sub-quickmenu__top{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:12px 6px;border:none;border-top:1px solid #f1f5f9;background:#0056b3;color:#fff;font-size:1.1rem;font-weight:900;cursor:pointer}
	.sub-quickmenu__top i{font-size:1.4rem}
	.sub-quickmenu__top:hover{background:#004494}
}

/* ==========================================
   메인페이지 비주얼 영역 hero-waves 스타일
   ========================================== */
.hero-waves{display:block;width:100%;height:60px;z-index:5;position:absolute;right:0;left:0;bottom:0;pointer-events:none}
@media screen and (min-width: 1700px) {
    .hero-waves{height:80px}
}
@media screen and (max-width: 768px) {
    .hero-waves{height:40px}
}
.wave1 use{fill:rgba(255, 255, 255, 0.15);animation:move-forever1 10s linear infinite;animation-delay:-2s}
.wave2 use{fill:rgba(255, 255, 255, 0.3);animation:move-forever2 8s linear infinite;animation-delay:-2s}
.wave3 use{fill:rgba(255, 255, 255, 1);animation:move-forever3 6s linear infinite;animation-delay:-2s}
@keyframes move-forever1 {
    0%{transform:translate3d(85px, 0, 0)}
    100%{transform:translate3d(-90px, 0, 0)}
}
@keyframes move-forever2 {
    0%{transform:translate3d(-90px, 0, 0)}
    100%{transform:translate3d(85px, 0, 0)}
}
@keyframes move-forever3 {
    0%{transform:translate3d(-90px, 0, 0)}
    100%{transform:translate3d(85px, 0, 0)}
}
/* ==========================================
   이용자 사이트맵 콘텐츠 영역 (/sitemap.do, tong/sitemap/sitemap.html)
   상단 헤더/서브 비주얼/브레드크럼/푸터는 tong/layout/layout.html 공통 렌더링.
   여기서는 sub-content__inner 안에 들어가는 "메뉴 노출 영역"만 스타일링한다.
   - 모바일(~640px) : 대메뉴 1열
   - 태블릿(641~1023px) : 2열 Grid
   - PC(1024px+) : 4열 Grid
   BEM prefix : sitemap-
   ========================================== */

/* 대메뉴 카드 그리드 : PC 4열 */
.sitemap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px}
.sitemap-grid>*{min-width:0}
.sitemap-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:32px 24px;box-shadow:0 4px 15px rgba(0,0,0,.02);display:flex;flex-direction:column;align-items:center;transition:transform .25s ease,box-shadow .25s ease}
.sitemap-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,.06)}
.sitemap-card__icon{width:60px;height:60px;border-radius:50%;background:#f0f7ff;border:1px solid #dbeafe;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}
.sitemap-card__icon i{font-size:2.6rem;color:#1d4ed8;line-height:1}
.sitemap-card__title{font-size:1.84rem;font-weight:700;color:#1e3a8a;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #f1f5f9;width:100%;text-align:center}
.sitemap-card__title a{text-decoration:none;transition:color .2s ease}
.sitemap-card__title a:hover{color:#1d4ed8;text-decoration:none}
.sitemap-card__list{width:100%;list-style:none;display:flex;flex-direction:column;gap:12px;padding-left:8px;box-sizing:border-box}
.sitemap-card__list>li{list-style:none}
.sitemap-card__link{display:inline-flex;align-items:baseline;gap:8px;font-size:1.52rem;color:#475569;text-decoration:none;transition:color .2s ease,font-weight .2s ease}
.sitemap-card__link::before{content:'\2022';color:#94a3b8;font-size:1.76rem}
.sitemap-card__link:hover{color:#1d4ed8;font-weight:700;text-decoration:none}
.sitemap-card__sublist{width:100%;list-style:none;display:flex;flex-direction:column;gap:8px;padding:8px 0 2px 20px}
.sitemap-card__sublist>li{list-style:none}
.sitemap-card__sublink{display:inline-flex;align-items:baseline;gap:6px;font-size:1.41rem;color:#64748b;text-decoration:none;transition:color .2s ease,font-weight .2s ease}
.sitemap-card__sublink::before{content:'-';color:#b6c0d4}
.sitemap-card__sublink:hover{color:#1d4ed8;font-weight:700;text-decoration:none}
.sitemap-card__empty{width:100%;text-align:center;color:#94a3b8;font-size:1.41rem;margin:0}

/* 메뉴 없음 상태 */
.sitemap-empty{padding:70px 20px;text-align:center;color:#94a3b8;border:1px dashed #cbd5e1;border-radius:16px;margin-bottom:40px}
.sitemap-empty__icon{font-size:4rem;color:#cbd5e1}
.sitemap-empty__text{margin:14px 0 0;font-size:1.5rem;font-weight:600}

/* 하단 이용 문의 안내 배너 */
.sitemap-contact{background:#f0f7ff;border:1px solid #dbeafe;border-radius:16px;padding:22px 32px;display:flex;justify-content:space-between;align-items:center;gap:18px;box-sizing:border-box}
.sitemap-contact__left{display:flex;align-items:center;gap:18px}
.sitemap-contact__icon{width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sitemap-contact__icon i{font-size:2rem;color:#1d4ed8}
.sitemap-contact__info h4{font-size:1.68rem;font-weight:700;color:#1e3a8a;margin:0 0 4px}
.sitemap-contact__info p{font-size:1.44rem;color:#475569;margin:0;word-break:keep-all}
.sitemap-contact__btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #cbd5e1;padding:10px 22px;border-radius:8px;font-size:1.44rem;font-weight:700;color:#1e293b;transition:all .2s ease;flex-shrink:0;cursor:pointer}
.sitemap-contact__btn:hover{background:#f8fafc;border-color:#94a3b8;color:#1d4ed8}

@media (max-width:1023px){
	.sitemap-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}

@media (max-width:640px){
	.sitemap-grid{grid-template-columns:1fr}
	.sitemap-contact{flex-direction:column;align-items:flex-start;gap:18px;padding:20px}
	.sitemap-contact__btn{width:100%;justify-content:center;box-sizing:border-box}
}

/* 푸터 사이트 정보 유틸 링크 (사이트맵 등) */
.main-footer__util{max-width:1200px;margin:0 auto;padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.main-footer__util-link{color:#e5e7eb;font-size:1.3rem;font-weight:700;text-decoration:none}
.main-footer__util-link:hover{color:#fff;text-decoration:underline}

/* ============================================================================
   메뉴 새창열림(외부 링크) 아이콘
   - TONG_MENU.WIN_TARGET_YN='Y' (외부 도메인 자동판별 또는 운영자 지정) 인 메뉴에
     이용자 GNB/메가메뉴/푸터 링크에서 자동 노출된다.
   ============================================================================ */
.main-gnb__external-icon,
.main-footer__external-icon{
	display:inline-block;
	font-size:1.1rem;
	margin-left:6px;
	opacity:.7;
	vertical-align:baseline;
	color:inherit;
}

/* ============================================================================
   메인 화면 팝업 / 팝업존 / 하단 롤링 텍스트 배너
   - 관리자 [팝업 관리] / [배너 관리] 에서 제어. 서버가 게시기간·숨김여부로 필터링해 내려주고,
     모달 팝업의 쿠키 노출 판정과 배너 롤링 정지/재생은 /js/main_popup.js 가 담당한다.
   ============================================================================ */

/* --- 모달형 팝업 --- */
/* 모달 팝업이 1개 이상 노출된 동안 화면 전체를 덮어 뒤쪽 콘텐츠 클릭/스크롤을 막는 오버레이.
   노출 판정과 표시/제거는 /js/main_popup.js 의 fn_syncPopupOverlay() 가 담당한다.
   z-index 는 팝업(1200) 바로 아래(1100)에 두어 팝업 본문/버튼은 정상 조작되도록 한다.
   배경은 뒤쪽 콘텐츠가 살짝만 비치도록 다크 딤 처리한다. */
.main-modal-popup-overlay{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(15, 23, 42, .3);
	z-index:1100;
}
/* 오버레이 노출 중에는 body 스크롤을 잠근다 */
body.main-modal-popup-open{overflow:hidden}

.main-modal-popup{
	position:fixed;
	top:calc(90px + var(--popup-offset, 0px));
	left:calc(50% + var(--popup-offset, 0px));
	transform:translateX(-50%);
	/* 가로 크기: 관리자 [팝업 관리]의 POPUP_WIDTH(px). 미지정 시 560px */
	width:var(--popup-w, 560px);
	max-width:calc(100vw - 32px);
	background:#fff;
	border:solid 0.5rem #00a64b;
	border-radius:12px;
	box-shadow:0 18px 48px rgba(15,23,42,.28);
	z-index:1200;
	overflow:hidden;
}
/* 세로 크기: 관리자 [팝업 관리]의 POPUP_HEIGHT(px). 미지정 시 64vh. 초과 시 본문 스크롤 */
.main-modal-popup .popup-body{max-height:var(--popup-bh, 64vh);overflow-y:auto;background:#fff}
.main-modal-popup .popup-body>a,
.main-modal-popup .popup-body>img{display:block}
.main-modal-popup .popup-body img{width:100%;height:auto}
.main-modal-popup .popup-body .editor-content{padding:18px 20px;font-size:1.4rem;line-height:1.7;color:#1f2937}
.main-modal-popup .popup-body .editor-content img{max-width:100%;height:auto}
.main-modal-popup .popup-footer{
	display:flex;flex-wrap:wrap;align-items:center;gap:8px;
	padding:10px 14px;background:#f1f5f9;border-top:1px solid #e2e8f0;
}
.main-modal-popup .popup-footer button{
	flex:0 1 auto;min-width:0;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;
	background:#fff;color:#334155;font-size:1.25rem;font-weight:600;cursor:pointer;
}
.main-modal-popup .popup-footer button:hover{background:#e2e8f0}
/* '닫기' 는 나머지 버튼과 분리해 항상 우측 끝에 배치 */
.main-modal-popup .popup-footer .btn-close{flex:0 0 auto;margin-left:auto;min-width:70px;background:#1e293b;color:#fff;border-color:#1e293b}
.main-modal-popup .popup-footer .btn-close:hover{background:#0f172a}

/* --- 팝업존 --- */
.main-popup-zone{max-width:1200px;margin:0 auto 30px;padding:0 16px}
.main-popup-zone__title{font-size:1.7rem;font-weight:800;color:#1e293b;margin:0 0 12px}
.main-popup-zone__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.main-popup-zone__item{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.06)}
.main-popup-zone__link{display:block;color:inherit;text-decoration:none}
.main-popup-zone__link img{display:block;width:100%;height:auto}
.main-popup-zone__html{padding:14px 16px;font-size:1.3rem;line-height:1.6;color:#334155}
.main-popup-zone__html img{max-width:100%;height:auto}

/* --- 하단 가로 롤링 텍스트 배너 --- */
.bottom-text-banner-wrap{
	width:100%;
	overflow:hidden;
	background:#1e293b;
	color:#fff;
	padding:12px 0;
	white-space:nowrap;
}
/*
 * 문구 세트를 2벌(main.html #numbers.sequence(1,2)) 렌더링하고 -50% 만큼 이동시키면
 * 첫 벌이 완전히 빠져나가는 순간 둘째 벌이 정확히 그 자리를 채워 끊김 없이 무한 반복된다.
 */
.bottom-text-banner-wrap .banner-track{
	display:inline-block;
	animation:marquee 30s linear infinite;
}
.bottom-text-banner-wrap .banner-item{
	display:inline-block;
	margin-right:60px;
	font-size:1.4rem;
	font-weight:600;
}
.bottom-text-banner-wrap .banner-item a{color:#fff;text-decoration:none}
.bottom-text-banner-wrap .banner-item a:hover{text-decoration:underline;color:#60a5fa}

@keyframes marquee{
	0%{transform:translateX(0)}
	100%{transform:translateX(-50%)}
}

@media (max-width:1023px){
	/* 모바일/태블릿: 지정 폭이 있으면 존중하되 화면폭(-32px)으로 상한, 없으면 460px */
	.main-modal-popup{width:var(--popup-w, 460px);top:calc(72px + var(--popup-offset, 0px))}
	.main-modal-popup .popup-footer button{min-width:0;font-size:1.15rem}
	.bottom-text-banner-wrap .banner-item{margin-right:40px;font-size:1.3rem}
	.bottom-text-banner-wrap .banner-track{animation-duration:22s}
}

/* 관리자 미리보기 팝업 창(popup_preview_pop.html) 전용 */
.popup-preview-body{margin:0;background:#eef2f7;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
.popup-preview-body .main-modal-popup{position:static;transform:none;width:var(--popup-w, 560px);max-width:calc(100vw - 40px);margin:24px auto}
.popup-preview-body .main-modal-popup--preview{box-shadow:0 10px 30px rgba(15,23,42,.18)}
.popup-preview-empty{padding:40px 20px;text-align:center;color:#64748b;font-size:1.4rem}

/* ==========================================================================
   인쇄 전용 스타일 (@media print)
   서브페이지/게시글 상세 인쇄 시 상단 유틸바·헤더·GNB·서브비주얼·서브탭·푸터·
   퀵메뉴·소셜 공유 바 등 본문 외 영역을 모두 숨기고, 본문만 A4 폭에 맞춰
   흰 배경·검정 글자로 출력한다. (tong/content/content_page.html,
   tong/board/board_view.html 공용. 공통 클래스 .js-no-print 도 함께 숨긴다.)
   ========================================================================== */
@media print{
	.main-topbar,
	.main-header,
	.main-gnb,
	.main-gnb__dim,
	.sub-visual,
	.hero-waves,
	.sub-tabmenu,
	.main-footer,
	.main-footer__wave-wrap,
	.sub-quickmenu,
	.content-share,
	.board-view__actions,
	.board-view__nav,
	.board-view__comments,
	.board-view__comment-write,
	.toast-container,
	.js-no-print{
		display:none !important;
	}

	/* 게시글 메타(작성자·작성일·조회수)는 인쇄물에도 남긴다 */
	.board-view__subhead{
		display:block !important;
		border-bottom:1px solid #000;
		padding-bottom:3mm;
		margin-bottom:4mm;
	}
	.board-view__meta,
	.board-view__meta *{
		color:#000 !important;
	}

	html,body{
		background:#fff !important;
		color:#000 !important;
	}

	.sub-content,
	.sub-content__inner,
	.bbs-page,
	.bbs-page--embedded{
		width:100% !important;
		max-width:none !important;
		margin:0 !important;
		padding:0 !important;
		background:#fff !important;
	}

	.content-view-card,
	.sub-content__inner .content-view-card,
	.board-view,
	.board-view__card{
		width:100% !important;
		max-width:none !important;
		margin:0 !important;
		padding:0 !important;
		border:0 !important;
		border-radius:0 !important;
		box-shadow:none !important;
		background:#fff !important;
	}

	.content-view-body,
	.content-view-body *,
	.board-view__title,
	.board-view__content,
	.board-view__content *{
		color:#000 !important;
		background:transparent !important;
	}

	.content-view-body a,
	.board-view__content a{
		color:#000 !important;
		text-decoration:underline;
	}

	.content-view-body img,
	.board-view__content img{
		max-width:100% !important;
		height:auto !important;
	}

	.content-view-body p,
	.content-view-body li,
	.content-view-body tr,
	.content-view-body img,
	.content-view-body table,
	.content-view-body h1,
	.content-view-body h2,
	.content-view-body h3,
	.board-view__content p,
	.board-view__content li,
	.board-view__content tr,
	.board-view__content img,
	.board-view__content table{
		break-inside:avoid;
		page-break-inside:avoid;
	}

	/* 화면에서는 숨겨둔 인쇄용 제목/메타를 인쇄 시에만 노출한다. */
	.content-print-title{
		display:block !important;
		font-size:20pt;
		font-weight:700;
		color:#000 !important;
		margin:0 0 4mm;
		padding-bottom:3mm;
		border-bottom:2px solid #000;
	}
	.content-print-meta{
		display:block !important;
		font-size:10pt;
		color:#000 !important;
		margin:0 0 6mm;
	}

	/* --------------------------------------------------------------------
	   인쇄 미리보기가 "모바일 화면 + 과도한 좌우/하단 여백"으로 나오는 문제 대응.
	   원인 : 인쇄 시 브라우저는 화면 창 너비가 아니라 "용지 인쇄영역 너비"로
	          미디어쿼리를 평가한다. A4 세로 인쇄영역은 대략 700~750px 이라
	          @media (min-width:768px) 데스크톱 규칙이 전부 무효화되고,
	          @media (max-width:767px) 모바일 규칙(최대폭 720px 중앙정렬,
	          하단 96px 패딩, 축소된 폰트/패딩 등)만 적용된다.
	   대응 : 본문 컨테이너의 폭·정렬·여백·타이포를 인쇄 전용으로 직접 재지정해
	          용지 폭을 꽉 채우고 불필요한 빈 여백을 제거한다. (min-width 쿼리에
	          의존하지 않도록 모두 !important 로 못박는다.)
	   -------------------------------------------------------------------- */
	main.sub-content{
		min-height:0 !important;
	}
	.content-container,
	.board-view__content.content-container{
		width:100% !important;
		max-width:none !important;
		margin:0 !important;
		padding:0 !important;
	}
	.content-view-body,
	.board-view__content{
		font-size:11pt !important;
		line-height:1.7 !important;
	}
	.board-view__title{
		font-size:17pt !important;
		line-height:1.4 !important;
	}
	.board-view__board-name,
	.board-view__badges,
	.board-view__files{
		margin-top:0 !important;
	}

	@page{
		size:A4;
		/* 용지 자체 여백도 과하지 않게 축소(상하 12mm / 좌우 12mm).
		   ※ 크롬 인쇄창의 "여백=기본값", "머리글/바닥글" 옵션이 켜져 있으면
		     날짜·URL 텍스트와 추가 여백이 더 붙으므로, 필요 시 인쇄창에서
		     여백을 '최소' 또는 '없음', 머리글/바닥글 체크 해제로 안내한다. */
		margin:12mm;
	}
}

/* ===================================================================
   대관현황안내 화면 (rst- 접두사, tong.rental 업무 전용)
   이용자 서브페이지 공통 레이아웃(tong/layout/layout.html)의 .sub-content__inner 안에 들어간다.
   =================================================================== */
.rst{--rst-primary:#1d63c4;--rst-regular-bg:#eaf1fb;--rst-regular-fg:#1d4ed8;--rst-regular-bd:#bcd3f5;--rst-partial-bg:#e9f7ee;--rst-partial-fg:#15803d;--rst-partial-bd:#bfe6cd;--rst-avail-bd:#d1d5db;--rst-avail-fg:#4b5563;--rst-unavail-bg:#f3f4f6;--rst-unavail-fg:#9ca3af;--rst-line:#e5e7eb;color:#1f2937}
.rst *{box-sizing:border-box}
.rst-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}

/* --- 상단 필터 / 컨트롤 바 --- */
.rst-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:20px 22px;background:#fff;border:1px solid var(--rst-line);border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.rst-controls__group{display:flex;align-items:center;gap:10px}
.rst-controls__group--period{flex-wrap:wrap}
.rst-controls__group--view{margin-left:auto}
.rst-controls__label{font-size:1.4rem;font-weight:700;color:#374151;white-space:nowrap}
.rst-select-wrap{position:relative}
.rst-select{appearance:none;-webkit-appearance:none;min-width:180px;height:42px;padding:0 40px 0 14px;font-size:1.4rem;font-weight:600;color:#1f2937;background:#fff;border:1px solid #cbd5e1;border-radius:9px;cursor:pointer}
.rst-select:focus{outline:none;border-color:var(--rst-primary);box-shadow:0 0 0 3px rgba(29,99,196,.15)}
.rst-select-wrap__ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.2rem;color:#9ca3af;pointer-events:none}
.rst-period{display:flex;gap:6px}
.rst-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;font-size:1.4rem;font-weight:700;border-radius:9px;border:1px solid #cbd5e1;background:#fff;color:#374151;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.rst-btn--nav:hover{background:#f1f5f9;border-color:#94a3b8}
.rst-btn--primary{background:var(--rst-primary);border-color:var(--rst-primary);color:#fff;padding:0 22px}
.rst-btn--primary:hover{background:#1a56ab;border-color:#1a56ab}
.rst-datebox{position:relative}
.rst-datebox__input{width:270px;max-width:100%;height:42px;padding:0 40px 0 14px;font-size:1.4rem;font-weight:600;color:#1f2937;background:#f8fafc;border:1px solid #cbd5e1;border-radius:9px;cursor:default}
.rst-datebox__ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:#9ca3af;pointer-events:none}
.rst-viewtoggle{display:inline-flex;padding:4px;background:#eef2f7;border-radius:10px;gap:2px}
.rst-viewtoggle__btn{min-width:58px;height:36px;padding:0 16px;font-size:1.4rem;font-weight:700;border:none;border-radius:8px;background:transparent;color:#64748b;cursor:pointer}
.rst-viewtoggle__btn.is-active{background:var(--rst-primary);color:#fff;box-shadow:0 2px 6px rgba(29,99,196,.35)}

/* --- 제목 + 범례 --- */
.rst-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 14px}
.rst-head__title{margin:0;font-size:2rem;font-weight:800;color:#111827}
.rst-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.rst-legend__item{display:flex;align-items:center;gap:7px;font-size:1.3rem;font-weight:600;color:#4b5563}
.rst-legend__swatch{width:16px;height:16px;border-radius:5px;flex:none}
.rst-legend__swatch--regular{background:var(--rst-regular-bg);border:1px solid var(--rst-regular-bd)}
.rst-legend__swatch--partial{background:var(--rst-partial-bg);border:1px solid var(--rst-partial-bd)}
.rst-legend__swatch--available{background:#fff;border:1px solid var(--rst-avail-bd)}
.rst-legend__swatch--unavailable{background:var(--rst-unavail-bg);border:1px solid #e5e7eb}

/* --- 공통 배지 --- */
.rst-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;max-width:100%;padding:6px 10px;font-size:1.25rem;font-weight:700;line-height:1.3;border-radius:8px;border:1px solid transparent;background:#fff;color:#374151;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:filter .12s,box-shadow .12s}
button.rst-badge:hover{filter:brightness(.97);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.rst-badge.is-plain{cursor:default}
button.rst-badge.is-plain{cursor:pointer}
.rst-badge--regular{background:var(--rst-regular-bg);color:var(--rst-regular-fg);border-color:var(--rst-regular-bd)}
.rst-badge--partial{background:var(--rst-partial-bg);color:var(--rst-partial-fg);border-color:var(--rst-partial-bd)}
.rst-badge--available{background:#fff;color:var(--rst-avail-fg);border-color:var(--rst-avail-bd)}
.rst-badge--unavailable{background:var(--rst-unavail-bg);color:var(--rst-unavail-fg);border-color:#e5e7eb}
.rst-badge--block{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:2px 6px;padding:5px 8px;font-size:1.15rem;white-space:normal}
.rst-badge--block.is-plain{justify-content:center}
/* 주간 타임테이블: 1시간 단위 칸. 위=그 칸의 시간 슬롯 / 아래=단체명(또는 상태). '대관가능' 칸은 한 줄 텍스트. */
.rst-badge--week{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 6px;font-size:1.2rem;white-space:normal}
.rst-badge--week .rst-badge__time{font-size:1rem;font-weight:600;opacity:.8}
.rst-badge--week.rst-badge--available{font-size:1.15rem;font-weight:600}
.rst-badge__time{font-weight:700;opacity:.9;flex:none}
.rst-badge__name{font-weight:700;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- 표 공통 --- */
.rst-tablewrap{width:100%;overflow-x:auto;border:1px solid var(--rst-line);border-radius:14px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.rst-week,.rst-month{width:100%;border-collapse:collapse;table-layout:fixed}
.rst-week th,.rst-week td,.rst-month th,.rst-month td{border-right:1px solid var(--rst-line);border-bottom:1px solid var(--rst-line)}
/* 월간만 바깥 오른쪽/아래 라인을 래퍼 테두리로 대체한다.
   주간 타임테이블은 모든 셀에 오른쪽·아래 라인을 유지하고 표 자체에 위/왼쪽 라인을 둬서
   시간 단위 격자선이 어디서도 끊기지 않게 한다. */
.rst-month th:last-child,.rst-month td:last-child{border-right:none}
.rst-month tr:last-child td{border-bottom:none}
.rst-week{border-top:1px solid var(--rst-line);border-left:1px solid var(--rst-line)}
.rst-week thead th,.rst-month thead th{padding:14px 6px;background:#f8fafc;font-size:1.4rem;font-weight:800;color:#334155}
.rst-week thead th.is-sun,.rst-month thead th.is-sun{color:#dc2626}
.rst-week thead th.is-sat,.rst-month thead th.is-sat{color:#2563eb}
.rst-week thead th.is-today{background:#eef4fd}

/* --- 주간 타임테이블 --- */
.rst-week{min-width:760px}
.rst-week__timehead{width:120px}
.rst-week__time{width:120px;padding:12px 8px;background:#f8fafc;font-size:1.3rem;font-weight:700;color:#475569;text-align:center;white-space:nowrap}
.rst-week__daylabel{display:block;font-size:1.4rem}
.rst-week__dow{display:block;font-size:1.2rem;font-weight:600;color:#94a3b8;margin-top:2px}
.rst-week tbody td{padding:4px;text-align:center;vertical-align:middle;height:44px}
.rst-week tbody td.is-today{background:#f7faff}
/* 현재 시각 이전 시간대는 셀 배경만 옅은 회색으로 구분한다(지난 예약 건은 흐림 없이 그대로 표시). */
.rst-week tbody td.is-past{background:#f8fafc}
/* 매 시간 1칸(병합 없음). 배지가 칸 높이를 꽉 채우도록. */
.rst-week tbody td .rst-badge--week{height:100%}

/* --- 월간 달력 --- */
.rst-month{min-width:760px}
.rst-month__cell{height:118px;padding:8px;text-align:left;vertical-align:top}
.rst-month__cell.is-out{background:#fafafa}
.rst-month__cell.is-today{background:#eef4fd;box-shadow:inset 0 0 0 2px var(--rst-primary)}
.rst-month__day{font-size:1.35rem;font-weight:700;color:#334155;margin-bottom:6px}
.rst-month__cell.is-sun .rst-month__day{color:#dc2626}
.rst-month__cell.is-sat .rst-month__day{color:#2563eb}
.rst-month__cell.is-out .rst-month__day{color:#cbd5e1}
/* 지난 날짜: 예약이 없으면 배지 자체가 없고(비표시), 예약 건은 흐림 효과 없이 그대로 표시한다. */
.rst-month__badges{display:flex;flex-direction:column;gap:4px}

/* --- 하단 안내사항 --- */
.rst-notice{display:flex;gap:16px;margin-top:24px;padding:22px 24px;background:#f1f6fd;border:1px solid #dbe8fa;border-radius:14px}
.rst-notice__icon{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--rst-primary);background:#fff;border-radius:12px;box-shadow:0 2px 6px rgba(29,99,196,.15)}
.rst-notice__title{margin:0 0 8px;font-size:1.6rem;font-weight:800;color:#1e3a5f}
.rst-notice__list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.rst-notice__list li{font-size:1.35rem;line-height:1.6;color:#3f5876}

/* --- 대관 상세 팝업 --- */
.rst-modal{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;padding:20px}
.rst-modal[hidden]{display:none}
.rst-modal__dim{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.rst-modal__panel{position:relative;width:100%;max-width:400px;background:#fff;border-radius:16px;padding:28px 24px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.rst-modal__close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;border-radius:9px;background:#f1f5f9;color:#64748b;font-size:1.6rem;cursor:pointer}
.rst-modal__close:hover{background:#e2e8f0}
.rst-modal__status{display:inline-block;padding:5px 12px;font-size:1.25rem;font-weight:800;border-radius:999px;border:1px solid transparent}
.rst-modal__status--regular{background:var(--rst-regular-bg);color:var(--rst-regular-fg);border-color:var(--rst-regular-bd)}
.rst-modal__status--partial{background:var(--rst-partial-bg);color:var(--rst-partial-fg);border-color:var(--rst-partial-bd)}
.rst-modal__status--available{background:#fff;color:var(--rst-avail-fg);border-color:var(--rst-avail-bd)}
.rst-modal__status--unavailable{background:var(--rst-unavail-bg);color:var(--rst-unavail-fg);border-color:#e5e7eb}
.rst-modal__title{margin:12px 0 16px;font-size:2rem;font-weight:800;color:#111827;word-break:break-all}
.rst-modal__dl{margin:0;border-top:1px solid var(--rst-line)}
.rst-modal__row{display:flex;gap:12px;padding:11px 2px;border-bottom:1px solid var(--rst-line)}
.rst-modal__row dt{flex:none;width:74px;font-size:1.35rem;font-weight:700;color:#64748b}
.rst-modal__row dd{margin:0;font-size:1.35rem;color:#1f2937}
.rst-modal__hint{display:flex;gap:8px;margin:16px 0 0;font-size:1.25rem;line-height:1.6;color:#64748b}
.rst-modal__hint i{color:var(--rst-primary);margin-top:2px}

/* --- 반응형 (모바일) --- */
@media (max-width:767px){
	.rst-controls{padding:16px;gap:12px 14px}
	.rst-controls__group{flex-wrap:wrap}
	.rst-controls__group--view{margin-left:0;width:100%}
	.rst-viewtoggle{width:100%}
	.rst-viewtoggle__btn{flex:1}
	.rst-select{min-width:0;width:100%;flex:1}
	.rst-controls__group--facility{width:100%}
	.rst-datebox__input{width:100%;flex:1}
	.rst-btn--primary{flex:1}
	.rst-head__title{font-size:1.7rem}
	.rst-month__cell{height:auto;min-height:92px}
	.rst-badge--block{font-size:1.05rem}
	.rst-badge--week{font-size:1.05rem;padding:5px 6px}
	.rst-badge--week .rst-badge__time{font-size:.95rem}
}

/* --- 반응형 (PC 넓은 화면) --- */
@media (min-width:1024px){
	.rst-week{min-width:0}
	.rst-month{min-width:0}
	.rst-month__cell{height:132px}
}


/* ============================================================================
   회원가입 · NICE 본인인증 · 자녀관리 · 수강대상자 선택
   (join / cert-cv / mypage-fam / apply-tgt / mockcert) - 화면 1 · 1-1 · 2 · 3 · 4 · 5
   ========================================================================== */
.join{--join-primary:#1f5fbf;--join-primary-dark:#17458c;--join-line:#e3e8ef;--join-ink:#1f2937;
	--join-muted:#64748b;--join-bg:#f5f8fc;--join-ok:#0f9d58;--join-warn:#d97706;--join-danger:#dc2626;
	max-width:920px;margin:0 auto}

/* 진행 스텝 (원형 노드 + 연결선 + 하단 라벨) */
.join-steps{display:flex;align-items:flex-start;gap:0;margin:0 auto 34px;padding:0;list-style:none;max-width:560px}
.join-steps__item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;
	padding:0;background:none;font-size:1.6rem;font-weight:600;color:#94a3b8;text-align:center;line-height:1.3}
.join-steps__no{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;border-radius:50%;background:#e2e8f0;color:#fff;font-size:1.75rem;font-weight:700}
.join-steps__item:not(:last-child)::after{content:"";position:absolute;z-index:1;top:20px;left:50%;width:100%;
	height:2px;background:#e2e8f0}
.join-steps__item.is-active{color:#1f5fbf}
.join-steps__item.is-active .join-steps__no{background:#1f5fbf}
.join-steps__item.is-done{color:#1f5fbf}
.join-steps__item.is-done .join-steps__no{background:#1f5fbf}
.join-steps__item.is-done::after{background:#1f5fbf}

/* 카드 */
.join-card{background:#fff;border:1px solid #e3e8ef;border-radius:14px;padding:28px;
	box-shadow:0 2px 10px rgba(15,23,42,.04)}
.join-card--center{text-align:center;padding:44px 28px}
.join-card + .join-card{margin-top:16px}
.join-card__lead{display:flex;gap:10px;margin:0 0 20px;padding:16px;border-radius:10px;
	background:#eef4ff;color:#1e3a8a;font-size:1.5rem;line-height:1.65}
.join-card__lead i{margin-top:3px}

/* 전체 동의 */
.join-agree-all{display:flex;align-items:center;gap:10px;padding:16px;border:1.5px solid #1f5fbf;
	border-radius:10px;background:#f2f7ff;cursor:pointer;font-weight:700;font-size:1.65rem;color:#1f2937}
.join-agree-all input{width:20px;height:20px;accent-color:#1f5fbf}

/* 개별 약관 */
.join-agree-list{list-style:none;margin:8px 0 4px;padding:0}
.join-agree-list__item{display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:12px 6px;border-bottom:1px dashed #e3e8ef}
.join-agree-list__label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.5rem;color:#1f2937}
.join-agree-list__label input{width:18px;height:18px;accent-color:#1f5fbf;flex:none}
.join-agree-list__tag{font-style:normal;font-weight:700;font-size:1.4rem}
.join-agree-list__tag.is-required{color:#1f5fbf}
.join-agree-list__tag.is-optional{color:#64748b}
.join-agree-list__view{flex:none;border:0;background:none;color:#64748b;cursor:pointer;
	font-size:1.4rem;white-space:nowrap}
.join-agree-list__view:hover{color:#1f5fbf;text-decoration:underline}

/* 필드 공통 */
.join-field{margin-top:22px}
.join-field__title{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:1.7rem;font-weight:700;color:#1f2937}
/* 폼 안에서 새 구획을 여는 제목: 위 요소와 간격을 벌린다 */
.join-field__title--section{margin-top:36px}
.join-field__lock{display:inline-flex;align-items:center;gap:4px;font-size:1.35rem;font-weight:500;color:#64748b}
.join-field__hint{margin:8px 0 0;font-size:1.4rem;color:#64748b;line-height:1.5}
.join-field__hint.is-warning{color:#d97706}
.join-field__hint.is-ok{color:#0f9d58}
.join-field__hint.is-error{color:#dc2626}
.join-label{display:block;margin-bottom:8px;font-size:1.5rem;font-weight:600;color:#1f2937}
/* 레이블 좌 · 입력 우 1줄 배치 (좁은 화면에서는 자동 줄바꿈) */
.join-field--row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.join-field--row .join-label{margin-bottom:0;flex:none}
.join-input--inline{width:auto;min-width:180px;flex:0 1 240px}
.join-req{color:#dc2626;margin-left:3px;font-style:normal}

/* 레이블 좌 · 입력 우 한 줄 배치 (모달 등 좁은 폼의 자녀 정보 입력에 사용) */
.join-field--split{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.join-field--split > .join-label{flex:0 0 90px;margin-bottom:0}
.join-field--split > .join-input,
.join-field--split > .join-radio-row{flex:1 1 0;min-width:0}
.join-field--split > .join-field__hint{flex:1 1 100%;margin:2px 0 0 104px}

.join-radio-row{display:flex;flex-wrap:wrap;gap:10px 18px}
.join-radio{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:1.5rem;color:#1f2937}
.join-radio input{width:18px;height:18px;accent-color:#1f5fbf}

/* 입력창 */
/* box-sizing 미지정 시 width:100% + 좌우 padding/보더가 더해져 모달 등 좁은 컨테이너 밖으로 삐져나온다.
   min-width:0 은 date/select 의 기본 내재 폭 때문에 flex 컨테이너에서 넘치는 것을 막는다. */
.join-input{width:100%;max-width:100%;min-width:0;box-sizing:border-box;height:46px;padding:0 14px;border:1px solid #cbd5e1;border-radius:9px;
	font-size:1.55rem;color:#1f2937;background:#fff}
.join-input:focus{outline:none;border-color:#1f5fbf;box-shadow:0 0 0 3px rgba(31,95,191,.12)}
.join-input[readonly]{background:#f1f5f9;color:#64748b}
textarea.join-input{height:auto;padding:12px 14px}
.join-input + .join-input{margin-top:8px}
/* 우편번호 검색줄(.join-inline) 다음 오는 입력칸(기본주소 등)과의 간격 */
.join-inline + .join-input{margin-top:8px}
.join-input--zip{max-width:160px}
.join-inline{display:flex;gap:8px}
.join-inline .join-input{flex:1}
.join-input-wrap{position:relative}
.join-pwd-toggle{position:absolute;top:0;right:0;height:46px;width:44px;border:0;background:none;
	color:#64748b;cursor:pointer;font-size:1.6rem}

/* 인증 연동정보(잠금) */
.join-locked-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.join-locked{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;
	border:1px solid #e3e8ef;border-radius:9px;background:#f8fafc}
.join-locked span{font-size:1.45rem;color:#64748b}
.join-locked strong{font-size:1.55rem;color:#1f2937}

/* 본인인증 방법 카드 */
.join-cert-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.join-cert-method{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
	padding:20px 14px;border:1px solid #e3e8ef;border-radius:12px;background:#fff}
.join-cert-method__ico{font-size:2.6rem;color:#1f5fbf;margin-bottom:2px}
.join-cert-method strong{font-size:1.6rem;color:#1f2937}
.join-cert-method span{font-size:1.4rem;color:#64748b}
.join-cert-method .join-btn{margin-top:10px;width:100%}
.join-cert-result{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:12px 14px;
	border-radius:9px;background:#e7f6ee;color:#0f7a43;font-size:1.5rem;font-weight:600}
.join-cert-result[hidden]{display:none}
.join-cert-result--banner{margin:0 0 20px;background:#e7f0ff;color:#17458c}

/* 만 14세 미만 보호자 인증 패널 */
.join-parent{border:1px solid #cfe0f7;border-radius:12px;padding:20px;background:#f6faff;margin-top:24px}

/* 관내주민 여부 */
.join-local{display:flex;align-items:center;gap:8px;padding:14px 16px;border-radius:9px;
	background:#f1f5f9;color:#64748b;font-size:1.45rem;line-height:1.5}
.join-local.is-local{background:#e7f6ee;color:#0f7a43}

/* 버튼 */
.join-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 20px;
	border-radius:9px;border:1px solid transparent;font-size:1.55rem;font-weight:700;cursor:pointer;
	text-decoration:none;line-height:1;transition:.15s}
.join-btn--primary{background:#1f5fbf;color:#fff}
.join-btn--primary:hover{background:#17458c}
.join-btn--primary:disabled{background:#a9bcd6;cursor:not-allowed}
.join-btn--outline{background:#fff;border-color:#1f5fbf;color:#1f5fbf}
.join-btn--outline:hover{background:#eef4ff}
.join-btn--ghost{background:#eef2f7;color:#475569}
.join-btn--ghost:hover{background:#e2e8f0}
.join-btn--lg{height:52px;padding:0 34px;font-size:1.65rem}
.join-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px;padding-top:20px;border-top:1px solid #e3e8ef}
.join-actions--center{justify-content:center;border-top:0}
.join-actions .join-btn--ghost,.join-actions .join-btn--primary{min-width:120px}

/* ============================================================
   회원가입 화면 1 (약관동의 및 인증) - 확정 시안 100% 퍼블리싱
   join_step1.html 전용. 기본(만 14세 이상) 상태 위에
   .join-guard(만 14세 미만 보호자 인증) 그룹이 self 인증 결과로 추가 노출된다.
   ============================================================ */
.join.join--wide{max-width:1120px}

/* 카드 내부 섹션 : "01." + 제목 + 우측 안내문 */
.join-sec{margin:0}
.join-sec + .join-sec{margin-top:38px}
.join-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin:0 0 16px}
.join-sec__title{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0;font-size:1.95rem;font-weight:800;color:#1f2937;line-height:1.35}
.join-sec__no{color:#1f5fbf;font-size:1.95rem;font-weight:800;letter-spacing:.5px}
.join-sec__req{color:#dc2626;font-size:1.6rem;font-weight:700}
.join-sec__guide{margin:0;font-size:1.5rem;color:#94a3b8;font-weight:500}
.join-sec__desc{margin:-4px 0 16px;font-size:1.5rem;color:#64748b;line-height:1.65}

/* 약관 동의 박스 */
.join-terms{border:1px solid #e3e8ef;border-radius:12px;overflow:hidden}
.join-terms__all{display:flex;align-items:center;gap:10px;padding:16px 18px;background:#f6f8fb;
	border-bottom:1px solid #e3e8ef;cursor:pointer;font-size:1.65rem;font-weight:700;color:#1f2937}
.join-terms__all input{width:20px;height:20px;accent-color:#1f5fbf;flex:none}
.join-terms__all small{font-size:1.4rem;font-weight:500;color:#94a3b8}
.join-terms__row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:15px 18px}
.join-terms__row + .join-terms__row{border-top:1px dashed #e8ecf2}
.join-terms__label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.6rem;color:#1f2937;line-height:1.4}
.join-terms__label input{width:19px;height:19px;accent-color:#1f5fbf;flex:none}
.join-terms__tag{font-style:normal;font-weight:700;font-size:1.5rem}
.join-terms__tag--req{color:#dc2626}
.join-terms__tag--opt{color:#64748b}
.join-terms__note{flex:1 1 260px;min-width:0;font-size:1.45rem;color:#94a3b8;line-height:1.5}
.join-terms__view{flex:none;margin-left:auto;border:0;background:none;color:#94a3b8;cursor:pointer;font-size:1.45rem;
	display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.join-terms__view:hover{color:#1f5fbf;text-decoration:underline}
.join-terms--single .join-terms__row{font-size:1.6rem;color:#1f2937}
.join-terms__agree{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:1.6rem;color:#1f2937;cursor:pointer}
.join-terms__agree input{width:19px;height:19px;accent-color:#1f5fbf;flex:none}
.join-terms-full{display:none}

/* 인증수단 카드 3분할 */
.join-certgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.join-certcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
	padding:26px 16px;border:1px solid #e3e8ef;border-radius:14px;background:#fff}
.join-certcard__ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
	border-radius:50%;font-size:2.5rem;margin-bottom:4px}
.join-certcard__ico--phone{background:#e8f0fe;color:#1f5fbf}
.join-certcard__ico--ipin{background:#e5f6ed;color:#12a150}
.join-certcard__ico--card{background:#f0e9fb;color:#8b5cf6}
.join-certcard__title{font-size:1.7rem;font-weight:700;color:#1f2937}
.join-certcard__desc{font-size:1.45rem;color:#94a3b8;line-height:1.55}
.join-certcard__btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:1;text-decoration:none;margin-top:6px;min-width:120px;height:42px;padding:0 18px;border-radius:8px;
	border:1px solid #1f5fbf;background:#fff;color:#1f5fbf;font-size:1.5rem;font-weight:700;cursor:pointer}
.join-certcard__btn:hover{background:#eef4ff}
.join-certcard--pick{cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.join-certcard--pick:hover{border-color:#9dbdea}
.join-certcard--pick.is-selected{border-color:#1f5fbf;background:#f4f8ff;box-shadow:0 0 0 1px #1f5fbf inset}

/* 인증 완료 라인 */
.join-certdone{display:flex;align-items:center;gap:8px;margin:16px 0 0;padding:13px 16px;border-radius:10px;
	background:#e7f6ee;color:#0f7a43;font-size:1.5rem;font-weight:600}
.join-certdone[hidden]{display:none}

/* 안내사항 박스 */
.join-notice{margin-top:18px;padding:18px 20px;border-radius:12px;background:#f4f7fb;border:1px solid #e6ebf3}
.join-notice__head{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:1.55rem;font-weight:700;color:#1f2937}
.join-notice__head i{color:#1f5fbf}
.join-notice__list{margin:0;padding:0;list-style:none}
.join-notice__list li{position:relative;padding-left:14px;margin:6px 0;font-size:1.45rem;color:#64748b;line-height:1.6}
.join-notice__list li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:#94a3b8}

/* 보호자(법정대리인) 추가 인증 그룹 */
.join-guard{margin-top:38px}
.join-guard[hidden]{display:none}
.join-guard-banner{display:flex;gap:16px;padding:20px 22px;border-radius:14px;background:#eaf2ff;border:1px solid #d6e4fb}
.join-guard-banner__ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
	border-radius:50%;background:#1f5fbf;color:#fff;font-size:2.2rem}
.join-guard-banner__body{display:flex;flex-direction:column;gap:5px}
.join-guard-banner__title{margin:0;font-size:1.7rem;font-weight:800;color:#17458c}
.join-guard-banner__desc{margin:0;font-size:1.48rem;color:#37507d;line-height:1.6}
.join-guard-banner + .join-sec{margin-top:26px}

/* 보호자와의 관계 행 */
.join-relrow{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;padding:16px 18px;border-radius:12px;background:#f6f8fb}
.join-relrow__label{display:flex;align-items:center;gap:8px;font-size:1.6rem;font-weight:700;color:#1f2937}
.join-relrow__req{color:#dc2626;font-size:1.5rem}
.join-relrow__opts{display:flex;flex-wrap:wrap;gap:12px 22px}

/* 자동 입력 안내 인포박스 */
.join-infobox{display:flex;gap:10px;margin:14px 0 18px;padding:14px 16px;border-radius:10px;
	background:#eef4ff;color:#37507d;font-size:1.45rem;line-height:1.6}
.join-infobox i{margin-top:2px;color:#1f5fbf}
.join-infobox--warn{background:#fff7ed;color:#9a3412}
.join-infobox--warn i{color:#d97706}

/* 보호자 정보(이름/휴대폰) */
.join-guardfields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.join-guardfields .join-field{margin-top:0}

/* 하단 네비게이션 (이전으로 / 다음 단계로) */
.join-nav{display:flex;justify-content:center;gap:12px;margin-top:34px}
.join-nav .join-btn{min-width:150px;height:50px;border-radius:8px;font-size:1.6rem}
.join-nav .join-btn--prev{background:#fff;border:1px solid #cdd6e4;color:#475569}
.join-nav .join-btn--prev:hover{background:#f4f6f9}

/* 진행 스텝 : 완료 단계는 번호 대신 체크 아이콘 (Font Awesome 7 Free = 현재 번들 버전) */
.join-steps__item.is-done .join-steps__no{font-size:0}
.join-steps__item.is-done .join-steps__no::after{content:'\f00c';font-family:'Font Awesome 7 Free','Font Awesome 6 Free','Font Awesome 5 Free';font-weight:900;font-size:1.7rem}

/* ============================================================
   회원가입 화면 2 (정보입력) - 확정 시안 100% 퍼블리싱
   join_step2.html 전용. 라벨(회색) 좌 · 입력/도움말 우 폼 테이블.
   ============================================================ */
.join-ftable{border:1px solid #e3e8ef;border-radius:12px;overflow:hidden;background:#fff}
.join-ftable__row{display:flex;flex-wrap:wrap;border-top:1px solid #e8ecf2}
.join-ftable__row:first-child{border-top:0}
.join-ftable__th{flex:0 0 150px;display:flex;align-items:flex-start;gap:2px;padding:16px 18px;
	background:#f6f8fb;font-size:1.55rem;font-weight:700;color:#1f2937;line-height:1.45}
.join-ftable__th .join-req{color:#dc2626;margin-left:2px;font-style:normal}
.join-ftable__th small{display:block;margin-top:4px;font-size:1.33rem;font-weight:500;color:#94a3b8;line-height:1.4}
.join-ftable__td{flex:1 1 260px;min-width:0;padding:14px 18px;display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.join-ftable__row--split .join-ftable__td{flex:1 1 180px}
.join-ftable__ctrl{flex:0 1 360px;min-width:0;display:flex;gap:8px}
.join-ftable__ctrl .join-input{flex:1 1 auto}
.join-ftable__ctrl .join-btn{flex:0 0 auto;white-space:nowrap}
.join-ftable__hint{flex:1 1 180px;min-width:0;font-size:1.4rem;color:#94a3b8;line-height:1.5}
.join-ftable__hint.is-ok{color:#0f9d58}
.join-ftable__hint.is-error{color:#dc2626}
.join-ftable__td .join-input{height:44px}
.join-ftable__td select.join-input{padding:0 30px 0 12px}

/* 이메일 조합 (아이디@도메인 · 선택/직접입력) */
.join-email{flex:1 1 100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.join-email__local{flex:0 1 170px}
.join-email__at{flex:0 0 auto;color:#64748b;font-size:1.55rem}
.join-email__domain{flex:0 1 170px}
.join-email__mode{flex:0 0 120px}
.join-email__custom{flex:1 1 150px}
.join-email .join-input:disabled{background:#f1f5f9;color:#94a3b8}

/* 주소 묶음 */
.join-addr{flex:1 1 100%;display:flex;flex-direction:column;gap:8px}
.join-addr__row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.join-addr__zip{flex:0 0 130px}
.join-addr__basic{flex:1 1 240px}
.join-addr__hint{flex:1 1 160px;font-size:1.4rem;color:#94a3b8}
.join-addr__detail{width:100%}

/* 주소 하단 안내 박스 (관내 거주 · 감면 자격) */
.join-guide-box{flex:1 1 100%;margin-top:4px;padding:14px 16px;border-radius:10px;background:#eef4ff;border:1px solid #dbe7fb}
.join-guide-box ul{margin:0;padding:0;list-style:none}
.join-guide-box li{position:relative;padding-left:14px;margin:4px 0;font-size:1.4rem;color:#37507d;line-height:1.6}
.join-guide-box li::before{content:"";position:absolute;left:3px;top:9px;width:4px;height:4px;border-radius:50%;background:#7ba3e0}
.join-guide-box a{color:#1f5fbf;font-weight:700;text-decoration:underline}

/* 비상연락처 3분할 (보호자 이름 / 관계 / 연락처) */
.join-emgc{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.join-emgc__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.join-emgc__label{font-size:1.4rem;font-weight:600;color:#64748b}

/* ============================================================
   회원가입 화면 3 (가입완료) - 확정 시안 100% 퍼블리싱
   join_complete.html 전용.
   ============================================================ */
.join-done-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 2px}
.join-done-hero__img{width:210px;max-width:62%;height:auto;margin-bottom:4px}
.join-done-hero__title{margin:8px 0 12px;font-size:2.3rem;font-weight:800;color:#17458c;line-height:1.42}
.join-done-hero__desc{margin:0 0 22px;font-size:1.6rem;color:#64748b;line-height:1.7}
.join-done-hero__cta{min-width:230px;height:52px;padding:0 30px;border-radius:26px;font-size:1.7rem}
.join-done__divider{height:1px;background:#e8ecf2;margin:28px 0 24px}
.join-subhead{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-size:1.8rem;font-weight:800;color:#1f2937}
.join-subhead::before{content:"";flex:none;width:4px;height:18px;border-radius:2px;background:#1f5fbf}
.join-certgrid--4{grid-template-columns:repeat(4,1fr)}
.join-certcard__ico--person{background:#e8f0fe;color:#1f5fbf}
@media (max-width:1024px){
	.join-certgrid--4{grid-template-columns:repeat(2,1fr)}
}

/* 완료 / 빈 상태 */
.join-done__ico{font-size:5.2rem;color:#0f9d58}
.join-done__title{margin:16px 0 10px;font-size:2.2rem;font-weight:800;color:#1f2937}
.join-done__desc{margin:0;font-size:1.55rem;color:#64748b;line-height:1.7}
.join-empty{text-align:center;padding:30px 10px}
.join-empty__ico{font-size:3.6rem;color:#d97706}
.join-empty__text{margin:14px 0 18px;font-size:1.6rem;color:#1f2937}

/* 약관 전문 모달 (공용) */
.join-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
/* display:flex 가 [hidden] 속성(UA의 display:none)을 덮어써 모달이 항상 보이던 문제 방지 */
.join-modal[hidden]{display:none}
.join-modal__dim{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.join-modal__panel{position:relative;width:100%;max-width:560px;max-height:85vh;display:flex;flex-direction:column;
	background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.join-modal__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e3e8ef}
.join-modal__title{margin:0;font-size:1.75rem;font-weight:700;color:#1f2937}
.join-modal__close{border:0;background:none;font-size:1.9rem;color:#64748b;cursor:pointer}
.join-modal__body{padding:20px;overflow-y:auto;font-size:1.5rem;line-height:1.7;color:#334155}
.join-modal__body p{margin:0 0 10px}
.join-modal__foot{padding:16px 20px;border-top:1px solid #e3e8ef;text-align:right}

/* --- mock 본인인증 팝업 --- */
.mockcert{max-width:420px;margin:0 auto;padding:22px}
.mockcert__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:2px solid #1f5fbf}
.mockcert__brand{font-size:1.45rem;font-weight:800;color:#1f5fbf}
.mockcert__brand em{font-size:1.05rem;font-weight:500;color:#94a3b8;font-style:normal}
.mockcert__method{font-size:1.25rem;color:#475569}
.mockcert__desc{margin:16px 0;font-size:1.3rem;color:#475569;line-height:1.6}
.mockcert__form{display:flex;flex-direction:column}
.mockcert__label{margin:12px 0 6px;font-size:1.25rem;font-weight:600;color:#1f2937}
.mockcert__input{height:44px;padding:0 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:1.3rem}
.mockcert__input:focus{outline:none;border-color:#1f5fbf}
.mockcert__radio-row{display:flex;gap:18px}
.mockcert__radio{display:inline-flex;align-items:center;gap:6px;font-size:1.3rem}
.mockcert__radio input{width:18px;height:18px;accent-color:#1f5fbf}
.mockcert__check{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:1.25rem;color:#475569}
.mockcert__presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0;font-size:1.15rem;color:#64748b}
.mockcert__presets button{border:1px solid #cbd5e1;background:#f8fafc;border-radius:6px;padding:4px 10px;font-size:1.15rem;cursor:pointer}
.mockcert__submit{margin-top:16px;height:48px;border:0;border-radius:8px;background:#1f5fbf;color:#fff;font-size:1.4rem;font-weight:700;cursor:pointer}
.mockcert__cancel{margin-top:8px;height:42px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#475569;font-size:1.3rem;cursor:pointer}

/* --- NICE 통합인증 결과 브리지(팝업) : /cert/nice/return.do --- */
.nice-bridge{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.nice-bridge__box{max-width:360px;text-align:center}
.nice-bridge__ico{font-size:3.4rem}
.nice-bridge__ico.is-ok{color:#22c55e}
.nice-bridge__ico.is-fail{color:#ef4444}
.nice-bridge__title{margin:16px 0 6px;font-size:1.5rem;font-weight:700;color:#1f2937}
.nice-bridge__desc{margin:0;font-size:1.3rem;color:#64748b;line-height:1.6}
.nice-bridge__btn{margin-top:18px;height:44px;padding:0 22px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#475569;font-size:1.3rem;cursor:pointer}

/* --- KPN 결제창 진입/결과 (팝업) : /pay/checkout.do · /pay/return.do --- */
.pay-load{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px;text-align:center}
.pay-load__ico{font-size:3rem;color:#1f5fbf}
.pay-load__title{margin:16px 0 6px;font-size:1.5rem;font-weight:700;color:#1f2937}
.pay-load__desc{margin:0;font-size:1.3rem;color:#64748b;line-height:1.6}
.pay-load__btn{margin-top:18px;height:44px;padding:0 22px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#1f5fbf;font-size:1.3rem;font-weight:600;cursor:pointer}
.pay-result{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.pay-result__box{max-width:360px;text-align:center}
.pay-result__ico{font-size:3.4rem}
.pay-result__ico.is-ok{color:#22c55e}
.pay-result__ico.is-fail{color:#ef4444}
.pay-result__title{margin:16px 0 6px;font-size:1.5rem;font-weight:700;color:#1f2937}
.pay-result__amount{margin:0 0 6px;font-size:1.35rem;font-weight:700;color:#1f5fbf}
.pay-result__desc{margin:0;font-size:1.3rem;color:#64748b;line-height:1.6}
.pay-result__btn{margin-top:18px;height:44px;padding:0 22px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#475569;font-size:1.3rem;cursor:pointer}
.mockpay{max-width:420px;margin:0 auto;padding:22px}
.mockpay__head{padding-bottom:14px;border-bottom:2px solid #1f5fbf}
.mockpay__brand{font-size:1.45rem;font-weight:800;color:#1f5fbf}
.mockpay__brand em{font-size:1.05rem;font-weight:500;color:#94a3b8;font-style:normal}
.mockpay__summary{margin:16px 0;font-size:1.25rem;color:#334155}
.mockpay__summary > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed #e2e8f0}
.mockpay__summary dt{color:#64748b}
.mockpay__summary dd{margin:0;font-weight:600;text-align:right;word-break:break-all}
.mockpay__methods{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0}
.mockpay__label{width:100%;font-size:1.2rem;font-weight:600;color:#1f2937}
.mockpay__radio{display:inline-flex;align-items:center;gap:6px;font-size:1.25rem}
.mockpay__radio input{width:18px;height:18px;accent-color:#1f5fbf}
.mockpay__submit{margin-top:8px;width:100%;height:48px;border:0;border-radius:8px;background:#1f5fbf;color:#fff;font-size:1.4rem;font-weight:700;cursor:pointer}
.mockpay__fail{margin-top:8px;width:100%;height:42px;border:1px solid #ef4444;border-radius:8px;background:#fff;color:#ef4444;font-size:1.25rem;cursor:pointer}
.mockpay__cancel{margin-top:8px;width:100%;height:40px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#475569;font-size:1.2rem;cursor:pointer}

/* --- 화면 3 : 본인인증 전환 --- */
.cert-cv{max-width:540px;margin:0 auto;text-align:center;background:#fff;border:1px solid #e3e8ef;
	border-radius:16px;padding:44px 30px;box-shadow:0 2px 10px rgba(15,23,42,.04)}
.cert-cv__shield{position:relative;display:inline-flex;align-items:center;justify-content:center;
	width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,#2b6fd6,#17458c);margin-bottom:22px}
.cert-cv__shield > .fa-shield-halved{font-size:4rem;color:#fff}
.cert-cv__badge{position:absolute;right:6px;bottom:6px;font-size:2rem;color:#22c55e;background:#fff;border-radius:50%}
.cert-cv__title{margin:0 0 12px;font-size:1.9rem;font-weight:800;color:#1f2937}
.cert-cv__desc{margin:0 0 24px;font-size:1.35rem;color:#64748b;line-height:1.7}
.cert-cv__btn{width:100%;max-width:340px;height:54px;border:0;border-radius:10px;background:#1f5fbf;color:#fff;
	font-size:1.5rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cert-cv__btn:hover{background:#17458c}
.cert-cv__divider{position:relative;margin:22px 0 16px;color:#94a3b8;font-size:1.2rem}
.cert-cv__divider::before,.cert-cv__divider::after{content:"";position:absolute;top:50%;width:38%;height:1px;background:#e3e8ef}
.cert-cv__divider::before{left:0}
.cert-cv__divider::after{right:0}
.cert-cv__later{display:inline-block;font-size:1.35rem;color:#475569;text-decoration:underline}
.cert-cv__note{margin:6px 0 0;font-size:1.15rem;color:#94a3b8}
/* 마이페이지 본인인증(재인증) 화면 고유 영역 */
.mypage-cert__summary{margin:0 0 22px;padding:16px 18px;border:1px solid #e6ebf3;border-radius:12px;background:#f8fafc;text-align:left}
.mypage-cert__summary dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0}
.mypage-cert__summary dt{font-size:1.3rem;font-weight:700;color:#64748b}
.mypage-cert__summary dd{margin:0;font-size:1.4rem;font-weight:600;color:#1f2937;word-break:break-all}
.mypage-cert__list{margin:0 0 24px;padding:0;list-style:none;text-align:left}
.mypage-cert__list li{position:relative;padding-left:16px;margin:7px 0;font-size:1.4rem;color:#475569;line-height:1.65}
.mypage-cert__list li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:#94a3b8}

/* =========================================================================
   마이페이지 - 자녀 / 가족 관리 : 확정 시안 "자녀 / 가족 관리" 100% 퍼블리싱
   tong/mypage/family.html (GET /mypage/family.do)
   - 셸(layout-blank + header/footer/퀵메뉴) · 좌측 LNB · 2단 그리드는 .mypage-home__ 재사용
   - 이 화면 고유 영역만 .mypage-fam__ BEM prefix 로 분리
   - 마이페이지 공통 규칙: 본문 폰트 최소 1.4rem(14px)
   ========================================================================= */
.mypage-fam .mypage-home__content{gap:0}

/* ① 본문 헤더 & 목록으로 버튼 */
.mypage-fam__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mypage-fam__head .mypage-home__crumb .is-current{color:var(--mph-primary);font-weight:700}
.mypage-fam__back-btn{display:inline-flex;align-items:center;gap:8px;flex:none;padding:12px 20px;
	background:#fff;border:1px solid #cdd6e4;border-radius:10px;font-size:1.4rem;font-weight:700;
	color:#475569;text-decoration:none;transition:border-color .15s,color .15s}
.mypage-fam__back-btn:hover{border-color:var(--mph-primary);color:var(--mph-primary)}
.mypage-fam__back-btn i{font-size:1.4rem}

/* ② 본인인증 미완료 안내 */
.mypage-fam__cert-notice{display:flex;align-items:center;gap:10px;margin-top:20px;padding:14px 18px;
	border-radius:10px;background:#fff4e5;border:1px solid #fcd9a8;color:#b45309;font-size:1.4rem}
.mypage-fam__cert-notice a{color:#b45309;font-weight:700;text-decoration:underline}

/* ③ 상단 안내 배너 + 등록 버튼 */
.mypage-fam__intro{display:flex;align-items:center;gap:16px;margin-top:22px;padding:22px 24px;
	border-radius:12px;background:#f2f6fd;border:1px solid #dbe7fb}
.mypage-fam__intro-ico{flex:none;font-size:2rem;color:var(--mph-primary)}
.mypage-fam__intro-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mypage-fam__intro-txt p{margin:0;font-size:1.4rem;line-height:1.55;color:#37507d}
.mypage-fam__add-btn{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;
	border:0;border-radius:10px;background:var(--mph-primary);color:#fff;font-size:1.45rem;font-weight:700;
	cursor:pointer;transition:background-color .15s}
.mypage-fam__add-btn:hover{background:var(--mph-primary-dark)}

/* ④ 자녀 카드 목록 */
.mypage-fam__list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.mypage-fam__loading{grid-column:1/-1;padding:40px;text-align:center;color:#94a3b8;font-size:1.4rem}
.mypage-fam__empty{grid-column:1/-1;text-align:center;padding:52px 10px;color:#94a3b8}
.mypage-fam__empty i{font-size:3.2rem;color:#c3cdda}
.mypage-fam__empty p{margin:14px 0 0;font-size:1.4rem;line-height:1.65}

.mypage-fam__card{display:flex;flex-direction:column;border:1px solid var(--mph-line);border-radius:14px;
	padding:22px;background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.04)}
.mypage-fam__card.is-represent{border-color:#bcd3f7;box-shadow:0 4px 14px rgba(13,66,178,.1)}
.mypage-fam__card-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.mypage-fam__card-avatar{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;overflow:hidden;background:#eef4ff;border:1px solid #e0e9f7}
.mypage-fam__card-avatar img{width:100%;height:100%;object-fit:cover}
.mypage-fam__card-title{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.mypage-fam__card-name{font-size:1.6rem;font-weight:800;color:var(--mph-ink)}
.mypage-fam__card-rel{font-size:1.4rem;font-weight:600;color:#64748b}
.mypage-fam__card-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;
	background:var(--mph-primary);color:#fff;font-size:1.2rem;font-weight:700}

.mypage-fam__card-info{margin:0;display:flex;flex-direction:column;gap:9px}
.mypage-fam__card-info > div{display:flex;align-items:center;gap:9px;font-size:1.4rem}
.mypage-fam__card-info dt{flex:none;min-width:18px;color:#9aa6b6;font-weight:600}
.mypage-fam__card-info dt i{font-size:1.35rem}
.mypage-fam__card-info dd{margin:0;color:#37414f;font-weight:600}

.mypage-fam__card-represent-row{margin-top:14px}
.mypage-fam__card-represent{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;
	color:var(--mph-primary);font-size:1.3rem;font-weight:700;cursor:pointer}
.mypage-fam__card-represent:hover{text-decoration:underline}

.mypage-fam__card-actions{display:flex;gap:8px;margin-top:auto;padding-top:18px}
.mypage-fam__card-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;
	border:1px solid #cdd6e4;border-radius:9px;background:#fff;color:#475569;font-size:1.35rem;font-weight:700;
	cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.mypage-fam__card-btn:hover{border-color:var(--mph-primary);color:var(--mph-primary)}
.mypage-fam__card-btn.is-danger{color:#dc2626}
.mypage-fam__card-btn.is-danger:hover{border-color:#dc2626;color:#dc2626;background:#fef2f2}

/* ⑤ 하단 자녀 등록 안내 카드 */
.mypage-fam__guide{display:flex;gap:18px;margin-top:24px;padding:24px;border-radius:12px;
	background:#f6f8fc;border:1px solid var(--mph-line)}
.mypage-fam__guide-ico{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:12px;background:#e3ecfb;color:var(--mph-primary);font-size:1.9rem}
.mypage-fam__guide-body{flex:1;min-width:0}
.mypage-fam__guide-title{display:block;margin-bottom:12px;font-size:1.6rem;font-weight:800;color:var(--mph-ink)}
.mypage-fam__guide-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mypage-fam__guide-list li{position:relative;padding-left:14px;font-size:1.4rem;line-height:1.6;color:#48566b}
.mypage-fam__guide-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
	border-radius:50%;background:#9aa6b6}
.mypage-fam__guide-list b{font-weight:700;color:#2f3a49}
.mypage-fam__guide-foot{margin:14px 0 0;font-size:1.35rem;font-weight:700;color:var(--mph-primary)}

/* ⑥ 등록/수정 모달 (.join-modal 재사용, 폼 행만 자체 스타일) */
.mypage-fam__modal-lead{margin:0 0 18px;font-size:1.4rem;color:#64748b}
.mypage-fam__form-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.mypage-fam__form-label{flex:0 0 96px;padding-top:12px;font-size:1.4rem;font-weight:600;color:#1f2937}
.mypage-fam__form-row .join-input,
.mypage-fam__form-row .join-radio-row,
.mypage-fam__form-field{flex:1 1 0;min-width:0}
.mypage-fam__form-row .join-radio-row{padding-top:11px}
.mypage-fam__form-hint{margin:6px 0 0;font-size:1.25rem;color:#64748b}

.mypage-fam__consent{margin:20px 0 4px;padding:18px;border:1px solid #cfe0f7;border-radius:10px;background:#f6faff}
.mypage-fam__consent[hidden]{display:none}
.mypage-fam__consent-title{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:1.4rem;font-weight:700;color:#17458c}
.mypage-fam__consent-desc{margin:0 0 12px;font-size:1.3rem;color:#475569;line-height:1.6}
.mypage-fam__consent .mypage-fam__form-row{margin-bottom:12px}
.mypage-fam__consent .mypage-fam__form-label{flex-basis:140px}
.mypage-fam__consent .join-agree-list__label{margin-top:6px}

/* ⑦ 반응형 */
@media (max-width:1024px){
	.mypage-fam__list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
	.mypage-fam__head{flex-direction:column}
	.mypage-fam__back-btn{align-self:flex-start}
	.mypage-fam__intro{flex-direction:column;align-items:stretch;text-align:left}
	.mypage-fam__add-btn{width:100%;justify-content:center}
	.mypage-fam__list{grid-template-columns:1fr}
	.mypage-fam__form-row{flex-direction:column;gap:6px}
	.mypage-fam__form-label{flex-basis:auto;padding-top:0}
	.mypage-fam__form-row .join-radio-row,
	.mypage-fam__consent .mypage-fam__form-label{padding-top:0}
}

/* --- 화면 5 : 수강 대상자 선택 --- */
.apply-tgt{max-width:720px;margin:0 auto}
.apply-tgt__course{display:flex;align-items:center;gap:16px;padding:20px;border-radius:14px;
	background:linear-gradient(135deg,#eaf2ff,#f5f8fc);border:1px solid #dbe6f6}
.apply-tgt__course-ico{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:14px;background:#1f5fbf;color:#fff;font-size:2rem}
.apply-tgt__course-info{display:flex;flex-direction:column;gap:6px}
.apply-tgt__course-info > div{display:flex;gap:10px;font-size:1.35rem;color:#1f2937}
.apply-tgt__course-label{width:64px;flex:none;color:#64748b}
.apply-tgt__course-age{color:#1f5fbf}
.apply-tgt__title{display:flex;align-items:center;gap:6px;margin:24px 0 12px;font-size:1.55rem;font-weight:700;color:#1f2937}
.apply-tgt__title i{color:#94a3b8;font-size:1.3rem}
.apply-tgt__list{display:flex;flex-direction:column;gap:10px}
.apply-tgt__item{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid #e3e8ef;
	border-radius:12px;background:#fff;cursor:pointer}
.apply-tgt__item:has(.apply-tgt__radio:checked){border-color:#1f5fbf;background:#f2f7ff}
.apply-tgt__item.is-blocked{background:#f8fafc;cursor:not-allowed;opacity:.75}
.apply-tgt__radio{width:20px;height:20px;flex:none;accent-color:#1f5fbf}
.apply-tgt__person{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.apply-tgt__person > i{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#eef4ff;color:#1f5fbf;font-size:1.4rem}
.apply-tgt__person-name{display:flex;flex-direction:column}
.apply-tgt__person-name strong{font-size:1.4rem;color:#1f2937}
.apply-tgt__person-sub{font-size:1.15rem;color:#94a3b8}
.apply-tgt__status{display:flex;align-items:center;gap:6px;flex:none;font-size:1.25rem;font-weight:600}
.apply-tgt__status.is-ok{color:#0f9d58}
.apply-tgt__status.is-no{color:#dc2626}
.apply-tgt__empty{padding:24px;text-align:center;color:#94a3b8;font-size:1.3rem}
.apply-tgt__foot{display:flex;align-items:center;gap:8px;margin-top:16px;padding:14px 16px;border-radius:10px;
	background:#f1f5f9;color:#475569;font-size:1.25rem}

/* --- 반응형 (모바일) --- */
@media (max-width:767px){
	.join-steps{max-width:none}
	.join-steps__item{gap:7px;font-size:1.35rem}
	.join-steps__no{width:34px;height:34px;font-size:1.55rem}
	.join-steps__item:not(:last-child)::after{top:17px}
	.join-card{padding:20px 16px}
	.join-cert-methods{grid-template-columns:1fr}
	.join-certgrid{grid-template-columns:1fr}
	.join-guardfields{grid-template-columns:1fr}
	.join-sec + .join-sec{margin-top:30px}
	.join-nav{flex-direction:column-reverse}
	.join-nav .join-btn{width:100%}
	.join-ftable__th{flex:1 1 100%;border-bottom:1px solid #e8ecf2}
	.join-ftable__row--split .join-ftable__td{flex:1 1 100%}
	.join-ftable__ctrl,.join-ftable__hint{flex:1 1 100%}
	.join-email__local,.join-email__domain,.join-email__mode,.join-email__custom{flex:1 1 100%}
	.join-emgc{grid-template-columns:1fr}
	.join-certgrid--4{grid-template-columns:1fr}
	.join-done-hero__title{font-size:2.05rem}
	.join-locked-grid{grid-template-columns:1fr}
	.join-actions{flex-direction:column-reverse}
	.join-actions .join-btn{width:100%}
	.join-inline{flex-direction:column}
	.join-input--zip{max-width:none}
	.join-field--split{flex-direction:column;align-items:stretch;gap:8px}
	.join-field--split > .join-label{flex:none}
	.join-field--split > .join-field__hint{margin-left:0}
	.apply-tgt__item{flex-wrap:wrap}
	.apply-tgt__status{width:100%;padding-left:52px}
}

/* --- 반응형 (PC 넓은 화면) --- */
@media (min-width:1024px){
	.join{max-width:940px}
}

/* =========================================================
   아이디 찾기 · 비밀번호 재설정 (find-acct) - tong/login/find_account.html
   클래스명 충돌 방지를 위해 find-acct 고유 Prefix + BEM 네이밍을 적용한다.
   ========================================================= */
.find-acct{max-width:600px;margin:0 auto;padding:8px 0}
/* hidden 속성이 아래 flex/grid 규칙에 가려지지 않도록 강제한다(패널·인증박스·결과 토글 공통) */
.find-acct [hidden]{display:none !important}
.find-acct__tabs{display:flex;gap:8px;margin-bottom:22px}
.find-acct__tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
	height:50px;border:1px solid #d5dde8;border-radius:10px;background:#f5f8fc;color:#64748b;
	font-size:1.4rem;font-weight:700;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.find-acct__tab i{font-size:1.35rem}
.find-acct__tab.is-active{background:#1f5fbf;border-color:#1f5fbf;color:#fff}

.find-acct__panel{background:#fff;border:1px solid #e3e8ef;border-radius:14px;padding:26px 24px;
	box-shadow:0 2px 10px rgba(15,23,42,.04)}
.find-acct__lead{display:flex;gap:10px;margin:0 0 22px;padding:14px 16px;border-radius:10px;
	background:#f1f5f9;color:#475569;font-size:1.3rem;line-height:1.65;word-break:keep-all}
.find-acct__lead i{flex:none;margin-top:2px;color:#1f5fbf;font-size:1.4rem}
.find-acct__lead strong{color:#1f2937}
.find-acct__lead em{font-style:normal;color:#1f5fbf;font-weight:700}

.find-acct__field{margin-bottom:18px}
.find-acct__label{display:block;margin-bottom:8px;font-size:1.35rem;font-weight:700;color:#1e293b}
.find-acct__input{width:100%;min-height:48px;padding:0 16px;border:1px solid #cbd5e1;border-radius:8px;
	font-size:1.4rem;color:#0f172a;background:#fff;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
.find-acct__input:focus{outline:none;border-color:#1f5fbf;box-shadow:0 0 0 3px rgba(31,95,191,.12)}

.find-acct__cert{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
	padding:26px 20px;border:1px dashed #c7d3e3;border-radius:12px;background:#f8fbff}
.find-acct__cert-ico{font-size:2.8rem;color:#1f5fbf}
.find-acct__cert-title{font-size:1.45rem;font-weight:800;color:#1f2937;margin-top:4px}
.find-acct__cert-desc{font-size:1.25rem;color:#64748b;line-height:1.6;word-break:keep-all}

.find-acct__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;
	padding:0 22px;border:1px solid transparent;border-radius:8px;font-size:1.4rem;font-weight:700;
	text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.find-acct__btn--primary{margin-top:12px;background:#1f5fbf;color:#fff}
.find-acct__btn--primary:hover{background:#17458c}
.find-acct__btn--primary:disabled{background:#a9bcd6;cursor:not-allowed}
.find-acct__btn--outline{background:#fff;border-color:#1f5fbf;color:#1f5fbf}
.find-acct__btn--outline:hover{background:#eef4ff}

.find-acct__result{text-align:center;padding:10px 4px 4px}
.find-acct__result-ico{font-size:3rem;color:#22c55e}
.find-acct__result-title{margin:12px 0 10px;font-size:1.4rem;font-weight:700;color:#475569}
.find-acct__result-id{margin:0 0 8px;font-size:2.2rem;font-weight:800;letter-spacing:1px;color:#1f2937;word-break:break-all}
.find-acct__result-meta{margin:0;font-size:1.25rem;color:#94a3b8}
.find-acct__result-note{display:flex;gap:8px;justify-content:center;align-items:flex-start;
	margin:16px 0 0;padding:12px 14px;border-radius:10px;background:#fff7ed;color:#b45309;
	font-size:1.2rem;line-height:1.6;text-align:left;word-break:keep-all}
.find-acct__result-note i{flex:none;margin-top:2px}
.find-acct__result-note strong{color:#92400e}
.find-acct__result-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.find-acct__result-actions .find-acct__btn{flex:1;min-width:150px;margin-top:0}

.find-acct__temp{display:inline-flex;align-items:center;gap:10px;margin:4px 0 2px;padding:12px 18px;
	border:1px solid #cfe0f7;border-radius:10px;background:#f6faff}
.find-acct__temp-value{font-size:1.9rem;font-weight:800;letter-spacing:1px;color:#1f5fbf;word-break:break-all}
.find-acct__temp-copy{flex:none;width:38px;height:38px;border:1px solid #cbd5e1;border-radius:8px;
	background:#fff;color:#475569;font-size:1.35rem;cursor:pointer}
.find-acct__temp-copy:hover{background:#eef4ff;color:#1f5fbf}

.find-acct__foot{margin-top:22px;text-align:center;font-size:1.3rem;color:#94a3b8}
.find-acct__foot a{color:#475569;text-decoration:none}
.find-acct__foot a:hover{text-decoration:underline}
.find-acct__foot-sep{margin:0 10px}

@media (max-width:767px){
	.find-acct__panel{padding:20px 16px}
	.find-acct__tab{font-size:1.25rem;height:46px}
	.find-acct__result-actions .find-acct__btn{flex:1 1 100%}
}

/* =========================================================================
   마이페이지 홈(대시보드) - 확정 시안 "마이페이지 홈(선택).png" 100% 퍼블리싱
   tong/mypage/main.html  (GET /mypage/main.do)
   ========================================================================= */
.mypage-home{
	--mph-primary:#0d42b2;
	--mph-primary-dark:#0a3690;
	--mph-ink:#1b2942;
	--mph-sub:#64748b;
	--mph-line:#e5e9f0;
	--mph-bg:#f4f6fa;
	--mph-radius:12px;
}
.mypage-home__body{background:var(--mph-bg);padding:36px 0 64px}
.mypage-home__inner{max-width:1400px;margin:0 auto;padding:0 24px;
	display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}

/* ---------- 좌측 LNB ---------- */
.mypage-home__lnb{background:#fff;border:1px solid var(--mph-line);border-radius:var(--mph-radius);
	padding:26px 18px;position:sticky;top:20px}
.mypage-home__lnb-title{margin:0 0 18px;padding-left:8px;font-size:2rem;font-weight:800;color:#0f2350}
.mypage-home__lnb-menu{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:4px}
.mypage-home__lnb-menu a{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:9px;
	font-size:1.4rem;font-weight:600;color:#48505e;text-decoration:none;transition:background-color .15s,color .15s}
.mypage-home__lnb-menu a i{width:18px;text-align:center;font-size:1.4rem}
.mypage-home__lnb-menu a:hover{background:#eef2fb;color:var(--mph-primary)}
.mypage-home__lnb-menu .is-active a{background:var(--mph-primary);color:#fff}
.mypage-home__cs{background:#f2f6fd;border:1px solid #e1eafb;border-radius:11px;padding:20px 16px;text-align:center}
.mypage-home__cs-label{display:block;margin-bottom:8px;font-size:1.4rem;font-weight:700;color:#5a6b86}
.mypage-home__cs-label i{margin-right:5px;color:var(--mph-primary)}
.mypage-home__cs-tel{display:block;font-size:1.9rem;font-weight:800;color:var(--mph-primary)}
.mypage-home__cs-time{margin:10px 0 0;font-size:1.4rem;line-height:1.6;color:#7c8aa0}

/* ---------- 우측 콘텐츠 ---------- */
.mypage-home__content{min-width:0;display:flex;flex-direction:column;gap:20px}

.mypage-home__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mypage-home__crumb{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:1.4rem;color:#8b95a5}
.mypage-home__crumb .fa-chevron-right{font-size:1.4rem}
.mypage-home__title{margin:0;font-size:2.6rem;font-weight:800;color:var(--mph-ink)}
.mypage-home__desc{margin:8px 0 0;font-size:1.4rem;color:var(--mph-sub)}
.mypage-home__card-btn{display:inline-flex;align-items:center;gap:8px;flex:none;padding:12px 18px;
	background:#fff;border:1px solid #d3dae6;border-radius:10px;font-size:1.4rem;font-weight:700;
	color:#374151;cursor:pointer;transition:border-color .15s,color .15s}
.mypage-home__card-btn:hover{border-color:var(--mph-primary);color:var(--mph-primary)}

/* ROW 1 : 프로필 & 감면 자격 */
.mypage-home__profile-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px}
.mypage-home__panel{background:#fff;border:1px solid var(--mph-line);border-radius:var(--mph-radius);padding:24px}
.mypage-home__profile{display:flex;align-items:center;gap:20px}
.mypage-home__avatar{width:92px;height:92px;flex:none;border-radius:50%;overflow:hidden;
	background:#eef2f8;border:1px solid #e3e9f2}
.mypage-home__avatar img{width:100%;height:100%;object-fit:cover}
.mypage-home__name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mypage-home__name{font-size:2rem;font-weight:800;color:var(--mph-ink)}
.mypage-home__badge-nice{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;background:#e0f2fe;color:#0284c7;font-size:1.4rem;font-weight:700}
.mypage-home__p-sub{margin:9px 0 0;font-size:1.4rem;color:#475569}
.mypage-home__p-meta{margin:5px 0 0;font-size:1.4rem;color:#8b95a5}
.mypage-home__p-meta span[aria-hidden]{margin:0 7px;color:#cbd5e1}
.mypage-home__discount{background:#eef4fe;border-color:#dbe7fb}
.mypage-home__d-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mypage-home__d-ico{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#dbe7fb;color:var(--mph-primary);font-size:1.7rem}
.mypage-home__d-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:1.6rem;font-weight:800;color:var(--mph-ink)}
.mypage-home__badge-discount{padding:4px 10px;border-radius:20px;background:var(--mph-primary);color:#fff;font-size:1.4rem;font-weight:700}
.mypage-home__check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mypage-home__check li{display:flex;align-items:flex-start;gap:8px;font-size:1.4rem;color:#37507d}
.mypage-home__check i{margin-top:2px;color:#2563eb}
.mypage-home__d-more{display:block;margin-top:14px;text-align:right;font-size:1.4rem;font-weight:700;
	color:var(--mph-primary);text-decoration:none}
.mypage-home__d-more:hover{text-decoration:underline}

/* ROW 2 : 요약 카운터 4열 */
.mypage-home__counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mypage-home__counter{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--mph-line);border-radius:var(--mph-radius);padding:22px 20px;box-shadow:0 1px 2px rgba(16,32,64,.04)}
.mypage-home__c-body{display:flex;align-items:center;gap:14px;min-width:0}
.mypage-home__c-ico{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:2rem}
.mypage-home__c-ico.is-blue{background:#e5efff;color:#2563eb}
.mypage-home__c-ico.is-green{background:#e3f6ec;color:#16a34a}
.mypage-home__c-ico.is-orange{background:#fdeede;color:#ea8a1e}
.mypage-home__c-ico.is-purple{background:#efe8fb;color:#7c3aed}
.mypage-home__c-ico.is-red{background:#fde8e8;color:#dc2626}
.mypage-home__c-label{display:block;margin-bottom:5px;font-size:1.4rem;font-weight:600;color:#334155}
.mypage-home__c-num{font-size:2.6rem;font-weight:800;color:var(--mph-ink);white-space:nowrap}
.mypage-home__c-num span{margin-left:2px;font-size:1.4rem;font-weight:600;color:#8b95a5}
.mypage-home__c-num span:first-child{font-size:2rem;color:#333;font-weight:800}
.mypage-home__c-link{align-self:flex-end;margin-top:auto;font-size:1.4rem;font-weight:700;color:var(--mph-primary);text-decoration:none}
.mypage-home__c-link:hover{text-decoration:underline}

/* ROW 3 : 최근 신청 현황(풀폭) · ROW 4 : 개인정보 보호 안내 + 알림(2열) */
.mypage-home__row4{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.mypage-home__recent{background:#fff;border:1px solid var(--mph-line);border-radius:var(--mph-radius);padding:22px}
.mypage-home__recent-title{display:block;margin-bottom:14px;font-size:1.6rem;font-weight:800;color:var(--mph-ink)}
.mypage-home__recent-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.mypage-home__tabs{display:inline-flex;background:#f1f4f9;border-radius:9px;padding:4px}
.mypage-home__tab{border:none;background:transparent;padding:9px 16px;border-radius:7px;
	font-size:1.4rem;font-weight:700;color:#7a8699;cursor:pointer}
.mypage-home__tab.is-active{background:var(--mph-primary);color:#fff}
.mypage-home__recent-all{font-size:1.4rem;font-weight:700;color:var(--mph-primary);text-decoration:none;white-space:nowrap}
.mypage-home__recent-all:hover{text-decoration:underline}
.mypage-home__table-wrap{overflow-x:auto}
.mypage-home__table{width:100%;border-collapse:collapse;font-size:1.4rem}
.mypage-home__table th{padding:12px 10px;background:#f7f9fc;color:#6b7686;font-weight:700;white-space:nowrap;
	border-top:1px solid #eef1f6;border-bottom:1px solid #eef1f6}
.mypage-home__table td{padding:14px 10px;text-align:center;vertical-align:middle;color:#40495a;
	border-bottom:1px solid #f0f2f7}
.mypage-home__table td.is-left{text-align:left}
.mypage-home__t-course{font-weight:700;color:var(--mph-ink)}
.mypage-home__t-sub{display:block;margin-top:3px;font-size:1.4rem;color:#94a3b8}
.mypage-home__tag{display:inline-block;padding:3px 9px;border-radius:6px;background:#eef2fb;color:#3b5aa6;
	font-size:1.4rem;font-weight:700}
.mypage-home__status{display:inline-block;padding:4px 11px;border-radius:20px;font-size:1.4rem;font-weight:700;white-space:nowrap}
.mypage-home__status.is-ing{background:#e3f6ec;color:#16a34a}
.mypage-home__status.is-done{background:#efe8fb;color:#7c3aed}
.mypage-home__status.is-cancel{background:#fde8e8;color:#dc2626}
.mypage-home__status.is-wait{background:#fdf0dc;color:#c2790f}
.mypage-home__t-detail{display:inline-flex;align-items:center;gap:4px;padding:6px 11px;border:1px solid #c9d9f5;
	border-radius:7px;font-size:1.4rem;font-weight:700;color:var(--mph-primary);background:#f4f8ff;
	text-decoration:none;white-space:nowrap}
.mypage-home__t-detail:hover{background:var(--mph-primary);border-color:var(--mph-primary);color:#fff}
.mypage-home__empty{padding:40px 0;text-align:center;color:#a0aab8;font-size:1.4rem}
.mypage-home__notice{background:#fff;border:1px solid var(--mph-line);border-radius:var(--mph-radius);padding:20px}
.mypage-home__notice-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mypage-home__notice-head strong{font-size:1.5rem;font-weight:800;color:var(--mph-ink)}
.mypage-home__notice-head .more{font-size:1.4rem;font-weight:700;color:var(--mph-primary);text-decoration:none}
.mypage-home__notice-head .more:hover{text-decoration:underline}
.mypage-home__notice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mypage-home__notice-list li{display:flex;justify-content:space-between;gap:10px;font-size:1.4rem;min-width:0}
.mypage-home__notice-list a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#40495a;text-decoration:none}
.mypage-home__notice-list a:hover{color:var(--mph-primary);text-decoration:underline}
.mypage-home__notice-list span{flex:none;color:#a0aab8}

/* 개인정보 보호 안내 (최근 신청 현황 카드 하단) */
.mypage-home__privacy{display:flex;justify-content:space-between;align-items:center;gap:18px;
	background:#eef4fe;border:1px solid #dbe7fb;border-radius:var(--mph-radius);padding:22px 26px}
.mypage-home__pv-left{display:flex;align-items:center;gap:16px}
.mypage-home__pv-ico{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#dbe7fb;color:var(--mph-primary);font-size:1.6rem}
.mypage-home__pv-left strong{display:block;margin-bottom:5px;font-size:1.5rem;font-weight:800;color:var(--mph-ink)}
.mypage-home__pv-left p{margin:0;font-size:1.4rem;line-height:1.6;color:#5a6b86}
.mypage-home__pv-btn{flex:none;padding:11px 20px;background:#fff;border:1px solid var(--mph-primary);
	border-radius:9px;font-size:1.4rem;font-weight:700;color:var(--mph-primary);cursor:pointer;transition:background-color .15s,color .15s}
.mypage-home__pv-btn:hover{background:var(--mph-primary);color:#fff}

/* 모바일 회원증 팝업 */
.mph-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center}
.mph-modal[hidden]{display:none}
.mph-modal__dim{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.mph-modal__panel{position:relative;width:min(92vw,360px);padding:30px 24px 26px;background:#fff;
	border-radius:16px;text-align:center;box-shadow:0 24px 60px rgba(2,17,54,.28)}
.mph-modal__close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;background:transparent;
	font-size:1.6rem;color:#94a3b8;cursor:pointer}
.mph-modal__brand{margin:0 0 16px;font-size:1.4rem;font-weight:700;color:var(--mph-primary)}
.mph-modal__qr{width:180px;height:180px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
	border:1px solid #e3e9f2;border-radius:14px;background:#f7f9fc;color:#0f2350;font-size:5rem}
.mph-modal__name{font-size:1.9rem;font-weight:800;color:var(--mph-ink)}
.mph-modal__meta{margin:6px 0 0;font-size:1.4rem;color:#64748b}
.mph-modal__hint{margin:16px 0 0;font-size:1.4rem;color:#94a3b8}

/* 푸터 웨이브 구역 : 마이페이지 계열 화면(.mypage-home)에서는 흰 100px 간격 대신
   본문과 같은 회색(#f4f6fa) 여백을 웨이브 안쪽 padding 으로 두어 중앙 영역과 하단이 자연스럽게 이어지게 한다. */
.mypage-home .main-footer__wave-wrap{margin-top:0;padding-top:100px;background:#f4f6fa}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.mypage-home__inner{grid-template-columns:1fr;gap:22px}
	.mypage-home__lnb{position:static;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}
	.mypage-home__lnb-title{grid-column:1/-1;margin-bottom:4px}
	.mypage-home__lnb-menu{margin-bottom:0}
	.mypage-home__row4{grid-template-columns:1fr}
}
@media (max-width:900px){
	.mypage-home__profile-grid{grid-template-columns:1fr}
	.mypage-home__counter-grid{grid-template-columns:repeat(2,1fr)}
	.mypage-home__lnb{grid-template-columns:1fr}
}
@media (max-width:640px){
	.mypage-home__body{padding:24px 0 44px}
	.mypage-home__inner{padding:0 16px}
	.mypage-home__head{flex-direction:column}
	.mypage-home__title{font-size:2.2rem}
	.mypage-home__counter-grid{grid-template-columns:1fr}
	.mypage-home__privacy{flex-direction:column;align-items:flex-start}
	.mypage-home__pv-btn{align-self:stretch}
	.mypage-home .main-footer__wave-wrap{padding-top:56px}
}

/* =========================================================================
   마이페이지 - 수강 신청 내역 - 확정 시안 "마이페이지-수강 신청 내역.png" 100% 퍼블리싱
   tong/mypage/lecture_list.html  (GET /mypage/lectureList.do)
   좌측 LNB / 2단 그리드 셸은 .mypage-home__ 클래스를 재사용하고, 이 화면 고유 영역만 아래에 정의한다.
   ========================================================================= */
.mypage-lecture{
	--mpl-primary:#0d42b2;
	--mpl-ink:#1b2942;
	--mpl-sub:#64748b;
	--mpl-line:#e5e9f0;
	--mpl-radius:12px;
}
/* 이 화면은 블록 간격을 각 요소의 margin-top 으로 직접 제어한다(셸의 flex gap 무효화). */
.mypage-lecture .mypage-home__content{gap:0}
.mypage-lecture__summary{margin-top:22px}
.mypage-lecture__filter{margin-top:20px}

/* ① 본문 헤더 & 우측 버튼 */
.mypage-lecture__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mypage-lecture__head .mypage-home__crumb .is-current{color:var(--mpl-primary);font-weight:700}
.mypage-lecture__direct-btn{display:inline-flex;align-items:center;gap:8px;flex:none;padding:12px 20px;
	background:#fff;border:1px solid #d3dae6;border-radius:10px;font-size:1.4rem;font-weight:700;
	color:#374151;text-decoration:none;transition:border-color .15s,color .15s}
.mypage-lecture__direct-btn:hover{border-color:var(--mpl-primary);color:var(--mpl-primary)}
.mypage-lecture__direct-btn i{font-size:1.4rem}

/* ② 상단 요약 카운터 카드 (5열) : 아이콘/타이틀/숫자는 마이페이지 홈(.mypage-home__c-*) 스타일 그대로 재사용 */
.mypage-lecture__summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
	background:#fff;border:1px solid var(--mpl-line);border-radius:var(--mpl-radius);
	padding:22px 4px;box-shadow:0 1px 2px rgba(16,32,64,.04)}
.mypage-lecture__summary-item{display:flex;align-items:center;gap:14px;padding:6px 16px;min-width:0;
	border-left:1px solid #eef1f6}
.mypage-lecture__summary-item:first-child{border-left:none}
.mypage-lecture__summary-txt{display:block;min-width:0}
.mypage-lecture__summary .mypage-home__c-num{display:block}
.mypage-lecture__summary .mypage-home__c-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ③ 검색 및 필터 박스 */
.mypage-lecture__filter{background:#f4f7fc;border:1px solid #e4ebf6;border-radius:var(--mpl-radius);padding:22px 24px}
.mypage-lecture__filter-row{display:grid;
	grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);gap:18px}
.mypage-lecture__filter-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.mypage-lecture__filter-group>label{font-size:1.4rem;font-weight:700;color:#42506b}
.mypage-lecture__date-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.mypage-lecture__date-wrap .mypage-lecture__input,.mypage-lecture__date-wrap .mypage-lecture__select{flex:1;width:auto;min-width:0}
.mypage-lecture__date-sep{flex:none;color:#94a3b8}
.mypage-lecture__input,.mypage-lecture__select{width:100%;max-width:100%;height:44px;padding:0 14px;box-sizing:border-box;
	background:#fff;border:1px solid #d3dae6;border-radius:9px;font-size:1.4rem;color:#37507d}
.mypage-lecture__input:focus,.mypage-lecture__select:focus{outline:none;border-color:var(--mpl-primary);
	box-shadow:0 0 0 3px rgba(13,66,178,.12)}
.mypage-lecture__select{appearance:none;-webkit-appearance:none;cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7686' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.mypage-lecture__filter-btns{display:flex;justify-content:center;gap:10px;margin-top:20px}
.mypage-lecture__btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 30px;
	border-radius:9px;font-size:1.4rem;font-weight:700;cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s}
.mypage-lecture__btn.is-search{background:var(--mpl-primary);border:1px solid var(--mpl-primary);color:#fff}
.mypage-lecture__btn.is-search:hover{background:#0a3690;border-color:#0a3690}
.mypage-lecture__btn.is-reset{background:#fff;border:1px solid #cdd6e4;color:#475569}
.mypage-lecture__btn.is-reset:hover{border-color:var(--mpl-primary);color:var(--mpl-primary)}

/* ④ 테이블 상단 툴바 */
.mypage-lecture__toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:24px}
.mypage-lecture__toolbar-guide{margin:0;display:flex;align-items:center;gap:7px;font-size:1.4rem;color:#3b6fd4}
.mypage-lecture__toolbar-btns{display:flex;gap:8px;flex:none}
.mypage-lecture__tool-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;
	background:#fff;border:1px solid #cdd6e4;border-radius:8px;font-size:1.4rem;font-weight:700;color:#475569;cursor:pointer}
.mypage-lecture__tool-btn:hover{border-color:var(--mpl-primary);color:var(--mpl-primary)}
.mypage-lecture__tool-btn.is-excel{background:#065f46;border-color:#065f46;color:#fff}
.mypage-lecture__tool-btn.is-excel:hover{background:#054c38;border-color:#054c38;color:#fff}

/* ⑤ 데이터 테이블 */
.mypage-lecture__table-wrap{margin-top:12px;overflow-x:auto;overflow-y:hidden;
	border:1px solid var(--mpl-line);border-radius:var(--mpl-radius)}
.mypage-lecture__table{width:100%;min-width:1060px;border-collapse:collapse;font-size:1.4rem}
.mypage-lecture__table th{padding:15px 10px;background:#f7f9fc;color:#5a6b86;font-weight:700;white-space:nowrap;
	border-bottom:1px solid #e9edf4}
.mypage-lecture__table td{padding:18px 10px;text-align:center;vertical-align:middle;color:#40495a;
	background:#fff;border-bottom:1px solid #f0f2f7;line-height:1.55}
.mypage-lecture__table tbody tr:last-child td{border-bottom:0}
.mypage-lecture__table td.is-left{text-align:left}
.mypage-lecture__course{display:block;font-size:1.4rem;font-weight:700;color:var(--mpl-ink);text-decoration:none}
.mypage-lecture__course:hover{color:var(--mpl-primary);text-decoration:underline}
.mypage-lecture__facility{display:block;margin-top:4px;font-size:1.4rem;color:#94a3b8}
.mypage-lecture__schedule{color:#8b95a5;font-size:1.4rem}
.mypage-lecture__fee{display:inline-block;font-size:1.4rem;font-weight:800;color:var(--mpl-ink)}
.mypage-lecture__discount{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:6px;
	background:#e6f0ff;color:#1d4ed8;font-size:1.4rem;font-weight:700;line-height:1.3}

/* 상태 배지 (신청상태 / 결제상태 공용) */
.mypage-lecture__badge{display:inline-block;padding:6px 14px;border-radius:20px;font-size:1.4rem;font-weight:700;white-space:nowrap;line-height:1.3}
.mypage-lecture__badge.is-green{background:#e3f6ec;color:#16a34a}
.mypage-lecture__badge.is-orange{background:#ffedd5;color:#f97316}
.mypage-lecture__badge.is-purple{background:#f3e8ff;color:#a855f7}
.mypage-lecture__badge.is-red{background:#fee2e2;color:#ef4444}
.mypage-lecture__badge.is-blue-light{background:#e0f2fe;color:#0284c7}
.mypage-lecture__badge.is-gray{background:#eef1f6;color:#64748b}

/* 수강현황 : 출석 텍스트 + 라이브러리 없는 도넛(conic-gradient) 프로그레스 */
.mypage-lecture__attend{display:flex;align-items:center;justify-content:center;gap:12px}
.mypage-lecture__attend-txt{font-size:1.4rem;line-height:1.5;color:#40495a;white-space:nowrap;text-align:left}
.mypage-lecture__attend-txt small{display:inline-block;margin-top:2px;color:#8b95a5;font-size:1.4rem}
.mypage-lecture__chart{--percent:0;width:62px;height:62px;flex:none;border-radius:50%;
	display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:#2563eb;
	background:
		radial-gradient(closest-side,#fff 70%,transparent 71% 100%),
		conic-gradient(#2563eb calc(var(--percent) * 1%),#e2e8f0 0)}
.mypage-lecture__dash{color:#c2cad6}

/* 관리 컬럼 액션 버튼 */
.mypage-lecture__act{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:8px;
	font-size:1.4rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.mypage-lecture__act i{font-size:1.4rem}
.mypage-lecture__act.is-detail,.mypage-lecture__act.is-cert{border:1px solid #c9d9f5;background:#f4f8ff;color:var(--mpl-primary)}
.mypage-lecture__act.is-detail:hover,.mypage-lecture__act.is-cert:hover{background:var(--mpl-primary);border-color:var(--mpl-primary);color:#fff}
.mypage-lecture__act.is-pay{background:var(--mpl-primary);border:1px solid var(--mpl-primary);color:#fff}
.mypage-lecture__act.is-pay:hover{background:#0a3690;border-color:#0a3690}
.mypage-lecture__act.is-cancel{display:flex;width:max-content;margin:6px auto 0;border:1px solid #fecaca;background:#fff5f5;color:#dc2626}
.mypage-lecture__act.is-cancel:hover{background:#dc2626;border-color:#dc2626;color:#fff}
/* 수강 신청 상세 : 취소/환불 안내 + 버튼 (신청 정보 탭) */
.mypage-ldt__actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding:18px 24px;border:1px solid #fde3c8;background:#fffaf3;border-radius:12px}
.mypage-ldt__actions-msg{margin:0;flex:1 1 320px;font-size:1.4rem;line-height:1.6;color:#9a4a08}
.mypage-ldt__actions-btns{display:flex;gap:10px;margin-left:auto}
.mypage-ldt__act-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:1px solid transparent;border-radius:8px;font-size:1.4rem;font-weight:700;line-height:1.3;cursor:pointer;text-decoration:none}
.mypage-ldt__act-btn.is-cancel{border-color:#fecaca;background:#fff5f5;color:#dc2626}
.mypage-ldt__act-btn.is-cancel:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.mypage-lecture__empty{padding:56px 0;text-align:center;color:#a0aab8;font-size:1.4rem}

/* ⑥ 하단 페이징 & 표시 개수 */
.mypage-lecture__pager{position:relative;display:flex;justify-content:center;align-items:center;margin-top:26px}
.mypage-lecture__pagination{display:inline-flex;align-items:center;gap:6px}
.mypage-lecture__page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
	padding:0 8px;border:1px solid #dde3ec;border-radius:8px;background:#fff;
	font-size:1.4rem;font-weight:700;color:#5a6b86;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s}
.mypage-lecture__page-btn:hover{border-color:var(--mpl-primary);color:var(--mpl-primary)}
.mypage-lecture__page-btn.is-active{background:var(--mpl-primary);border-color:var(--mpl-primary);color:#fff}
.mypage-lecture__page-size{position:absolute;right:0}
.mypage-lecture__select.is-sm{height:38px;font-size:1.4rem;padding:0 30px 0 12px;background-position:right 10px center}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.mypage-lecture__summary{grid-template-columns:repeat(3,1fr);row-gap:18px}
	.mypage-lecture__summary-item:nth-child(3n+1){border-left:none}
	.mypage-lecture__filter-row{grid-template-columns:repeat(2,1fr)}
	.mypage-lecture__filter-group.is-date,.mypage-lecture__filter-group.is-keyword{grid-column:1/-1}
}
@media (max-width:900px){
	.mypage-lecture__head{flex-direction:column}
	.mypage-lecture__direct-btn{align-self:flex-start}
	.mypage-lecture__pager{flex-direction:column;gap:14px}
	.mypage-lecture__page-size{position:static}
}
@media (max-width:640px){
	.mypage-lecture__summary{grid-template-columns:repeat(2,1fr);padding:18px 6px}
	.mypage-lecture__summary-item{padding:6px 12px}
	.mypage-lecture__summary-item:nth-child(3n+1){border-left:1px solid #eef1f6}
	.mypage-lecture__summary-item:nth-child(2n+1){border-left:none}
	.mypage-lecture__filter{padding:18px 16px}
	.mypage-lecture__filter-row{grid-template-columns:1fr}
	.mypage-lecture__filter-group.is-date,.mypage-lecture__filter-group.is-keyword{grid-column:auto}
	.mypage-lecture__toolbar{flex-direction:column;align-items:flex-start;gap:10px}
	.mypage-lecture__filter-btns .mypage-lecture__btn{flex:1}
}

/* =========================================================================
   마이페이지 - 시설 대관 & 추첨 내역 - 확정 시안 2종("시설 대관 내역" / "추첨 신청 내역") 100% 퍼블리싱
   tong/mypage/facility_list.html  (GET /mypage/facilityList.do[?tab=lottery])
   셸(.mypage-home__), 필터/요약/테이블/배지/페이징(.mypage-lecture__) 재사용.
   이 화면 고유 영역(탭 네비게이션 · 추첨 안내 배너 · 구분/당첨결과 셀)만 아래에 정의한다.
   ========================================================================= */
/* 블록 간격은 .mypage-lecture 규칙(.mypage-home__content{gap:0})을 그대로 상속받아 각 요소 margin-top 으로 제어 */

/* ① 상단 탭 네비게이션 */
.mypage-fac__crumb-link{color:#8b95a5;text-decoration:none}
.mypage-fac__crumb-link:hover{color:var(--mpl-primary);text-decoration:underline}
.mypage-fac__tabs{display:flex;gap:8px;margin-top:20px}
.mypage-fac__tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:46px;
	padding:0 26px;border:1px solid #d3dae6;border-radius:9px;background:#fff;
	font-size:1.5rem;font-weight:700;color:#5a6b86;text-decoration:none;
	transition:background-color .15s,color .15s,border-color .15s}
.mypage-fac__tab:hover{border-color:var(--mpl-primary);color:var(--mpl-primary)}
.mypage-fac__tab.is-active{background:var(--mpl-primary);border-color:var(--mpl-primary);color:#fff}

/* ② 필터 행 그리드 (탭별 컬럼 수가 달라 lecture 그리드 대신 별도 정의, 우측 끝 검색 버튼) */
.mypage-fac__filter-row{display:grid;gap:18px;align-items:end}
.mypage-fac__filter-row.is-rental{
	grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) auto}
.mypage-fac__filter-row.is-lottery{
	grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,1fr) auto}
.mypage-fac__filter-submit{display:flex;justify-content:flex-end}

/* ③ 추첨 안내 배너 (추첨 신청 내역 탭) */
.mypage-fac__notice{display:flex;align-items:center;gap:16px;margin-top:20px;
	background:#eff5ff;border:1px solid #d6e4fb;border-radius:var(--mpl-radius);padding:18px 22px}
.mypage-fac__notice-ico{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#dbe7fb;color:#2563eb;font-size:1.8rem}
.mypage-fac__notice-body{flex:1;min-width:0}
.mypage-fac__notice-body p{margin:0;font-size:1.4rem;color:#2f3f5c;line-height:1.55}
.mypage-fac__notice-body p.is-sub{margin-top:4px;color:#7183a3}
.mypage-fac__notice-btn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;
	background:#fff;border:1px solid #c9d9f5;border-radius:8px;font-size:1.4rem;font-weight:700;
	color:var(--mpl-primary);text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.mypage-fac__notice-btn:hover{background:var(--mpl-primary);border-color:var(--mpl-primary);color:#fff}
.mypage-fac__notice-btn i{font-size:1.2rem}

/* ④ 툴바 (시설 대관 내역 탭) : 공유하기 / 엑셀 다운로드 우측 정렬 */
.mypage-fac__toolbar{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* ⑤ 요약 카운터 카드 (대관 6열 / 추첨 5열) : 아이콘/타이틀/숫자는 .mypage-home__c-* 재사용 */
.mypage-fac__summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
	background:#fff;border:1px solid var(--mpl-line);border-radius:var(--mpl-radius);
	padding:22px 4px;box-shadow:0 1px 2px rgba(16,32,64,.04);margin-top:22px}
.mypage-fac__summary.is-5col{grid-template-columns:repeat(5,minmax(0,1fr))}
.mypage-home__c-ico.is-teal{background:#d9f2f0;color:#0d9488}

/* ⑥ 테이블 : 구분 배지 / 당첨결과 셀 (테이블 골격·상태 배지·상세보기 버튼은 .mypage-lecture__ 재사용) */
.mypage-fac__type{display:inline-block;padding:5px 13px;border-radius:20px;
	font-size:1.4rem;font-weight:700;white-space:nowrap;line-height:1.3}
.mypage-fac__type.is-rental{background:#e5efff;color:#2563eb}
.mypage-fac__type.is-lottery{background:#fdeede;color:#ea8a1e}
.mypage-fac__result{display:block;font-size:1.4rem;font-weight:800;color:var(--mpl-ink)}
.mypage-fac__result-desc{display:block;margin-top:3px;font-size:1.4rem;color:#8b95a5}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.mypage-fac__summary{grid-template-columns:repeat(3,1fr);row-gap:18px}
	.mypage-fac__summary .mypage-lecture__summary-item:nth-child(3n+1){border-left:none}
	.mypage-fac__filter-row.is-rental,
	.mypage-fac__filter-row.is-lottery{grid-template-columns:repeat(2,1fr)}
	.mypage-fac__filter-row .mypage-lecture__filter-group.is-date{grid-column:1/-1}
	.mypage-fac__filter-submit{grid-column:1/-1;justify-content:stretch}
	.mypage-fac__filter-submit .mypage-lecture__btn{flex:1}
}
@media (max-width:900px){
	.mypage-fac__notice{flex-direction:column;align-items:flex-start;gap:12px}
	.mypage-fac__notice-btn{align-self:flex-start}
	.mypage-fac__tabs .mypage-fac__tab{flex:1;min-width:0}
}
@media (max-width:640px){
	.mypage-fac__summary{grid-template-columns:repeat(2,1fr);padding:18px 6px}
	.mypage-fac__summary .mypage-lecture__summary-item{padding:6px 12px}
	.mypage-fac__summary .mypage-lecture__summary-item:nth-child(3n+1){border-left:1px solid #eef1f6}
	.mypage-fac__summary .mypage-lecture__summary-item:nth-child(2n+1){border-left:none}
	.mypage-fac__filter-row.is-rental,
	.mypage-fac__filter-row.is-lottery{grid-template-columns:1fr}
	.mypage-fac__filter-row .mypage-lecture__filter-group.is-date{grid-column:auto}
}

/* =========================================================================
   마이페이지 - 수강 신청 상세 / 신청 정보 탭 - 확정 시안 "마이페이지-수강 신청 내역-신청 정보.png"
   tong/mypage/lecture_detail_info.html  (GET /mypage/lectureDetailInfo.do)
   셸(.mypage-home__ lnb/body/inner/content) 재사용. 본문 폰트 최소 1.4rem(14px).
   ========================================================================= */
.mypage-ldt{
	--ldt-primary:#0d42b2;
	--ldt-ink:#1b2942;
	--ldt-sub:#64748b;
	--ldt-line:#e5e9f0;
	--ldt-radius:12px;
}
/* 블록 간격은 각 요소 margin-top 으로 제어(셸 flex gap 무효화) */
.mypage-ldt .mypage-home__content{gap:0}

/* ① 본문 헤더 & 목록으로 버튼 */
.mypage-ldt__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mypage-ldt__head .mypage-home__crumb a{color:inherit;text-decoration:none}
.mypage-ldt__head .mypage-home__crumb a:hover{text-decoration:underline}
.mypage-ldt__head .mypage-home__crumb .is-current{color:var(--ldt-primary);font-weight:700}
.mypage-ldt__back-btn{display:inline-flex;align-items:center;gap:8px;flex:none;padding:12px 20px;
	background:#fff;border:1px solid #d3dae6;border-radius:10px;font-size:1.4rem;font-weight:700;
	color:#374151;text-decoration:none;transition:border-color .15s,color .15s}
.mypage-ldt__back-btn:hover{border-color:var(--ldt-primary);color:var(--ldt-primary)}
.mypage-ldt__back-btn i{font-size:1.4rem}

/* ② 상단 강좌 프로필 요약 카드 */
.mypage-ldt__profile{display:flex;gap:24px;margin-top:22px;
	background:#fff;border:1px solid var(--ldt-line);border-radius:var(--ldt-radius);padding:24px;
	box-shadow:0 1px 2px rgba(16,32,64,.04)}
.mypage-ldt__thumb{width:210px;height:160px;flex:none;border-radius:10px;overflow:hidden;background:#eef2f8;border:1px solid #e3e9f2}
.mypage-ldt__thumb img{width:100%;height:100%;object-fit:cover}
.mypage-ldt__profile-info{flex:1;min-width:0}
.mypage-ldt__tags{display:flex;flex-wrap:wrap;gap:6px}
.mypage-ldt__tag{display:inline-block;padding:5px 12px;border-radius:6px;font-size:1.4rem;font-weight:700;white-space:nowrap;line-height:1.3}
.mypage-ldt__tag.is-blue{background:var(--ldt-primary);color:#fff}
.mypage-ldt__tag.is-gray{background:#eef1f6;color:#5a6b86}
.mypage-ldt__course-name{margin:14px 0 18px;font-size:2.2rem;font-weight:800;color:var(--ldt-ink)}

/* ③ 상세 탭 네비게이션 */
.mypage-ldt__tabnav{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-bottom:2px solid var(--ldt-line)}
.mypage-ldt__tab{padding:15px 10px;text-align:center;font-size:1.5rem;font-weight:700;color:#7a8699;
	text-decoration:none;border-radius:10px 10px 0 0;transition:background-color .15s,color .15s}
.mypage-ldt__tab:hover{color:var(--ldt-primary)}
.mypage-ldt__tab.is-active{background:var(--ldt-primary);color:#fff}

/* ④ 하단 상세 내역 (2열) */
.mypage-ldt__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.mypage-ldt__card{background:#fff;border:1px solid var(--ldt-line);border-radius:var(--ldt-radius);padding:24px}
.mypage-ldt__card-title{margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #eef1f6;
	font-size:1.7rem;font-weight:800;color:var(--ldt-ink)}
.mypage-ldt__applicant{display:flex;align-items:flex-start;gap:20px}
.mypage-ldt__avatar{width:110px;height:110px;flex:none;border-radius:50%;overflow:hidden;background:#eef2f8;border:1px solid #e3e9f2}
.mypage-ldt__avatar img{width:100%;height:100%;object-fit:cover}
.mypage-ldt__applicant .mypage-ldt__kv{flex:1;min-width:0}
.mypage-ldt__kv{width:100%;border-collapse:collapse;font-size:1.4rem}
.mypage-ldt__kv th{width:1%;padding:12px 16px 12px 0;text-align:left;vertical-align:top;white-space:nowrap;
	color:#8b95a5;font-weight:600;border-bottom:1px solid #f0f2f7}
.mypage-ldt__kv td{padding:12px 0;color:#37507d;line-height:1.5;border-bottom:1px solid #f0f2f7;word-break:break-all}
.mypage-ldt__kv tr:last-child th,.mypage-ldt__kv tr:last-child td{border-bottom:none}
.mypage-ldt__kv td strong{color:var(--ldt-ink);font-weight:700}

/* ⑤ 최하단 처리/결제 상태 요약 바 (6열) */
.mypage-ldt__summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:24px;
	background:#f8fafc;border:1px solid #eef1f6;border-radius:var(--ldt-radius);padding:22px 6px}
.mypage-ldt__summary-col{display:flex;flex-direction:column;align-items:center;gap:8px;
	padding:4px 12px;text-align:center;border-left:1px solid #e5e9f0;min-width:0}
.mypage-ldt__summary-col:first-child{border-left:none}
.mypage-ldt__summary-col.is-action{justify-content:center}
.mypage-ldt__summary-ico{font-size:1.9rem;color:#94a3b8;line-height:1}
.mypage-ldt__summary-ico.is-green{color:#16a34a}
.mypage-ldt__summary-ico.is-blue{color:#0284c7}
.mypage-ldt__summary-txt{display:flex;flex-direction:column;gap:4px;min-width:0;width:100%}
.mypage-ldt__summary-label{font-size:1.4rem;color:#5a6b86}
.mypage-ldt__summary-value{font-size:1.5rem;font-weight:700;color:var(--ldt-ink);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mypage-ldt__summary-value.is-green{color:#16a34a}
.mypage-ldt__summary-value.is-blue{color:#0284c7}
.mypage-ldt__summary-value.is-bold{font-weight:800}
.mypage-ldt__receipt-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:2px;
	padding:8px 16px;background:#fff;border:1px solid var(--ldt-primary);border-radius:8px;
	font-size:1.4rem;font-weight:700;color:var(--ldt-primary);text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.mypage-ldt__receipt-btn:hover{background:var(--ldt-primary);color:#fff}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.mypage-ldt__grid{grid-template-columns:1fr}
	.mypage-ldt__summary{grid-template-columns:repeat(3,1fr);row-gap:20px}
	.mypage-ldt__summary-col:nth-child(3n+1){border-left:none}
}
@media (max-width:900px){
	.mypage-ldt__head{flex-direction:column}
	.mypage-ldt__back-btn{align-self:flex-start}
	.mypage-ldt__profile{flex-direction:column}
	.mypage-ldt__thumb{width:100%;height:200px}
}
@media (max-width:640px){
	.mypage-ldt__tabnav{grid-template-columns:repeat(2,1fr);border-bottom:none;gap:6px}
	.mypage-ldt__tab{border-radius:8px;background:#f1f4f9}
	.mypage-ldt__tab.is-active{background:var(--ldt-primary)}
	.mypage-ldt__applicant{flex-direction:column;align-items:center}
	.mypage-ldt__summary{grid-template-columns:repeat(2,1fr)}
	.mypage-ldt__summary-col:nth-child(3n+1){border-left:1px solid #e5e9f0}
	.mypage-ldt__summary-col:nth-child(2n+1){border-left:none}
}

/* -------------------------------------------------------------------------
   수강 신청 상세 / 결제 정보 탭 - 확정 시안 "…수강 신청 내역-결제 정보"
   tong/mypage/lecture_payment.html  (GET /mypage/lecturePayment.do)
   상세 셸(.mypage-ldt__)을 공유하고, 결제 탭 전용 요소만 아래에 정의한다.
   ------------------------------------------------------------------------- */

/* ② 프로필 카드 - 결제 탭 변형(좌: 라벨:값 리스트 / 우: 결제금액·결제일 aside) */
.mypage-ldt__profile-cols{display:flex;gap:24px;align-items:flex-start}
.mypage-ldt__profile-main{flex:1;min-width:0}
.mypage-ldt__deflist{margin:16px 0 0;display:flex;flex-direction:column;gap:10px}
.mypage-ldt__deflist>div{display:flex;align-items:baseline;gap:12px}
.mypage-ldt__deflist dt{flex:none;min-width:78px;padding:3px 10px;border-radius:5px;white-space:nowrap;
	background:#f1f4f9;font-size:1.4rem;font-weight:600;color:#5a6b86;text-align:left}
.mypage-ldt__deflist dd{margin:0;font-size:1.4rem;font-weight:600;color:#37507d;line-height:1.5}
.mypage-ldt__price-aside{flex:none;width:230px;display:flex;flex-direction:column;align-items:flex-start;
	text-align:left;gap:8px}
.mypage-ldt__price-line{display:flex;align-items:baseline;justify-content:flex-start;gap:10px;margin:2px 0 0}
.mypage-ldt__price-label{flex:none;min-width:78px;box-sizing:border-box;padding:3px 10px;border-radius:5px;
	background:#f1f4f9;font-size:1.4rem;font-weight:600;color:#5a6b86}
.mypage-ldt__price{font-size:2.4rem;font-weight:800;color:var(--ldt-ink);line-height:1.2}
.mypage-ldt__price-discount{font-size:1.4rem;font-weight:700;color:#2563eb}
.mypage-ldt__paydate{display:flex;align-items:baseline;justify-content:flex-start;gap:10px;
	margin:10px 0 0;font-size:1.4rem;font-weight:600;color:#37507d}
.mypage-ldt__paydate span:first-child{display:inline-block;min-width:78px;box-sizing:border-box;
	margin-right:10px;padding:3px 10px;border-radius:5px;background:#f1f4f9;font-weight:600;color:#5a6b86}

/* ④좌 결제 내역 카드 : 영수증 셀(버튼 + 다운로드 아이콘) */
.mypage-ldt--payment .mypage-ldt__kv th,
.mypage-ldt--payment .mypage-ldt__kv td{padding-top:15px;padding-bottom:15px}
.mypage-ldt__kv td>i{margin-right:6px;color:#5a6b86}
.mypage-ldt__receipt-cell{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.mypage-ldt__icon-btn{width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center;
	border:1px solid #d3dae6;border-radius:8px;background:#fff;color:#5a6b86;cursor:pointer;transition:border-color .15s,color .15s}
.mypage-ldt__icon-btn:hover{border-color:var(--ldt-primary);color:var(--ldt-primary)}

/* ④우 결제 금액 내역 카드 : 금액 브레이크다운 + 환불 안내 박스 */
.mypage-ldt__amount{display:flex;flex-direction:column}
.mypage-ldt__amount-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
	padding:13px 0;font-size:1.5rem}
.mypage-ldt__amount-row .lbl{color:#5a6b86}
.mypage-ldt__amount-row .amt{font-weight:700;color:var(--ldt-ink);white-space:nowrap}
.mypage-ldt__amount-row.is-minus .amt{color:#ef4444}
.mypage-ldt__amount-row.is-total{margin-top:6px;padding-top:18px;border-top:2px solid var(--ldt-line)}
.mypage-ldt__amount-row.is-total .lbl{font-weight:800;color:var(--ldt-ink)}
.mypage-ldt__amount-row.is-total .amt{font-size:2.2rem;font-weight:800;color:var(--ldt-primary)}
.mypage-ldt__refund-note{margin-top:18px;display:flex;gap:10px;padding:16px 18px;
	background:#eef4fe;border:1px solid #dbe7fb;border-radius:10px}
.mypage-ldt__refund-note>i{flex:none;margin-top:2px;color:#2563eb;font-size:1.5rem}
.mypage-ldt__refund-note p{margin:0;font-size:1.4rem;line-height:1.7;color:#37507d}

@media (max-width:900px){
	.mypage-ldt__profile-cols{flex-direction:column}
	.mypage-ldt__price-aside{width:100%;align-items:flex-start;text-align:left}
	.mypage-ldt__price-line,.mypage-ldt__paydate{justify-content:flex-start}
}

/* -------------------------------------------------------------------------
   수강 신청 상세 / 출석 정보 탭 - 확정 시안 "…수강 신청 상세 - 출석 정보"
   tong/mypage/lecture_attendance.html  (GET /mypage/lectureAttendance.do)
   ------------------------------------------------------------------------- */
.mypage-ldt--attendance .mypage-ldt__grid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}

/* 카드 헤더(제목 + 우측 기준일) */
.mypage-ldt__card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
	margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #eef1f6}
.mypage-ldt__card-head h3{margin:0;font-size:1.7rem;font-weight:800;color:var(--ldt-ink)}
.mypage-ldt__card-head h3 small{margin-left:6px;font-size:1.4rem;font-weight:600;color:#8b95a5}
.mypage-ldt__card-head .base-date{flex:none;font-size:1.4rem;color:#8b95a5}

/* 출석 현황 표 */
.mypage-ldt__att-wrap{overflow-x:auto}
.mypage-ldt__att{width:100%;min-width:540px;border-collapse:collapse;font-size:1.4rem}
.mypage-ldt__att th{padding:13px 8px;background:#f7f9fc;color:#5a6b86;font-weight:700;text-align:center;
	white-space:nowrap;border-top:1px solid #e9edf4;border-bottom:1px solid #e9edf4}
.mypage-ldt__att td{padding:14px 8px;text-align:center;color:#40495a;white-space:nowrap;border-bottom:1px solid #f0f2f7}
.mypage-ldt__att tr:last-child td{border-bottom:none}
.mypage-ldt__att .wk{font-weight:700;color:var(--ldt-ink)}
.mypage-ldt__att-mark{display:inline-flex;align-items:center;gap:7px}
.mypage-ldt__att-mark.is-idle{color:#94a3b8}
/* 상태 글리프(체크/마이너스)는 배지 안 장식 아이콘 */
.mypage-ldt__att-ico{width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;
	border-radius:50%;font-size:1.1rem}
.mypage-ldt__att-ico.is-done{background:#2563eb;color:#fff}
.mypage-ldt__att-ico.is-idle{background:#e2e8f0;color:#9aa7b8}
.mypage-ldt__att-none{color:#c2cad6}

/* 출석 요약(우측) : 도넛 + 범례 + 출석률 + 안내 */
.mypage-ldt__att-donut-wrap{display:flex;align-items:center;gap:20px;padding-bottom:20px;border-bottom:1px solid #eef1f6}
.mypage-ldt__att-donut{--percent:0;width:120px;height:120px;flex:none;border-radius:50%;
	display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.25;
	background:
		radial-gradient(closest-side,#fff 72%,transparent 73% 100%),
		conic-gradient(#2563eb calc(var(--percent) * 1%),#e2e8f0 0)}
.mypage-ldt__att-donut .num{font-size:2rem;font-weight:800;color:var(--ldt-ink)}
.mypage-ldt__att-donut .cap{font-size:1.4rem;color:#8b95a5}
.mypage-ldt__att-legend{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;min-width:0}
.mypage-ldt__att-legend li{display:flex;align-items:center;font-size:1.4rem;color:#40495a}
.mypage-ldt__att-legend .dot{width:10px;height:10px;flex:none;margin-right:10px;border-radius:50%}
.mypage-ldt__att-legend .dot.is-done{background:#2563eb}
.mypage-ldt__att-legend .dot.is-absent{background:#94a3b8}
.mypage-ldt__att-legend .dot.is-plan{background:#16a34a}
.mypage-ldt__att-legend .cnt{margin-left:auto;font-weight:700;color:var(--ldt-ink)}
.mypage-ldt__att-rate{display:flex;justify-content:space-between;align-items:center;gap:12px;
	margin-top:16px;padding:14px 18px;background:#eef4fe;border:1px solid #dbe7fb;border-radius:10px}
.mypage-ldt__att-rate .lbl{font-size:1.4rem;font-weight:700;color:#37507d}
.mypage-ldt__att-rate .val{font-size:1.8rem;font-weight:800;color:var(--ldt-primary)}
.mypage-ldt__att-guide{margin-top:20px;padding-top:18px;border-top:1px solid #eef1f6}
.mypage-ldt__att-guide>strong{display:block;margin-bottom:12px;font-size:1.6rem;font-weight:800;color:var(--ldt-ink)}
.mypage-ldt__att-guide ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.mypage-ldt__att-guide li{position:relative;padding-left:14px;font-size:1.4rem;line-height:1.6;color:#5a6b86}
.mypage-ldt__att-guide li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:#b6c2d4}

/* -------------------------------------------------------------------------
   수강 신청 상세 / 안내 사항 탭 - 확정 시안 "…수강 신청 상세 - 안내 사항"
   tong/mypage/lecture_notice.html  (GET /mypage/lectureNotice.do)
   ------------------------------------------------------------------------- */
.mypage-ldt__guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.mypage-ldt__guide-card{background:#fff;border:1px solid var(--ldt-line);border-radius:var(--ldt-radius);padding:24px}
.mypage-ldt__guide-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mypage-ldt__guide-ico{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;font-size:1.7rem}
.mypage-ldt__guide-ico.is-blue{background:#e5efff;color:#2563eb}
.mypage-ldt__guide-ico.is-orange{background:#fdeede;color:#ea8a1e}
.mypage-ldt__guide-ico.is-green{background:#e3f6ec;color:#16a34a}
.mypage-ldt__guide-ico.is-purple{background:#efe8fb;color:#7c3aed}
.mypage-ldt__guide-head h3{margin:0;font-size:1.7rem;font-weight:800;color:var(--ldt-ink)}
.mypage-ldt__guide-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mypage-ldt__guide-list li{position:relative;padding-left:16px;font-size:1.4rem;line-height:1.65;color:#5a6b86}
.mypage-ldt__guide-list li::before{content:"";position:absolute;left:3px;top:10px;width:4px;height:4px;border-radius:50%;background:#b6c2d4}
.mypage-ldt__guide-foot{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:20px 24px;
	background:#eef4fe;border:1px solid #dbe7fb;border-radius:var(--ldt-radius)}
.mypage-ldt__guide-foot>i{flex:none;margin-top:2px;color:#2563eb;font-size:1.8rem}
.mypage-ldt__guide-foot strong{display:block;margin-bottom:4px;font-size:1.5rem;font-weight:800;color:var(--ldt-ink)}
.mypage-ldt__guide-foot p{margin:0;font-size:1.4rem;line-height:1.6;color:#5a6b86}

@media (max-width:1024px){
	.mypage-ldt--attendance .mypage-ldt__grid{grid-template-columns:1fr}
	.mypage-ldt__guide-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
	.mypage-ldt__att-donut-wrap{flex-direction:column;align-items:flex-start}
}

/* =========================================================================
   마이페이지 - 시설 대관 상세보기 / 신청 정보 탭 - 확정 시안 "시설 대관 상세보기" 100% 퍼블리싱
   tong/mypage/facility_detail_info.html  (GET /mypage/facilityDetail.do?rentalIdx=)
   tong/mypage/facility_detail_ready.html (결제/이용/안내 탭 공용 준비중 화면)
   상세 셸(.mypage-ldt__ : head/back-btn/profile/tabnav/card/kv, .mypage-lecture__badge)을 재사용하고,
   이 화면 고유 영역(프로필 설명문 · 우측 2단 스택 · 카드 제목 아이콘 · 유의사항 박스 · 하단 액션)만 정의한다.
   ========================================================================= */

/* ② 프로필 카드 : 시설 설명문 + 우측 aside 폭 조정 */
.mypage-fdt__profile-desc{margin:-2px 0 2px;font-size:1.4rem;color:#5a6b86;line-height:1.6}
.mypage-fdt__profile .mypage-ldt__price-aside{width:250px}

/* ④ 본문 2열 그리드 (좌 신청 정보 / 우 신청자·승인 스택)
   신청/결제/이용/안내 전 탭 공통 : 좌·우 컬럼의 바깥 높이를 항상 동일하게(stretch) 맞춘다. */
.mypage-fdt__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:20px;
	margin-top:24px;align-items:stretch}
.mypage-fdt__stack{display:flex;flex-direction:column;gap:20px;min-width:0}
/* 우측이 2단 스택인 탭 : 늘어난 높이에 맞춰 두 카드를 위/아래로 분산해 좌측 카드 상·하단과 정렬 */
.mypage-ldt--finfo .mypage-fdt__stack,
.mypage-ldt--fpay .mypage-fdt__stack,
.mypage-ldt--fuse .mypage-fdt__stack{justify-content:space-between}

/* 카드 제목 앞 아이콘 (.mypage-ldt__card-title 과 함께 사용) */
.mypage-fdt__card-title{display:flex;align-items:center;gap:9px}
.mypage-fdt__card-title>i{font-size:1.6rem;color:var(--ldt-primary)}
.mypage-fdt__card-title>i.is-green{color:#16a34a}

/* 승인 처리 정보 카드 "신청상태" 배지 : 기본 배지보다 세로 여백을 줄인 축소형 */
.mypage-fdt__badge-sm{padding-top:2px;padding-bottom:2px;line-height:1.25}

/* ⑤ 하단 유의사항 박스 */
.mypage-fdt__caution{margin-top:24px;display:flex;gap:14px;padding:22px 24px;
	background:#f4f7fc;border:1px solid #e0e8f4;border-radius:var(--ldt-radius)}
.mypage-fdt__caution-ico{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#dbe7fb;color:#2563eb;font-size:1.5rem}
.mypage-fdt__caution-body{flex:1;min-width:0}
.mypage-fdt__caution-body strong{display:block;margin-bottom:10px;font-size:1.5rem;font-weight:800;color:var(--ldt-ink)}
.mypage-fdt__caution-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mypage-fdt__caution-list li{position:relative;padding-left:15px;font-size:1.4rem;line-height:1.65;color:#5a6b86}
.mypage-fdt__caution-list li::before{content:"";position:absolute;left:3px;top:9px;width:4px;height:4px;
	border-radius:50%;background:#9db2d4}

/* ⑥ 하단 액션 버튼 (우측 정렬 : 신청확인서 출력 outline / 목록으로 filled) */
.mypage-fdt__footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.mypage-fdt__btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 26px;border-radius:10px;
	font-size:1.5rem;font-weight:700;text-decoration:none;cursor:pointer;
	transition:background-color .15s,color .15s,border-color .15s}
.mypage-fdt__btn>i{font-size:1.4rem}
.mypage-fdt__btn.is-print{background:#fff;border:1px solid #cdd6e4;color:#475569}
.mypage-fdt__btn.is-print:hover{border-color:var(--ldt-primary);color:var(--ldt-primary)}
.mypage-fdt__btn.is-list{background:var(--ldt-primary);border:1px solid var(--ldt-primary);color:#fff}
.mypage-fdt__btn.is-list:hover{background:#0a3690;border-color:#0a3690}

/* -------------------------------------------------------------------------
   결제 정보 탭 (facility_detail_payment.html, .mypage-ldt--fpay)
   ------------------------------------------------------------------------- */
/* 좌측 카드 "최종 결제 금액" 강조 값 */
.mypage-fdt__amt-final{font-size:1.9rem;font-weight:800;color:var(--ldt-primary)}
/* 우측 "결제 내역" 미니 표 (항목 / 금액 / 비고 + 최종 합계행) */
.mypage-fdt__mini{width:100%;border-collapse:collapse;font-size:1.4rem}
.mypage-fdt__mini th{padding:12px;background:#f7f9fc;color:#5a6b86;font-weight:700;text-align:center;
	white-space:nowrap;border-top:1px solid #e9edf4;border-bottom:1px solid #e9edf4}
.mypage-fdt__mini td{padding:14px 12px;text-align:center;color:#40495a;border-bottom:1px solid #f0f2f7}
.mypage-fdt__mini td.is-left{text-align:left}
.mypage-fdt__mini tr:last-child td{border-bottom:none}
.mypage-fdt__mini tr.is-total{background:#eef4fe}
.mypage-fdt__mini tr.is-total td{font-weight:800;color:var(--ldt-ink)}
.mypage-fdt__mini-total{color:var(--ldt-primary);font-size:1.6rem}
/* 우측 "영수증 / 증빙" 2분할 박스 */
.mypage-fdt__receipt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mypage-fdt__receipt-box{display:flex;flex-direction:column;align-items:center;gap:12px;
	padding:22px 16px;background:#fbfcfe;border:1px solid var(--ldt-line);border-radius:10px}
.mypage-fdt__receipt-label{font-size:1.4rem;font-weight:700;color:#5a6b86}
.mypage-fdt__receipt-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
	background:#fff;border:1px solid #cdd6e4;border-radius:8px;font-size:1.4rem;font-weight:700;
	color:#475569;text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s}
.mypage-fdt__receipt-btn:hover{border-color:var(--ldt-primary);color:var(--ldt-primary)}

/* -------------------------------------------------------------------------
   이용 정보 탭 (facility_detail_use.html, .mypage-ldt--fuse)
   ------------------------------------------------------------------------- */
/* kv 셀 안 불릿 목록(이용규칙 등) */
.mypage-fdt__cell-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mypage-fdt__cell-list li{position:relative;padding-left:13px;font-size:1.4rem;line-height:1.6;color:#37507d}
.mypage-fdt__cell-list li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;
	border-radius:50%;background:#9db2d4}
/* 이용 준비물 아이콘 그리드(3열) */
.mypage-fdt__prep{list-style:none;margin:0;padding:4px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 8px}
.mypage-fdt__prep-item{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.mypage-fdt__prep-ico{width:54px;height:54px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#eef4fe;color:#2563eb;font-size:1.9rem}
.mypage-fdt__prep-name{font-size:1.4rem;font-weight:600;color:#48505e}

/* -------------------------------------------------------------------------
   안내 사항 탭 (facility_detail_notice.html, .mypage-ldt--fnotice)
   ------------------------------------------------------------------------- */
.mypage-ldt--fnotice .mypage-fdt__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
/* 좌측 "이용 안내" : 아이콘 + 라벨 + 값/보조문구 행 */
.mypage-fdt__info-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mypage-fdt__info-row{display:grid;grid-template-columns:46px 88px minmax(0,1fr);align-items:start;gap:14px;
	padding:18px 0;border-bottom:1px solid #f0f2f7}
.mypage-fdt__info-row:last-child{border-bottom:none}
.mypage-fdt__info-ico{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#f1f4f9;color:#5a6b86;font-size:1.6rem}
.mypage-fdt__info-label{padding-top:12px;font-size:1.4rem;font-weight:700;color:var(--ldt-ink)}
.mypage-fdt__info-body{display:flex;flex-direction:column;gap:4px;padding-top:8px;min-width:0}
.mypage-fdt__info-value{font-size:1.4rem;font-weight:600;color:#37507d;line-height:1.5}
.mypage-fdt__info-sub{font-size:1.4rem;color:#8b95a5;line-height:1.5}
/* 우측 "이용 수칙 및 유의사항" : 파란 체크 목록 + 동의 확인 박스 */
.mypage-fdt__rule-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mypage-fdt__rule-list li{display:flex;gap:10px;padding:10px 0;font-size:1.4rem;line-height:1.6;color:#40495a}
.mypage-fdt__rule-list li>i{flex:none;margin-top:3px;color:#2563eb;font-size:1.4rem}
.mypage-fdt__agree{margin-top:16px;display:flex;align-items:center;gap:10px;padding:14px 18px;
	background:#fff8e6;border:1px solid #f3e2b0;border-radius:10px;font-size:1.4rem;font-weight:700;color:#8a6a1c}
.mypage-fdt__agree>i{flex:none;color:#e0a417}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.mypage-fdt__grid,
	.mypage-ldt--fnotice .mypage-fdt__grid{grid-template-columns:1fr}
}
@media (max-width:900px){
	.mypage-fdt__caution{flex-direction:column;gap:12px}
	.mypage-fdt__footer{flex-direction:column-reverse}
	.mypage-fdt__footer .mypage-fdt__btn{width:100%;justify-content:center}
}
@media (max-width:640px){
	.mypage-fdt__receipt-grid{grid-template-columns:1fr}
	.mypage-fdt__prep{grid-template-columns:repeat(2,1fr)}
	.mypage-fdt__info-row{grid-template-columns:40px minmax(0,1fr);row-gap:4px}
	.mypage-fdt__info-label{grid-column:2;padding-top:0}
	.mypage-fdt__info-body{grid-column:2;padding-top:0}
}

/* =========================================================================
   마이페이지 - 추첨 내역 상세보기 (탭 4종) - 확정 시안 "추첨 내역 상세보기" 100% 퍼블리싱
   tong/mypage/lottery_detail_{info|result|use|notice}.html
   (GET /mypage/lottery{Detail|Result|Use|Notice}.do?lotteryIdx=)
   상세 셸(.mypage-ldt__ : head/back-btn/profile/tabnav/card/kv)과 시설 대관 상세
   (.mypage-fdt__ : grid/stack/card-title/caution/footer/mini)을 재사용하고,
   추첨 상세 고유 영역만 아래 .mypage-lot__ prefix 로 정의한다. 본문 폰트 최소 1.4rem(14px).
   ========================================================================= */

/* ② 상단 프로필 카드 : 3개 정보 칩 + 우측 추첨 결과 aside */
.mypage-lot__profile .mypage-ldt__price-aside{width:250px}
.mypage-lot__chips{list-style:none;margin:18px 0 0;padding:0;
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mypage-lot__chip{display:flex;align-items:center;gap:12px;padding:14px 16px;
	background:#f6f9ff;border:1px solid #e4ecfa;border-radius:10px;min-width:0}
.mypage-lot__chip-ico{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#e5efff;color:#2563eb;font-size:1.5rem}
.mypage-lot__chip-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.mypage-lot__chip-label{font-size:1.4rem;font-weight:700;color:#5a6b86}
.mypage-lot__chip-value{font-size:1.4rem;font-weight:600;color:#37507d;line-height:1.45;word-break:keep-all}

.mypage-lot__result-aside{align-items:center;text-align:center;gap:10px}
.mypage-lot__result-cap{align-self:center;padding:4px 14px;border-radius:16px;
	background:#eef3ff;color:#3a5ba0;font-size:1.4rem;font-weight:700}
.mypage-lot__result-badge{font-size:2.8rem;font-weight:800;line-height:1.1;color:var(--ldt-ink)}
.mypage-lot__result-badge.is-green{color:#16a34a}
.mypage-lot__result-badge.is-orange{color:#ea8a1e}
.mypage-lot__result-badge.is-red{color:#dc2626}
.mypage-lot__result-badge.is-gray{color:#64748b}
.mypage-lot__result-line{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0;
	font-size:1.4rem;color:#5a6b86}
.mypage-lot__result-line strong{font-size:1.6rem;font-weight:800;color:var(--ldt-primary)}
.mypage-lot__result-line.is-sub{color:#8b95a5}

/* 공통 : 당첨 순번 강조 텍스트 */
.mypage-lot__seq{color:var(--ldt-primary);font-weight:800}

/* ④ 추첨 결과 탭 : 좌우 동일 폭 2열 */
.mypage-lot__result-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* 좌측 : 당첨 안내 박스(초록) */
.mypage-lot__win-box{display:flex;gap:14px;margin-bottom:18px;padding:18px 20px;
	background:#eaf7ee;border:1px solid #bfe6cb;border-radius:10px}
.mypage-lot__win-box>i{flex:none;margin-top:2px;color:#16a34a;font-size:1.9rem}
.mypage-lot__win-body{min-width:0}
.mypage-lot__win-body>strong{display:block;font-size:1.6rem;font-weight:800;color:#15803d}
.mypage-lot__win-body>p{margin:6px 0 0;font-size:1.4rem;line-height:1.6;color:#3f6b4c}
.mypage-lot__win-deadline{font-weight:700;color:#b45309}
.mypage-lot__win-deadline span{font-weight:800;color:#b45309}
/* 종합 결과에 따른 박스 색(기본=당첨 초록 → 예비 보라 / 미당첨 주황 / 취소 빨강 / 추첨 전 회색) */
.mypage-lot__win-box.is-wait{background:#f5effd;border-color:#dfcdf7}
.mypage-lot__win-box.is-wait>i,.mypage-lot__win-box.is-wait .mypage-lot__win-body>strong{color:#7c3aed}
.mypage-lot__win-box.is-wait .mypage-lot__win-body>p{color:#5b4a7a}
.mypage-lot__win-box.is-lose{background:#fff4e8;border-color:#f7d7b0}
.mypage-lot__win-box.is-lose>i,.mypage-lot__win-box.is-lose .mypage-lot__win-body>strong{color:#ea8a1e}
.mypage-lot__win-box.is-lose .mypage-lot__win-body>p{color:#7a5a30}
.mypage-lot__win-box.is-cancel{background:#fdeeee;border-color:#f5c6c6}
.mypage-lot__win-box.is-cancel>i,.mypage-lot__win-box.is-cancel .mypage-lot__win-body>strong{color:#dc2626}
.mypage-lot__win-box.is-cancel .mypage-lot__win-body>p{color:#7a3a3a}
.mypage-lot__win-box.is-pending{background:#f1f4f9;border-color:#d9e0ec}
.mypage-lot__win-box.is-pending>i,.mypage-lot__win-box.is-pending .mypage-lot__win-body>strong{color:#475569}
.mypage-lot__win-box.is-pending .mypage-lot__win-body>p{color:#5a6577}
.mypage-lot__result-badge.is-purple{color:#a855f7}
/* 날짜·시간별 결과 표의 [결제하기] 버튼 */
.mypage-lot__pay-btn{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:7px 14px;border:0;border-radius:8px;
	background:var(--ldt-primary,#1063c6);color:#fff;font-size:1.4rem;font-weight:700;cursor:pointer;white-space:nowrap}
.mypage-lot__pay-btn:hover{filter:brightness(1.08)}
.mypage-lot__pay-btn i{font-size:1.4rem}
/* 신청 일시(슬롯) 목록 / 건별 결과 표의 취소 건 */
.mypage-lot__slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mypage-lot__slots>li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.mypage-lot__slots-hours{color:#64748b;font-size:1.4rem}
.mypage-lot__slots>li.is-cancelled>span:first-child,tr.is-cancelled td.is-left span:first-child{text-decoration:line-through;color:#94a3b8}

/* 신청 정보 탭 : 슬롯별 [취소] 버튼 / 신청 전체 취소 버튼 / 취소 확인 모달 */
.mypage-lot__slot-cancel{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:6px;
	border:1px solid #f0b4b4;background:#fff;color:#dc2626;font-size:1.4rem;font-weight:700;line-height:1;cursor:pointer;
	transition:background-color .15s,border-color .15s}
.mypage-lot__slot-cancel>i{font-size:1.2rem}
.mypage-lot__slot-cancel:hover{background:#fef2f2;border-color:#dc2626}
.mypage-fdt__btn.is-cancel{background:#fff;border:1px solid #f0b4b4;color:#dc2626}
.mypage-fdt__btn.is-cancel:hover{background:#fef2f2;border-color:#dc2626}
.mypage-lot__cancel-panel{max-width:480px}
.mypage-lot__cancel-lead{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:14px 16px;border-radius:10px;
	background:#fef2f2;color:#991b1b;font-size:1.5rem;font-weight:700;line-height:1.5;word-break:keep-all}
.mypage-lot__cancel-lead>i{flex:none;margin-top:3px;color:#dc2626}
.mypage-lot__cancel-list{list-style:none;margin:0 0 14px;padding:12px 16px;border-radius:10px;background:#f8fafc;border:1px solid #e3e8ef;
	display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto;font-size:1.4rem;font-weight:600;color:#1f2937}
.mypage-lot__cancel-list:empty{display:none}
.mypage-lot__cancel-note{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:1.4rem;line-height:1.6;color:#64748b;word-break:keep-all}
.mypage-lot__cancel-note[hidden]{display:none}
.mypage-lot__cancel-note>i{flex:none;margin-top:3px;color:#1f5fbf}
.mypage-lot__cancel-submit{background:#dc2626;color:#fff}
.mypage-lot__cancel-submit:hover{background:#b91c1c}
.mypage-lot__cancel-submit:disabled{background:#f1a5a5;cursor:not-allowed}

/* 안내 힌트 라인(파랑 / 앰버) */
.mypage-lot__hint{display:flex;gap:10px;margin-top:16px;padding:14px 16px;border-radius:10px;
	background:#eff6ff;border:1px solid #cfe2fb;font-size:1.4rem;line-height:1.6;color:#37507d}
.mypage-lot__hint>i{flex:none;margin-top:2px;color:#2563eb;font-size:1.4rem}
.mypage-lot__hint.is-amber{background:#fff8e6;border-color:#f3e2b0;color:#8a6a1c}
.mypage-lot__hint.is-amber>i{color:#e0a417}

/* 우측 : 대기 순번 카드 헤더(제목 + 전체 보기 링크) */
.mypage-lot__card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mypage-lot__card-head .mypage-ldt__card-title{flex:1;min-width:0}
.mypage-lot__head-link{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
	border:1px solid #c9d9f5;border-radius:8px;background:#f4f8ff;color:var(--ldt-primary);
	font-size:1.4rem;font-weight:700;text-decoration:none;white-space:nowrap;
	transition:background-color .15s,color .15s,border-color .15s}
.mypage-lot__head-link:hover{background:var(--ldt-primary);border-color:var(--ldt-primary);color:#fff}
.mypage-lot__head-link i{font-size:1.2rem}
.mypage-lot__wait-tbl{margin-top:6px}
.mypage-lot__wait-tbl td.is-left{word-break:break-all}

/* ⑤ 이용 안내 탭 : 3열 그리드 */
.mypage-lot__use-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);
	gap:20px;margin-top:24px;align-items:start}
.mypage-lot--use .mypage-fdt__stack{justify-content:flex-start}

/* 이용 절차 안내 : 세로 번호 스텝 */
.mypage-lot__proc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.mypage-lot__proc-item{display:flex;gap:14px;align-items:flex-start}
.mypage-lot__proc-no{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#e5efff;color:#2563eb;font-size:1.4rem;font-weight:800}
.mypage-lot__proc-body{display:flex;flex-direction:column;gap:4px;min-width:0;padding-top:2px}
.mypage-lot__proc-title{font-size:1.5rem;font-weight:800;color:var(--ldt-ink)}
.mypage-lot__proc-desc{font-size:1.4rem;line-height:1.55;color:#5a6b86}

/* 시설 이용 안내 : 아이콘 행(라벨 / 값 / 보조) */
.mypage-lot__guide{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mypage-lot__guide-row{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid #f0f2f7}
.mypage-lot__guide-row:first-child{padding-top:0}
.mypage-lot__guide-row:last-child{padding-bottom:0;border-bottom:none}
.mypage-lot__guide-ico{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#eef2f8;color:#5a6b86;font-size:1.4rem}
.mypage-lot__guide-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.mypage-lot__guide-label{font-size:1.4rem;font-weight:700;color:var(--ldt-ink)}
.mypage-lot__guide-value{font-size:1.4rem;font-weight:600;color:#37507d;line-height:1.5}
.mypage-lot__guide-sub{font-size:1.4rem;color:#8b95a5;line-height:1.5}

/* ⑤ 안내 사항 탭 : 전체폭 유의사항(번호 목록) + 확인 박스 */
.mypage-lot__notice-card{margin-top:20px}
.mypage-lot__num-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mypage-lot__num-list li{display:flex;gap:12px;align-items:flex-start;font-size:1.4rem;line-height:1.65;color:#40495a}
.mypage-lot__num{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#eef2f8;color:#5a6b86;font-size:1.4rem;font-weight:800;margin-top:1px}
.mypage-lot__confirm{margin-top:20px;display:flex;gap:14px;padding:20px 24px;
	background:#eff6ff;border:1px solid #cfe2fb;border-radius:12px}
.mypage-lot__confirm>i{flex:none;margin-top:2px;color:#2563eb;font-size:1.8rem}
.mypage-lot__confirm-body{min-width:0}
.mypage-lot__confirm-body>strong{display:block;margin-bottom:4px;font-size:1.5rem;font-weight:800;color:var(--ldt-ink)}
.mypage-lot__confirm-body>p{margin:0;font-size:1.4rem;line-height:1.65;color:#37507d}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.mypage-lot__use-grid{grid-template-columns:1fr 1fr}
	.mypage-lot__result-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
	.mypage-lot__chips{grid-template-columns:1fr}
	.mypage-lot__use-grid{grid-template-columns:1fr}
	.mypage-lot__result-aside{align-items:flex-start;text-align:left}
	.mypage-lot__result-cap,.mypage-lot__result-line{align-self:flex-start;justify-content:flex-start}
	.mypage-lot__card-head{flex-direction:column}
	.mypage-lot__head-link{align-self:flex-start}
}

/* ---------- 상세보기 인쇄(신청확인서 / 추첨결과) ---------- */
@media print{
	.mypage-home__lnb,.mypage-ldt__back-btn,.mypage-ldt__tabnav,
	.mypage-fdt__footer,.mypage-lot__head-link,.mypage-lot__slot-cancel,.mypage-lot__cancel-panel{display:none !important}
	.mypage-fdt__grid,.mypage-lot__result-grid,.mypage-lot__use-grid{grid-template-columns:1fr}
	.mypage-ldt__card,.mypage-lot__win-box{box-shadow:none;break-inside:avoid}
}

/* =========================================================================
   마이페이지 - 결제 & 환불 관리 - 확정 시안 "마이페이지-결제 & 환불 관리.png" 100% 퍼블리싱
   tong/mypage/payment_list.html  (GET /mypage/paymentList.do)
   셸(.mypage-home__), 필터/테이블/배지/페이징(.mypage-lecture__) 재사용.
   이 화면 고유 영역(요약 금액 라인 · 필터 2행 · 툴바 · 영수증/환불 버튼 · 상태 배지)만 아래에 정의한다.
   블록 간격은 .mypage-lecture 규칙(.mypage-home__content{gap:0})을 상속받아 각 요소 margin-top 으로 제어.
   ========================================================================= */

/* ② 상단 요약 카드 (5열) : 아이콘/라벨/건수는 .mypage-home__c-* 재사용, 금액 라인만 고유 */
.mypage-pay__summary{margin-top:22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
	background:#fff;border:1px solid var(--mpl-line);border-radius:var(--mpl-radius);
	padding:24px 4px;box-shadow:0 1px 2px rgba(16,32,64,.04)}
.mypage-pay__summary-item{display:flex;align-items:center;gap:14px;padding:6px 18px;min-width:0;
	border-left:1px solid #eef1f6}
.mypage-pay__summary-item:first-child{border-left:none}
.mypage-pay__summary-txt{display:block;min-width:0}
.mypage-pay__summary .mypage-home__c-num{display:block}
.mypage-pay__summary .mypage-home__c-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mypage-pay__summary-amt{display:block;margin-top:3px;font-size:1.4rem;color:#8b95a5;white-space:nowrap}

/* ③ 검색 및 필터 박스 : lecture 필터 컨테이너 재사용 + 흰 배경으로 오버라이드, 2행 레이아웃만 고유 */
.mypage-pay__filter{background:#fff;border-color:#e6ebf3}
.mypage-pay__filter-row{display:grid;
	grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:18px}
.mypage-pay__filter-row2{display:flex;align-items:flex-end;gap:18px;margin-top:18px}
.mypage-pay__filter-row2 .mypage-pay__filter-group{flex:0 0 calc(25% - 13.5px)}
.mypage-pay__filter-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.mypage-pay__filter-group>label{font-size:1.4rem;font-weight:700;color:#42506b}
.mypage-pay__filter-btns{display:flex;gap:10px;margin-left:auto}

/* 신청기간 : 각 입력 우측에 달력 아이콘 */
.mypage-pay__date-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.mypage-pay__date-field{position:relative;flex:1;min-width:0}
.mypage-pay__date-field .mypage-lecture__input{width:100%;padding-right:38px}
.mypage-pay__date-field>i{position:absolute;right:13px;top:50%;transform:translateY(-50%);
	color:#8b95a5;font-size:1.4rem;pointer-events:none}

/* ④ 테이블 상단 툴바 : 좌측 건수 · 우측 소득공제 안내 + 엑셀 다운로드 */
.mypage-pay__toolbar{display:flex;align-items:center;gap:14px;margin-top:24px}
.mypage-pay__toolbar-count{margin:0;font-size:1.5rem;font-weight:700;color:var(--mpl-ink)}
.mypage-pay__toolbar-count strong{color:var(--mpl-primary)}
.mypage-pay__toolbar-note{margin:0 0 0 auto;font-size:1.4rem;color:#94a3b8}
.mypage-pay__toolbar .mypage-lecture__tool-btn.is-excel{flex:none}

/* ⑤ 데이터 테이블 : 골격은 .mypage-lecture__table 재사용, 폭/셀 보조 텍스트만 고유.
   상태·영수증·환불 열은 배지/버튼을 줄바꿈·세로배치·좁은 패딩으로 압축해 가로 스크롤이 생기지 않게 한다. */
.mypage-pay__table{min-width:0;table-layout:fixed}
.mypage-pay__table th,.mypage-pay__table td{padding-left:6px;padding-right:6px;word-break:keep-all}
.mypage-pay__table td.is-left{word-break:break-all}
.mypage-pay__time{color:#8b95a5;font-size:1.4rem}
.mypage-pay__course{display:block;font-size:1.4rem;font-weight:700;color:var(--mpl-ink)}
.mypage-pay__method-sub{display:block;margin-top:3px;color:#8b95a5;font-size:1.4rem}

/* 상태 배지 (결제완료=green / 환불완료=purple / 취소·환불 진행=orange / 결제대기=amber)
   좁은 열에서 두 줄로 접히도록 nowrap 해제(어절 단위 유지). */
.mypage-pay__badge{display:inline-block;padding:5px 9px;border-radius:14px;font-size:1.4rem;font-weight:700;
	white-space:normal;word-break:keep-all;line-height:1.3}
.mypage-pay__badge.is-green{background:#e3f6ec;color:#16a34a}
.mypage-pay__badge.is-purple{background:#f3e8ff;color:#9333ea}
.mypage-pay__badge.is-orange{background:#ffedd5;color:#f97316}
.mypage-pay__badge.is-amber{background:#fef3c7;color:#d97706}

/* 영수증 : 일반 / 문화비(소득공제 대상) 소형 버튼 → 세로로 쌓아 열 폭을 버튼 1개 너비로 축소 */
.mypage-pay__receipts{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.mypage-pay__receipt{display:inline-flex;align-items:center;justify-content:center;padding:5px 6px;border-radius:7px;
	font-size:1.4rem;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1.2;
	transition:background-color .15s,color .15s,border-color .15s}
.mypage-pay__receipt.is-normal{background:#fff;border:1px solid #cdd6e4;color:#475569}
.mypage-pay__receipt.is-normal:hover{border-color:var(--mpl-primary);color:var(--mpl-primary)}
.mypage-pay__receipt.is-culture{background:#e0f2fe;border:1px solid #a9d8f5;color:#0284c7}
.mypage-pay__receipt.is-culture:hover{background:#0284c7;border-color:#0284c7;color:#fff}

/* 환불 : 취소/환불 신청(적) · 환불내역(자) → 어절 단위 줄바꿈 허용 + 좁은 패딩 */
.mypage-pay__refund-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:8px;
	font-size:1.4rem;font-weight:700;cursor:pointer;white-space:normal;word-break:keep-all;line-height:1.25;
	transition:background-color .15s,color .15s,border-color .15s}
.mypage-pay__refund-btn.is-request{background:#fef2f0;border:1px solid #f3c0b8;color:#e05a3d}
.mypage-pay__refund-btn.is-request:hover{background:#e05a3d;border-color:#e05a3d;color:#fff}
.mypage-pay__refund-btn.is-history{background:#f6f0fe;border:1px solid #dcc9f4;color:#9333ea}
.mypage-pay__refund-btn.is-history:hover{background:#9333ea;border-color:#9333ea;color:#fff}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.mypage-pay__summary{grid-template-columns:repeat(3,1fr);row-gap:18px}
	.mypage-pay__summary-item:nth-child(3n+1){border-left:none}
	.mypage-pay__filter-row{grid-template-columns:repeat(2,1fr)}
	.mypage-pay__filter-row .mypage-pay__filter-group.is-date,
	.mypage-pay__filter-row .mypage-pay__filter-group.is-keyword{grid-column:1/-1}
	.mypage-pay__filter-row2{flex-wrap:wrap}
	.mypage-pay__filter-row2 .mypage-pay__filter-group{flex:1 1 100%}
	.mypage-pay__filter-btns{margin:0}
}
@media (max-width:900px){
	.mypage-pay__toolbar{flex-wrap:wrap}
	.mypage-pay__toolbar-note{margin:0;order:3;flex:1 1 100%}
	/* 태블릿/모바일에서는 열을 무리하게 눌러 담지 않고 표 안에서만 가로 스크롤(래퍼 overflow-x:auto) */
	.mypage-pay__table{table-layout:auto;min-width:820px}
}
@media (max-width:640px){
	.mypage-pay__summary{grid-template-columns:repeat(2,1fr);padding:18px 6px}
	.mypage-pay__summary-item{padding:6px 12px}
	.mypage-pay__summary-item:nth-child(3n+1){border-left:1px solid #eef1f6}
	.mypage-pay__summary-item:nth-child(2n+1){border-left:none}
	.mypage-pay__filter-row{grid-template-columns:1fr}
	.mypage-pay__filter-row .mypage-pay__filter-group.is-date,
	.mypage-pay__filter-row .mypage-pay__filter-group.is-keyword{grid-column:auto}
	.mypage-pay__filter-btns{width:100%}
	.mypage-pay__filter-btns .mypage-lecture__btn{flex:1}
}

/* ---------- 신청확인서 인쇄 ---------- */
@media print{
	.main-header,.main-footer,.main-footer__wave-wrap,.sub-quickmenu,
	.mypage-home__lnb,.mypage-ldt__tabnav,.mypage-ldt__back-btn,.mypage-fdt__footer{display:none !important}
	.mypage-home__body{padding:0;background:#fff}
	.mypage-home__inner{display:block;padding:0}
	.mypage-ldt__profile,.mypage-ldt__card,.mypage-fdt__caution{box-shadow:none;break-inside:avoid}
}

/* =========================================================================
   마이페이지 - 결제 & 환불 관리 - 취소/환불 신청 (3단계) - 확정 시안 "취소/환불 신청 1~3단계" 100% 퍼블리싱
   tong/mypage/refund_apply.html  (GET /mypage/refundApply.do)
   셸(.mypage-home__ lnb/body/inner/content) 재사용. 본문 폰트 최소 1.4rem(14px).
   상단 진행 탭(.refund-apply__steps)은 확정 시안 "거주지 인증" 절차 탭 스타일과 동일.
   ========================================================================= */
.refund-apply{
	--rfa-primary:#0d42b2;
	--rfa-primary-dark:#0a3690;
	--rfa-ink:#1b2942;
	--rfa-sub:#64748b;
	--rfa-line:#e5e9f0;
	--rfa-radius:12px;
}
.refund-apply .mypage-home__content{gap:0}

/* ① 본문 헤더 */
.refund-apply__head .mypage-home__crumb a{color:inherit;text-decoration:none}
.refund-apply__head .mypage-home__crumb .is-current{color:var(--rfa-primary);font-weight:700}

/* ② 상단 진행 탭 : [아이콘 + 01 넘버 + 제목 + 보조라벨] 카드를 '>' 셰브론으로 연결 */
.refund-apply__steps{list-style:none;margin:22px 0 0;padding:14px 18px;display:flex;align-items:stretch;
	gap:6px;background:#f7f9fc;border:1px solid var(--rfa-line);border-radius:var(--rfa-radius)}
.refund-apply__step{flex:1;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
	border:1px solid transparent;background:transparent;min-width:0}
.refund-apply__step-ico{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:11px;background:#e9edf4;color:#98a3b5;font-size:1.7rem;transition:background-color .15s,color .15s}
.refund-apply__step-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.refund-apply__step-name{font-size:1.5rem;font-weight:700;color:#8b95a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.refund-apply__step-name em{font-style:normal;font-weight:800;color:#aeb7c5;margin-right:2px}
.refund-apply__step-sub{font-size:1.4rem;color:#a3adbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.refund-apply__step-arrow{flex:none;display:flex;align-items:center;color:#c6cedb;font-size:1.4rem}

.refund-apply__step.is-done .refund-apply__step-ico{background:#e0f2fe;color:#0284c7}
.refund-apply__step.is-done .refund-apply__step-name{color:#48546b}
.refund-apply__step.is-done .refund-apply__step-name em{color:#0284c7}

.refund-apply__step.is-active{border-color:#bcd2f5;background:#eef4fe}
.refund-apply__step.is-active .refund-apply__step-ico{background:var(--rfa-primary);color:#fff}
.refund-apply__step.is-active .refund-apply__step-name{color:var(--rfa-primary);font-weight:800}
.refund-apply__step.is-active .refund-apply__step-name em{color:var(--rfa-primary)}
.refund-apply__step.is-active .refund-apply__step-sub{color:#4f74b8}

/* ③ 본문 레이아웃 : 좌(단계 패널) + 우(진행 단계 요약) */
.refund-apply__layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin-top:24px;align-items:start}
.refund-apply__main{min-width:0;display:flex;flex-direction:column}
/* 단계 패널은 .is-active 인 1개만 노출한다([hidden] 속성은 no-JS 폴백용, 표시 제어는 이 클래스로 한다). */
.refund-apply__panel{display:none;flex-direction:column}
.refund-apply__panel.is-active{display:flex}

.refund-apply__sec-title{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:1.7rem;font-weight:800;color:var(--rfa-ink)}
.refund-apply__sec-title:not(:first-child){margin-top:30px}
.refund-apply__sec-title i{color:var(--rfa-primary);font-size:1.6rem}

/* 결제 내역 카드 (1·3단계 공용) */
.refund-apply__pay-card{display:grid;grid-template-columns:150px minmax(0,1fr) 260px;gap:22px;
	background:#fff;border:1px solid var(--rfa-line);border-radius:var(--rfa-radius);padding:22px;
	box-shadow:0 1px 2px rgba(16,32,64,.04)}
.refund-apply__pay-thumb{width:150px;height:110px;border-radius:10px;overflow:hidden;background:#eef2f8;border:1px solid #e3e9f2}
.refund-apply__pay-thumb img{width:100%;height:100%;object-fit:cover}
.refund-apply__pay-info{min-width:0}
.refund-apply__pay-name{display:block;font-size:1.7rem;font-weight:800;color:var(--rfa-ink)}
.refund-apply__tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.refund-apply__tag{display:inline-block;padding:4px 11px;border-radius:6px;font-size:1.4rem;font-weight:700;line-height:1.3;white-space:nowrap}
.refund-apply__tag.is-blue{background:var(--rfa-primary);color:#fff}
.refund-apply__tag.is-gray{background:#eef1f6;color:#5a6b86}
.refund-apply__kv{width:100%;border-collapse:collapse;font-size:1.4rem}
.refund-apply__kv th{width:1%;padding:7px 16px 7px 0;text-align:left;vertical-align:top;white-space:nowrap;color:#8b95a5;font-weight:600}
.refund-apply__kv td{padding:7px 0;color:#37507d;line-height:1.5;word-break:break-all}
.refund-apply__pay-amt{border-left:1px solid #eef1f6;padding-left:22px}
.refund-apply__pay-amt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 12px}
.refund-apply__pay-amt dt{font-size:1.4rem;color:#8b95a5;white-space:nowrap}
.refund-apply__pay-amt dd{margin:0;font-size:1.4rem;font-weight:700;color:var(--rfa-ink);text-align:right}
.refund-apply__pay-amt dd.is-accent{color:var(--rfa-primary);font-weight:800}
.refund-apply__receipt-btn{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;
	padding:10px 14px;background:#fff;border:1px solid #cdd6e4;border-radius:8px;
	font-size:1.4rem;font-weight:700;color:#475569;text-decoration:none;transition:border-color .15s,color .15s}
.refund-apply__receipt-btn:hover{border-color:var(--rfa-primary);color:var(--rfa-primary)}

.refund-apply__badge{display:inline-block;padding:5px 12px;border-radius:20px;font-size:1.4rem;font-weight:700;line-height:1.3;white-space:nowrap}
.refund-apply__badge.is-green{background:#e3f6ec;color:#16a34a}
.refund-apply__badge.is-blue{background:#e5efff;color:#2563eb}

/* 1단계 : 환불 정보 폼 */
.refund-apply__form{background:#fff;border:1px solid var(--rfa-line);border-radius:var(--rfa-radius);overflow:hidden}
.refund-apply__form-tbl{width:100%;border-collapse:collapse;font-size:1.4rem}
.refund-apply__form-tbl th{padding:16px 18px;text-align:left;vertical-align:top;background:#f7f9fc;
	color:#42506b;font-weight:700;white-space:nowrap;border-bottom:1px solid #eef1f6;border-right:1px solid #eef1f6}
.refund-apply__form-tbl td{padding:14px 18px;color:#37507d;line-height:1.6;border-bottom:1px solid #eef1f6}
.refund-apply__form-tbl tr:last-child th,.refund-apply__form-tbl tr:last-child td{border-bottom:none}
.refund-apply__form-tbl th small{font-weight:600;color:#8b95a5}
.refund-apply__req{color:#e05a3d;margin-left:3px}

.refund-apply__reason-mode{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.refund-apply__radio{display:inline-flex;align-items:center;gap:7px;font-size:1.4rem;font-weight:700;color:#42506b;cursor:pointer}
.refund-apply__radio input{width:16px;height:16px;accent-color:var(--rfa-primary);cursor:pointer}
.refund-apply__rule-link{margin-left:auto;font-size:1.4rem;font-weight:700;color:var(--rfa-primary);text-decoration:none;white-space:nowrap}
.refund-apply__rule-link:hover{text-decoration:underline}
.refund-apply__rule-link i{font-size:1.4rem}

.refund-apply__reason-body{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:12px;align-items:start}
.refund-apply__reason-body.is-direct{grid-template-columns:minmax(0,1fr)}
.refund-apply__reason-body.is-direct .refund-apply__select{display:none}
.refund-apply__select{width:100%;height:44px;padding:0 38px 0 14px;box-sizing:border-box;font-size:1.4rem;color:#37507d;
	border:1px solid #cdd6e4;border-radius:8px;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b95a5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	appearance:none;-webkit-appearance:none;cursor:pointer}
.refund-apply__select:disabled{background-color:#f1f4f9;color:#a3adbb;cursor:not-allowed}
.refund-apply__select:focus{outline:none;border-color:var(--rfa-primary)}
.refund-apply__textarea-wrap{position:relative;min-width:0}
.refund-apply__textarea{width:100%;min-height:88px;padding:12px 14px 24px;box-sizing:border-box;font-size:1.4rem;
	font-family:inherit;color:#37507d;line-height:1.6;border:1px solid #cdd6e4;border-radius:8px;resize:vertical}
.refund-apply__textarea:focus{outline:none;border-color:var(--rfa-primary)}
.refund-apply__count{position:absolute;right:12px;bottom:8px;font-size:1.4rem;color:#a3adbb}

.refund-apply__rule-cell{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.refund-apply__rule-btn{padding:7px 13px;background:#fff;border:1px solid #cdd6e4;border-radius:8px;
	font-size:1.4rem;font-weight:700;color:#475569;cursor:pointer;transition:border-color .15s,color .15s}
.refund-apply__rule-btn:hover{border-color:var(--rfa-primary);color:var(--rfa-primary)}
.refund-apply__amt-strong{font-size:1.7rem;font-weight:800;color:var(--rfa-primary)}
.refund-apply__amt-sep{margin-left:24px;color:#8b95a5;font-weight:600}
.refund-apply__fee{margin-left:10px;font-size:1.5rem;font-weight:800;color:#e05a3d}
.refund-apply__amt-final{font-size:1.7rem;font-weight:800;color:var(--rfa-ink)}

/* 안내 박스 (1·3단계 공용) */
.refund-apply__notice{margin-top:18px;background:#f2f6fd;border:1px solid #dde8fa;border-radius:10px;padding:16px 18px}
.refund-apply__notice-title{display:flex;align-items:center;gap:7px;font-size:1.5rem;font-weight:800;color:#2f4c86}
.refund-apply__notice ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.refund-apply__notice li{position:relative;padding-left:16px;font-size:1.4rem;color:#42506b;line-height:1.6}
.refund-apply__notice li::before{content:"\2713";position:absolute;left:0;top:0;color:#2563eb;font-weight:900}

/* 하단 액션 버튼 */
.refund-apply__actions{display:flex;justify-content:center;gap:12px;margin-top:28px}
.refund-apply__btn{display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:50px;
	padding:0 26px;border-radius:10px;font-size:1.5rem;font-weight:700;cursor:pointer;text-decoration:none;
	border:1px solid transparent;transition:background-color .15s,border-color .15s,color .15s}
.refund-apply__btn.is-ghost{background:#fff;border-color:#cdd6e4;color:#475569}
.refund-apply__btn.is-ghost:hover{border-color:var(--rfa-primary);color:var(--rfa-primary)}
.refund-apply__btn.is-primary{background:var(--rfa-primary);border-color:var(--rfa-primary);color:#fff}
.refund-apply__btn.is-primary:hover{background:var(--rfa-primary-dark);border-color:var(--rfa-primary-dark)}
.refund-apply__btn:disabled{opacity:.6;cursor:default}

/* 2단계 : 규정 확인 */
.refund-apply__rule-guide{background:#fff;border:1px solid var(--rfa-line);border-radius:var(--rfa-radius);padding:20px 22px}
.refund-apply__rule-guide>strong{display:block;font-size:1.6rem;font-weight:800;color:var(--rfa-ink);margin-bottom:10px}
.refund-apply__rule-guide ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.refund-apply__rule-guide li{position:relative;padding-left:14px;font-size:1.4rem;color:#42506b;line-height:1.6}
.refund-apply__rule-guide li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:#94a3b8}

.refund-apply__rule-box{margin-top:18px;background:#fff;border:1px solid var(--rfa-line);border-radius:var(--rfa-radius);padding:20px 22px}
.refund-apply__rule-box-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.refund-apply__rule-box-head>strong{font-size:1.6rem;font-weight:800;color:var(--rfa-ink)}
.refund-apply__rule-base{font-size:1.4rem;color:#8b95a5}
.refund-apply__rule-tbl{width:100%;border-collapse:collapse;font-size:1.4rem}
.refund-apply__rule-tbl th{padding:13px 12px;background:#f7f9fc;color:#5a6b86;font-weight:700;text-align:center;
	border:1px solid #e5e9f0}
.refund-apply__rule-tbl td{padding:14px 12px;text-align:center;color:#40495a;line-height:1.5;border:1px solid #eef1f6}
.refund-apply__rule-tbl td:last-child{font-weight:700;color:var(--rfa-ink)}

.refund-apply__rule-caution{margin-top:18px;background:#fff8ef;border:1px solid #fbe4c4;border-radius:10px;padding:16px 18px}
.refund-apply__rule-caution .refund-apply__notice-title{color:#b4741a}
.refund-apply__rule-caution ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.refund-apply__rule-caution li{position:relative;padding-left:14px;font-size:1.4rem;color:#7a5a2a;line-height:1.6}
.refund-apply__rule-caution li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:#d9a441}

.refund-apply__agree{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px 16px;
	background:#f7f9fc;border:1px solid var(--rfa-line);border-radius:10px;font-size:1.4rem;font-weight:700;color:#42506b;cursor:pointer}
.refund-apply__agree input{width:18px;height:18px;accent-color:var(--rfa-primary);cursor:pointer}

/* 3단계 : 신청 완료 */
.refund-apply__done{display:flex;flex-direction:column;align-items:center;text-align:center;
	background:#fff;border:1px solid var(--rfa-line);border-radius:var(--rfa-radius);padding:44px 24px;box-shadow:0 1px 2px rgba(16,32,64,.04)}
.refund-apply__done-ico{width:76px;height:76px;display:flex;align-items:center;justify-content:center;border-radius:50%;
	background:#16a34a;color:#fff;font-size:3.2rem;margin-bottom:18px}
.refund-apply__done-title{margin:0 0 12px;font-size:2.2rem;font-weight:800;color:var(--rfa-ink)}
.refund-apply__done-desc{margin:0;font-size:1.4rem;color:var(--rfa-sub);line-height:1.7}

/* 우측 진행 단계 요약 */
.refund-apply__aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.refund-apply__aside-box{background:#fff;border:1px solid var(--rfa-line);border-radius:var(--rfa-radius);padding:20px 18px}
.refund-apply__aside-title{display:block;font-size:1.6rem;font-weight:800;color:var(--rfa-ink);margin-bottom:14px}
.refund-apply__progress{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.refund-apply__progress li{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;font-size:1.4rem;color:#8b95a5}
.refund-apply__progress-no{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#eef1f6;color:#98a3b5;font-size:1.4rem;font-weight:800}
.refund-apply__progress-nm{flex:1;min-width:0;font-weight:700}
.refund-apply__progress-st{font-size:1.4rem;font-weight:700;color:#a3adbb;white-space:nowrap}
.refund-apply__progress li.is-done{color:#48546b}
.refund-apply__progress li.is-done .refund-apply__progress-no{background:#e3f6ec;color:#16a34a}
.refund-apply__progress li.is-done .refund-apply__progress-st{color:#16a34a}
.refund-apply__progress li.is-active{background:#eef4fe}
.refund-apply__progress li.is-active .refund-apply__progress-no{background:var(--rfa-primary);color:#fff}
.refund-apply__progress li.is-active .refund-apply__progress-nm{color:var(--rfa-primary)}
.refund-apply__progress li.is-active .refund-apply__progress-st{color:var(--rfa-primary)}

.refund-apply__summary .refund-apply__kv th{padding:8px 12px 8px 0}
.refund-apply__summary .refund-apply__kv td{padding:8px 0;font-weight:600;color:var(--rfa-ink)}
.refund-apply__help{background:#fff8ef;border-color:#fbe4c4}
.refund-apply__help-title{display:flex;align-items:center;gap:7px;font-size:1.5rem;font-weight:800;color:#b4741a}
.refund-apply__help p{margin:9px 0 12px;font-size:1.4rem;color:#7a5a2a;line-height:1.6}
.refund-apply__help-tel{display:inline-flex;align-items:center;gap:7px;font-size:1.6rem;font-weight:800;color:#b4741a}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.refund-apply__layout{grid-template-columns:1fr}
	.refund-apply__aside{position:static;flex-direction:row;flex-wrap:wrap}
	.refund-apply__aside-box{flex:1 1 260px}
	.refund-apply__pay-card{grid-template-columns:130px minmax(0,1fr)}
	.refund-apply__pay-amt{grid-column:1/-1;border-left:none;border-top:1px solid #eef1f6;padding-left:0;padding-top:16px}
	.refund-apply__pay-amt dd{text-align:left}
	.refund-apply__receipt-btn{max-width:220px}
}
@media (max-width:820px){
	.refund-apply__steps{flex-direction:column;gap:4px}
	.refund-apply__step{width:100%}
	.refund-apply__step-arrow{transform:rotate(90deg);align-self:center;padding:2px 0}
	.refund-apply__step-name,.refund-apply__step-sub{white-space:normal}
}
@media (max-width:640px){
	.refund-apply__pay-card{grid-template-columns:1fr;padding:18px}
	.refund-apply__pay-thumb{width:100%;height:180px}
	.refund-apply__form-tbl th{width:auto;display:block;border-right:none;padding:12px 16px 6px}
	.refund-apply__form-tbl td{display:block;padding:6px 16px 14px}
	.refund-apply__reason-body{grid-template-columns:1fr}
	.refund-apply__reason-mode .refund-apply__rule-link{margin-left:0;flex:1 1 100%}
	.refund-apply__amt-sep{margin-left:0;display:block;margin-top:6px}
	.refund-apply__fee{margin-left:0}
	.refund-apply__actions{flex-direction:column-reverse}
	.refund-apply__btn{width:100%}
	.refund-apply__rule-tbl th,.refund-apply__rule-tbl td{padding:10px 8px}
}

/* ---------- 취소/환불 신청 인쇄(3단계 완료 화면) ---------- */
@media print{
	.refund-apply__steps,.refund-apply__aside,.refund-apply__actions,.mypage-home__lnb{display:none !important}
	.refund-apply__layout{grid-template-columns:1fr}
	.refund-apply__pay-card,.refund-apply__done{box-shadow:none;break-inside:avoid}
}

/* =========================================================================
   마이페이지 - 회원정보 & 감면 자격 관리 (member_info / discount_guide /
   discount_detail / member_info_edit / password_change)
   확정 시안 100% 퍼블리싱. 셸/LNB/테이블 기본형은 .mypage-home__ 재사용,
   이 계열 고유 영역만 .mypage-mi__ BEM prefix 로 분리한다.
   ========================================================================= */

/* ---------- 좌측 LNB 2차 네비게이션 (회원정보 계열 공통) ---------- */
.mypage-home__lnb-caret{margin-left:auto;font-size:1.2rem;opacity:.85}
.mypage-home__lnb-sub{list-style:none;margin:4px 0 2px;padding:6px 0 6px 10px;
	display:flex;flex-direction:column;gap:2px;border-left:2px solid #dbe4f3;margin-left:16px}
.mypage-home__lnb-menu .mypage-home__lnb-sub li a{display:block;padding:8px 12px;border-radius:7px;font-size:1.35rem;
	color:#23282f;font-weight:500;background:#edeff2;text-decoration:none;transition:background-color .15s,color .15s}
.mypage-home__lnb-menu .mypage-home__lnb-sub li a:hover{background:#e3e6ea;color:var(--mph-primary-dark)}
.mypage-home__lnb-menu .mypage-home__lnb-sub li.is-active a{color:var(--mph-primary-dark);font-weight:800;background:#e3e6ea}

/* ---------- 공통 : 상단 버튼 / 패널 / 테이블 / 상태 배지 ---------- */
.mypage-mi__head-actions{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.mypage-mi__edit-btn{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;
	border:0;border-radius:9px;background:var(--mph-primary);color:#fff;font-size:1.4rem;font-weight:700;
	cursor:pointer;transition:background-color .15s}
.mypage-mi__edit-btn:hover{background:var(--mph-primary-dark)}
.mypage-mi__edit-btn--line{box-sizing:border-box;background:#fff;border:1px solid var(--mph-primary);color:var(--mph-primary)}
.mypage-mi__edit-btn--line:hover{background:#eef4ff}
.mypage-mi__back-btn{flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;
	border:1px solid var(--mph-line);border-radius:9px;background:#fff;color:#475569;font-size:1.4rem;
	font-weight:700;text-decoration:none;transition:border-color .15s,color .15s}
.mypage-mi__back-btn:hover{border-color:var(--mph-primary);color:var(--mph-primary)}

.mypage-mi__panel{background:#fff;border:1px solid var(--mph-line);border-radius:var(--mph-radius);padding:24px}
.mypage-mi__panel + .mypage-mi__panel{margin-top:0}
.mypage-mi__panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.mypage-mi__panel-title{margin:0;font-size:1.7rem;font-weight:800;color:var(--mph-ink)}
.mypage-mi__panel-link{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid #c9d9f5;
	border-radius:8px;background:#f4f8ff;color:var(--mph-primary);font-size:1.35rem;font-weight:700;text-decoration:none}
.mypage-mi__panel-link:hover{background:var(--mph-primary);border-color:var(--mph-primary);color:#fff}
.mypage-mi__panel-foot{margin:14px 0 0;font-size:1.35rem;color:#8b95a5}

.mypage-mi__table{width:100%;border-collapse:collapse;font-size:1.4rem;table-layout:fixed}
.mypage-mi__table th{padding:13px 12px;background:#f7f9fc;color:#6b7686;font-weight:700;white-space:nowrap;
	border-top:1px solid #e8edf4;border-bottom:1px solid #e8edf4;text-align:center}
.mypage-mi__table td{padding:15px 12px;text-align:center;vertical-align:middle;color:#40495a;
	border-bottom:1px solid #eef1f6;word-break:break-all}
.mypage-mi__table td.is-left,.mypage-mi__table th.is-left{text-align:left}
/* 감면 자격 정보 테이블 : 좁은 컬럼(적용 비율)에서 헤더가 넘치지 않도록 줄바꿈 허용 */
.mypage-mi__table--discount th{white-space:normal;padding-left:8px;padding-right:8px}
.mypage-mi__table--discount td{padding-left:8px;padding-right:8px}
/* 자격 기간 컬럼은 단어(어절) 단위로 줄바꿈 */
.mypage-mi__table--discount td:nth-child(3){word-break:keep-all;overflow-wrap:normal}
.mypage-mi__t-name{font-weight:700;color:var(--mph-ink)}
.mypage-mi__t-rate{font-weight:800;color:var(--mph-primary)}
.mypage-mi__chip{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:6px;font-size:1.2rem;font-weight:700;vertical-align:middle}
.mypage-mi__chip.is-basic{background:#e5efff;color:#2563eb}
.mypage-mi__chip.is-add{background:#eef4e8;color:#4d7c22}
.mypage-mi__t-doc{display:inline-flex;align-items:center;gap:5px;color:var(--mph-primary);font-weight:700;text-decoration:none}
.mypage-mi__t-doc:hover{text-decoration:underline}
.mypage-mi__t-doc-sub{display:block;margin-top:3px;font-size:1.25rem;color:#94a3b8}

.mypage-mi__status{display:inline-block;padding:4px 11px;border-radius:20px;font-size:1.35rem;font-weight:700;white-space:nowrap;
	background:#eef2f7;color:#5a6b86;transition:opacity .3s}
.mypage-mi__status.is-on{background:#e3f6ec;color:#16a34a}
.mypage-mi__status.is-done{background:#e3f6ec;color:#16a34a}
.mypage-mi__status.is-wait{background:#fdf0dc;color:#c2790f}
.mypage-mi__status.is-cancel{background:#fde8e8;color:#dc2626}
.mypage-mi__status--btn{border:0;font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.mypage-mi__status--btn:hover{filter:brightness(.95)}
.mypage-mi__reject-modal .join-modal__panel{max-width:440px}
.mypage-mi__reject-type{margin:0 0 10px;font-weight:700;color:#1f2937}
.mypage-mi__reject-box{padding:14px 16px;border-radius:8px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;white-space:pre-wrap;word-break:break-all;line-height:1.7}
.mypage-mi__reject-guide{margin:12px 0 0;font-size:1.4rem;color:#64748b}

/* ---------- member_info : 회원 프로필 카드 ---------- */
.mypage-mi__profile-card{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px}
.mypage-mi__profile,.mypage-mi__local{background:#fff;border:1px solid var(--mph-line);border-radius:var(--mph-radius);padding:24px}
.mypage-mi__profile{display:grid;grid-template-columns:auto 1fr;gap:18px 22px;align-items:start}
.mypage-mi__profile .mypage-home__avatar{width:88px;height:88px}
.mypage-mi__profile-body{min-width:0}
.mypage-mi__profile-line{margin:9px 0 0;font-size:1.4rem;color:#475569}
.mypage-mi__profile-dl{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 22px}
.mypage-mi__profile-dl > div{display:flex;gap:8px;font-size:1.4rem}
.mypage-mi__profile-dl dt{color:#9aa6b6;font-weight:600}
.mypage-mi__profile-dl dd{margin:0;color:#37414f;font-weight:700}
.mypage-mi__profile-contact{grid-column:1/-1;margin:4px 0 0;padding-top:18px;border-top:1px dashed #e3e9f2;
	display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.mypage-mi__profile-contact > div{display:flex;gap:10px;font-size:1.4rem;min-width:0}
.mypage-mi__profile-contact dt{flex:none;width:78px;color:#8b95a5;font-weight:600}
.mypage-mi__profile-contact dt i{margin-right:4px;color:#b3bfd0}
.mypage-mi__profile-contact dd{margin:0;color:#37414f;font-weight:600;overflow:hidden;text-overflow:ellipsis}

.mypage-mi__local{background:#f4f8ff;border-color:#dbe7fb}
.mypage-mi__local-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mypage-mi__local-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:11px 16px;
	border:1px solid #c9d9f5;border-radius:9px;background:#fff;color:var(--mph-primary);font-size:1.4rem;
	font-weight:700;text-decoration:none;justify-content:center;width:100%;box-sizing:border-box}
.mypage-mi__local-more:hover{background:var(--mph-primary);border-color:var(--mph-primary);color:#fff}

/* ---------- member_info : 감면 자격 정보 / 안내 2단 ---------- */
.mypage-mi__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:stretch}
.mypage-mi__grid > .mypage-mi__guide{display:flex;flex-direction:column}
.mypage-mi__grid > .mypage-mi__guide .mypage-mi__guide-list{margin-bottom:16px}
.mypage-mi__grid > .mypage-mi__guide .mypage-mi__guide-all{margin-top:auto}
.mypage-mi__applied{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:18px;padding:16px 18px;
	border:1px solid #cfe6d8;border-radius:10px;background:#f2fbf5}
.mypage-mi__applied > i{font-size:2rem;color:#16a34a}
.mypage-mi__applied-txt{flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.mypage-mi__applied-txt strong{font-size:1.5rem;font-weight:800;color:#15803d}
.mypage-mi__applied-txt span{font-size:1.35rem;color:#3f6b4f}
.mypage-mi__applied-meta{margin:0;display:flex;gap:22px}
.mypage-mi__applied-meta > div{text-align:right}
.mypage-mi__applied-meta dt{font-size:1.25rem;color:#8b95a5}
.mypage-mi__applied-meta dd{margin:2px 0 0;font-size:1.4rem;font-weight:700;color:var(--mph-ink)}

.mypage-mi__guide-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mypage-mi__guide-list li{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--mph-line);
	border-radius:10px;background:#fbfcfe}
.mypage-mi__guide-ico{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:10px;background:#e5efff;color:var(--mph-primary);font-size:1.5rem}
.mypage-mi__guide-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mypage-mi__guide-body strong{font-size:1.4rem;font-weight:800;color:var(--mph-ink)}
.mypage-mi__guide-body span{font-size:1.3rem;color:#8b95a5}
.mypage-mi__guide-arrow{flex:none;color:#c3cdda;font-size:1.3rem}
.mypage-mi__guide-all{display:block;margin-top:16px;padding:12px;text-align:center;border-radius:9px;
	background:var(--mph-primary);color:#fff;font-size:1.4rem;font-weight:700;text-decoration:none}
.mypage-mi__guide-all:hover{background:var(--mph-primary-dark)}

/* ---------- member_info : 최근 변경 내역 + 더보기 슬라이드다운 ---------- */
.mypage-mi__hist-table td{padding:14px 12px}
.mypage-mi__hist-more{max-height:0;overflow:hidden;transition:max-height .45s ease}
.mypage-mi__hist-more .mypage-mi__table th{display:none}
.mypage-mi__hist-more tr td{border-bottom:1px solid #eef1f6}
.mypage-mi__hist-more tr.is-new td{opacity:0;transform:translateY(-6px)}
.mypage-mi__hist-more tr td{transition:opacity .3s ease,transform .3s ease}
.mypage-mi__hist-foot{display:flex;justify-content:center;margin-top:16px}
.mypage-mi__more-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border:1px solid var(--mph-line);
	border-radius:24px;background:#fff;color:#5a6b86;font-size:1.4rem;font-weight:700;cursor:pointer;
	transition:border-color .15s,color .15s}
.mypage-mi__more-btn:hover{border-color:var(--mph-primary);color:var(--mph-primary)}
.mypage-mi__more-btn:disabled{opacity:.6;cursor:default}
.mypage-mi__more-btn i{font-size:1.2rem}

/* ---------- member_info : 본인확인(비밀번호 재입력) 모달 ---------- */
.mypage-mi__pwd-modal .join-modal__panel{max-width:420px}
.mypage-mi__pwd-lead{display:flex;align-items:center;gap:14px;margin:4px 0 20px}
.mypage-mi__pwd-ico{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#eef4fe;color:var(--mph-primary);font-size:1.7rem}
.mypage-mi__pwd-lead p{margin:0;font-size:1.45rem;font-weight:700;line-height:1.5;color:var(--mph-ink)}
.mypage-mi__form-row{display:flex;flex-direction:column;gap:8px}
.mypage-mi__form-label{font-size:1.35rem;font-weight:700;color:#1f2937}
.mypage-mi__pwd-err{margin:8px 0 0;font-size:1.3rem;color:#dc2626}

/* ---------- discount_guide ---------- */
.mypage-mi__intro{position:relative;overflow:hidden;padding:24px 26px;border:1px solid #dbe7fb;border-radius:var(--mph-radius);
	background:#f4f8ff}
.mypage-mi__intro-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.mypage-mi__intro-head i{color:var(--mph-primary);font-size:1.7rem}
.mypage-mi__intro-head strong{font-size:1.6rem;font-weight:800;color:var(--mph-ink)}
.mypage-mi__intro-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:calc(100% - 120px)}
.mypage-mi__intro-list li{position:relative;padding-left:14px;font-size:1.4rem;line-height:1.6;color:#37507d}
.mypage-mi__intro-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#5a86d8}
.mypage-mi__intro-badge{position:absolute;right:24px;bottom:-14px;width:92px;height:92px;display:flex;align-items:center;
	justify-content:center;border-radius:20px;background:#dbe7fb;color:var(--mph-primary);font-size:3rem;transform:rotate(-8deg)}

.mypage-mi__guide-table td{vertical-align:top}
.mypage-mi__guide-cell{display:flex;align-items:center;gap:12px}
.mypage-mi__guide-cico{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:11px;background:#e5efff;color:var(--mph-primary);font-size:1.6rem}
.mypage-mi__guide-ctxt b{display:block;font-size:1.45rem;font-weight:800;color:var(--mph-ink)}
.mypage-mi__guide-ctxt .mypage-mi__chip{margin:5px 0 0}
.mypage-mi__dot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mypage-mi__dot-list li{position:relative;padding-left:13px;font-size:1.35rem;line-height:1.55;color:#48566b;text-align:left}
.mypage-mi__dot-list li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:#9db4dc}

.mypage-mi__notice{padding:22px 24px;border:1px solid #f0e2c8;border-radius:var(--mph-radius);background:#fffdf6}
.mypage-mi__notice-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.mypage-mi__notice-head i{color:#d19a2e;font-size:1.6rem}
.mypage-mi__notice-head strong{font-size:1.55rem;font-weight:800;color:var(--mph-ink)}

/* ---------- discount_detail ---------- */
.mypage-mi__sec-title{margin:0 0 16px;font-size:1.7rem;font-weight:800;color:var(--mph-ink)}
.mypage-mi__sec-title span{color:var(--mph-primary);margin-right:4px}
.mypage-mi__summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center;
	padding:22px 24px;border:1px solid var(--mph-line);border-radius:12px;background:#fbfcfe}
.mypage-mi__summary-left{display:flex;align-items:center;gap:18px}
.mypage-mi__summary-ico{width:64px;height:64px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#e5efff;color:var(--mph-primary);font-size:2.2rem}
.mypage-mi__summary-txt{display:flex;flex-direction:column;gap:6px}
.mypage-mi__summary-txt strong{font-size:1.6rem;font-weight:800;color:var(--mph-ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mypage-mi__summary-txt span{font-size:1.4rem;color:#5a6b86}
.mypage-mi__summary-txt .mypage-home__badge-discount{color:#fff}
.mypage-mi__summary-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mypage-mi__summary-checks li{display:flex;align-items:flex-start;gap:9px;font-size:1.4rem;color:#37507d}
.mypage-mi__summary-checks i{margin-top:3px;color:#2563eb}
.mypage-mi__summary-checks b{font-weight:800;color:var(--mph-ink)}

.mypage-mi__kv{width:100%;border-collapse:collapse;font-size:1.4rem;border-top:1px solid #e8edf4}
.mypage-mi__kv th{width:120px;padding:14px 16px;background:#f7f9fc;color:#6b7686;font-weight:700;text-align:center;
	border-bottom:1px solid #eef1f6;border-right:1px solid #eef1f6;white-space:nowrap}
.mypage-mi__kv td{padding:14px 18px;color:#37414f;font-weight:600;border-bottom:1px solid #eef1f6;border-right:1px solid #eef1f6;text-align:left}
.mypage-mi__kv td:last-child{border-right:0}

/* ---------- member_info_edit ---------- */
.mypage-mi__edit{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.mypage-mi__edit-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.mypage-mi__edit-side{display:flex;flex-direction:column;gap:18px}
.mypage-mi__edit-top{display:grid;grid-template-columns:auto 1fr;gap:24px}
.mypage-mi__notice + .mypage-mi__edit-top{margin-top:20px}
.mypage-mi__edit-avatar{display:flex;flex-direction:column;align-items:center;gap:12px}
.mypage-mi__edit-avatar .mypage-home__avatar{width:96px;height:96px}
.mypage-mi__edit-photo{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--mph-line);
	border-radius:8px;background:#fff;color:#5a6b86;font-size:1.3rem;font-weight:700;cursor:pointer}
.mypage-mi__edit-photo:hover{border-color:#2563eb;color:#2563eb}
.mypage-mi__edit-photo:disabled{cursor:not-allowed;opacity:.7}
.mypage-mi__edit-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.mypage-mi__field{display:flex;flex-direction:column;gap:7px;min-width:0}
.mypage-mi__field--full{grid-column:1/-1}
.mypage-mi__field > label,.mypage-mi__field-label{font-size:1.35rem;font-weight:700;color:#1f2937}
.mypage-mi__field-hint{margin:2px 0 0;font-size:1.25rem;color:#8b95a5}
.mypage-mi__field-hint.is-ok{color:#16a34a}
.mypage-mi__field-hint.is-err{color:#dc2626}
.mypage-mi__field .join-radio-row{padding-top:6px}
.mypage-mi__edit-side .mypage-mi__panel{display:flex;flex-direction:column;gap:14px}
.mypage-mi__edit-side .mypage-mi__panel-head{margin-bottom:0}
.mypage-mi__edit-side .mypage-mi__side-desc{margin-bottom:0}
.mypage-mi__addr{display:flex;flex-direction:column;gap:8px}
.mypage-mi__addr-zip{display:flex;gap:8px}
.mypage-mi__addr-zip .join-input{max-width:200px}
.mypage-mi__addr-zip .join-btn{flex:none;white-space:nowrap}
.mypage-mi__edit-hint{margin:16px 0 0;font-size:1.3rem;color:#8b95a5}
.mypage-mi__edit-hint i{margin-right:5px;color:#b3bfd0}
.mypage-mi__agree-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mypage-mi__agree{display:flex;flex-direction:column;gap:8px}
.mypage-mi__agree-label{font-size:1.4rem;font-weight:700;color:#1f2937}
.mypage-mi__agree-desc{margin:0;font-size:1.3rem;color:#8b95a5}
.mypage-mi__edit-actions{display:flex;justify-content:center;gap:12px;margin-top:4px}
.mypage-mi__edit-actions .join-btn{min-width:140px}
.mypage-mi__side-desc{margin:0 0 16px;font-size:1.35rem;color:#5a6b86;line-height:1.6}
.mypage-mi__side-guide .mypage-mi__dot-list{margin-bottom:16px}
.mypage-mi__side-links{display:flex;flex-direction:column;gap:10px}
.mypage-mi__side-link-btn{box-sizing:border-box;width:100%;padding:12px;border:1px solid var(--mph-line);border-radius:9px;
	background:#fff;color:#334155;font-size:1.35rem;font-weight:700;cursor:pointer;text-decoration:none;
	display:flex;align-items:center;justify-content:center;gap:8px}
.mypage-mi__side-link-btn:hover{background:#f5f8ff;border-color:var(--mph-primary);color:var(--mph-primary)}
.mypage-mi__side-link-btn i{color:var(--mph-primary)}

/* ---------- password_change ---------- */
.mypage-mi__pwd-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
.mypage-mi__pwd-title{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.mypage-mi__pwd-title-ico{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:12px;background:#eef4fe;color:var(--mph-primary);font-size:2rem;line-height:1}
.mypage-mi__pwd-title-ico i{display:block}
.mypage-mi__pwd-title-ico.is-shield{background:#e3f6ec;color:#16a34a}
.mypage-mi__pwd-title > div > strong{display:block;font-size:1.65rem;font-weight:800;color:var(--mph-ink)}
.mypage-mi__pwd-title > div > span{display:block;margin-top:4px;font-size:1.35rem;color:#8b95a5}
.mypage-mi__pwd-form{display:flex;flex-direction:column;gap:18px}
.mypage-mi__pwd-form .join-input-wrap .join-input{padding-right:46px}
.mypage-mi__pwd-toggle{position:absolute;top:0;right:0;height:46px;width:44px;border:0;background:none;color:#94a3b8;cursor:pointer;font-size:1.4rem}
.mypage-mi__pwd-actions{display:flex;justify-content:center;gap:12px;margin-top:6px}
.mypage-mi__pwd-actions .join-btn{min-width:130px}
.mypage-mi__pwd-side{background:#fbfcfe}
.mypage-mi__pwd-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.mypage-mi__pwd-check li{display:flex;align-items:flex-start;gap:9px;font-size:1.38rem;color:#40495a}
.mypage-mi__pwd-check i{margin-top:2px;color:#16a34a}
.mypage-mi__pwd-tip{display:flex;gap:12px;margin-top:18px;padding:16px;border-radius:10px;background:#fffdf3;border:1px solid #f0e6c9}
.mypage-mi__pwd-tip i{flex:none;color:#d19a2e;font-size:1.5rem;margin-top:2px}
.mypage-mi__pwd-tip strong{display:block;font-size:1.38rem;font-weight:800;color:var(--mph-ink)}
.mypage-mi__pwd-tip p{margin:5px 0 0;font-size:1.3rem;line-height:1.55;color:#6b7280}
.mypage-mi__pwd-foot{display:flex;gap:14px;padding:20px 24px;border-radius:var(--mph-radius);background:#eef4fe;border:1px solid #dbe7fb}
.mypage-mi__pwd-foot i{flex:none;color:var(--mph-primary);font-size:1.6rem;margin-top:2px}
.mypage-mi__pwd-foot strong{display:block;font-size:1.45rem;font-weight:800;color:var(--mph-ink)}
.mypage-mi__pwd-foot p{margin:6px 0 0;font-size:1.35rem;line-height:1.6;color:#5a6b86}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.mypage-mi__profile-card,.mypage-mi__grid,.mypage-mi__summary,.mypage-mi__pwd-grid{grid-template-columns:1fr}
	.mypage-mi__edit{grid-template-columns:1fr}
	.mypage-mi__intro-list{max-width:100%}
	.mypage-mi__grid > .mypage-mi__guide .mypage-mi__guide-all{margin-top:0}
}
@media (max-width:900px){
	.mypage-mi__profile{grid-template-columns:1fr}
	.mypage-mi__profile-contact{grid-template-columns:1fr}
	.mypage-mi__edit-fields,.mypage-mi__agree-grid{grid-template-columns:1fr}
	.mypage-mi__kv,.mypage-mi__kv tbody,.mypage-mi__kv tr,.mypage-mi__kv th,.mypage-mi__kv td{display:block;width:auto}
	.mypage-mi__kv th{text-align:left;border-right:0}
	.mypage-mi__kv td{border-right:0}
}
@media (max-width:640px){
	.mypage-mi__head-actions{align-self:stretch;justify-content:flex-start}
	.mypage-mi__head-actions .mypage-mi__edit-btn{flex:1 1 auto;justify-content:center}
	.mypage-mi__edit-top{grid-template-columns:1fr}
	.mypage-mi__applied-meta{width:100%;justify-content:space-between}
	.mypage-mi__table{table-layout:auto}
	.mypage-mi__intro-badge{display:none}
}

/* =========================================================================
   마이페이지 - 회원 탈퇴하기
   확정 시안 "회원 탈퇴하기" 100% 퍼블리싱. tong/mypage/withdraw.html
   (GET /mypage/withdraw.do). 셸(.mypage-home__ lnb/body/inner/content) + mypage_lnb 재사용.
   본문 폰트 최소 1.4rem(14px). 화면 고유 영역만 .mypage-wd__ BEM prefix.
   ========================================================================= */
.mypage-wd{--wd-primary:#0d42b2;--wd-ink:#1b2942;--wd-line:#e5e9f0;--wd-danger:#dc2626;--wd-radius:12px}

/* ② 상단 경고 배너 */
.mypage-wd__alert{display:flex;gap:14px;align-items:flex-start;margin:22px 0 6px;padding:18px 20px;
	border:1px solid #f4c9c4;border-radius:var(--wd-radius);background:#fdf3f2}
.mypage-wd__alert-ico{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#fbe1de;color:var(--wd-danger);font-size:1.7rem}
.mypage-wd__alert-txt{margin:0;font-size:1.4rem;line-height:1.65;color:#5a4340}
.mypage-wd__alert-txt strong{font-weight:800;color:#a5342b}

/* 섹션 공통 */
.mypage-wd__section{margin-top:34px}
.mypage-wd__sec-title{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;font-size:1.75rem;font-weight:800;color:var(--wd-ink)}
.mypage-wd__sec-title span{color:var(--wd-primary)}

/* ③ 데이터 처리 안내 표 */
.mypage-wd__table{width:100%;border-collapse:collapse;font-size:1.4rem;table-layout:fixed;border-top:1px solid #dfe5ee}
.mypage-wd__table th{padding:13px 12px;background:#f7f9fc;color:#6b7686;font-weight:700;text-align:center;
	white-space:nowrap;border-bottom:1px solid #e8edf4}
.mypage-wd__table td{padding:15px 12px;text-align:center;vertical-align:top;color:#40495a;line-height:1.6;
	border-bottom:1px solid #eef1f6;word-break:keep-all}
.mypage-wd__table td.is-left,.mypage-wd__table th.is-left{text-align:left}
.mypage-wd__table td strong{font-weight:800;color:var(--wd-ink)}
.mypage-wd__dot{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left}
.mypage-wd__dot li{position:relative;padding-left:12px;font-size:1.35rem;color:#48566b;line-height:1.6}
.mypage-wd__dot li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:#9db4dc}
.mypage-wd__tag{display:inline-block;padding:4px 10px;border-radius:20px;font-size:1.3rem;font-weight:800;white-space:nowrap}
.mypage-wd__tag.is-danger{background:#fde8e8;color:var(--wd-danger)}
.mypage-wd__tag.is-hold{background:#eaf1fd;color:var(--wd-primary)}
.mypage-wd__tag.is-cond{background:#fdf0dc;color:#c2790f}
.mypage-wd__tag-sub{display:block;margin-top:4px;font-size:1.25rem;color:#94a3b8;font-weight:600}

/* ④ 탈퇴 전 확인사항 카드 */
.mypage-wd__check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mypage-wd__check{display:flex;flex-direction:column;padding:20px 18px;border:1px solid var(--wd-line);
	border-radius:var(--wd-radius);background:#fff}
.mypage-wd__check-ico{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:12px;background:#eef2fb;color:var(--wd-primary);font-size:1.7rem;margin-bottom:12px}
.mypage-wd__check-title{display:flex;align-items:center;gap:7px;font-size:1.45rem;font-weight:800;color:var(--wd-ink)}
.mypage-wd__check-title em{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:var(--wd-primary);color:#fff;font-size:1.25rem;font-style:normal;font-weight:800}
.mypage-wd__check-desc{margin:10px 0 14px;font-size:1.35rem;color:#5a6b86;line-height:1.6;flex:1}
.mypage-wd__check-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:9px 14px;
	border:1px solid #c9d9f5;border-radius:8px;font-size:1.3rem;font-weight:700;color:var(--wd-primary);text-decoration:none}
.mypage-wd__check-link:hover{background:var(--wd-primary);border-color:var(--wd-primary);color:#fff}
.mypage-wd__check-link i{font-size:1.2rem}

/* ⑤ 회원 탈퇴 동의 */
.mypage-wd__agree{padding:22px;border:1px solid #f0c9c4;border-radius:var(--wd-radius);background:#fdf6f5}
.mypage-wd__agree-label{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.45rem;
	font-weight:700;color:var(--wd-ink);cursor:pointer}
.mypage-wd__agree-label input{width:18px;height:18px;flex:none;accent-color:var(--wd-danger);cursor:pointer}
.mypage-wd__req{color:var(--wd-danger);font-weight:800}

/* ⑥ 하단 액션 */
.mypage-wd__actions{display:flex;justify-content:center;gap:12px;margin-top:34px}
.mypage-wd__btn{display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:48px;padding:0 24px;
	border:0;border-radius:10px;font-size:1.5rem;font-weight:700;cursor:pointer;text-decoration:none;transition:background-color .15s,opacity .15s}
.mypage-wd__btn.is-ghost{background:#fff;border:1px solid var(--wd-line);color:#475569}
.mypage-wd__btn.is-ghost:hover{border-color:#c3ccdb;background:#f8fafc}
.mypage-wd__btn.is-danger{background:var(--wd-danger);color:#fff}
.mypage-wd__btn.is-danger:hover{background:#b91c1c}
.mypage-wd__btn.is-danger:disabled{background:#e6a9a9;cursor:not-allowed}

/* 본인확인(비밀번호) 모달 고유 영역 */
.mypage-wd__pwd-lead{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;padding:14px 16px;
	border-radius:10px;background:#fdf3f2;border:1px solid #f4c9c4}
.mypage-wd__pwd-ico{flex:none;font-size:1.9rem;color:var(--wd-danger)}
.mypage-wd__pwd-lead p{margin:0;font-size:1.35rem;line-height:1.6;color:#5a4340}
.mypage-wd__pwd-lead strong{display:inline-block;margin-top:4px;font-weight:800;color:#a5342b}
.mypage-wd__form-row{display:flex;flex-direction:column;gap:8px}
.mypage-wd__form-label{font-size:1.35rem;font-weight:700;color:#1f2937}
.mypage-wd__pwd-err{margin:10px 0 0;font-size:1.3rem;font-weight:700;color:var(--wd-danger)}
.mypage-wd__pwd-modal .join-btn--danger{background:var(--wd-danger);color:#fff}
.mypage-wd__pwd-modal .join-btn--danger:hover{background:#b91c1c}
.mypage-wd__pwd-modal .join-actions .join-btn{min-width:120px}

@media (max-width:1100px){
	.mypage-wd__check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
	.mypage-wd__table{table-layout:auto}
	.mypage-wd__table th:nth-child(5),.mypage-wd__table td:nth-child(5){display:none}
}
@media (max-width:640px){
	.mypage-wd__check-grid{grid-template-columns:1fr}
	.mypage-wd__actions{flex-direction:column-reverse}
	.mypage-wd__btn{width:100%}
	.mypage-wd__alert{flex-direction:column}
}

/* =========================================================================
   마이페이지 - 회원정보 & 감면 자격 관리 - 감면 자격 서류 등록 (등록 마법사)
   확정 시안 "감면 자격 서류 등록 / 인증" 100% 퍼블리싱. tong/mypage/discount_apply.html
   (GET /mypage/discountApply.do). 셸(.mypage-home__ lnb/body/inner/content) + mypage_lnb 재사용.
   본문 폰트 최소 1.4rem(14px). 상단 진행 탭은 "거주지 인증" 절차 탭 스타일과 동일.
   ========================================================================= */
.discount-apply{
	--dca-primary:#0d42b2;
	--dca-primary-dark:#0a3690;
	--dca-ink:#1b2942;
	--dca-sub:#64748b;
	--dca-line:#e5e9f0;
	--dca-radius:12px;
}
.discount-apply .mypage-home__content{gap:0}

/* ① 본문 헤더 */
.discount-apply__head .mypage-home__crumb .is-current{color:var(--dca-primary);font-weight:700}

/* ② 상단 진행 탭 : [아이콘 + 01 넘버 + 제목 + 보조라벨] 카드를 '>' 셰브론으로 연결 */
.discount-apply__steps{list-style:none;margin:22px 0 0;padding:14px 18px;display:flex;align-items:stretch;
	gap:6px;background:#f7f9fc;border:1px solid var(--dca-line);border-radius:var(--dca-radius)}
.discount-apply__step{flex:1;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
	border:1px solid transparent;background:transparent;min-width:0}
.discount-apply__step-ico{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:11px;background:#e9edf4;color:#98a3b5;font-size:1.7rem;transition:background-color .15s,color .15s}
.discount-apply__step-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.discount-apply__step-name{font-size:1.5rem;font-weight:700;color:#8b95a5;white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all}
.discount-apply__step-name em{font-style:normal;font-weight:800;color:#aeb7c5;margin-right:2px}
.discount-apply__step-sub{font-size:1.4rem;color:#a3adbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.discount-apply__step-arrow{flex:none;display:flex;align-items:center;color:#c6cedb;font-size:1.4rem}
.discount-apply__step.is-done .discount-apply__step-ico{background:#e0f2fe;color:#0284c7}
.discount-apply__step.is-done .discount-apply__step-name{color:#48546b}
.discount-apply__step.is-done .discount-apply__step-name em{color:#0284c7}
.discount-apply__step.is-active{border-color:#bcd2f5;background:#eef4fe}
.discount-apply__step.is-active .discount-apply__step-ico{background:var(--dca-primary);color:#fff}
.discount-apply__step.is-active .discount-apply__step-name{color:var(--dca-primary);font-weight:800}
.discount-apply__step.is-active .discount-apply__step-name em{color:var(--dca-primary)}
.discount-apply__step.is-active .discount-apply__step-sub{color:#4f74b8}

/* ③ 본문 레이아웃 : 좌(단계 패널) + 우(진행 단계 요약) */
.discount-apply__layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin-top:24px;align-items:start}
.discount-apply__main{min-width:0;display:flex;flex-direction:column}
/* 단계 패널은 .is-active 인 1개만 노출한다([hidden] 은 no-JS 폴백용). */
.discount-apply__panel{display:none;flex-direction:column}
.discount-apply__panel.is-active{display:flex}

.discount-apply__sec-title{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-size:1.8rem;font-weight:800;color:var(--dca-ink)}
.discount-apply__sec-title i{color:var(--dca-primary);font-size:1.6rem}
.discount-apply__sec-desc{margin:0 0 18px;font-size:1.4rem;color:var(--dca-sub);line-height:1.6}
.discount-apply__sub-title{margin:24px 0 12px;font-size:1.55rem;font-weight:800;color:var(--dca-ink)}

/* ===== 1단계 : 감면 구분 선택 ===== */
.discount-apply__type-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.discount-apply__type{border:1px solid var(--dca-line);border-radius:12px;background:#fff;padding:0;
	display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.discount-apply__type.is-checked{border-color:var(--dca-primary);box-shadow:0 0 0 2px rgba(13,66,178,.12)}
.discount-apply__type-box{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
	gap:6px;padding:22px 16px 16px;cursor:pointer}
.discount-apply__type-check{position:absolute;opacity:0;width:0;height:0}
.discount-apply__type-ico{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;
	background:#eef2fb;color:var(--dca-primary);font-size:2rem}
.discount-apply__type.is-checked .discount-apply__type-ico{background:var(--dca-primary);color:#fff}
.discount-apply__type-dot{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;
	border:2px solid #cfd8e6;background:#fff;display:flex;align-items:center;justify-content:center;color:transparent;
	font-size:13px;line-height:1}
.discount-apply__type-dot i{display:block;line-height:1}
.discount-apply__type.is-checked .discount-apply__type-dot{border-color:var(--dca-primary);background:var(--dca-primary);color:#fff}
.discount-apply__type-name{font-size:1.45rem;font-weight:800;color:var(--dca-ink)}
.discount-apply__type-desc{font-size:1.3rem;color:#8b95a5;line-height:1.45}
.discount-apply__type-more{margin:0 12px 12px;padding:7px 0;border:1px solid var(--dca-line);border-radius:8px;
	background:#f8fafc;color:#5a6b86;font-size:1.3rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.discount-apply__type-more:hover{border-color:var(--dca-primary);color:var(--dca-primary)}
.discount-apply__type-more i{transition:transform .15s}
.discount-apply__type-more.is-open i{transform:rotate(180deg)}
.discount-apply__type-detail{margin:0 12px 14px;padding:12px 14px;border-radius:8px;background:#f7f9fc;border:1px solid #eef1f6}
.discount-apply__type-detail strong{display:block;font-size:1.3rem;font-weight:800;color:var(--dca-ink);margin-bottom:6px}
.discount-apply__type-detail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.discount-apply__type-detail li{font-size:1.3rem;color:#48566b;text-align:left}
.discount-apply__type-detail li em{font-style:normal;margin-left:5px;color:#94a3b8;font-weight:700}
.discount-apply__type-detail li em.is-req{color:#e05a3d}

/* 공통 : 안내 박스 */
.discount-apply__hint{display:flex;gap:12px;margin-top:20px;padding:16px 18px;background:#f2f6fd;
	border:1px solid #dde8fa;border-radius:10px}
.discount-apply__hint>i{flex:none;color:var(--dca-primary);font-size:1.6rem;margin-top:2px}
.discount-apply__hint ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.discount-apply__hint li{position:relative;padding-left:14px;font-size:1.4rem;color:#42506b;line-height:1.6}
.discount-apply__hint li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:#7ea2dd}

/* 공통 : 하단 액션 버튼 */
.discount-apply__actions{display:flex;justify-content:center;gap:12px;margin-top:28px}
.discount-apply__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:150px;height:50px;
	padding:0 26px;border-radius:10px;font-size:1.5rem;font-weight:700;cursor:pointer;text-decoration:none;
	border:1px solid transparent;transition:background-color .15s,border-color .15s,color .15s}
.discount-apply__btn.is-ghost{background:#fff;border-color:#cdd6e4;color:#475569}
.discount-apply__btn.is-ghost:hover{border-color:var(--dca-primary);color:var(--dca-primary)}
.discount-apply__btn.is-primary{background:var(--dca-primary);border-color:var(--dca-primary);color:#fff}
.discount-apply__btn.is-primary:hover{background:var(--dca-primary-dark);border-color:var(--dca-primary-dark)}
.discount-apply__btn.is-line{min-width:0;height:auto;padding:11px 18px;background:#fff;border-color:#c9d9f5;color:var(--dca-primary)}
.discount-apply__btn.is-line:hover{background:var(--dca-primary);border-color:var(--dca-primary);color:#fff}
.discount-apply__btn:disabled{opacity:.6;cursor:default}

/* ===== 2단계 : 인증 방법 선택 ===== */
.discount-apply__method-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.discount-apply__method{position:relative;display:block;cursor:pointer}
.discount-apply__method input{position:absolute;opacity:0;width:0;height:0}
.discount-apply__method-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
	height:100%;box-sizing:border-box;padding:30px 24px;border:1px solid var(--dca-line);border-radius:14px;
	background:#fff;transition:border-color .15s,box-shadow .15s}
.discount-apply__method.is-active .discount-apply__method-box{border-color:var(--dca-primary);box-shadow:0 0 0 2px rgba(13,66,178,.12)}
.discount-apply__method.is-disabled{cursor:not-allowed}
.discount-apply__method.is-disabled .discount-apply__method-box{opacity:.55;background:#f5f7fa}
.discount-apply__method.is-disabled .discount-apply__method-badge{background:#8a94a6;color:#fff}
.discount-apply__method-badge{position:absolute;top:14px;left:14px;z-index:1;padding:4px 12px;border-radius:20px;
	background:var(--dca-primary);color:#fff;font-size:1.25rem;font-weight:800}
.discount-apply__method-ico{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;
	background:#eef2fb;color:var(--dca-primary);font-size:2.4rem}
.discount-apply__method.is-active .discount-apply__method-ico{background:var(--dca-primary);color:#fff}
.discount-apply__method-title{font-size:1.65rem;font-weight:800;color:var(--dca-ink)}
.discount-apply__method-desc{font-size:1.4rem;color:#5a6b86;line-height:1.6}
.discount-apply__method-feat{margin-top:6px;display:flex;flex-direction:column;gap:7px;align-items:center}
.discount-apply__method-feat span{display:flex;align-items:center;gap:7px;font-size:1.35rem;color:#42506b}
.discount-apply__method-feat i{color:#16a34a;font-size:1.3rem}

/* ===== 3단계(직접) : 서류 등록 ===== */
.discount-apply__req-table{width:100%;border-collapse:collapse;font-size:1.4rem;margin-bottom:22px}
.discount-apply__req-table th{padding:13px 14px;background:#f7f9fc;color:#5a6b86;font-weight:700;text-align:left;
	border-top:1px solid #e8edf4;border-bottom:1px solid #e8edf4}
.discount-apply__req-table td{padding:14px;color:#40495a;border-bottom:1px solid #eef1f6}
.discount-apply__req-table td.is-left{text-align:left}

.discount-apply__upload-wrap,.discount-apply__memo-wrap{background:#fff;border:1px solid var(--dca-line);
	border-radius:var(--dca-radius);padding:20px 22px;margin-top:16px}
.discount-apply__upload-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:1.5rem;font-weight:800;color:var(--dca-ink)}
.discount-apply__no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;
	background:#eef2fb;color:var(--dca-primary);font-size:1.3rem;font-weight:800}
.discount-apply__req{color:#e05a3d;font-size:1.3rem;font-weight:800}
.discount-apply__upload-head em{font-style:normal;font-size:1.3rem;font-weight:700;color:#94a3b8}
.discount-apply__upload-guide{flex-basis:100%;font-size:1.3rem;font-weight:600;color:#8b95a5;margin-top:4px}

.discount-apply__doc-group{margin-top:18px;padding-top:16px;border-top:1px dashed #e3e9f2}
.discount-apply__doc-group:first-of-type{border-top:0;padding-top:8px}
.discount-apply__doc-group-title{display:flex;align-items:center;gap:8px;font-size:1.4rem;font-weight:800;color:var(--dca-ink);margin-bottom:12px}
.discount-apply__doc-group-title i{color:var(--dca-primary)}
.discount-apply__doc-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid #f0f3f8}
.discount-apply__doc-row:last-child{border-bottom:0}
.discount-apply__doc-label{font-size:1.4rem;font-weight:700;color:#3b4658;padding-top:12px}
.discount-apply__doc-label em{font-style:normal;margin-left:5px;font-size:1.3rem;font-weight:700;color:#94a3b8}
.discount-apply__doc-label em.is-req{color:#e05a3d}
.discount-apply__doc-field{min-width:0}
.discount-apply__file-box{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px dashed #c2cedf;
	border-radius:9px;background:#f8fafc;cursor:pointer;transition:border-color .15s,background-color .15s}
.discount-apply__file-box:hover{border-color:var(--dca-primary);background:#f2f6fd}
.discount-apply__file-box.is-filled{border-style:solid;border-color:var(--dca-primary);background:#eef4fe}
.discount-apply__file-box>i{color:var(--dca-primary);font-size:1.5rem;flex:none}
.discount-apply__file-name{flex:1;min-width:0;font-size:1.35rem;color:#5a6b86;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.discount-apply__file-box.is-filled .discount-apply__file-name{color:var(--dca-ink);font-weight:700}
.discount-apply__file-input{position:absolute;inset:0;opacity:0;cursor:pointer}
.discount-apply__file-clear{margin-top:8px;padding:6px 12px;border:1px solid #e0c4c4;border-radius:7px;background:#fff;
	color:#dc2626;font-size:1.25rem;font-weight:700;cursor:pointer}
.discount-apply__file-clear:hover{background:#fef2f2}
.discount-apply__doc-hint{margin:8px 0 0;position:relative;padding-left:13px;font-size:1.3rem;color:#8b95a5;line-height:1.5}
.discount-apply__doc-hint::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:#b7c2d3}

.discount-apply__textarea-wrap{position:relative;margin-top:12px}
.discount-apply__textarea{width:100%;min-height:96px;padding:12px 14px 26px;box-sizing:border-box;font-size:1.4rem;
	font-family:inherit;color:#37507d;line-height:1.6;border:1px solid #cdd6e4;border-radius:8px;resize:vertical}
.discount-apply__textarea:focus{outline:none;border-color:var(--dca-primary)}
.discount-apply__count{position:absolute;right:12px;bottom:10px;font-size:1.3rem;color:#a3adbb}

/* ===== 3단계(행정정보) : 정보 조회 및 확인 ===== */
.discount-apply__lookup-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px}
.discount-apply__lookup-meta{font-size:1.35rem;color:#8b95a5}
.discount-apply__lookup-meta b{color:#5a6b86;font-weight:700}
.discount-apply__lookup-ok{display:inline-flex;align-items:center;gap:5px;margin-left:12px;color:#16a34a;font-weight:800}
.discount-apply__lookup{margin-bottom:16px}
.discount-apply__lookup-alt{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
	margin-top:6px;padding:18px 20px;border:1px solid #dbe7fb;border-radius:12px;background:#f4f8ff}
.discount-apply__lookup-alt-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.discount-apply__lookup-alt-txt strong{font-size:1.45rem;font-weight:800;color:var(--dca-ink)}
.discount-apply__lookup-alt-txt span{font-size:1.35rem;color:#5a6b86}

/* 공통 : key-value 표 */
.discount-apply__kv{width:100%;border-collapse:collapse;font-size:1.4rem;border-top:1px solid #e8edf4}
.discount-apply__kv th{width:150px;padding:14px 16px;background:#f7f9fc;color:#6b7686;font-weight:700;text-align:left;
	border-bottom:1px solid #eef1f6;border-right:1px solid #eef1f6;white-space:nowrap;vertical-align:top}
.discount-apply__kv td{padding:14px 18px;color:#37414f;font-weight:600;border-bottom:1px solid #eef1f6;text-align:left;word-break:break-all}
.discount-apply__kv td.is-ok{color:#16a34a;font-weight:800}
.discount-apply__kv--2col th{width:120px}
.discount-apply__kv--2col td{border-right:1px solid #eef1f6}
.discount-apply__kv--2col td:last-child{border-right:0}
.discount-apply__kv--done{max-width:560px;margin:0 auto}

/* ===== 4단계(직접) : 서류 확인 ===== */
.discount-apply__flag{display:flex;gap:10px;padding:14px 16px;border-radius:10px;background:#eef4fe;border:1px solid #dbe7fb;
	font-size:1.4rem;color:#37507d;line-height:1.6}
.discount-apply__flag i{flex:none;color:var(--dca-primary);font-size:1.5rem;margin-top:2px}
.discount-apply__chips{display:flex;flex-wrap:wrap;gap:10px}
.discount-apply__chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;
	background:#f4f8ff;border:1px solid #dbe7fb;font-size:1.4rem;font-weight:800;color:var(--dca-ink)}
.discount-apply__chip i{color:#16a34a}
.discount-apply__chip em{font-style:normal;font-weight:600;color:#8b95a5}

.discount-apply__doc-list{width:100%;border-collapse:collapse;font-size:1.35rem}
.discount-apply__doc-list th{padding:12px 10px;background:#f7f9fc;color:#5a6b86;font-weight:700;text-align:center;
	border-top:1px solid #e8edf4;border-bottom:1px solid #e8edf4;white-space:nowrap}
.discount-apply__doc-list td{padding:13px 10px;text-align:center;color:#40495a;border-bottom:1px solid #eef1f6;vertical-align:middle}
.discount-apply__doc-list td.is-left{text-align:left}
.discount-apply__doc-list td.is-empty{padding:26px 10px;color:#94a3b8}
.discount-apply__doc-list td i{color:#8b95a5;margin-right:4px}
.discount-apply__doc-size{color:#94a3b8}

.discount-apply__badge{display:inline-block;padding:5px 12px;border-radius:20px;font-size:1.3rem;font-weight:700;line-height:1.3;white-space:nowrap}
.discount-apply__badge.is-blue{background:#e5efff;color:#2563eb}
.discount-apply__badge.is-wait{background:#fdf0dc;color:#c2790f}

/* ===== 완료 화면 (4egov / 5) ===== */
.discount-apply__done{display:flex;flex-direction:column;align-items:center;text-align:center;
	background:#fff;border:1px solid var(--dca-line);border-radius:var(--dca-radius);padding:44px 24px;margin-bottom:20px;
	box-shadow:0 1px 2px rgba(16,32,64,.04)}
.discount-apply__done-ico{width:76px;height:76px;display:flex;align-items:center;justify-content:center;border-radius:50%;
	background:#16a34a;color:#fff;font-size:3.2rem;margin-bottom:18px}
.discount-apply__done-title{margin:0 0 12px;font-size:2.1rem;font-weight:800;color:#15803d}
.discount-apply__done-desc{margin:0;font-size:1.4rem;color:var(--dca-sub);line-height:1.7}

/* ④ 우측 진행 단계 요약 */
.discount-apply__aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.discount-apply__aside-box{position:relative;overflow:hidden;background:#fff;border:1px solid var(--dca-line);
	border-radius:var(--dca-radius);padding:20px 18px}
.discount-apply__aside-title{position:relative;z-index:1;display:block;font-size:1.6rem;font-weight:800;color:var(--dca-ink);margin-bottom:14px}
.discount-apply__aside-desc{position:relative;z-index:1;margin:0;font-size:1.35rem;color:#5a6b86;line-height:1.65}
.discount-apply__aside-ico{position:absolute;z-index:0;right:14px;top:14px;bottom:auto;width:56px;height:56px;display:flex;align-items:center;
	justify-content:center;border-radius:16px;background:#eef2fb;color:var(--dca-primary);font-size:2rem;transform:rotate(-8deg)}
.discount-apply__aside-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.discount-apply__aside-list li{position:relative;padding-left:14px;font-size:1.35rem;color:#48566b;line-height:1.6}
.discount-apply__aside-list li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:#9db4dc}
.discount-apply__aside-steps{list-style:none;margin:0;padding:0;counter-reset:daside;display:flex;flex-direction:column;gap:11px}
.discount-apply__aside-steps li{counter-increment:daside;position:relative;padding-left:32px;font-size:1.35rem;color:#48566b;line-height:1.55}
.discount-apply__aside-steps li::before{content:counter(daside,decimal-leading-zero);position:absolute;left:0;top:0;
	width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;
	background:#eef2fb;color:var(--dca-primary);font-size:1.15rem;font-weight:800}

.discount-apply__progress{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.discount-apply__progress li{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;font-size:1.4rem;color:#8b95a5}
.discount-apply__progress-no{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#eef1f6;color:#98a3b5;font-size:1.35rem;font-weight:800}
.discount-apply__progress-nm{flex:1;min-width:0;font-weight:700}
.discount-apply__progress-st{font-size:1.35rem;font-weight:700;color:#a3adbb;white-space:nowrap}
.discount-apply__progress li.is-done{color:#48546b}
.discount-apply__progress li.is-done .discount-apply__progress-no{background:#e3f6ec;color:#16a34a}
.discount-apply__progress li.is-done .discount-apply__progress-st{color:#16a34a}
.discount-apply__progress li.is-active{background:#eef4fe}
.discount-apply__progress li.is-active .discount-apply__progress-no{background:var(--dca-primary);color:#fff}
.discount-apply__progress li.is-active .discount-apply__progress-nm{color:var(--dca-primary)}
.discount-apply__progress li.is-active .discount-apply__progress-st{color:var(--dca-primary)}
/* hidden 속성이 display:flex 로 무력화되지 않도록(행정정보 조회 분기의 5단계 숨김) */
.discount-apply__step[hidden],
.discount-apply__step-arrow[hidden],
.discount-apply__progress li[hidden]{display:none}

.discount-apply__help{background:#fff8ef;border-color:#fbe4c4}
.discount-apply__help-title{display:flex;align-items:center;gap:7px;font-size:1.5rem;font-weight:800;color:#b4741a}
.discount-apply__help p{margin:9px 0 12px;font-size:1.4rem;color:#7a5a2a;line-height:1.6}
.discount-apply__help-tel{display:inline-flex;align-items:center;gap:7px;font-size:1.6rem;font-weight:800;color:#b4741a}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
	.discount-apply__layout{grid-template-columns:1fr}
	.discount-apply__aside{position:static;flex-direction:row;flex-wrap:wrap}
	.discount-apply__aside-box{flex:1 1 260px}
	.discount-apply__type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
	.discount-apply__type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.discount-apply__method-grid{grid-template-columns:1fr}
	.discount-apply__doc-row{grid-template-columns:1fr}
	.discount-apply__doc-label{padding-top:0}
	.discount-apply__kv--2col th,.discount-apply__kv--2col td{display:block;width:auto;border-right:0}
}
@media (max-width:640px){
	.discount-apply__steps{flex-direction:column;gap:4px}
	.discount-apply__step{width:100%}
	.discount-apply__step-arrow{transform:rotate(90deg);align-self:center;padding:2px 0}
	.discount-apply__step-name,.discount-apply__step-sub{white-space:normal}
	.discount-apply__type-grid{grid-template-columns:1fr}
	.discount-apply__actions{flex-direction:column-reverse}
	.discount-apply__btn{width:100%}
	.discount-apply__doc-list{table-layout:auto}
}

/* =====================================================================
   온라인 수강신청 1단계(강습선택) - tong/lecture/lecture_apply_step1.html
   BEM prefix: .lecapply-  (본문 폰트 최소 1.3rem)
   ===================================================================== */
.lecapply{font-size:1.5rem;line-height:1.65;color:#333;max-width:1180px;margin:0 auto}
.lecapply button,.lecapply input,.lecapply select,.lecapply textarea{font-size:1.5rem;font-family:inherit}
.lecapply .is-hidden{display:none !important}
.lecapply-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}

/* 진행 단계 : 공통 .join-steps 재사용, 폭만 넓힌다 (1단계는 미표시, 2~4단계만 노출) */
.lecapply-steps{max-width:640px;margin:0 auto 34px}

/* ---------- 검색 필터 ---------- */
.lecapply-filter{background:#f1f5f9;border:1px solid #e2e8f2;border-radius:14px;padding:14px 24px;margin-bottom:22px}
/* 1단계는 타이틀/진행단계 없이 필터가 첫 요소이므로 서브비주얼과 살짝 간격을 준다 */
.lecapply > .lecapply-filter:first-child{margin-top:6px}
.lecapply-filter__row{display:flex;align-items:flex-start;gap:14px;padding:11px 0}
.lecapply-filter__row + .lecapply-filter__row{border-top:1px dashed #d3dbe8}
.lecapply-filter__label{flex:none;width:88px;padding-top:7px;font-weight:700;color:#1f2937}
.lecapply-filter__control{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lecapply-chip{padding:7px 16px;border:1px solid #c5cede;border-radius:999px;background:#fff;color:#41506a;cursor:pointer;line-height:1.2;transition:all .15s}
.lecapply-chip:hover{border-color:#1063c6;color:#1063c6}
.lecapply-chip.is-active{background:#1063c6;border-color:#1063c6;color:#fff;font-weight:700}
.lecapply-chip--day{min-width:48px;text-align:center;border-radius:8px;padding:7px 12px}
.lecapply-filter__select{height:40px;padding:0 30px 0 12px;border:1px solid #c5cede;border-radius:8px;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#33415c;cursor:pointer}
.lecapply-filter__sep{color:#94a3b8}
.lecapply-filter__text{flex:1;min-width:200px;height:40px;padding:0 14px;border:1px solid #c5cede;border-radius:8px;background:#fff;color:#33415c}
.lecapply-filter__text:focus,.lecapply-filter__select:focus{outline:2px solid #bcd4f5;outline-offset:1px;border-color:#1063c6}
.lecapply-filter__btns{display:flex;gap:8px;margin-left:auto}
/* 검색 필터 3열 그리드 : 1열 강습분류 / 2열 운영요일+이용시간 / 3열 이용대상 */
.lecapply-filter__grid{display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:0 28px;padding:11px 0}
.lecapply-filter__cell{display:flex;flex-direction:column;gap:8px;min-width:0}
.lecapply-filter__cell + .lecapply-filter__cell{border-left:1px dashed #d3dbe8;padding-left:28px}
.lecapply-filter__cell .lecapply-filter__label{width:auto;padding-top:0}
.lecapply-filter__label--sub{margin-top:8px}
.lecapply-filter__hint{font-style:normal;font-weight:400;font-size:1.25rem;color:#8a94a6}
.lecapply-filter__grid + .lecapply-filter__row{border-top:1px dashed #d3dbe8}
.lecapply-filter__row--split{align-items:center;gap:28px}
.lecapply-filter__cell--inline{flex-direction:row;align-items:flex-start;gap:14px}
.lecapply-filter__cell--inline .lecapply-filter__label{flex:none;width:88px;padding-top:7px;white-space:nowrap}
.lecapply-filter__cell--inline + .lecapply-filter__cell--inline{border-left:1px dashed #d3dbe8;padding-left:28px}
.lecapply-filter__row--split .lecapply-filter__cell--inline:first-child{flex:1;min-width:0}
.lecapply-filter__row--split .lecapply-filter__cell--inline + .lecapply-filter__cell--inline{flex:none;gap:10px}
.lecapply-filter__row--split .lecapply-filter__select{width:84px;height:36px;padding:0 24px 0 10px;font-size:1.4rem;background-position:right 9px center}
.lecapply-filter__row--split .lecapply-filter__control{flex-wrap:nowrap}

.lecapply-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}
.lecapply-btn--primary{background:#1063c6;color:#fff}
.lecapply-btn--primary:hover{background:#0d54a8}
.lecapply-btn--muted{background:#64748b;color:#fff}
.lecapply-btn--muted:hover{background:#53617a}
.lecapply-btn--ghost{background:#fff;border-color:#1063c6;color:#1063c6}
.lecapply-btn--ghost:hover{background:#eef5ff}

/* ---------- 강습신청 안내 ---------- */
.lecapply-notice{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#eef5ff;border:1px solid #d3e4fb;border-radius:12px;padding:18px 20px;margin-bottom:22px}
.lecapply-notice__title{display:flex;align-items:center;gap:6px;font-size:1.6rem;font-weight:800;color:#1063c6;margin:0 0 6px}
.lecapply-notice__list{margin:0;padding-left:18px;color:#42506a;line-height:1.75;font-size:1.4rem}
.lecapply-notice__link{flex:none}

/* ---------- 본문 레이아웃 ---------- */
.lecapply-layout{display:flex;gap:24px;align-items:flex-start}
.lecapply-main{flex:1;min-width:0}

.lecapply-count{margin:0 0 10px;font-weight:700;color:#33415c}
.lecapply-count strong{color:#1063c6}
.lecapply-sample-note{display:flex;align-items:center;gap:6px;margin:0 0 12px;padding:8px 12px;border-radius:8px;background:#fff7ec;border:1px solid #f3ddb9;color:#b4741a;font-size:1.4rem}

/* ---------- 강습 목록 테이블 ---------- */
.lecapply-tablewrap{overflow-x:auto;border-top:2px solid #23324a}
.lecapply-table{width:100%;border-collapse:collapse;min-width:960px}
.lecapply-table th{background:#f4f7fb;padding:13px 10px;font-weight:700;color:#33415c;border-bottom:1px solid #d6deea;white-space:nowrap}
.lecapply-table td{padding:14px 10px;text-align:center;border-bottom:1px solid #e8edf4;color:#3c4759}
.lecapply-table td.is-left{text-align:left}
.lecapply-table td.is-right{text-align:right}
.lecapply-table tbody tr:not(#lecapplyEmptyRow){cursor:pointer}
.lecapply-table tbody tr:hover{background:#f7fafe}
.lecapply-table tbody tr.is-selected,.lecapply-table tbody tr.is-selected:hover{background:#c7defb;box-shadow:inset 3px 0 0 #1063c6}
.lecapply-table__name{font-weight:700;color:#1f2937;cursor:pointer}
.lecapply-table__remain{color:#1063c6}
.lecapply-status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:1.3rem;font-weight:700;line-height:1.4;white-space:nowrap;background:#eef0f4;color:#5b6475}
.lecapply-status.is-green{background:#e3f5e9;color:#17803d}
.lecapply-status.is-orange{background:#fff1de;color:#b45f06}
.lecapply-status.is-red{background:#fde8e8;color:#c0262d}
.lecapply-status.is-gray{background:#eef0f4;color:#5b6475}
.lecapply-empty{text-align:center;padding:42px 10px;color:#8a94a6}
/* ---------- 하단 안내 카드 ---------- */
.lecapply-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.lecapply-guide__card{background:#f7f9fc;border:1px solid #e6ebf3;border-radius:12px;padding:18px 20px}
.lecapply-guide__head{display:flex;align-items:center;gap:8px;font-size:1.55rem;font-weight:800;color:#1f2937;margin:0 0 8px}
.lecapply-guide__head i{color:#1063c6}
.lecapply-guide__list{margin:0;padding-left:18px;color:#5a6577;line-height:1.75}

.lecapply-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:24px 0 0;padding:16px;border-radius:10px;background:#eef5ff;border:1px solid #d3e4fb;color:#42506a}
.lecapply-help i{color:#1063c6}
.lecapply-help strong{color:#17233b;font-size:1.5rem}

/* ---------- 반응형 ---------- */
/* 1024px 이하(모바일·태블릿) : 본문을 세로 배치로 전환한다. */
@media (max-width:1024px){
	/* 세로 배치로 바뀔 때 상속된 align-items:flex-start 때문에 .lecapply-main 이 콘텐츠 폭으로
	   줄어들어 검색영역/안내영역과 폭이 어긋난다 → stretch + width:100% 로 전 영역 폭을 맞춘다. */
	.lecapply-layout{flex-direction:column;align-items:stretch}
	.lecapply-main{width:100%}
	.lecapply-guide{grid-template-columns:1fr}

}
@media (max-width:768px){
	.lecapply__title{font-size:2.1rem}
	.lecapply-filter{padding:8px 16px}
	.lecapply-filter__row--split{flex-direction:column;align-items:stretch;gap:8px}
	.lecapply-filter__row--split .lecapply-filter__cell--inline + .lecapply-filter__cell--inline{flex:1}
	.lecapply-filter__cell--inline{flex-direction:column;gap:8px}
	.lecapply-filter__cell--inline .lecapply-filter__label{width:auto;padding-top:0}
	.lecapply-filter__cell--inline + .lecapply-filter__cell--inline{border-left:0;padding-left:0}
	.lecapply-filter__grid{grid-template-columns:1fr;gap:14px 0}
	.lecapply-filter__cell + .lecapply-filter__cell{border-left:0;border-top:1px dashed #d3dbe8;padding-left:0;padding-top:14px}
	.lecapply-filter__row{flex-direction:column;align-items:stretch;gap:8px}
	.lecapply-filter__label{width:auto;padding-top:0}
	.lecapply-filter__btns{margin-left:0}
	.lecapply-filter__btns .lecapply-btn{flex:1;justify-content:center}
	.lecapply-notice{flex-direction:column;align-items:flex-start}
	.lecapply-notice__link{align-self:stretch;justify-content:center}

	/* 강습 목록 : 표 → 원터치 카드형 배치 (모바일). 각 td 의 data-label 을 항목명으로 표시 */
	.lecapply-tablewrap{overflow-x:visible;border-top:0}
	.lecapply-table{min-width:0}
	.lecapply-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
	.lecapply-table,.lecapply-table tbody{display:block}
	.lecapply-table tbody tr{display:flex;flex-direction:column;width:auto}
	.lecapply-table tbody tr:not(#lecapplyEmptyRow){border:1px solid #d6deea;border-radius:12px;padding:4px 16px 8px;margin-bottom:12px;background:#fff}
	.lecapply-table tbody tr.is-selected,.lecapply-table tbody tr.is-selected:hover{background:#eef5ff;border-color:#1063c6;box-shadow:inset 0 0 0 1px #1063c6}
	.lecapply-table td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word;border-bottom:1px dashed #e8edf4}
	.lecapply-table td::before{content:attr(data-label);flex:none;font-weight:700;color:#6b7688;font-size:1.35rem;text-align:left;white-space:nowrap}
	.lecapply-table td:last-child{border-bottom:0}
	.lecapply-table td.is-left{order:-1;border-bottom:2px solid #e8edf4}
	.lecapply-table td.is-left::before{display:none}
	.lecapply-table td.is-left .lecapply-table__name{font-size:1.6rem;line-height:1.4}
	.lecapply-table td.lecapply-empty{justify-content:center;text-align:center;border-bottom:0;padding:32px 0}
	.lecapply-table td.lecapply-empty::before{display:none}
}

/* =====================================================================
   온라인 수강신청 2단계(신청정보 입력) - tong/lecture/lecture_apply_step2.html
   BEM prefix: .lecstep2-   (공통 .lecapply 폰트 베이스 1.5rem 위에 얹는다)
   ===================================================================== */
.lecstep2{max-width:1180px;margin:0 auto}
/* box-sizing 미지정 시 width:100% + 좌우 padding/보더가 더해져 카드 밖으로 삐져나온다(프로젝트 공통 패턴). */
.lecstep2 *{box-sizing:border-box}

/* ---------- 2단 레이아웃 (좌 폼 62% : 우 카드 34%) ---------- */
.lecstep2-layout{display:flex;gap:26px;align-items:flex-start;margin-top:8px}
.lecstep2-main{flex:1 1 auto;min-width:0}
.lecstep2-side{width:372px;flex:none;position:sticky;top:20px;display:flex;flex-direction:column;gap:16px}

/* ---------- 좌측 섹션 카드 ---------- */
.lecstep2-sec{border:1px solid #e2e8f2;border-radius:14px;background:#fff;margin-bottom:18px;overflow:hidden}
.lecstep2-sec__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:15px 20px;
	font-size:1.7rem;font-weight:800;color:#1f2937;background:#f7f9fc;border-bottom:1px solid #e6ebf3}
.lecstep2-sec__head i{color:#1063c6}
.lecstep2-sec__no{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;
	padding:0 7px;border-radius:999px;background:#1063c6;color:#fff;font-size:1.25rem;font-weight:800;letter-spacing:.02em}
.lecstep2-sec__badge{padding:3px 10px;border-radius:999px;background:#e4f0ff;color:#0d4f9e;font-size:1.2rem;font-weight:700}
.lecstep2-sec__note{flex:1 1 100%;font-size:1.4rem;font-weight:500;color:#8a5a1a}
.lecstep2-sec__body{padding:20px}
/* 신청자 정보 카드 (마이페이지 회원정보 카드 형태) */
.lecstep2-profile{display:grid;grid-template-columns:1fr;gap:18px 22px}
.lecstep2-profile__body{min-width:0}
.lecstep2-profile__name{display:block;font-size:2rem;font-weight:800;color:#1f2a3a}
.lecstep2-profile__name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lecstep2-profile__gender{padding:3px 10px;border-radius:999px;background:#eef2f7;color:#475569;font-size:1.4rem;font-weight:700}
.lecstep2-profile__contact{grid-column:1/-1;margin:4px 0 0;padding-top:18px;border-top:1px dashed #e3e9f2;
	display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.lecstep2-profile__contact > div{display:flex;gap:10px;font-size:1.4rem;min-width:0}
.lecstep2-profile__contact dt{flex:none;width:96px;color:#8b95a5;font-weight:600}
.lecstep2-profile__contact dt i{margin-right:4px;color:#b3bfd0}
.lecstep2-profile__contact dd{margin:0;color:#37414f;font-weight:700;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
	.lecstep2-profile__contact{grid-template-columns:1fr}
}

/* ---------- 수강 대상자 라디오 카드 (본인+자녀 최대 4개까지 한 줄) ---------- */
.lecstep2-fieldset{margin:0;padding:0;border:0;min-width:0}
.lecstep2-target{display:flex;flex-wrap:wrap;gap:12px}
.lecstep2-target__item{flex:1 1 calc(25% - 9px);max-width:100%;display:flex;align-items:flex-start;gap:9px;min-width:0;
	padding:13px 14px;border:1px solid #c5cede;border-radius:12px;background:#fff;cursor:pointer;transition:all .15s}
.lecstep2-target__item:hover{border-color:#1063c6}
.lecstep2-target__radio{margin-top:2px;width:18px;height:18px;accent-color:#1063c6;cursor:pointer;flex:none}
.lecstep2-target__item:has(.lecstep2-target__radio:checked),.lecstep2-target__item.is-checked{border-color:#1063c6;background:#eef5ff;box-shadow:inset 0 0 0 1px #1063c6}
.lecstep2-target__box{display:flex;flex-direction:column;gap:3px;min-width:0}
.lecstep2-target__label{font-weight:700;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecstep2-target__meta{font-size:1.3rem;color:#5a6577;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lecstep2-hint{display:flex;align-items:flex-start;gap:6px;margin:14px 0 0;padding:11px 14px;border-radius:8px;
	background:#f1f5f9;border:1px solid #e2e8f2;color:#42506a;font-size:1.35rem;line-height:1.6}
.lecstep2-fieldset > .lecstep2-hint{margin:0 0 14px}
.lecstep2-hint i{margin-top:3px;color:#1063c6}
.lecstep2-hint a{color:#1063c6;font-weight:700;text-decoration:underline}

/* ---------- 입력 필드 공통 ---------- */
.lecstep2-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:start}
.lecstep2-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.lecstep2-field + .lecstep2-field{margin-top:14px}
/* 그리드(2열) 안에서는 세로 나열용 margin-top 을 제거해 좌우 셀 높이를 맞춘다. */
.lecstep2-grid2 .lecstep2-field + .lecstep2-field{margin-top:0}
.lecstep2-field__label{font-weight:700;color:#33415c;font-size:1.4rem}
.lecstep2-req{color:#e0483d;margin-left:2px}
.lecstep2-field__control{display:flex;flex-direction:column;gap:8px;min-width:0}

.lecstep2-input,.lecstep2-select,.lecstep2-textarea{width:100%;max-width:100%;min-width:0;height:44px;padding:0 14px;
	border:1px solid #c5cede;border-radius:8px;background:#fff;color:#33415c;font-size:1.5rem;font-family:inherit}
.lecstep2-textarea{height:auto;min-height:88px;padding:12px 14px;line-height:1.6;resize:vertical}
.lecstep2-input:focus,.lecstep2-select:focus,.lecstep2-textarea:focus{outline:2px solid #bcd4f5;outline-offset:1px;border-color:#1063c6}
.lecstep2-input--ro,.lecstep2-input[readonly]{background:#f1f5f9;color:#5a6577;cursor:not-allowed}
.lecstep2-input--ro:focus{outline:none}
.lecstep2-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.lecstep2-select--wide{max-width:260px}

/* 입력값 길이에 맞춘 폭 : 이메일 중간 / 4자리 번호칸 고정 */
.lecstep2-input--email{max-width:340px}
.lecstep2-input--num4{flex:0 0 84px;width:84px;max-width:84px;text-align:center}

/* 전화번호 / 비상연락처 : 왼쪽 정렬, 번호칸은 값 길이만큼만 */
.lecstep2-tel{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px}
.lecstep2-tel .lecstep2-select{width:90px;flex:0 0 90px}
.lecstep2-tel .lecstep2-input{flex:0 0 84px;width:84px;max-width:84px;text-align:center}
.lecstep2-tel__dash{color:#94a3b8}
.lecstep2-tel__cap{flex:1 1 100%;font-size:1.3rem;color:#8a94a6}
.lecstep2-tel--emgc .lecstep2-select{width:104px;flex:0 0 104px}

/* 주소 : 우편번호 짧게 / 기본·상세 주소는 카드 폭에 맞춰 채움 */
.lecstep2-addr__zip{display:flex;flex-wrap:wrap;gap:8px}
.lecstep2-addr__zip .lecstep2-input{flex:0 0 116px;width:116px;max-width:116px}
.lecstep2-addr__zip .lecstep2-btn{flex:0 0 auto}
.lecstep2-addr > .lecstep2-input{width:100%}

/* 자수 카운터 */
.lecstep2-counter{align-self:flex-end;font-size:1.3rem;color:#8a94a6}
.lecstep2-counter b{color:#1063c6;font-weight:700}

/* ---------- 우측 카드 (선택 강습 / 감면 / 결제) ---------- */
.lecstep2-card{border:1px solid #cfe0f6;border-radius:14px;background:#fff;overflow:hidden}
.lecstep2-card--pay{border:2px solid #1063c6}
.lecstep2-card__head{display:flex;align-items:center;gap:8px;margin:0;padding:14px 18px;font-size:1.6rem;font-weight:800;
	color:#0d4f9e;background:linear-gradient(180deg,#e4f0ff 0%,#eef5ff 100%);border-bottom:1px solid #c9def7}
.lecstep2-card__head i{color:#0a4488;font-size:1.8rem}
.lecstep2-card__body{padding:16px 18px}
.lecstep2-card__note{margin:12px 0 0;font-size:1.25rem;line-height:1.6;color:#7b8698}
.lecstep2-card__note--center{text-align:left;color:#1063c6;font-weight:600}

/* 선택한 강습 정보 정의목록 */
.lecstep2-dl{margin:0}
.lecstep2-dl__row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #e2e8f2}
.lecstep2-dl__row:last-child{border-bottom:0}
.lecstep2-dl__row dt{flex:none;color:#6b7688;font-size:1.4rem}
.lecstep2-dl__row dd{margin:0;font-weight:700;color:#28324a;text-align:right;word-break:keep-all}
.lecstep2-dl__accent{color:#1063c6;font-size:1.7rem}

/* 감면 혜택 목록 (사용자 변경 불가 : 2단계에서 선택 결과만 표시) */
.lecstep2-discount.is-readonly{opacity:.95}
.lecstep2-radio{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px 0;border-bottom:1px dashed #e2e8f2;color:#98a2b3}
.lecstep2-radio:first-child{padding-top:2px}
.lecstep2-radio__dot{flex:none;width:16px;height:16px;border:2px solid #cbd5e1;border-radius:50%;background:#f1f5f9}
.lecstep2-radio__txt{flex:1;min-width:0;font-weight:700;font-size:1.4rem}
.lecstep2-radio__txt em{display:block;font-style:normal;font-weight:500;font-size:1.25rem;margin-top:2px}
.lecstep2-radio__side{flex:none}
.lecstep2-radio.is-active{color:#1f2937}
.lecstep2-radio.is-active .lecstep2-radio__dot{border-color:#1063c6;background:radial-gradient(circle at center,#1063c6 0 44%,#fff 46%)}
.lecstep2-radio.is-active .lecstep2-radio__txt em{color:#7b8698}
.lecstep2-btn--outline.is-disabled{border-color:#cbd5e1;color:#94a3b8;background:#f1f5f9;cursor:default;pointer-events:none}

/* 결제 금액 (카드 내부 상하 여백 균일하게) */
.lecstep2-card--pay .lecstep2-card__body{padding:16px 18px}
.lecstep2-pay__row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:#3c4759;font-size:1.4rem}
.lecstep2-pay__row:first-of-type{padding-top:0}
.lecstep2-pay__row b{font-weight:700;color:#28324a}
.lecstep2-pay__row--minus b{color:#e0483d}
.lecstep2-pay__total{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding-top:12px;
	border-top:2px solid #d3e4fb;font-weight:800;color:#17233b}
.lecstep2-pay__total b{font-size:2.2rem;color:#1063c6}
.lecstep2-card--pay .lecstep2-card__note:last-child{margin-top:12px}

/* ---------- 버튼 ---------- */
.lecstep2-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:8px;
	border:1px solid transparent;cursor:pointer;font-weight:700;font-size:1.45rem;line-height:1.2;font-family:inherit;
	text-decoration:none;white-space:nowrap}
.lecstep2-btn--primary{background:#1063c6;color:#fff}
.lecstep2-btn--primary:hover{background:#0d54a8}
.lecstep2-btn--ghost{background:#fff;border-color:#c5cede;color:#42506a}
.lecstep2-btn--ghost:hover{border-color:#94a3b8;background:#f7f9fc}
.lecstep2-btn--outline{background:#fff;border-color:#1063c6;color:#1063c6;padding:6px 12px;font-size:1.25rem}
.lecstep2-btn--outline:hover{background:#eef5ff}
.lecstep2-btn--lg{padding:14px 22px;font-size:1.6rem;font-weight:800}

.lecstep2-actions{display:flex;gap:10px}
.lecstep2-actions .lecstep2-btn--ghost{flex:0 0 auto;min-width:120px}
.lecstep2-actions .lecstep2-btn--primary{flex:1}

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
	.lecstep2-layout{flex-direction:column}
	.lecstep2-side{width:100%;position:static}
}
@media (max-width:640px){
	.lecstep2-target__item{flex:1 1 100%}
}
@media (max-width:768px){
	.lecstep2-sec__body{padding:16px}
	.lecstep2-grid2{grid-template-columns:1fr}
	.lecstep2-target__item{flex:1 1 calc(50% - 6px)}
	.lecstep2-select--wide{max-width:none}
	.lecstep2-input--email{max-width:none}
	.lecstep2-actions{flex-direction:column-reverse}
	.lecstep2-actions .lecstep2-btn{width:100%}
}

/* =====================================================================
   온라인 수강신청 3단계(결제하기) - tong/lecture/lecture_apply_step3.html
   BEM prefix: .lecstep3-   (2단계와 동일한 위저드 셸 → 카드/결제/버튼 룰은 .lecstep2- 와 공유)
   ===================================================================== */
.lecstep3{max-width:1180px;margin:0 auto}
.lecstep3 *{box-sizing:border-box}

/* 2단계와 동일한 2단 레이아웃 / 우측 sticky / 섹션·카드 룰 공유 */
.lecstep3-layout{display:flex;gap:26px;align-items:flex-start;margin-top:8px}
.lecstep3-main{flex:1 1 auto;min-width:0}
.lecstep3-side{width:372px;flex:none;position:sticky;top:20px;display:flex;flex-direction:column;gap:16px}

.lecstep3-sec{border:1px solid #e2e8f2;border-radius:14px;background:#fff;margin-bottom:18px;overflow:hidden}
.lecstep3-sec__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:15px 20px;
	font-size:1.7rem;font-weight:800;color:#1f2937;background:#f7f9fc;border-bottom:1px solid #e6ebf3}
.lecstep3-sec__head i{color:#1063c6}
.lecstep3-sec__body{padding:20px}

.lecstep3-card,.lecstep3-card--pay{border:1px solid #cfe0f6;border-radius:14px;background:#fff;overflow:hidden}
.lecstep3-card--pay{border:2px solid #1063c6}
.lecstep3-card__head{display:flex;align-items:center;gap:8px;margin:0;padding:14px 18px;font-size:1.6rem;font-weight:800;
	color:#0d4f9e;background:linear-gradient(180deg,#e4f0ff 0%,#eef5ff 100%);border-bottom:1px solid #c9def7}
.lecstep3-card__head i{color:#0a4488;font-size:1.8rem}
.lecstep3-card__body{padding:16px 18px}
.lecstep3-card--pay .lecstep3-card__body{padding:16px 18px}
.lecstep3-card__note{margin:12px 0 0;font-size:1.25rem;line-height:1.6;color:#7b8698}
.lecstep3-card__note + .lecstep3-card__note{margin-top:6px}
.lecstep3-card__note--center{text-align:center;color:#1063c6;font-weight:600}
.lecstep3-card__note--center + .lecstep3-card__note--center{margin-top:6px;color:#7b8698;font-weight:500}

.lecstep3-dl{margin:0}
.lecstep3-dl__row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #e2e8f2}
.lecstep3-dl__row:last-child{border-bottom:0}
.lecstep3-dl__row dt{flex:none;color:#6b7688;font-size:1.4rem}
.lecstep3-dl__row dd{margin:0;font-weight:700;color:#28324a;text-align:right;word-break:keep-all}
.lecstep3-dl__accent{color:#1063c6;font-size:1.7rem}

.lecstep3-pay__row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:#3c4759;font-size:1.4rem}
.lecstep3-pay__row b{font-weight:700;color:#28324a}
.lecstep3-pay__row--minus b{color:#e0483d}
.lecstep3-pay__total{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding-top:12px;
	border-top:2px solid #d3e4fb;font-weight:800;color:#17233b}
.lecstep3-pay__total b{font-size:2.2rem;color:#1063c6}

.lecstep3-hint{display:flex;align-items:flex-start;gap:6px;margin:14px 0 0;padding:11px 14px;border-radius:8px;
	background:#f1f5f9;border:1px solid #e2e8f2;color:#42506a;font-size:1.35rem;line-height:1.6}
.lecstep3-hint i{margin-top:3px;color:#1063c6}

.lecstep3-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:8px;
	border:1px solid transparent;cursor:pointer;font-weight:700;font-size:1.45rem;line-height:1.2;font-family:inherit;
	text-decoration:none;white-space:nowrap}
.lecstep3-btn--primary{background:#1063c6;color:#fff}
.lecstep3-btn--primary:hover{background:#0d54a8}
.lecstep3-btn--ghost{background:#fff;border-color:#c5cede;color:#42506a}
.lecstep3-btn--ghost:hover{border-color:#94a3b8;background:#f7f9fc}
.lecstep3-btn--outline{background:#fff;border-color:#1063c6;color:#1063c6;padding:6px 12px;font-size:1.25rem}
.lecstep3-btn--outline:hover{background:#eef5ff}
.lecstep3-btn--outline.is-disabled{border-color:#cbd5e1;color:#94a3b8;background:#f1f5f9;cursor:default;pointer-events:none}
.lecstep3-btn--lg{padding:14px 22px;font-size:1.6rem;font-weight:800}
.lecstep3-actions{display:flex;gap:10px}
.lecstep3-actions .lecstep3-btn--ghost{flex:0 0 auto;min-width:120px}
.lecstep3-actions .lecstep3-btn--primary{flex:1}

/* ---------- 신청 정보 확인 서브카드 + Key-Value 표 ---------- */
.lecstep3-subcard{border:1px solid #e2e8f2;border-radius:12px;overflow:hidden}
.lecstep3-subcard + .lecstep3-subcard{margin-top:16px}
.lecstep3-subcard__head{display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:12px 16px;background:#f7f9fc;border-bottom:1px solid #e6ebf3}
.lecstep3-subcard__title{font-size:1.5rem;font-weight:800;color:#1f2937}

.lecstep3-kv{width:100%;border-collapse:collapse;font-size:1.45rem}
.lecstep3-kv th,.lecstep3-kv td{padding:11px 14px;border-bottom:1px solid #edf1f7;text-align:left;vertical-align:middle}
.lecstep3-kv tr:last-child th,.lecstep3-kv tr:last-child td{border-bottom:0}
.lecstep3-kv th{width:110px;background:#fbfcfe;color:#5a6577;font-weight:700;white-space:nowrap}
.lecstep3-kv td{color:#28324a;font-weight:600;word-break:break-all}

/* ---------- 약관 동의 ---------- */
.lecstep3-allcheck{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:1.45rem;font-weight:700;color:#0d4f9e;cursor:pointer}
.lecstep3-allcheck input{width:19px;height:19px;accent-color:#1063c6;cursor:pointer}
.lecstep3-terms{list-style:none;margin:0;padding:0;border:1px solid #e2e8f2;border-radius:10px;overflow:hidden}
.lecstep3-term{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px}
.lecstep3-term + .lecstep3-term{border-top:1px solid #edf1f7}
.lecstep3-term__label{display:flex;align-items:center;gap:10px;font-size:1.45rem;font-weight:700;color:#2b3650;cursor:pointer;min-width:0}
.lecstep3-term__label input{width:19px;height:19px;accent-color:#1063c6;cursor:pointer;flex:none}
.lecstep3-term__view{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid #c5cede;
	border-radius:7px;background:#fff;color:#5a6577;font-size:1.25rem;font-weight:600;cursor:pointer}
.lecstep3-term__view:hover{border-color:#1063c6;color:#1063c6}
.lecstep3-term__view i{font-size:1.05rem}

/* ---------- 감면 결과 (Read-Only) ---------- */
.lecstep3-discount.is-readonly{opacity:.9}
.lecstep3-radio{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px 0;border-bottom:1px dashed #e2e8f2;color:#98a2b3}
.lecstep3-radio:first-child{padding-top:2px}
.lecstep3-radio__dot{flex:none;width:16px;height:16px;border:2px solid #cbd5e1;border-radius:50%;background:#f1f5f9}
.lecstep3-radio__txt{flex:1;min-width:0;font-weight:700;font-size:1.4rem}
.lecstep3-radio__txt em{display:block;font-style:normal;font-weight:500;font-size:1.25rem;margin-top:2px}
.lecstep3-radio.is-active{color:#1f2937}
.lecstep3-radio.is-active .lecstep3-radio__dot{border-color:#1063c6;background:radial-gradient(circle at center,#1063c6 0 44%,#fff 46%)}
.lecstep3-radio.is-active .lecstep3-radio__txt em{color:#7b8698}

/* ---------- 약관 전문 보기 모달 ---------- */
body.lec-term-modal-open{overflow:hidden}
.lec-term-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.lec-term-modal[hidden]{display:none}
.lec-term-modal__dim{position:absolute;inset:0;background:rgba(17,24,39,.55)}
.lec-term-modal__panel{position:relative;width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;
	background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.lec-term-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;
	background:linear-gradient(180deg,#e4f0ff 0%,#eef5ff 100%);border-bottom:1px solid #c9def7}
.lec-term-modal__title{margin:0;font-size:1.75rem;font-weight:800;color:#0d4f9e}
.lec-term-modal__x{flex:none;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#42506a;
	font-size:1.9rem;cursor:pointer}
.lec-term-modal__x:hover{background:#dbe9fb}
.lec-term-modal__body{padding:20px;overflow-y:auto;font-size:1.4rem;line-height:1.75;color:#3c4759}
.lec-term-modal__body h5{margin:16px 0 6px;font-size:1.5rem;font-weight:800;color:#1f2937}
.lec-term-modal__body h5:first-child{margin-top:0}
.lec-term-modal__body p{margin:0 0 10px}
.lec-term-modal__foot{padding:14px 20px;border-top:1px solid #e6ebf3;text-align:right}
.lec-term-modal__foot .lecstep3-btn{min-width:96px}
@media (max-width:768px){
	.lec-term-modal__panel{max-height:88vh}
	.lec-term-modal__foot .lecstep3-btn{width:100%}
}

/* ---------- 우편번호 검색(카카오 우편번호 서비스) 임베드 레이어 (이용자 전 화면 공용) ---------- */
body.com-postcode-modal-open{overflow:hidden}
.com-postcode-modal,.com-postcode-modal *{box-sizing:border-box}
.com-postcode-modal{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px}
.com-postcode-modal[hidden]{display:none}
.com-postcode-modal__dim{position:absolute;inset:0;background:rgba(17,24,39,.55)}
.com-postcode-modal__panel{position:relative;width:100%;max-width:480px;display:flex;flex-direction:column;
	background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.com-postcode-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
	background:linear-gradient(180deg,#e4f0ff 0%,#eef5ff 100%);border-bottom:1px solid #c9def7}
.com-postcode-modal__title{margin:0;font-size:1.7rem;font-weight:800;color:#0d4f9e;display:flex;align-items:center;gap:8px}
.com-postcode-modal__title i{color:#0a4488}
.com-postcode-modal__x{flex:none;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#42506a;
	font-size:1.9rem;cursor:pointer}
.com-postcode-modal__x:hover{background:#dbe9fb}
.com-postcode-modal__embed{width:100%;height:460px}
.com-postcode-modal__embed > div{width:100% !important;height:100% !important}
@media (max-width:768px){
	.com-postcode-modal__embed{height:60vh}
}

/* 공통 알림 모달(showAlertModal) : 고연령 이용자도 읽기 쉽도록 큰 글씨·큰 확인 버튼·화면 중앙 고정 표시.
   토스트(z-index:10000)보다 위에 표시한다. */
body.com-alert-modal-open{overflow:hidden}
.com-alert-modal,.com-alert-modal *{box-sizing:border-box}
.com-alert-modal{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px}
.com-alert-modal[hidden]{display:none}
.com-alert-modal__dim{position:absolute;inset:0;background:rgba(17,24,39,.6)}
.com-alert-modal__panel{position:relative;width:100%;max-width:560px;background:#fff;border-radius:18px;overflow:hidden;
	box-shadow:0 24px 60px rgba(0,0,0,.35);border-top:10px solid #f39c12}
.com-alert-modal__panel.is-error{border-top-color:#ff4757}
.com-alert-modal__panel.is-info{border-top-color:#1e90ff}
.com-alert-modal__panel.is-success{border-top-color:#2ecc71}
.com-alert-modal__body{padding:34px 28px 22px;text-align:center}
.com-alert-modal__icon{display:block;width:100%;margin:0 auto 14px;text-align:center;font-size:4.2rem;line-height:1;color:#f39c12}
.com-alert-modal__panel.is-error .com-alert-modal__icon{color:#ff4757}
.com-alert-modal__panel.is-info .com-alert-modal__icon{color:#1e90ff}
.com-alert-modal__panel.is-success .com-alert-modal__icon{color:#2ecc71}
.com-alert-modal__msg{margin:0;font-size:1.9rem;font-weight:600;line-height:1.55;color:#1f2937;word-break:keep-all;white-space:pre-line}
.com-alert-modal__foot{padding:8px 28px 30px}
.com-alert-modal__btn{display:block;width:100%;min-height:56px;border:0;border-radius:14px;background:#0d4f9e;color:#fff;
	font-size:1.9rem;font-weight:700;cursor:pointer}
.com-alert-modal__btn:hover,.com-alert-modal__btn:focus{background:#0a4488;outline:4px solid #9cc4f2;outline-offset:2px}
@media (max-width:768px){
	.com-alert-modal__body{padding:28px 20px 16px}
	.com-alert-modal__msg{font-size:1.7rem}
	.com-alert-modal__foot{padding:6px 20px 24px}
}

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
	.lecstep3-layout{flex-direction:column}
	.lecstep3-side{width:100%;position:static}
}
@media (max-width:768px){
	.lecstep3-sec__body{padding:16px}
	.lecstep3-kv th{width:92px}
	.lecstep3-kv th,.lecstep3-kv td{display:block;width:auto;border-bottom:0;padding:6px 14px}
	.lecstep3-kv td{padding-top:0;padding-bottom:12px;border-bottom:1px solid #edf1f7}
	.lecstep3-kv tr:last-child td:last-child{border-bottom:0}
	.lecstep3-term{flex-wrap:wrap}
	.lecstep3-actions{flex-direction:column-reverse}
	.lecstep3-actions .lecstep3-btn{width:100%}
}

/* =====================================================================
   온라인 수강신청 4단계(신청완료) - tong/lecture/lecture_apply_step4.html
   BEM prefix: .lecstep4-   (하단 안내 카드/이용문의는 .lecapply-guide / .lecapply-help 공용)
   ===================================================================== */
.lecstep4{max-width:1180px;margin:0 auto}
.lecstep4 *{box-sizing:border-box}

/* ---------- 완료 메시지 ---------- */
.lecstep4-hero{text-align:center;padding:8px 20px 4px}
.lecstep4-hero__icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:none}
.lecstep4-hero__icon img{display:block;width:96px;height:auto;box-shadow:none}
.lecstep4-hero__title{margin:0 0 12px;font-size:2.8rem;font-weight:800;color:#17233b}
.lecstep4-hero__title span{color:#1063c6}
.lecstep4-hero__desc{margin:0 0 20px;font-size:1.5rem;line-height:1.7;color:#5a6577}
.lecstep4-mail{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0;padding:12px 20px;border-radius:10px;
	background:#eef5ff;border:1px solid #d3e4fb;color:#0d4f9e;font-size:1.4rem;font-weight:600}
.lecstep4-mail i{color:#1063c6}

/* ---------- 완료 내역 2-Column ---------- */
.lecstep4-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:28px 0 0;align-items:stretch}
.lecstep4-card{display:flex;flex-direction:column;border:1px solid #cfe0f6;border-radius:14px;background:#fff;overflow:hidden}
.lecstep4-card__head{display:flex;align-items:center;gap:8px;margin:0;padding:14px 18px;font-size:1.65rem;font-weight:800;
	color:#0d4f9e;background:linear-gradient(180deg,#e4f0ff 0%,#eef5ff 100%);border-bottom:1px solid #c9def7}
.lecstep4-card__head i{color:#0a4488;font-size:1.85rem}

.lecstep4-kv{width:100%;border-collapse:collapse;font-size:1.45rem}
.lecstep4-kv th,.lecstep4-kv td{padding:12px 18px;border-bottom:1px solid #edf1f7;text-align:left;vertical-align:middle}
.lecstep4-kv th{width:132px;color:#6b7688;font-weight:700;white-space:nowrap}
.lecstep4-kv td{color:#28324a;font-weight:600;word-break:break-all}
.lecstep4-kv td strong{font-weight:800;color:#17233b}
.lecstep4-kv__minus{color:#e0483d !important;font-weight:800}
/* 표 마지막 행의 하단 보더 제거(카드 맨 아래 줄 노출 방지) */
.lecstep4-kv tr:last-child th,.lecstep4-kv tr:last-child td{border-bottom:0}

/* 총 결제금액 : 카드 하단으로 밀어 남는 공간까지 배경이 꽉 차게 한다 */
.lecstep4-total{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;
	background:#f4f8fe;border-top:2px solid #d3e4fb}
.lecstep4-total span{font-size:1.55rem;font-weight:800;color:#17233b}
.lecstep4-total b{font-size:2.4rem;font-weight:800;color:#1063c6}

/* ---------- 버튼 ---------- */
.lecstep4-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:9px;
	border:1px solid transparent;cursor:pointer;font-weight:700;font-size:1.5rem;line-height:1.2;font-family:inherit;
	text-decoration:none;white-space:nowrap}
.lecstep4-btn--primary{background:#1063c6;color:#fff}
.lecstep4-btn--primary:hover{background:#0d54a8}
.lecstep4-btn--ghost{background:#fff;border-color:#c5cede;color:#42506a}
.lecstep4-btn--ghost:hover{border-color:#94a3b8;background:#f7f9fc}
.lecstep4-btn--outline{background:#fff;border-color:#1063c6;color:#1063c6}
.lecstep4-btn--outline:hover{background:#eef5ff}
.lecstep4-btn--lg{padding:15px 30px;font-size:1.6rem;font-weight:800}

.lecstep4-actions{display:flex;justify-content:center;gap:14px;margin:30px 0 6px}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
	.lecstep4-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
	.lecstep4-hero__title{font-size:2.3rem}
	.lecstep4-kv th{width:104px}
	.lecstep4-actions{flex-direction:column-reverse}
	.lecstep4-actions .lecstep4-btn{width:100%}
}

/* =====================================================================
   대관신청(추첨) 1단계(시설 및 일시 선택) - tong/lecture/lecture_facility_apply_step1.html
   BEM prefix: .facapply-
   ===================================================================== */
.facapply{font-size:1.5rem;line-height:1.65;color:#333;max-width:1180px;margin:0 auto}
.facapply *{box-sizing:border-box}
.facapply-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}

/* ---------- 진행 단계 : 수강신청 2~4단계와 동일한 공용 .join-steps 재사용, 폭만 넓힌다 ---------- */
.facapply-steps{max-width:640px;margin:0 auto 34px}

/* ---------- 2단 레이아웃 (좌 65% : 우 35%) ---------- */
.facapply-layout{display:flex;gap:26px;align-items:flex-start;margin-top:8px}
.facapply-main{flex:1 1 0;min-width:0}
.facapply-side{width:380px;flex:none;position:sticky;top:20px}

/* 1025~1500px(작은 데스크톱/노트북) 구간 : 공통 우측 고정 퀵메뉴(.sub-quickmenu, width:132px + right:20px)가
   1025px 이상에서만 나타나는데, 본문(.sub-content__inner max-width:1200px)이 화면보다 넓지 않으면
   화면 오른쪽 끝의 퀵메뉴가 이 우측 요약 카드(CTA 버튼 등) 위에 그대로 겹친다. 퀵메뉴 폭만큼
   오른쪽 여백을 확보해 겹치지 않게 한다(1200 + (132+20)*2 ≈ 1504 이하 구간). */
@media (min-width:1025px) and (max-width:1500px){
	.facapply-side{margin-right:152px}
}

/* ---------- 공통 섹션(1/2/3) ---------- */
.facapply-sec{border:1px solid #e2e8f2;border-radius:14px;background:#fff;margin-bottom:20px;overflow:hidden}
.facapply-sec__head{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid #edf1f7;background:#f8fafc}
.facapply-sec__no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
	background:#1063c6;color:#fff;font-size:1.5rem;font-weight:800}
.facapply-sec__head-txt{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;min-width:0}
.facapply-sec__title{font-size:1.8rem;font-weight:800;color:#17233b}
.facapply-sec__desc{font-size:1.3rem;color:#7b8698}
.facapply-sec__body{padding:22px 20px}

/* ---------- 1. 시설 선택 ---------- */
.facapply-facility{display:flex;flex-wrap:wrap;gap:12px}
.facapply-facility__item{flex:1 1 calc(25% - 9px);min-width:130px;display:flex;flex-direction:column;align-items:center;gap:8px;
	padding:18px 10px;border:2px solid #e2e8f2;border-radius:12px;cursor:pointer;text-align:center;transition:border-color .15s,background-color .15s}
.facapply-facility__item:hover{border-color:#8fb6e8}
.facapply-facility__item.is-checked{border-color:#1063c6;background:#eef5ff;box-shadow:inset 0 0 0 1px #1063c6}
.facapply-facility__radio{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.facapply-facility__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
	background:#eef1f6;color:#5a6577;font-size:1.9rem}
.facapply-facility__item.is-checked .facapply-facility__icon{background:#1063c6;color:#fff}
.facapply-facility__label{font-size:1.4rem;font-weight:700;color:#33415c}

/* ---------- 2. 날짜 선택 ---------- */
.facapply-cal{display:flex;gap:20px;align-items:flex-start}
.facapply-cal__grid{flex:1 1 58%;min-width:0}
.facapply-cal__side{flex:1 1 42%;min-width:0;border:1px solid #e2e8f2;border-radius:12px;padding:16px;background:#f8fafc;align-self:stretch;
	display:flex;flex-direction:column}
.facapply-cal__head{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:12px}
.facapply-cal__nav{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
	border:1px solid #d6deea;background:#fff;color:#42506a;cursor:pointer}
.facapply-cal__nav:hover{background:#eef5ff;border-color:#1063c6;color:#1063c6}
.facapply-cal__title{font-size:1.7rem;font-weight:800;color:#17233b;min-width:120px;text-align:center}
.facapply-cal__table{width:100%;border-collapse:collapse;table-layout:fixed}
.facapply-cal__table th{padding:8px 0;text-align:center;font-size:1.3rem;font-weight:700;color:#5a6577}
.facapply-cal__table th.is-sun{color:#e0483d}
.facapply-cal__table th.is-sat{color:#1063c6}
.facapply-cal__table td{padding:3px;text-align:center;vertical-align:middle}
.facapply-cal__cell{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:1px solid transparent;
	border-radius:50%;background:none;cursor:pointer;font-size:1.4rem;color:#33415c;font-family:inherit}
.facapply-cal__cell:hover{background:#eef5ff}
.facapply-cal__cell.is-sun{color:#e0483d}
.facapply-cal__cell.is-sat{color:#1063c6}
.facapply-cal__cell.is-today{border-color:#1063c6}
.facapply-cal__cell.is-selected{background:#1063c6;color:#fff;font-weight:800}
.facapply-cal__cell:disabled{color:#c3cbd8;cursor:not-allowed}
.facapply-cal__cell:disabled:hover{background:none}
td.is-out{background:none}

.facapply-cal__side-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.facapply-cal__side-head strong{font-size:1.4rem;color:#17233b}
.facapply-cal__reset{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;border:1px solid #d6deea;
	background:#fff;color:#5a6577;font-size:1.2rem;font-weight:700;cursor:pointer}
.facapply-cal__reset:hover{border-color:#94a3b8;background:#f1f5f9}
.facapply-cal__tags{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;align-content:flex-start;min-height:34px}
.facapply-cal__tags-empty{margin:6px 0;font-size:1.25rem;color:#98a2b3}
.facapply-cal__tag{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:999px;background:#fff;
	border:1px solid #cfe0f6;color:#0d4f9e;font-size:1.25rem;font-weight:700}
.facapply-cal__tag button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
	border:0;background:#e4ecf7;color:#5a6577;cursor:pointer;font-size:1.05rem}
.facapply-cal__tag button:hover{background:#dbe6f5;color:#e0483d}
.facapply-cal__hint{display:flex;align-items:flex-start;gap:6px;margin:12px 0 0;font-size:1.2rem;color:#7b8698}
.facapply-cal__hint i{margin-top:3px;color:#1063c6}

/* ---------- 3. 시간 선택 ---------- */
.facapply-time__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;margin-bottom:14px;
	border:1px solid #e2e8f2;border-radius:10px;background:#f8fafc}
.facapply-time__toolbar-label{display:flex;align-items:center;gap:6px;font-size:1.3rem;font-weight:700;color:#33415c;margin-right:auto}
.facapply-time__toolbar-label i{color:#1063c6}
.facapply-time__toolbar-range{display:flex;align-items:center;gap:6px}
.facapply-time__select{height:38px;padding:0 10px;border:1px solid #d6deea;border-radius:8px;background:#fff;color:#33415c;
	font-size:1.3rem;font-family:inherit;cursor:pointer}
.facapply-time__toolbar-sep{color:#98a2b3}

.facapply-time__tabs{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.facapply-time__tabs-arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
	border-radius:50%;border:1px solid #d6deea;background:#fff;color:#5a6577;cursor:pointer}
.facapply-time__tabs-arrow:hover{background:#eef5ff;border-color:#1063c6;color:#1063c6}
/* min-width:0 필수 : 없으면 flex 아이템의 기본 최소폭(콘텐츠 크기)이 overflow-x:auto 를 무력화해
   탭이 많아질수록 이 트랙과 상위 .facapply, 나아가 페이지 전체가 옆으로 밀려나 헤더보다 넓어진다. */
.facapply-time__tabs-track{flex:1 1 auto;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.facapply-time__tab{flex:none;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px 9px 0 0;
	border:1px solid #e2e8f2;border-bottom:0;background:#f1f5f9;color:#5a6577;font-size:1.3rem;font-weight:700;cursor:pointer;white-space:nowrap}
.facapply-time__tab.is-active{background:#fff;color:#1063c6;border-color:#1063c6;box-shadow:0 -2px 0 #1063c6 inset}
.facapply-time__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
	border-radius:999px;background:#e2e8f2;color:#5a6577;font-size:1.1rem;font-weight:800}
.facapply-time__tab.is-active .facapply-time__tab-badge{background:#1063c6;color:#fff}

.facapply-time__panel{border:1px solid #e2e8f2;border-radius:0 10px 10px 10px;padding:16px;background:#fff}
.facapply-time__panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.facapply-time__panel-head strong{font-size:1.5rem;color:#17233b}
.facapply-time__panel-head span{font-size:1.25rem;color:#1063c6;font-weight:700}
.facapply-time__grid{max-height:450px;overflow-y:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;padding-right:4px}
.facapply-time__empty{grid-column:1/-1;margin:24px 0;text-align:center;color:#98a2b3;font-size:1.35rem}
.facapply-time__slot{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #e2e8f2;border-radius:8px;cursor:pointer;
	font-size:1.3rem;color:#33415c}
.facapply-time__slot:hover{border-color:#8fb6e8}
.facapply-time__slot input{width:17px;height:17px;accent-color:#1063c6;cursor:pointer}
.facapply-time__slot.is-checked{border-color:#1063c6;background:#eef5ff;color:#0d4f9e;font-weight:700}
.facapply-time__slot.is-disabled{background:#f1f5f9;color:#c3cbd8;cursor:not-allowed}
.facapply-time__slot.is-disabled input{cursor:not-allowed}

/* ---------- 우측 : 선택 요약 카드 ---------- */
.facapply-summary{border:1px solid #cfe0f6;border-radius:14px;background:#fff;padding:20px;display:flex;flex-direction:column;gap:14px}
.facapply-summary__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.facapply-summary__head strong{display:flex;align-items:center;gap:7px;font-size:1.6rem;font-weight:800;color:#17233b}
.facapply-summary__head strong i{color:#1063c6}
.facapply-summary__toggle{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;border:1px solid #d6deea;
	background:#fff;color:#5a6577;font-size:1.2rem;font-weight:700;cursor:pointer}
.facapply-summary__toggle:hover{border-color:#94a3b8;background:#f1f5f9}
.facapply-summary__meta{margin:0;font-size:1.35rem;color:#5a6577}
.facapply-summary__meta strong{color:#17233b;font-weight:800}

.facapply-summary__fee{padding:14px 16px;border-radius:10px;background:#eef5ff;border:1px solid #d3e4fb}
.facapply-summary__fee-label{display:block;font-size:1.25rem;color:#5a6577;font-weight:700}
.facapply-summary__fee-amount{display:block;margin-top:4px;font-size:2.4rem;font-weight:800;color:#1063c6}
.facapply-summary__fee-caption{margin:8px 0 0;font-size:1.15rem;line-height:1.6;color:#7b8698}
.facapply-summary__fee-caption i{color:#e0483d;margin-right:2px}

/* 날짜가 많아 아코디언을 여러 개 펼쳐도 예약 시간이 잘리지 않도록 내부 스크롤(max-height) 없이 카드 높이를 그대로 늘린다. */
.facapply-summary__list{display:flex;flex-direction:column;gap:8px}
.facapply-summary__list-empty{margin:10px 0;text-align:center;color:#98a2b3;font-size:1.3rem}
.facapply-summary__acc{border:1px solid #e2e8f2;border-radius:9px;overflow:hidden}
.facapply-summary__acc-head{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:0;background:#f8fafc;
	cursor:pointer;font-family:inherit;text-align:left}
.facapply-summary__acc-head:hover{background:#eef2f7}
.facapply-summary__acc-date{flex:1 1 auto;font-size:1.3rem;font-weight:700;color:#28324a}
.facapply-summary__acc-count{font-size:1.2rem;color:#5a6577}
.facapply-summary__acc-head i{color:#98a2b3;transition:transform .15s}
.facapply-summary__acc.is-open .facapply-summary__acc-head i{transform:rotate(180deg)}
.facapply-summary__acc-body{display:none;padding:4px 12px 10px}
.facapply-summary__acc.is-open .facapply-summary__acc-body{display:block}
.facapply-summary__time-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;font-size:1.25rem;color:#33415c}
.facapply-summary__time-row i.fa-check{color:#1063c6}
.facapply-summary__time-row button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
	border:0;background:#f1f5f9;color:#5a6577;cursor:pointer}
.facapply-summary__time-row button:hover{background:#fde8e6;color:#e0483d}
.facapply-summary__acc-empty{padding:6px 0;font-size:1.2rem;color:#98a2b3}

.facapply-notice{padding:14px 16px;border-radius:10px;background:#fff8ec;border:1px solid #f3dfb2}
.facapply-notice__title{display:flex;align-items:center;gap:6px;font-size:1.3rem;font-weight:800;color:#8a5a1a}
.facapply-notice__list{margin:8px 0 0;padding-left:18px;font-size:1.2rem;line-height:1.7;color:#8a6a3a}

.facapply-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border:0;border-radius:10px;
	background:#1063c6;color:#fff;font-size:1.6rem;font-weight:800;cursor:pointer;font-family:inherit}
.facapply-cta:hover{background:#0d54a8}

/* ---------- 공용 버튼 ---------- */
.facapply-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;border:1px solid transparent;
	cursor:pointer;font-weight:700;font-size:1.3rem;line-height:1.2;font-family:inherit;white-space:nowrap;text-decoration:none}
.facapply-btn:hover,.facapply-btn:focus,.facapply-btn:active{text-decoration:none}
.facapply-btn--primary{background:#1063c6;color:#fff}
.facapply-btn--primary:hover{background:#0d54a8}
.facapply-btn--ghost{background:#fff;border-color:#c5cede;color:#42506a}
.facapply-btn--ghost:hover{border-color:#94a3b8;background:#f7f9fc}
.facapply-btn--lg{padding:14px 22px;font-size:1.6rem;font-weight:800}

/* 하단 안내 카드 / 이용문의 : 수강신청 1단계(/lecture/apply.do)와 동일한 공용 스타일(.lecapply-guide / .lecapply-help)을
   그대로 재사용한다(정의는 tong.css 의 "온라인 수강신청 1단계" 섹션 참고). */

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
	/* align-items:flex-start(데스크톱 2단 레이아웃의 상단 정렬용)를 그대로 두면 1열로 쌓일 때
	   교차축(가로)이 stretch 되지 않아 .facapply-main 이 컨테이너 폭 대신 내부 콘텐츠 폭(시간 탭 등)
	   만큼 넓어지고, 그 결과 페이지 전체가 옆으로 밀려 헤더보다 넓어 보이는 원인이 된다. */
	.facapply-layout{flex-direction:column;align-items:stretch}
	.facapply-side{width:100%;position:static}
	/* .facapply-layout 와 동일한 이유로 align-items 도 함께 stretch 로 바꾼다. */
	.facapply-cal{flex-direction:column;align-items:stretch}
	.facapply-cal__grid,.facapply-cal__side{flex:1 1 auto;width:100%}
}
@media (max-width:768px){
	.facapply-facility__item{flex:1 1 calc(50% - 6px)}
	.facapply-sec__body{padding:16px}
	.facapply-time__toolbar-label{flex:1 1 100%;margin-right:0}
	.facapply-time__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =====================================================================
   대관신청(추첨) 2단계(신청자 정보 입력) - tong/lecture/lecture_facility_apply_step2.html
   BEM prefix: .facstep2-   (2단 레이아웃 · 섹션 카드 · 버튼 · 진행 단계 · 요약 카드 · 유의사항 ·
   하단 안내는 1단계와 공용인 .facapply-layout / .facapply-sec / .facapply-btn / .join-steps /
   .facapply-summary / .facapply-notice / .lecapply-guide 를 그대로 재사용한다.)
   ===================================================================== */

/* ---------- 폼 공통 ---------- */
.facstep2-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.facstep2-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.facstep2-field + .facstep2-field{margin-top:16px}
.facstep2-grid2 .facstep2-field + .facstep2-field{margin-top:0}
.facstep2-field__label{font-weight:700;color:#33415c;font-size:1.4rem}
.facstep2-req{color:#e0483d;margin-left:2px}

.facstep2-input,.facstep2-select,.facstep2-textarea{width:100%;max-width:100%;min-width:0;height:44px;padding:0 14px;
	border:1px solid #d6deea;border-radius:8px;background:#fff;color:#28324a;font-size:1.4rem;font-family:inherit}
.facstep2-textarea{height:auto;min-height:88px;padding:12px 14px;line-height:1.6;resize:vertical}
.facstep2-input:focus,.facstep2-select:focus,.facstep2-textarea:focus{outline:2px solid #bcd4f5;outline-offset:1px;border-color:#1063c6}
.facstep2-input[readonly]{background:#f1f5f9;color:#5a6577;cursor:not-allowed}
.facstep2-input[readonly]:focus{outline:none}
.facstep2-input:disabled{background:#f1f5f9;color:#c3cbd8;cursor:not-allowed}
.facstep2-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.facstep2-select--wide{max-width:none}

.facstep2-tel{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.facstep2-tel .facstep2-select{width:90px;flex:0 0 90px}
.facstep2-tel .facstep2-input{flex:0 0 90px;width:90px;max-width:90px;text-align:center}
.facstep2-tel__dash{color:#94a3b8}

.facstep2-counter{align-self:flex-end;font-size:1.3rem;color:#8a94a6}
.facstep2-counter b{color:#1063c6;font-weight:700}

/* ---------- 단체/기관명 검색 콤보박스 ---------- */
.facstep2-org-row{display:flex;gap:10px;align-items:flex-start}
.facstep2-combo{position:relative;flex:1;min-width:0}
.facstep2-combo__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:44px;
	padding:0 14px;border:1px solid #d6deea;border-radius:8px;background:#fff;color:#28324a;font-size:1.4rem;
	font-family:inherit;cursor:pointer;text-align:left}
.facstep2-combo__trigger:hover{border-color:#8fb6e8}
.facstep2-combo__trigger i{color:#94a3b8;flex:none;transition:transform .15s}
.facstep2-combo.is-open .facstep2-combo__trigger i{transform:rotate(180deg)}
.facstep2-combo__trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facstep2-combo__panel{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:100%;min-width:280px;
	background:#fff;border:1px solid #d6deea;border-radius:10px;box-shadow:0 12px 28px rgba(15,23,42,.14);
	padding:10px;display:flex;flex-direction:column;gap:8px}
.facstep2-combo__panel[hidden]{display:none}
.facstep2-combo__search{display:flex;align-items:center;gap:8px;padding:0 12px;height:40px;border:1px solid #e2e8f2;
	border-radius:8px;background:#f8fafc}
.facstep2-combo__search i{color:#94a3b8}
.facstep2-combo__search input{flex:1;min-width:0;border:0;background:none;font-size:1.3rem;color:#28324a;font-family:inherit}
.facstep2-combo__search input:focus{outline:none}
.facstep2-combo__list{list-style:none;margin:0;padding:0;max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.facstep2-combo__item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;
	border-radius:7px;cursor:pointer;font-size:1.35rem;color:#33415c}
.facstep2-combo__item:hover{background:#f1f5f9}
.facstep2-combo__item.is-selected{background:#eef5ff;color:#0d4f9e;font-weight:700}
.facstep2-combo__item i{color:#1063c6}
.facstep2-combo__empty{padding:14px 12px;text-align:center;color:#98a2b3;font-size:1.3rem}
.facstep2-org-add{flex:none;white-space:nowrap;height:44px}

/* ---------- 승인 단체 없음 안내 / 이용 인원 ---------- */
.facstep2-notice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:16px;padding:12px 14px;border-radius:10px;
	background:#fff6f5;border:1px solid #f5c9c5;font-size:1.35rem;line-height:1.6;color:#8a2b22}
.facstep2-notice[hidden]{display:none}
.facstep2-notice i{color:#e0483d}
.facstep2-notice__link{margin-left:auto;font-weight:700;color:#1063c6;text-decoration:underline;white-space:nowrap}
.facstep2-people{display:flex;align-items:center;gap:8px;max-width:220px}
.facstep2-people__unit{flex:none;font-size:1.4rem;color:#5a6577}

/* ---------- 대관신청(추첨) 실데이터 연동: 접수 회차 안내 / 경고 / 요금 안내 ---------- */
.facapply-facility__empty{width:100%;margin:0;padding:18px 0;text-align:center;font-size:1.35rem;color:#98a2b3}
.facapply-facility__item.is-disabled{background:#f1f5f9;border-color:#e2e8f2;cursor:not-allowed}
.facapply-facility__item.is-disabled:hover{border-color:#e2e8f2}
.facapply-facility__item.is-disabled .facapply-facility__icon{background:#e2e8f2;color:#a3adbd}
.facapply-facility__item.is-disabled .facapply-facility__label{color:#98a2b3}
.facapply-facility__note{font-size:1.15rem;color:#e0483d;font-weight:700}
.facapply-round{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;padding:12px 14px;border-radius:10px;
	background:#f5f9ff;border:1px solid #d3e4fb}
.facapply-round:empty{display:none}
.facapply-round__title{flex:1 1 100%;display:flex;align-items:center;gap:6px;font-size:1.4rem;font-weight:800;color:#0d4f9e}
.facapply-round__item{font-size:1.25rem;color:#5a6577}
.facapply-cal__daynum{pointer-events:none}
.facapply-gate{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px;padding:56px 24px;text-align:center;
	border:1px solid #f5c9c5;border-radius:14px;background:#fff8f7}
.facapply-gate[hidden]{display:none}
.facapply-gate__icon{font-size:4.2rem;color:#e0483d}
.facapply-gate__title{font-size:2.2rem;font-weight:800;color:#28324a;word-break:keep-all}
.facapply-gate__desc{margin:0;max-width:640px;font-size:1.45rem;line-height:1.7;color:#5a6577;word-break:keep-all}
.facapply-gate__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.facapply-summary__warn{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:#fff6f5;border:1px solid #f5c9c5;
	font-size:1.25rem;line-height:1.6;color:#b3352b}
.facapply-summary__warn[hidden]{display:none}
.facapply-summary__acc-warn{margin:6px 0 0;font-size:1.2rem;line-height:1.5;color:#e0483d}
.facapply-summary__fee-note{display:block;margin-top:6px;font-size:1.2rem;line-height:1.5;color:#e0483d}
.facapply-summary__fee-note:empty{display:none}

/* ---------- 사업자등록번호 없음 체크박스 ---------- */
.facstep2-bizno-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.facstep2-bizno-row .facstep2-input{flex:1 1 220px;min-width:180px}
.facstep2-check{display:inline-flex;align-items:center;gap:7px;font-size:1.3rem;color:#5a6577;cursor:pointer;white-space:nowrap}
.facstep2-check input{width:17px;height:17px;accent-color:#1063c6;cursor:pointer}

/* ---------- 주소 ---------- */
.facstep2-addr{display:flex;flex-direction:column;gap:8px}
.facstep2-addr__zip{display:flex;flex-wrap:wrap;gap:8px}
.facstep2-addr__zip .facstep2-input{flex:0 0 140px;width:140px;max-width:140px}
.facstep2-addr__zip .facapply-btn{flex:none}

/* ---------- 이용 목적 라디오 ---------- */
.facstep2-radio-group{display:flex;flex-wrap:wrap;gap:18px 24px;padding:4px 0}
.facstep2-radio{display:inline-flex;align-items:center;gap:8px;font-size:1.4rem;color:#33415c;cursor:pointer}
.facstep2-radio input{width:18px;height:18px;accent-color:#1063c6;cursor:pointer}

/* ---------- 이전/다음 단계 버튼 ---------- */
.facapply-actions{display:flex;gap:14px;margin-top:4px}
.facapply-actions .facapply-btn--ghost{flex:0 0 auto;min-width:160px;justify-content:center}
.facapply-actions .facapply-btn--primary{flex:1;justify-content:center}

/* ---------- 우측 : 문의안내 카드 ---------- */
.facstep2-help-card{padding:14px 16px;border-radius:10px;border:1px solid #e2e8f2;background:#fff}
.facstep2-help-card__title{display:flex;align-items:center;gap:6px;font-size:1.3rem;font-weight:800;color:#17233b}
.facstep2-help-card__title i{color:#1063c6}
.facstep2-help-card__body{margin-top:8px;padding-left:14px;border-left:2px solid #eef1f6}
.facstep2-help-card__name{margin:0;font-size:1.25rem;color:#5a6577}
.facstep2-help-card__tel{margin:2px 0 0;font-size:1.5rem;font-weight:800;color:#1063c6}
.facstep2-help-card__time{margin:6px 0 0;font-size:1.2rem;line-height:1.6;color:#8a94a6}

/* ---------- 새 단체/기관 등록 모달 ----------
   공통 우편번호 검색 레이어(.com-postcode-modal, z-index:5000)가 이 모달 위에서 열릴 수 있어야
   하므로 그보다 낮은 z-index를 사용한다. */
.facstep2-modal{position:fixed;inset:0;z-index:4500;display:flex;align-items:center;justify-content:center;padding:20px}
.facstep2-modal[hidden]{display:none}
.facstep2-modal__dim{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.facstep2-modal__panel{position:relative;width:100%;max-width:460px;max-height:calc(100vh - 40px);overflow-y:auto;
	background:#fff;border-radius:16px;padding:28px 24px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.facstep2-modal__close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;border-radius:9px;
	background:#f1f5f9;color:#64748b;font-size:1.6rem;cursor:pointer}
.facstep2-modal__close:hover{background:#e2e8f0}
.facstep2-modal__title{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:1.8rem;font-weight:800;color:#17233b}
.facstep2-modal__title i{color:#1063c6}
.facstep2-modal__body{display:flex;flex-direction:column}
.facstep2-modal__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ---------- 반응형 ---------- */
@media (max-width:768px){
	.facstep2-grid2{grid-template-columns:1fr}
	.facstep2-field + .facstep2-field{margin-top:14px}
	.facstep2-org-row{flex-direction:column;align-items:stretch}
	.facstep2-org-add{width:100%;justify-content:center}
	.facapply-actions{flex-direction:column-reverse}
	.facapply-actions .facapply-btn--ghost,.facapply-actions .facapply-btn--primary{width:100%}
}

/* =====================================================================
   대관신청(추첨) 3단계(신청내용 확인) - tong/lecture/lecture_facility_apply_step3.html
   BEM prefix: .facstep3-   (2단 레이아웃 · 섹션 카드 · 버튼 · 진행 단계 · 요약 카드 · 유의사항 ·
   하단 안내는 1·2단계와 공용인 .facapply-layout / .facapply-sec / .facapply-btn / .facapply-actions /
   .join-steps / .facapply-summary / .facapply-notice / .lecapply-guide 를 그대로 재사용한다.
   [내용보기] 모달은 온라인 수강신청 3단계의 공용 .lec-term-modal 을 그대로 재사용한다.)
   ===================================================================== */

/* ---------- 섹션 헤더 우측 [수정하기] 버튼 ---------- */
.facstep3-edit-btn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;
	border:1px solid #c5cede;background:#fff;color:#42506a;font-size:1.25rem;font-weight:700;font-family:inherit;
	cursor:pointer;white-space:nowrap}
.facstep3-edit-btn:hover{border-color:#94a3b8;background:#f7f9fc}
.facstep3-edit-btn i{color:#5a6577}

/* ---------- 정보 확인 표 (신청자 정보 / 신청 목적) ---------- */
.facstep3-kv{width:100%;border-collapse:collapse;font-size:1.4rem}
.facstep3-kv th,.facstep3-kv td{padding:12px 16px;border-bottom:1px solid #edf1f7;text-align:left;vertical-align:top}
.facstep3-kv tr:last-child th,.facstep3-kv tr:last-child td{border-bottom:0}
.facstep3-kv th{width:160px;background:#f8fafc;color:#5a6577;font-weight:700;white-space:nowrap}
.facstep3-kv td{color:#28324a;font-weight:600;word-break:break-word}

/* ---------- 시설 정보 & 총 시간 요약 박스 ---------- */
.facstep3-facility{display:flex;align-items:center;padding:20px 24px;border:1px solid #d3e4fb;border-radius:12px;background:#f4f8fe}
.facstep3-facility__item{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.facstep3-facility__item--name{flex:0 0 auto;padding-right:20px}
.facstep3-facility__item--period{flex:1.6}
.facstep3-facility__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
	border-radius:50%;background:#fff;color:#1063c6;font-size:2rem;box-shadow:0 2px 6px rgba(16,99,198,.15)}
.facstep3-facility__icon--sub{width:40px;height:40px;font-size:1.5rem}
.facstep3-facility__item--name strong{font-size:1.9rem;font-weight:800;color:#17233b}
.facstep3-facility__div{flex:none;width:1px;align-self:stretch;background:#d3e4fb;margin:0 20px}
.facstep3-facility__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.facstep3-facility__label{font-size:1.2rem;color:#5a6577;font-weight:700}
/* 신청 기간 값("2026. 09. 15. (화) ~ 2026. 09. 25. (금)")은 길어서 nowrap 이면 옆 영역과 겹친다. */
.facstep3-facility__text strong{font-size:1.6rem;font-weight:800;color:#17233b;white-space:normal;word-break:keep-all;line-height:1.35}
.facstep3-facility__sub{font-size:1.15rem;color:#7b8698;white-space:normal;word-break:keep-all}

/* ---------- 유의사항 및 개인정보 수집·이용 동의 ---------- */
.facstep3-terms-list{margin:0 0 16px;padding-left:20px;font-size:1.35rem;line-height:1.8;color:#42506a}
.facstep3-terms-list li + li{margin-top:2px}
.facstep3-agree-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
	padding:14px 16px;border:1px solid #e2e8f2;border-radius:10px;background:#f8fafc}
.facstep3-agree{display:inline-flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:700;color:#28324a;cursor:pointer}
.facstep3-agree input{width:20px;height:20px;accent-color:#1063c6;cursor:pointer}

/* ---------- 반응형 ---------- */
@media (max-width:768px){
	.facstep3-kv th{width:110px;font-size:1.25rem}
	.facstep3-kv td{font-size:1.3rem}
	.facstep3-facility{flex-direction:column;align-items:stretch;gap:16px}
	.facstep3-facility__item--name{padding-right:0}
	.facstep3-facility__div{width:100%;height:1px;margin:0}
	.facstep3-agree-row{flex-direction:column;align-items:stretch;text-align:center}
}

/* =====================================================================
   대관신청(추첨) 4단계(신청완료) - tong/lecture/lecture_facility_apply_step4.html
   BEM prefix: .facstep4-   (2단 레이아웃 · 버튼 · 진행 단계 · 문의안내 카드 · 하단 안내는
   1~3단계와 공용인 .facapply-layout / .facapply-btn / .join-steps / .facstep2-help-card /
   .lecapply-guide 를 그대로 재사용한다.)
   ===================================================================== */

/* ---------- 완료 히어로 카드 ---------- */
.facstep4-hero{position:relative;padding:40px 24px;text-align:center;background:#fff;border:1px solid #e2e8f2;border-radius:16px;overflow:hidden}
.facstep4-hero__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;
	margin-bottom:20px;border-radius:50%;background:#eef5ff;color:#1063c6;font-size:3rem}
.facstep4-hero__icon::before,.facstep4-hero__icon::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%}
.facstep4-hero__icon::before{top:-6px;left:-14px;background:#f6b93b}
.facstep4-hero__icon::after{bottom:2px;right:-18px;background:#e0483d}
.facstep4-hero__dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#1cc88a}
.facstep4-hero__dot--1{top:24px;left:calc(50% - 74px)}
.facstep4-hero__dot--2{top:60px;right:calc(50% - 84px);background:#1063c6}
.facstep4-hero__dot--3{top:100px;left:calc(50% - 100px);background:#f6b93b;width:6px;height:6px}
.facstep4-hero__title{margin:0 0 12px;font-size:2.4rem;font-weight:800;color:#17233b}
.facstep4-hero__desc{margin:0 0 24px;font-size:1.4rem;line-height:1.7;color:#5a6577}

.facstep4-accept{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto 24px;padding:16px 28px;
	border-radius:12px;background:#eef5ff;border:1px solid #d3e4fb}
.facstep4-accept__label{font-size:1.25rem;font-weight:700;color:#5a6577}
.facstep4-accept__row{display:flex;align-items:center;gap:10px}
.facstep4-accept__code{font-size:1.9rem;font-weight:800;color:#0d4f9e;letter-spacing:.02em}
.facstep4-accept__copy{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
	border-radius:8px;border:1px solid #c9def7;background:#fff;color:#1063c6;cursor:pointer}
.facstep4-accept__copy:hover{background:#eef5ff}

.facstep4-hero__actions{display:flex;justify-content:center;gap:12px}
.facstep4-hero__actions .facapply-btn{min-width:180px;justify-content:center}

/* ---------- 다음 절차 안내 ---------- */
.facstep4-flow{display:flex;align-items:flex-start;gap:6px;margin:28px 0 0;padding:24px;border:1px solid #e2e8f2;border-radius:14px;background:#fff}
.facstep4-flow__item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.facstep4-flow__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
	background:#eef5ff;color:#1063c6;font-size:1.9rem}
.facstep4-flow__title{font-size:1.35rem;font-weight:800;color:#17233b}
.facstep4-flow__desc{font-size:1.2rem;line-height:1.5;color:#7b8698}
.facstep4-flow__arrow{flex:none;margin-top:18px;color:#c3cbd8;font-size:1.3rem}

/* ---------- 꼭 확인해 주세요! ---------- */
.facstep4-callout{margin-top:20px;padding:18px 22px;border-radius:14px;background:#eef5ff;border:1px solid #d3e4fb}
.facstep4-callout__title{display:flex;align-items:center;gap:8px;font-size:1.5rem;font-weight:800;color:#0d4f9e}
.facstep4-callout__title i{color:#1063c6}
.facstep4-callout__list{margin:10px 0 0;padding-left:20px;font-size:1.3rem;line-height:1.8;color:#33415c}

/* ---------- 우측 : 신청한 대관 정보 카드 ---------- */
.facstep4-card{border:1px solid #e2e8f2;border-radius:14px;background:#fff;overflow:hidden}
.facstep4-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;
	border-bottom:1px solid #edf1f7}
.facstep4-card__head strong{display:flex;align-items:center;gap:7px;font-size:1.6rem;font-weight:800;color:#17233b}
.facstep4-card__head strong i{color:#1063c6}
.facstep4-card__head-actions{display:flex;align-items:center;gap:8px}
.facstep4-print-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;border:1px solid #c5cede;
	background:#fff;color:#42506a;font-size:1.2rem;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}
.facstep4-print-btn:hover{border-color:#94a3b8;background:#f7f9fc}
.facstep4-card__collapse{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
	border-radius:7px;border:1px solid #d6deea;background:#fff;color:#5a6577;cursor:pointer}
.facstep4-card__collapse:hover{background:#f1f5f9}
.facstep4-card__collapse i{transition:transform .15s}
.facstep4-card__collapse.is-collapsed i{transform:rotate(180deg)}
.facstep4-card__body{padding:18px}
.facstep4-card__body[hidden]{display:none}

.facstep4-thumb{margin-bottom:16px;border-radius:12px;overflow:hidden;border:1px solid #e2e8f2}
.facstep4-thumb img{display:block;width:100%;height:140px;object-fit:cover}
.facstep4-thumb__name{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:1.5rem;font-weight:800;color:#17233b;background:#f8fafc}

.facstep4-kv2{margin:0}
.facstep4-kv2__row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #e2e8f2}
.facstep4-kv2__row:last-child{border-bottom:0}
.facstep4-kv2__row dt{flex:none;display:flex;align-items:center;gap:6px;color:#6b7688;font-size:1.3rem}
.facstep4-kv2__row dt i{color:#1063c6;width:14px;text-align:center}
.facstep4-kv2__row dd{margin:0;font-weight:700;color:#28324a;text-align:right;word-break:keep-all;font-size:1.35rem}
.facstep4-kv2__accent{color:#1063c6 !important;font-size:1.7rem !important;font-weight:800 !important}
.facstep4-fee-caption{margin:8px 0 16px;font-size:1.15rem;line-height:1.6;color:#8a94a6}

.facstep4-datelist{border-top:1px solid #edf1f7;padding-top:14px}
.facstep4-datelist__head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:4px 0;
	border:0;background:none;cursor:pointer;font-family:inherit;font-size:1.35rem;font-weight:700;color:#28324a}
.facstep4-datelist__head i{color:#94a3b8;transition:transform .15s}
.facstep4-datelist__head i.is-collapsed{transform:rotate(180deg)}
.facstep4-datelist__head b{color:#1063c6}
.facstep4-datelist__body[hidden]{display:none}
.facstep4-datelist__table{width:100%;border-collapse:collapse;margin-top:10px;font-size:1.2rem}
.facstep4-datelist__table td{padding:8px 4px;border-bottom:1px dashed #edf1f7;vertical-align:top}
.facstep4-datelist__table tr:last-child td{border-bottom:0}
.facstep4-datelist__date{white-space:nowrap;color:#33415c;font-weight:700}
.facstep4-datelist__date i{color:#1063c6;margin-right:4px}
.facstep4-datelist__time{color:#5a6577}
.facstep4-datelist__dur{text-align:right;white-space:nowrap;font-weight:700;color:#1063c6}
.facstep4-datelist__empty{margin:8px 0 0;text-align:center;color:#98a2b3;font-size:1.25rem}

/* ---------- 인쇄(신청확인서 출력) : 우측 요약 카드만 남기고 나머지는 감춘다 ---------- */
@media print{
	.main-topbar,.main-header,.sub-visual,.sub-tabmenu,.sub-quickmenu,.join-steps,
	.facstep4-hero,.facstep4-flow,.facstep4-callout,.lecapply-guide,.main-footer,
	.facstep4-print-btn,.facstep4-card__collapse{display:none !important}
	.facapply-layout{display:block}
	.facapply-side{width:100%}
}

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
	.facstep4-flow{flex-wrap:wrap}
}
@media (max-width:768px){
	.facstep4-hero{padding:32px 18px}
	.facstep4-hero__title{font-size:1.9rem}
	.facstep4-hero__actions{flex-direction:column}
	.facstep4-hero__actions .facapply-btn{width:100%}
	.facstep4-flow{flex-direction:column;padding:18px}
	.facstep4-flow__arrow{display:none}
	.facstep4-card__head{flex-direction:column;align-items:stretch}
	.facstep4-card__head-actions{justify-content:space-between}
}

/* ============================================================
   마이페이지 - 단체 / 기관 관리 (tong/mypage/org.html)
   - 좌측 LNB / 2단 그리드 셸은 .mypage-home__ 재사용
   - 데이터 테이블 골격은 .mypage-lecture__table / .mypage-lecture__badge 재사용
   - 등록/수정 모달, 반려 사유 모달은 .join-modal 재사용
   - 이 화면 고유 영역만 .mypage-org__ BEM prefix 로 분리
   ============================================================ */
.mypage-org__head .mypage-home__crumb .is-current{color:var(--mph-primary);font-weight:700}

/* ① 등록 버튼 툴바 + 목록 영역 : 등록 버튼은 테이블 영역 외부(.mypage-lecture__toolbar 재사용),
   테이블은 결제 & 환불 관리(payment_list.html)와 동일하게 .mypage-lecture__table-wrap / __table 을 재사용 */
.mypage-org__toolbar{flex-wrap:wrap}
.mypage-org__panel-title{margin:0;font-size:1.6rem;font-weight:800;color:var(--mph-ink)}
.mypage-org__panel-title span{color:var(--mph-primary)}
.mypage-org__add-btn{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;
	border:0;border-radius:10px;background:var(--mph-primary);color:#fff;font-size:1.4rem;font-weight:700;cursor:pointer}
.mypage-org__add-btn:hover{background:var(--mph-primary-dark)}
.mypage-org__loading{padding:40px !important;text-align:center;color:#94a3b8;font-size:1.4rem}

.mypage-org__act-group{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mypage-org__act-btn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;
	border:1px solid #c9d9f5;border-radius:8px;background:#f4f8ff;color:var(--mph-primary);font-size:1.25rem;font-weight:700;cursor:pointer;white-space:nowrap}
.mypage-org__act-btn:hover{background:var(--mph-primary);border-color:var(--mph-primary);color:#fff}
.mypage-org__act-btn.is-danger{border-color:#f3c0b8;background:#fef2f0;color:#dc2626}
.mypage-org__act-btn.is-danger:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.mypage-org__act-reject{border-color:#fbbf6b;color:#b45309;background:#fff8ef}
.mypage-org__act-reject:hover{border-color:#f59e0b;color:#92400e;background:#fef3e2}

/* ② 하단 이용 안내 */
.mypage-org__side{border:1px solid var(--mph-line);border-radius:14px;padding:22px 22px;background:#f9fbfe;margin-top:20px}
.mypage-org__side-title{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:1.5rem;font-weight:800;color:var(--mph-ink)}
.mypage-org__side-title i{color:var(--mph-primary);font-size:1.6rem}
.mypage-org__side-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}
.mypage-org__side-list li{position:relative;padding-left:14px;font-size:1.35rem;line-height:1.6;color:#48566b}
.mypage-org__side-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--mph-primary)}

/* ③ 등록/수정 모달 (.join-modal 재사용, 폼 행만 자체 스타일) */
.mypage-org__form-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.mypage-org__form-label{flex:0 0 130px;padding-top:12px;font-size:1.4rem;font-weight:600;color:#1f2937;line-height:1.4}
.mypage-org__form-row .join-input,
.mypage-org__form-field{flex:1 1 0;min-width:0}
.mypage-org__ratio-hint{margin:8px 0 0;padding:9px 12px;border-radius:8px;background:#f1f5f9;font-size:1.3rem;color:#64748b}
.mypage-org__ratio-hint.is-ok{background:#e3f6ec;color:#16a34a;font-weight:700}
.mypage-org__ratio-hint.is-bad{background:#fef2f2;color:#dc2626;font-weight:700}

.mypage-org__form-row--file{align-items:flex-start}
.mypage-org__file-desc{margin:0 0 10px;font-size:1.25rem;color:#64748b}
.mypage-org__file-existing{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.mypage-org__file-existing li{display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:9px 12px;border:1px solid #e3e8ef;border-radius:8px;font-size:1.3rem;background:#f9fbfe}
.mypage-org__file-existing a{color:#334155;font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mypage-org__file-existing a:hover{color:var(--mph-primary);text-decoration:underline}
.mypage-org__file-del{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:1.2rem;color:#dc2626;cursor:pointer}
.mypage-org__file-empty{padding:9px 2px;font-size:1.3rem;color:#94a3b8}
.mypage-org__file-upload{position:relative;display:flex;align-items:center;gap:8px;height:46px;padding:0 16px;
	border:1px dashed #c2cedf;border-radius:9px;background:#f8fafc;color:#475569;font-size:1.35rem;font-weight:600;cursor:pointer}
.mypage-org__file-upload:hover{border-color:var(--mph-primary);background:#f2f6fd}
.mypage-org__file-upload input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.mypage-org__file-new{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mypage-org__file-new li{font-size:1.3rem;color:#37507d}
.mypage-org__file-new li small{color:#94a3b8}

/* ④ 반려 사유 확인 모달 */
.mypage-org__reject-panel{max-width:520px}
.mypage-org__reject-lead{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:14px 16px;
	border-radius:10px;background:#fef2f2;color:#b91c1c;font-size:1.4rem;font-weight:700}
.mypage-org__reject-block{margin-bottom:18px}
.mypage-org__reject-block h4{margin:0 0 10px;font-size:1.35rem;font-weight:800;color:var(--mph-ink)}
.mypage-org__reject-dl{margin:0;display:flex;flex-direction:column;gap:8px}
.mypage-org__reject-dl div{display:flex;gap:10px;font-size:1.3rem}
.mypage-org__reject-dl dt{flex:0 0 76px;color:#64748b;font-weight:600}
.mypage-org__reject-dl dd{margin:0;color:#1f2937;font-weight:600}
.mypage-org__reject-reason{margin:0;padding:14px 16px;border-radius:10px;background:#f8fafc;border:1px solid #e3e8ef;
	font-size:1.35rem;line-height:1.65;color:#334155;white-space:pre-line}
.mypage-org__reject-note{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;font-size:1.25rem;line-height:1.6;color:#64748b}
.mypage-org__reject-note i{margin-top:2px;color:var(--mph-primary)}

/* ⑤ 반응형 */
@media (max-width:768px){
	.mypage-org__toolbar{flex-direction:column;align-items:stretch}
	.mypage-org__add-btn{width:100%;justify-content:center}
	.mypage-org__form-row{flex-direction:column;gap:6px}
	.mypage-org__form-label{flex-basis:auto;padding-top:0}
	.mypage-org__act-group{justify-content:flex-start}
}


/* 수영 재등록 우선 접수 안내(1·2단계) / 마이페이지 재등록 버튼 */
.lecapply-notice__list .lecapply-notice__window{list-style:none;margin:0 0 8px -18px;padding:10px 14px;border-radius:8px;background:#fff;border:1px solid #bcd6f7;color:#1f2d4a}
.lecapply-notice__window strong{display:block;margin-bottom:2px;color:#1063c6}
.lecapply-notice__window em{display:block;margin-top:2px;font-style:normal;font-size:1.3rem;color:#5b6b85}
.lecapply-notice__window.is-closed{background:#fff7ed;border-color:#fdd5a8}
.lecapply-notice__window.is-closed strong{color:#b45309}
.lecapply-notice__window.is-member{background:#f0fdf4;border-color:#b7e4c7}
.lecapply-notice__window.is-member strong{color:#15803d}
.lecstep2-window{display:flex;gap:8px;align-items:flex-start;margin:0 0 18px;padding:12px 16px;border-radius:10px;border:1px solid #bcd6f7;background:#eef5ff;font-size:1.4rem;line-height:1.6;color:#1f2d4a}
.lecstep2-window strong{margin-right:6px;color:#1063c6}
.lecstep2-window.is-member{background:#f0fdf4;border-color:#b7e4c7}
.lecstep2-window.is-member strong{color:#15803d}
.lecstep2-window.is-closed{background:#fff7ed;border-color:#fdd5a8}
.mypage-ldt__act-btn.is-primary{border-color:#1063c6;background:#1063c6;color:#fff}
.mypage-ldt__act-btn.is-primary:hover{background:#0d4f9f;border-color:#0d4f9f}
.mypage-ldt__act-btn.is-outline{border-color:#1063c6;background:#fff;color:#1063c6}
.mypage-ldt__act-btn.is-outline:hover{background:#eef5ff}
.mypage-ldt__actions.is-renew{border-color:#b7e4c7;background:#f0fdf4}
.mypage-ldt__actions.is-renew .mypage-ldt__actions-msg{color:#166534}
.lecapply-notice__link{color:#1063c6;font-weight:700;text-decoration:underline}
.lecapply-notice__window > .lecapply-notice__link{display:block;margin-top:2px}
.lecapply-modal[hidden]{display:none}
.lecapply-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px}
.lecapply-modal__dim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.lecapply-modal__box{position:relative;width:100%;max-width:420px;background:#fff;border-radius:16px;padding:24px 22px 20px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.lecapply-modal__title{margin:0 0 14px;font-size:1.8rem;font-weight:800;color:#1063c6}
.lecapply-modal__text{margin:0 0 8px;font-size:1.5rem;line-height:1.6;color:#1f2d4a}
.lecapply-modal__actions{display:flex;gap:8px;margin-top:18px}
.lecapply-modal__btn{flex:1;min-height:44px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#334155;font-size:1.5rem;font-weight:700;cursor:pointer}
.lecapply-modal__btn.is-primary{border-color:#1063c6;background:#1063c6;color:#fff}

/* =========================================================================
   수강신청 통합 2단계(신청정보 입력 및 결제) 추가 스타일 - 구 3단계의 약관/결제 영역 흡수
   BEM prefix: .lecstep2-  (좌 65~70% / 우 30~35% Sticky, 1023px 이하 1단 + 하단 고정 결제 바)
   ========================================================================= */
.lecstep2-sec__edit{margin-left:auto;text-decoration:none}
.lecstep2-sec__edit + .lecstep2-sec__note{order:5}

/* 약관 동의 */
.lecstep2-allcheck{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:1.45rem;font-weight:700;color:#0d4f9e;cursor:pointer}
.lecstep2-allcheck input{width:19px;height:19px;accent-color:#1063c6;cursor:pointer}
.lecstep2-terms{list-style:none;margin:0;padding:0;border:1px solid #e2e8f2;border-radius:10px;overflow:hidden}
.lecstep2-term{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px}
.lecstep2-term + .lecstep2-term{border-top:1px solid #edf1f7}
.lecstep2-term__label{display:flex;align-items:center;gap:10px;font-size:1.45rem;font-weight:700;color:#2b3650;cursor:pointer;min-width:0}
.lecstep2-term__label input{width:19px;height:19px;accent-color:#1063c6;cursor:pointer;flex:none}
.lecstep2-term__label input:focus-visible,.lecstep2-allcheck input:focus-visible{outline:3px solid #1063c6;outline-offset:2px}
.lecstep2-term__view{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid #c5cede;border-radius:999px;
	background:#fff;color:#42506a;font-size:1.3rem;font-weight:700;cursor:pointer}
.lecstep2-term__view:hover{border-color:#1063c6;color:#1063c6}
.lecstep2-term__view i{font-size:1.05rem}
.lecstep2-btn:disabled{opacity:.6;cursor:not-allowed}
.lec-term-modal__foot .lecstep2-btn{min-width:96px}

/* 모바일/태블릿 : 결제 요약 카드가 폼·약관 아래에 이어지고, [결제하기] 줄은 화면 하단에 고정(Bottom Fixed Bar) */
@media (max-width:1023px){
	.lecstep2-actions{position:sticky;bottom:0;z-index:30;margin:0 -4px;padding:10px 4px calc(10px + env(safe-area-inset-bottom));
		background:#fff;border-top:1px solid #e2e8f2;box-shadow:0 -4px 12px rgba(15,23,42,.08)}
}
@media (max-width:767px){
	.lecstep2-term{flex-wrap:wrap}
	.lec-term-modal__foot .lecstep2-btn{width:100%}
	.lecstep2-actions{flex-direction:row}
	.lecstep2-actions .lecstep2-btn{width:auto}
	.lecstep2-actions .lecstep2-btn--primary{flex:1}
}

/* 결제 금액 카드 : 문화비 소득공제 / 일반 결제 분리 표시 */
.lecstep2-pay__split{margin-top:6px;padding:8px 12px;border-radius:8px;background:#f4f8ff;border:1px dashed #b9d0f0}
.lecstep2-pay__split[hidden]{display:none}
.lecstep2-pay__split .lecstep2-pay__row{padding:5px 0}
.lecstep2-pay__row--culture b{color:#0d4f9e}
.lecstep2-pay__row[hidden]{display:none}


/* 마이페이지 수강 신청 상세(결제 정보) : 결제 금액 내역의 문화비 / 일반 분리 행 */
.mypage-ldt__amount-row.is-split{padding-left:12px;border-left:3px solid #b9d0f0}
.mypage-ldt__amount-row.is-split .lbl{color:#0d4f9e;font-weight:600}

/* 수강신청 결제창 : 분할결제(문화비 소득공제 + 일반) 진행 안내 */
.paylegs{width:100%;max-width:420px;margin:0 auto 14px;padding:14px 16px;border:1px solid #b9d0f0;border-radius:10px;background:#f4f8ff;text-align:left}
.paylegs__title{margin:0 0 8px;font-size:1.45rem;font-weight:800;color:#1f5fbf}
.paylegs__steps{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.paylegs__step{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #d6e2f5;border-radius:8px;background:#fff;font-size:1.25rem;color:#64748b}
.paylegs__name{flex:1 1 auto}
.paylegs__amt{flex:0 0 auto;color:#334155}
.paylegs__state{flex:0 0 auto;min-width:56px;padding:2px 8px;border-radius:999px;background:#e2e8f0;font-size:1.1rem;font-weight:700;text-align:center;color:#475569}
.paylegs__step.is-current{border-color:#1f5fbf;box-shadow:0 0 0 1px #1f5fbf inset;color:#1f2937}
.paylegs__step.is-current .paylegs__state{background:#1f5fbf;color:#fff}
.paylegs__step.is-done .paylegs__state{background:#dcfce7;color:#166534}
.paylegs__desc{margin:10px 0 0;font-size:1.2rem;line-height:1.55;color:#475569}
.pay-result__btn--primary{border-color:#1f5fbf;background:#1f5fbf;color:#fff;font-weight:700}
.pay-result__desc--leg{margin-top:8px;color:#1f5fbf}
.pay-result__box .pay-result__btn{display:block;width:100%;margin-top:10px}
/* 수강신청 2단계 : 분할결제 1단계만 끝난 뒤의 진행 상황 */
.lecstep2-pay__splitnote[hidden]{display:none}
.lecstep2-pay__progress{margin-top:12px;padding:12px 14px;border:1px solid #b9d0f0;border-radius:8px;background:#f4f8ff}
.lecstep2-pay__progress[hidden]{display:none}
.lecstep2-pay__progress-title{margin:0 0 6px;font-size:1.3rem;font-weight:700;color:#1f5fbf}
.lecstep2-pay__progress-list{margin:0;padding:0;list-style:none;font-size:1.25rem;color:#64748b}
.lecstep2-pay__progress-list li{padding:2px 0}
.lecstep2-pay__progress-list li.is-done{color:#166534;font-weight:600}
.lecstep2-pay__progress-list li.is-current{color:#1f2937;font-weight:700}
.lecstep2-pay__progress-desc{margin:8px 0 0;font-size:1.15rem;line-height:1.5;color:#475569}

/* ===== 수강 신청 결제 영수증 (lecture_receipt.html, 새 창/인쇄용) ===== */
.lecture-receipt{min-height:100vh;padding:24px 16px 48px;background:#f1f5f9;box-sizing:border-box}
.lecture-receipt__toolbar{display:flex;justify-content:flex-end;gap:8px;max-width:720px;margin:0 auto 12px}
.lecture-receipt__btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#334155;font-size:1.4rem;font-weight:700;cursor:pointer}
.lecture-receipt__btn:hover{background:#f8fafc}
.lecture-receipt__btn.is-primary{background:#0f3d99;border-color:#0f3d99;color:#fff}
.lecture-receipt__btn.is-primary:hover{background:#0a3690}
.lecture-receipt__paper{max-width:720px;margin:0 auto;padding:36px 40px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.06);box-sizing:border-box}
.lecture-receipt__head{padding-bottom:18px;border-bottom:2px solid #0f3d99;text-align:center}
.lecture-receipt__title{margin:0;font-size:2.8rem;font-weight:800;color:#0f172a;letter-spacing:.3em}
.lecture-receipt__org{margin:8px 0 0;font-size:1.5rem;color:#64748b}
.lecture-receipt__section{margin-top:26px}
.lecture-receipt__sec-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:1.7rem;font-weight:800;color:#0f3d99}
.lecture-receipt__badge{padding:2px 10px;border-radius:999px;font-size:1.2rem;font-weight:700}
.lecture-receipt__badge.is-ok{background:#e0ecff;color:#1d4ed8}
.lecture-receipt__badge.is-cancel{background:#fee2e2;color:#dc2626}
.lecture-receipt__table{width:100%;border-collapse:collapse;border-top:1px solid #cbd5e1}
.lecture-receipt__table th,.lecture-receipt__table td{padding:11px 14px;border-bottom:1px solid #e2e8f0;font-size:1.45rem;text-align:left;word-break:break-all}
.lecture-receipt__table th{width:130px;background:#f8fafc;color:#475569;font-weight:700}
.lecture-receipt__table td{color:#1e293b}
.lecture-receipt__table td.is-minus{color:#dc2626}
.lecture-receipt__amount{font-size:1.7rem;color:#0f3d99}
.lecture-receipt__note{margin:8px 0 0;font-size:1.3rem;color:#64748b}
.lecture-receipt__total{margin-top:28px;padding:16px 20px;border:2px solid #0f3d99;border-radius:10px;background:#f4f8ff}
.lecture-receipt__total-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:1.5rem;color:#334155}
.lecture-receipt__total-row.is-minus{color:#dc2626}
.lecture-receipt__total-row.is-net{margin-top:6px;padding-top:10px;border-top:1px dashed #94a3b8;font-size:1.9rem;font-weight:800;color:#0f3d99}
.lecture-receipt__foot{margin-top:30px;text-align:center;font-size:1.4rem;line-height:1.7;color:#475569}
.lecture-receipt__foot p{margin:0}
.lecture-receipt__foot-org{margin-top:8px;font-weight:700;color:#0f172a}
@media (max-width:640px){
	.lecture-receipt__paper{padding:24px 18px}
	.lecture-receipt__table th{width:92px;padding:9px 10px}
	.lecture-receipt__table td{padding:9px 10px}
	.lecture-receipt__title{font-size:2.3rem}
}
@media print{
	.lecture-receipt{padding:0;background:#fff}
	.lecture-receipt__toolbar{display:none}
	.lecture-receipt__paper{max-width:none;border:0;border-radius:0;box-shadow:none;padding:0}
}

/* 수강 신청 내역 : 영수증 버튼 */
.mypage-lecture__act.is-receipt{display:flex;width:max-content;margin:6px auto 0;border:1px solid #c9d9f5;background:#fff;color:var(--mpl-primary)}
.mypage-lecture__act.is-receipt:hover{background:var(--mpl-primary);border-color:var(--mpl-primary);color:#fff}

/* 수강 결제 영수증 : 우측 상단 로고 / 하단 안내 문구 */
.lecture-receipt__head{position:relative}
.lecture-receipt__brand{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid #0f3d99;text-align:left}
.lecture-receipt__logo{width:40px;height:40px;object-fit:contain}
.lecture-receipt__brand-name{font-size:1.5rem;font-weight:700;color:#0f172a}
.lecture-receipt__legal{margin:18px 0 0;padding:14px 0 0;border-top:1px solid #e2e8f0;list-style:none;text-align:left;font-size:1.2rem;line-height:1.7;color:#64748b}
.lecture-receipt__legal li{position:relative;padding-left:12px}
.lecture-receipt__legal li::before{content:"※";position:absolute;left:0}

/* 수강 결제 영수증 : 인쇄 / PDF 저장 시 A4 한 장에 맞춤 - 글자 크기는 그대로 두고 여백만 줄인다 */
@page receipt{size:A4;margin:8mm}
@media print{
	html,body{height:auto !important;background:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
	.lecture-receipt{page:receipt;min-height:0;padding:0;overflow:visible}
	.lecture-receipt__paper{width:100%;padding:0;page-break-inside:avoid;break-inside:avoid}
	.lecture-receipt__brand{margin-bottom:10px;padding-bottom:8px}
	.lecture-receipt__head{padding-bottom:10px}
	.lecture-receipt__section{margin-top:14px;page-break-inside:avoid;break-inside:avoid}
	.lecture-receipt__sec-title{margin-bottom:6px}
	.lecture-receipt__table th,.lecture-receipt__table td{padding:7px 10px}
	.lecture-receipt__note{margin-top:4px}
	.lecture-receipt__total{margin-top:14px;padding:8px 16px;page-break-inside:avoid;break-inside:avoid}
	.lecture-receipt__total-row{padding:2px 0}
	.lecture-receipt__total-row.is-net{margin-top:4px;padding-top:6px}
	.lecture-receipt__foot{margin-top:14px;line-height:1.5;page-break-inside:avoid;break-inside:avoid}
	.lecture-receipt__foot-org{margin-top:4px}
	.lecture-receipt__legal{margin-top:10px;padding-top:8px;line-height:1.5}
}