/* 광천토굴새우젓 이력관리 - 이용자(소비자/생산자/작업자) 공통 스타일 */

/* 기본 고딕 웹폰트 */
@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');
}

/* 명조(세리프) 웹폰트 : 주요 타이틀 강조용 */
@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');
}

body{margin:0;background:#fdf6ec}

/* ==========================================================================
   토스트 알림메시지 (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:40px}
.toast-container.middle{top:50%;transform:translate(-50%,-50%)}

.toast-message{min-width:300px;margin-top:10px;padding:15px 25px;border-radius:50px;color:#fff;font-size:15px;font-weight:500;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-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}

/* 페이지 전체 뼈대 : 상단바/하단바는 가로 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:17px;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{font-weight:900;font-size:17px;text-decoration:none;color:#fff}
.cw-nav{display:flex;gap:22px}
.cw-nav a{color:#fff;text-decoration:none;font-weight:700;font-size:14px;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:16px;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:20px;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:14.5px;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:17px;font-weight:900;margin:0 0 16px;color:#111827}
.card h2 i{color:#c2680f;font-size:16px}

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

/* 카드형 세로 배치 로우 (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:17px;font-weight:900}
.btn-scan-lg .scan-txt em{font-style:normal;font-size:12.5px;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:13px}

.or-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#9ca3af;font-size:13px;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:14px}

.manual-title{display:none;font-size:18px;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:17px;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%;min-height:56px;border:none;border-radius:12px;background:#543c2c;color:#fff;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-search:disabled{opacity:.6}
.tip{font-size:13px;color:#9ca3af;margin:12px 0 0;line-height:1.5}
.tip strong{color:#c2410c;font-weight:800;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:16px;font-weight:900;margin:0 0 4px;color:#50652D}
.cw-guide p{font-size:14px;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:14px;font-weight:800;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:16px;margin-bottom:2px}
.cw-link-card .txt span{font-size:14px;color:#6b7280}
.cw-link-card .go-arrow{flex-shrink:0;font-size:18px;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:13.5px;font-weight:800;color:#111827}
.feature-item-lg span{display:none;font-size:14px;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:17px;font-weight:900;color:#111827;border-bottom:1px solid #e6e0d4}
.modal-close{border:none;background:transparent;font-size:20px;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:14px;font-weight:800;color:#57534e;margin:0 0 4px}
.cw-footer .copy{font-size:12px;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:15px;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:40px}
	.cw-hero p{font-size:16px;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:20px}
	.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:16px}
	.feature-item-lg span{display:block;font-size:13px}

	.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:36px}
	.cw-footer .org{font-size:15px}
	.cw-footer .copy{font-size:13px}
}

/* ===================================================================
   토굴 소개 화면(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:17px;font-weight:900;color:#57534e}
.ci-hero-line2{display:block;font-size:23px;font-weight:900}
.ci-hero-hl1{color:#3b1100}
.ci-hero-hl2{color:#78300a}
.ci-hero-desc{font-size:14px;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:20px;color:#c2680f}
.stat-tile:nth-child(2) .icon{color:#2563a8}
.stat-tile .num{font-size:20px;font-weight:900;color:#1c1917;line-height:1.2}
.stat-tile .lbl{font-size:12.5px;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:19px}
.ci-feature-item strong{display:block;font-size:15px;color:#111827;margin-bottom:3px}
.ci-feature-item span{display:block;font-size:13px;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:16px}
.jeot-body{display:contents}
.jeot-body strong{order:2;flex:1 1 auto;font-size:15px;font-weight:900;color:#111827}
.jeot-tag{order:3;flex-shrink:0;font-size:13px;font-weight:800;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:14px;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:13px;font-weight:800;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:20px}
	.ci-hero-line2{font-size:36px}
	.ci-hero-desc{font-size:15px}

	.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:15px;padding:14px 24px}
	.td-empty-btn{font-size:15px;padding:14px 24px}

	.stat-tile{padding:22px}
	.stat-tile .icon{width:52px;height:52px;font-size:24px}
	.stat-tile .num{font-size:26px}
	.stat-tile .lbl{font-size:13.5px}

	.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:26px}

	.jeot-item{flex-wrap:nowrap;align-items:center;padding:16px 20px}
	.jeot-icon{order:1;width:44px;height:44px;font-size:18px}
	.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:19px;color:#fff}
.td-verify-txt{position:relative;z-index:1}
.td-verify-txt strong{display:block;font-size:16px;font-weight:900}
.td-verify-txt span{font-size:13px;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:22px;font-weight:900;color:#111827;margin:0 0 10px}
.td-status-tag{display:inline-block;font-size:13px;font-weight:800;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:22px;margin-bottom:14px}
.td-dday-num{font-size:40px;font-weight:900;color:#c2680f;line-height:1}
.td-dday-num .unit{font-size:16px;font-weight:800;margin-left:4px}
.td-dday-lbl{font-size:13px;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:15px}
.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:13px}
.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:15px;font-weight:900;color:#111827;margin:0 0 4px}
.td-timeline-desc{font-size:13px;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:15px;line-height:1.6}
.td-empty-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#412616;color:#fff;font-size:13px;font-weight:800;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:14px}
.td-sample-banner p{margin:6px 0 0;font-size:13px;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:800;font-size:15px;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:34px 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/user/login) 전용 스타일
   모바일 : 상단 브랜드 배경 배너(축소) + 하단 흰색 카드 폼
   PC(1024px+) : 좌(브랜딩)/우(로그인 폼) 2단 분할 카드
   =================================================================== */
.uli-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0;background:#f5f1ea;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
.uli-page *{box-sizing:border-box}

.uli-split{width:100%;min-height:100vh;display:flex;flex-direction:column;background:#fff}

/* 좌측 브랜딩 영역 : 모바일은 상단 배경 배너로 축소. 새우젓 항아리 일러스트는 uli-brand-copy 상단에 원본 사이즈로 배치하고, 그 아래로 카피 문구가 이어짐 */
.uli-brand{position:relative;padding:24px 20px 48px;
	background-color:#f7f7f8;
	background-image:url('/img/shrimp_pot.png');
	background-repeat:no-repeat;
	background-position:right 0px;
	background-size:contain}
.uli-brand-inner{width:100%;max-width:485px;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start}
.uli-brand-top{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.uli-brand-top .ic{flex-shrink:0;font-size:26px;line-height:1}
.uli-brand-top strong{display:block;white-space:nowrap;font-family:'Noto Serif KR',serif;font-size:17px;font-weight:900;color:#1c1917}
.uli-brand-top span{display:block;white-space:nowrap;font-family:'Noto Serif KR',serif;font-size:17px;font-weight:900;color:#1c1917}
.uli-brand-illust{display:none}
.uli-brand-illust img{display:inline-block;width:auto;height:auto;margin:0 auto}
.uli-brand-copy{display:none}
.uli-brand-copy h2{font-family:'Noto Serif KR',serif;font-size:26px;font-weight:900;color:#1c1917;margin:0 0 10px;line-height:1.4}
.uli-brand-copy h2 .hl{color:#c2680f}
.uli-brand-copy p{font-size:14px;color:#6b7280;margin:0;line-height:1.6}
.uli-brand-features{display:none}
.uli-feature{text-align:center}
.uli-feature-icon{width:48px;height:48px;border-radius:50%;background:transparent;border:2px solid #c2680f;color:#c2680f;display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 auto 10px}
.uli-feature strong{display:block;font-size:16px;font-weight:800;color:#111827;margin-bottom:3px}
.uli-feature span{display:block;font-size:14px;color:#9ca3af;line-height:1.4}

/* 우측 로그인 폼 영역 */
.uli-form-panel{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:0 20px 20px;background-color:#f7f7f8}
.uli-form-inner{width:100%;max-width:485px;margin:0 auto}
.uli-form-card{position:relative;width:100%;background:#fff;border-radius:20px;padding:60px 24px 24px;box-shadow:0 4px 20px rgba(0,0,0,.05)}

.uli-symbol{position:absolute;top:-24px;left:50%;transform:translateX(-50%);z-index:2;width:64px;height:64px;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;overflow:hidden}
.uli-symbol img{width:auto;height:auto;max-width:50px;max-height:50px}

.uli-form-card h1{text-align:center;font-family:'Noto Serif KR',serif;font-size:19px;font-weight:900;color:#1a365d;line-height:1.3;margin:0 0 8px}
.uli-sub{display:none;text-align:center;color:#6b7280}

.uli-box{background:#fff;border-radius:18px;padding:0}
.uli-field{margin-bottom:16px}
.uli-field label{display:none;font-size:14px;font-weight:800;color:#374151;margin-bottom:8px}
.uli-input-wrap{position:relative}
.uli-input-wrap i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:15px;pointer-events:none}
.uli-input-wrap input{width:100%;min-height:52px;font-size:15px;padding:12px 16px 12px 44px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#111827}
.uli-input-wrap input:focus{outline:none;border-color:#1a365d}
.uli-input-wrap input:-webkit-autofill,
.uli-input-wrap input:-webkit-autofill:hover,
.uli-input-wrap input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:#111827;transition:background-color 9999s ease-in-out 0s}

.uli-options{display:flex;align-items:center;justify-content:space-between;margin:14px 0 20px;font-size:14px}
.uli-remember{display:flex;align-items:center;gap:6px;color:#000;cursor:pointer}
.uli-remember input{width:18px;height:18px;accent-color:#2E387D;border-radius:4px;cursor:pointer}
.uli-find-pwd{color:#1a365d;font-weight:700;text-decoration:underline;cursor:pointer;background:none;border:none;font-size:14px;padding:0}

.btn-uli-login{width:100%;min-height:54px;font-size:16px;font-weight:900;background:#2E387D;color:#fff;border:none;border-radius:8px;cursor:pointer}
.btn-uli-login:disabled{opacity:.6;cursor:not-allowed}

.uli-footer{text-align:center;margin-top:20px;font-size:14px;color:#9ca3af;line-height:1.7}

@media (min-width:1024px){
	.uli-split{flex-direction:row;align-items:stretch;gap:0}

	.uli-brand{flex:1;min-height:auto;padding:48px 44px;background-image:none}
	.uli-brand-inner{margin:0 0 0 auto}
	.uli-brand-illust{display:block;text-align:center;margin:20px 0}
	.uli-brand-illust img{max-height:none}
	.uli-brand-copy{display:block}
	.uli-brand-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:auto;padding-top:24px}

	.uli-form-panel{flex:1;justify-content:center;padding:130px 64px 80px;background-color:#F9FAFC}
	.uli-form-inner{margin:0 auto 0 0}
	.uli-field label{display:block}
	.uli-form-card{padding:90px 24px 32px}
	.uli-symbol{top:-45px;width:120px;height:120px}
	.uli-symbol img{max-width:none;max-height:none}
	.uli-form-card h1{font-size:24px;margin:0 0 10px}
	.uli-sub{display:block;font-size:13.5px;line-height:1.6;margin:0 0 26px}
	.uli-footer{margin-top:32px}
}

/* ===================================================================
   생산자 메인 화면(tong.history.producer_main) 전용 스타일
   =================================================================== */

.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:flex-start;gap:10px}
/* 아이콘을 제목/부제 컬럼과 분리해, 제목과 부제 텍스트의 좌측 시작 위치를 서로 맞춘다 */
.ph-header-titlewrap{display:flex;align-items:flex-start;gap:8px}
.ph-header-icon{font-size:20px;line-height:1.3;flex-shrink:0}
.ph-header h1{font-size:19px;font-weight:900;margin:0 0 4px;line-height:1.3}
.ph-header p{font-size:14px;margin:0;opacity:.85;font-weight:600}
.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:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}

.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:16px;font-weight:900;margin:0 0 12px;color:#111827}
.ph-field-label{display:block;font-size:14px;font-weight:800;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:16px;padding:0 12px;border:1.5px 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)}

/* 품목 카드형 라디오 : 모바일 2열 → 600px 이상 4열 한 줄 */
.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;justify-content:center;min-height:52px;border:1.5px solid #d1d5db;border-radius:10px;background:#fff;cursor:pointer;font-size:15px;font-weight:800;color:#374151;text-align:center;padding:6px;transition:all .15s ease}
.ph-item-card-label.is-selected{border-color:#1d4ed8;background:#eff6ff;color:#1d4ed8}

.ph-qty-input-row{display:flex;align-items:center;gap:10px}
.ph-qty-input{height:52px;font-size:20px;font-weight:800;text-align:right}
.ph-qty-unit{font-size:16px;font-weight:800;color:#374151;min-width:26px}

.ph-btn-primary-lg{width:100%;min-height:52px;font-size:16px;font-weight:900;background:#10b981;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(16,185,129,.28)}
.ph-btn-primary-lg:disabled{opacity:.6}

.ph-btn-refresh{border:none;background:#eef2f7;color:#374151;font-weight:800;font-size:14px;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:16px;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:1.5px solid #d1d5db;background:#fff;color:#374151;font-size:14px;font-weight:800;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:14px;font-weight:800;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:16px;font-weight:900;margin:0 0 12px;color:#111827}

/* 상태 배지 */
.ph-status-badge{display:inline-block;font-size:14px;font-weight:800;padding:5px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.ph-badge-req{background:#fef3c7;color:#92400e}
.ph-badge-aging{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}

/* 신청/재고 카드 : 제목 및 라벨 앞에 아이콘을 붙이고(회색, 14~16px, 텍스트와 6px 간격, 수직 중앙 정렬),
   식별번호 값만 파란색 굵은 글씨로 강조한다 */
.ph-item-row-card{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.ph-item-row-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;gap:8px}
.ph-item-row-title{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:900;color:#111827}
.ph-item-row-title i{font-size:15px;color:#111827}
.ph-item-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:14px}
.ph-irg-label{display:inline-flex;align-items:center;gap:6px;color:#9ca3af;font-weight:700}
.ph-irg-label i{font-size:15px;color:#9ca3af;flex-shrink:0}
.ph-irg-value{color:#111827;font-weight:800;text-align:right}
.ph-irg-value--id{color:#1d4ed8;font-weight:900}
.ph-item-row-actions{margin-top:12px;display:flex;gap:8px}
.ph-btn-outbound{flex:1;min-height:42px;font-size:14px;font-weight:800;background:#1d4ed8;color:#fff;border:none;border-radius:8px;cursor:pointer}
.ph-btn-confirm{flex:1;min-height:42px;font-size:14px;font-weight:800;background:#10b981;color:#fff;border:none;border-radius:8px;cursor:pointer}

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

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

/* 출고 서브탭 */
.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:14px;font-weight:800;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:16px;font-weight:900;color:#111827;border-bottom:1px solid #eef2f7}
.ph-modal-close{border:none;background:transparent;font-size:19px;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:0;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:14px;font-weight:800;color:#9ca3af;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.ph-nav-item i{font-size:19px}
.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}
.ph-dash-stat-card{background:#fff;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;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:17px;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:12.5px;color:#6b7280;font-weight:700;margin:0 0 2px}
.ph-dash-stat-value{font-size:20px;font-weight:900;color:#111827;margin:0}
.ph-dash-stat-value .unit{font-size:13px;font-weight:800;color:#6b7280;margin-left:2px}
.ph-dash-stat-sub{font-size:12px;color:#9ca3af;font-weight:700;margin:2px 0 0}

.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-legend{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.ph-dash-legend-item{display:flex;align-items:center;gap:8px;font-size:13.5px}
.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:12.5px;flex-shrink:0}
.ph-dash-chart-total{text-align:right;font-size:13px;font-weight:800;color:#6b7280;margin-top:10px;padding-top:10px;border-top:1px solid #f1f5f9}

.ph-dash-filter-label{font-size:13px;font-weight:800;color:#6b7280;margin:0 0 8px}
.ph-dash-filter-label:not(:first-child){margin-top:14px}
.ph-dash-cave-tabs{display:flex;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:center}
.ph-dash-item-select-row .ph-select{flex:1}
.ph-btn-filter-reset{flex-shrink:0;border:1.5px solid #d1d5db;background:#fff;color:#374151;font-weight:800;font-size:13px;border-radius:8px;padding:0 12px;height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

.ph-dash-list-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 12px}
.ph-dash-list-toolbar h2{margin:0;font-size:16px;font-weight:900;color:#111827}
.ph-dash-sort-select{height:38px;font-size:13px;font-weight:700;padding:0 10px;border:1.5px 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);display:flex;align-items:flex-start;gap:12px}
.ph-dash-item-icon{flex-shrink:0;width:42px;height:42px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:1px}
.ph-dash-item-icon i{font-size:14px}
.ph-dash-item-icon span{font-size:10px;font-weight:800;line-height:1}
.ph-dash-item-body{flex:1;min-width:0}
.ph-dash-item-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.ph-dash-item-id{font-size:15px;font-weight:900;color:#111827;margin-bottom:6px}
.ph-dash-item-fields{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:#374151;font-weight:700}
.ph-dash-item-fields i{color:#9ca3af;font-size:13px;margin-right:4px}
.ph-dash-item-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ph-dash-item-side i{color:#9ca3af;font-size:14px}

@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)}
}

@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:24px}
	.ph-header p{font-size:15px}
	.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-item-row-grid{grid-template-columns:repeat(4,1fr)}

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