/* 딱박스 — 휴대폰·태블릿 보정 (app.html 전용)
   원본 13 은 PC 1500px 기준 폼. 900px 미만에서는 배율 축소 대신 한 단 + 가로 스크롤 표 + 큰 터치 영역으로 바꾼다. */
.pi-foot{max-width:1200px;margin:24px auto 90px;padding:14px 16px;font:12px/1.7 'Malgun Gothic',sans-serif;color:#77758f;border-top:1px solid #e6e2f5}
.pi-foot a{color:#246bfd}
#pks-bar .pks-menu{display:flex!important;overflow-x:auto;scrollbar-width:none}
#pks-bar .pks-menu::-webkit-scrollbar{display:none}

/* ── 2026-09-27 단독 앱 테마: 사이트와 같은 톤(흰 머리글 · slate 바탕 · 인디고 포인트 1색) ── */
:root{--main:#246bfd;--main-dark:#183f9e;--bg:#f8fafc;--line:#e2e8f0}
body{font-family:'Pretendard','Pretendard Variable',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif!important;background:#f8fafc!important;color:#0f172a;letter-spacing:-.01em}
header{background:#fff!important;color:#0f172a!important;border-bottom:1px solid #e2e8f0!important;box-shadow:0 1px 0 rgba(15,23,42,.02)!important}
header h1{color:#0f172a!important;font-weight:800!important;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
header h1 .pi-hlogo{width:30px;height:30px;border-radius:8px;box-shadow:0 0 0 1px rgba(15,23,42,.08)}
header h1 small{background:#edf3ff;color:#1a56d6!important;border-radius:6px;padding:1px 7px;font-size:12px!important;font-weight:700}
header .h13sub{color:#64748b!important;font-weight:500}
header>span>button,header>span>a,header .hbtn{background:#fff!important;color:#334155!important;border:1px solid #e2e8f0!important;border-radius:9px!important;box-shadow:none!important;font-weight:600!important;text-decoration:none!important}
header>span>button:hover,header>span>a:hover{border-color:#a9c3fb!important;color:#1a56d6!important}
.panel{border-radius:16px!important;border:1px solid #e2e8f0!important;box-shadow:0 1px 2px rgba(15,23,42,.04)!important;background:#fff!important}
.panel h2{color:#0f172a!important;letter-spacing:-.02em}
.btn{border-radius:10px!important;background:#246bfd!important;box-shadow:0 1px 2px rgba(79,70,229,.25)!important}
.btn:hover{background:#1a56d6!important}
.btn.sub{background:#fff!important;color:#334155!important;border:1px solid #e2e8f0!important;box-shadow:none!important}
.btn.sub:hover{background:#f8fafc!important;border-color:#cbd5e1!important}
.btn.pi-load{background:#0f172a!important;color:#fff!important;border-color:#0f172a!important}
#itemTable th{background:#f8fafc!important;color:#334155!important;font-weight:600}
#itemTable input,#itemTable select{border:1px solid #cbd5e1!important;border-radius:8px!important}
#itemTable input:focus,#itemTable select:focus{outline:none;border-color:#246bfd!important;box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.t13Tabs button.on{background:#0f172a!important;color:#fff!important}
.d13Card{border-color:#e2e8f0!important;box-shadow:0 1px 2px rgba(15,23,42,.04)!important}
.d13Card h3{color:#0f172a!important}
.gstep.on{border-color:#246bfd!important;box-shadow:0 0 0 3px rgba(79,70,229,.14)!important;background:#f8faff!important}
.gstep.on .gn{background:#246bfd!important}

@media (max-width:899px){
  html,body{overflow-x:hidden}
  header{padding:8px 10px!important;position:static!important}
  header h1{font-size:16px!important;line-height:1.3}
  header .h13sub{display:none}
  header .hbtn{padding:6px 9px;font-size:12px}
  .wrap{padding:8px!important;max-width:100%!important}
  .panel{padding:10px!important;border-radius:10px}
  .panel h2{font-size:15px}
  /* 입력 표: 가로 스크롤 */
  .pkl-in .panel,.panel:has(#itemTable){overflow-x:auto;-webkit-overflow-scrolling:touch}
  #itemTable{min-width:860px}
  #itemTable input,#itemTable select{font-size:14px;min-height:34px}
  .btn,.vb,button{min-height:36px}
  /* 결과 탭: 가로로 밀어서 선택 */
  .t13Tabs{overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .t13Tabs::-webkit-scrollbar{display:none}
  .t13Tabs button{flex:none;white-space:nowrap}
  /* 요약 대시보드 */
  .d13,.d13Hero{grid-template-columns:1fr!important}
  .d13Kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .d13Row .n{width:96px!important}
  /* 3D + 포장 방법: 위아래로 */
  .v3grid{grid-template-columns:1fr!important}
  #three3d{min-height:340px!important}
  #three3d>div:first-child{height:360px!important}
  .gside{max-height:none!important}
  #gSteps{max-height:60vh}
  .v3bar{gap:4px!important;flex-wrap:wrap}
  .v3bar .sep{display:none}
  table{font-size:12px}
  .pi-adslot{margin:8px}
  #pks-bar .pks-fz,#pks-bar .pks-man{display:none!important}
  header>span{flex-wrap:wrap;gap:4px!important}
}

/* ── 2026-09-27 휴대폰(640px 이하) 카드형 입력 — 제품 표 대신 제품마다 카드 1장 · 입력 글자 16px(iPhone 자동 확대 방지) ── */
#piCalcBar,.pi-hamb{display:none}
@media (max-width:640px){
  .panel:has(#itemTable){overflow-x:visible!important}
  #itemTable{min-width:0!important;width:100%!important;border:0!important;border-collapse:separate!important;background:none!important}
  #itemTable thead{display:none}
  #itemTable tbody{display:block}
  #itemTable tbody tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;position:relative;border:1px solid #e2e8f0;border-radius:14px;padding:12px;margin:0 0 12px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.06)}
  #itemTable tbody td{display:block;border:0!important;padding:0!important;min-width:0;background:none!important}
  #itemTable tbody td::before{display:block;font-size:12px;font-weight:600;color:#64748b;margin:0 0 3px}
  #itemTable tbody td:nth-child(1){grid-column:1/-1;padding-right:44px!important}
  #itemTable tbody td:nth-child(1)::before{content:"품목명"}
  #itemTable tbody td:nth-child(2){grid-column:span 3}#itemTable tbody td:nth-child(2)::before{content:"형태"}
  #itemTable tbody td:nth-child(3){grid-column:span 3}#itemTable tbody td:nth-child(3)::before{content:"외형(3D)"}
  #itemTable tbody td:nth-child(4){grid-column:1/-1}
  #itemTable tbody td:nth-child(5),#itemTable tbody td:nth-child(6),#itemTable tbody td:nth-child(7),#itemTable tbody td:nth-child(8),#itemTable tbody td:nth-child(9),#itemTable tbody td:nth-child(10){grid-column:span 2}
  #itemTable tbody td:nth-child(5)::before{content:"가로 L (mm)"}#itemTable tbody td:nth-child(6)::before{content:"세로 W (mm)"}#itemTable tbody td:nth-child(7)::before{content:"높이 H (mm)"}
  #itemTable tbody td:nth-child(8)::before{content:"무게 (g/개)"}#itemTable tbody td:nth-child(9)::before{content:"수량"}#itemTable tbody td:nth-child(10)::before{content:"파손 위험"}
  #itemTable tbody td:nth-child(11){position:absolute;top:10px;right:10px}
  #itemTable tbody td:nth-child(11) .btn{width:34px;height:34px;min-height:34px;padding:0!important;border-radius:50%!important;color:#94a3b8!important}
  #itemTable input,#itemTable select{width:100%!important;box-sizing:border-box;font-size:16px!important;min-height:44px;padding:6px 10px}
  #itemTable .recChip{display:inline-block;padding:6px 12px;font-size:13px}
  #itemTable .recWhy{font-size:12px}
  /* 입력 도구줄: 2열 버튼 */
  .panel:has(#itemTable)>button.btn{margin:4px 0!important}
  /* 아래 고정 [적재 계산하기] */
  #piCalcBar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:2147483000;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #e2e8f0;box-shadow:0 -6px 20px rgba(15,23,42,.08);backdrop-filter:blur(6px)}
  #piCalcBar button{flex:1;min-height:48px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;color:#334155;font:700 15px inherit;font-family:inherit}
  #piCalcBar button.go{flex:1.6;background:#246bfd;border-color:#246bfd;color:#fff}
  body{padding-bottom:76px}
  button[onclick="runPack()"].btn{display:none!important}
  /* 머리글 한 줄: 로고 + 아이콘 버튼 */
  header{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:6px;justify-content:space-between}
  header h1{font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;margin:0!important}
  header h1 small{display:none}
  header h1 .pi-hlogo{width:26px;height:26px}
  header>span{flex-wrap:nowrap!important;flex:none}
  header .pi-lbl{display:none}
  header>span>button,header>span>a{padding:6px 9px!important;min-width:38px;min-height:38px;font-size:16px!important}
  header button[onclick="window.print()"]{display:none!important}
  /* 사이트 메뉴 → ☰ */
  #pks-bar .pks-menu,#pks-bar .pks-crumb{display:none!important}
  #pks-bar .pi-hamb{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:38px;height:34px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;font-size:17px;cursor:pointer}
  #pks-bar.pi-mopen .pks-menu{display:flex!important;flex-direction:column;position:absolute;top:100%;right:8px;left:auto;min-width:180px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.14);padding:6px;overflow:visible;z-index:5}
  #pks-bar.pi-mopen .pks-menu .pks-mi{padding:12px 14px;font-size:15px;border-radius:8px}
  #pks-bar{position:relative}
  /* 3D: 화면 폭 정사각형 · 요약 한 단 */
  #three3d>div:first-child{height:min(100vw,440px)!important}
  #dash13 .d13Pic{min-height:0!important;aspect-ratio:4/3!important}
}