@charset "utf-8";
/* 진성정밀 Inquiry (sub/sub5_1.php) 전용 스타일
 * 원본 아티팩트의 인라인 style 을 그대로 옮긴 것이며, 값 자체는 손대지 않았다.
 * 테마 CSS 의 #container 계열 선택자에 밀리지 않도록 전부 #jsp_inquiry 로 한정한다.
 * {{ }} 로 값이 바뀌는 선언(선택 상태 색, 그리드 컬럼 등)은 마크업에 인라인으로 남아 있다. */

/* ---- 페이지 범위 리셋 ---- */
#jsp_inquiry, #jsp_inquiry *, #jsp_inquiry *::before, #jsp_inquiry *::after { box-sizing: border-box; }
#jsp_inquiry { font-family: 'Inter', 'Apple SD Gothic Neo', sans-serif; font-size: 15px; line-height: 1.5; color: #111; background: #fff; }
#jsp_inquiry button, #jsp_inquiry input, #jsp_inquiry select, #jsp_inquiry textarea { font-family: inherit; }
#jsp_inquiry a { text-decoration: none; }
#jsp_inquiry h1, #jsp_inquiry h2, #jsp_inquiry h3, #jsp_inquiry h4, #jsp_inquiry p { margin: 0; }
#jsp_inquiry img { max-width: 100%; }

/* ---- 컴포넌트 ---- */
#jsp_inquiry .jsp-page { width:100%; display:flex; flex-direction:column; }
#jsp_inquiry .jsp-section { flex:1; max-width:1200px; width:100%; box-sizing:border-box; margin:0 auto; padding:88px 32px 140px; display:flex; flex-direction:column; gap:0; }
#jsp_inquiry .jsp-intro { text-align:center; margin-bottom:64px; display:flex; flex-direction:column; align-items:center; }
#jsp_inquiry .jsp-intro__title { margin:0 0 18px; font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(24px,2.4vw,32px); line-height:1.3; color:#111; text-wrap:pretty; }
#jsp_inquiry .jsp-intro__desc { margin:0; max-width:640px; font-size:15px; line-height:1.75; color:#666; text-wrap:pretty; }
#jsp_inquiry .jsp-sechead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:2px solid #0d3b8c; }
#jsp_inquiry .jsp-sechead__title { margin:0; font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; color:#0d3b8c; }
#jsp_inquiry .jsp-sechead__req { margin:0; font-size:13px; color:#666; }
#jsp_inquiry .jsp-req { color:#d8232a; }
#jsp_inquiry .jsp-spec { border-bottom:1px solid #e3e6eb; }
#jsp_inquiry .jsp-spec__row { display:grid; grid-template-columns:minmax(150px,200px) minmax(0,1fr); border-bottom:1px solid #e3e6eb; transition:background .2s; }
#jsp_inquiry .jsp-spec__label { padding:18px 16px; display:flex; flex-direction:column; justify-content:center; gap:2px; border-right:1px solid #e3e6eb; }
#jsp_inquiry .jsp-spec__label-name { display:flex; gap:4px; font-weight:600; font-size:15px; color:#111; }
#jsp_inquiry .jsp-sub { font-size:12px; color:#7a818c; }
#jsp_inquiry .jsp-spec__control { padding:14px 16px; display:flex; flex-direction:column; gap:10px; justify-content:center; min-height:44px; }
#jsp_inquiry .jsp-spec__line { flex-wrap:wrap; align-items:center; }
#jsp_inquiry .jsp-spec__line-label { flex-shrink:0; font-size:12.5px; font-weight:500; color:#8a919c; white-space:nowrap; }
#jsp_inquiry .jsp-select { height:44px; min-width:0; max-width:100%; padding:0 40px 0 16px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; border-radius:999px; font-size:14px; appearance:none; -webkit-appearance:none; background-position:calc(100% - 22px) 19px,calc(100% - 17px) 19px; background-size:5px 5px; background-repeat:no-repeat; opacity:1; }
#jsp_inquiry .jsp-divider { width:1px; height:22px; background:#e6e9ee; flex-shrink:0; justify-self:center; }
#jsp_inquiry .jsp-pills { display:flex; flex-wrap:wrap; gap:10px; }
#jsp_inquiry .jsp-pill { height:44px; border-radius:999px; font-size:14px; opacity:1; transition:background .15s,color .15s; }
#jsp_inquiry .jsp-spec__error { font-size:13px; color:#c0392b; }
#jsp_inquiry .jsp-actions { display:flex; justify-content:center; gap:12px; margin-top:40px; }
#jsp_inquiry .jsp-btn-reset { height:52px; padding:0 36px; border-radius:999px; border:1px solid #cfd4dc; background:#fff; color:#333; font-size:15px; font-weight:600; cursor:pointer; transition:border-color .15s,color .15s; }
#jsp_inquiry .jsp-btn-search { height:52px; padding:0 48px; border-radius:999px; border:0; background:#0d3b8c; color:#fff; font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:background .15s; }
#jsp_inquiry .jsp-block { margin-top:96px; }
#jsp_inquiry .jsp-result__count { margin:0; font-size:14px; color:#333; }
#jsp_inquiry .jsp-result__count-num { color:#0d3b8c; }
#jsp_inquiry .jsp-chips { display:flex; flex-wrap:wrap; gap:8px; padding:20px 0 0; }
#jsp_inquiry .jsp-chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; background:#eef2f9; color:#0d3b8c; font-size:13px; font-weight:500; }
#jsp_inquiry .jsp-chip__key { color:#6b7382; }
#jsp_inquiry .jsp-result__guide { margin:36px 0 20px; font-size:14px; color:#555; }
#jsp_inquiry .jsp-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:20px; }
#jsp_inquiry .jsp-card { text-align:left; padding:22px 24px 24px; border-radius:12px; cursor:pointer; display:flex; flex-direction:column; gap:0; transition:border-color .15s,box-shadow .15s; min-width:0; }
#jsp_inquiry .jsp-card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
#jsp_inquiry .jsp-card__partno { font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:#0d3b8c; letter-spacing:0.01em; }
#jsp_inquiry .jsp-card__badge { font-size:12px; font-weight:600; color:#6b7382; background:#eef2f9; padding:4px 10px; border-radius:999px; white-space:nowrap; }
#jsp_inquiry .jsp-card__disp-wrap { margin-top:16px; display:flex; flex-direction:column; gap:4px; }
#jsp_inquiry .jsp-card__disp { font-size:18px; font-weight:600; color:#111; line-height:1.3; }
#jsp_inquiry .jsp-card__meta { font-size:14px; font-weight:500; color:#444; }
#jsp_inquiry .jsp-card__specs { margin-top:18px; padding-top:16px; border-top:1px solid #edf0f4; width:100%; display:flex; flex-direction:column; gap:12px; }
#jsp_inquiry .jsp-card__spec { display:flex; flex-direction:column; gap:3px; }
#jsp_inquiry .jsp-card__spec-key { font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#8a919c; }
#jsp_inquiry .jsp-card__spec-val { font-size:13px; color:#333; line-height:1.5; overflow-wrap:anywhere; }
#jsp_inquiry .jsp-card__spec-val--nowrap { font-size:13px; color:#333; line-height:1.5; }
#jsp_inquiry .jsp-result__more { margin:14px 0 0; font-size:13px; color:#7a818c; }
#jsp_inquiry .jsp-empty { margin-top:24px; padding:28px 24px; border-radius:12px; background:#f4f6fa; text-align:center; }
#jsp_inquiry .jsp-empty__title { margin:0 0 6px; font-weight:600; font-size:16px; color:#111; }
#jsp_inquiry .jsp-empty__desc { margin:0; font-size:14px; color:#555; line-height:1.6; }
#jsp_inquiry .jsp-done { margin-top:40px; padding:48px 24px; border-radius:12px; background:#f4f6fa; text-align:center; }
#jsp_inquiry .jsp-done__title { margin:0 0 8px; font-family:'Poppins',sans-serif; font-weight:700; font-size:22px; color:#0d3b8c; }
#jsp_inquiry .jsp-done__desc { margin:0 0 28px; font-size:15px; color:#555; line-height:1.6; }
#jsp_inquiry .jsp-btn-outline { height:48px; padding:0 32px; border-radius:999px; border:1px solid #0d3b8c; background:#fff; color:#0d3b8c; font-size:14px; font-weight:600; cursor:pointer; }
#jsp_inquiry .jsp-form { margin-top:28px; display:flex; flex-direction:column; gap:0; }
#jsp_inquiry .jsp-summary { padding: 18px 20px 20px; border-radius: 8px; background: #eef2f9; display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }
#jsp_inquiry .jsp-summary__product { display:flex; flex-direction:column; gap:4px; }
#jsp_inquiry .jsp-summary__key { font-size:12px; font-weight:600; color:#6b7382; letter-spacing:.02em; }
#jsp_inquiry .jsp-summary__partno { font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; line-height:1.3; color:#0d3b8c; }
#jsp_inquiry .jsp-summary__detail { font-size:13px; line-height:1.55; color:#5b6472; text-wrap:pretty; }
#jsp_inquiry .jsp-summary__spec { border-top:1px solid #dbe2ee; padding-top:16px; display:flex; flex-direction:column; gap:14px; }
#jsp_inquiry .jsp-summary__spec-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#jsp_inquiry .jsp-btn-link { padding:0; border:0; background:none; font-size:13px; font-weight:500; color:#0d3b8c; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
#jsp_inquiry .jsp-summary__common { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:10px 24px; }
#jsp_inquiry .jsp-kv { display:flex; flex-direction:column; gap:2px; min-width:0; }
#jsp_inquiry .jsp-kv__val { font-size:14px; font-weight:500; color:#1f2733; overflow-wrap:anywhere; }
#jsp_inquiry .jsp-summary__sections { display:grid; gap:14px 24px; }
#jsp_inquiry .jsp-summary__section { display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid #dbe2ee; min-width:0; }
#jsp_inquiry .jsp-summary__section-title { font-size:12px; font-weight:600; color:#6b7382; }
#jsp_inquiry .jsp-kv-row { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:baseline; }
#jsp_inquiry .jsp-fields { margin-top:36px; display:flex; flex-direction:column; gap:24px; }
#jsp_inquiry .jsp-fieldrow { display:flex; flex-wrap:wrap; gap:24px 32px; }
#jsp_inquiry .jsp-field--wide { flex:58 1 300px; min-width:0; display:flex; flex-direction:column; gap:8px; font-weight:600; font-size:15px; color:#111; }
#jsp_inquiry .jsp-label-text { display:flex; gap:4px; }
#jsp_inquiry .jsp-input { height:52px; padding:0 18px; border:1px solid #d5d9e0; border-radius:8px; font-size:14px; font-weight:400; color:#111; outline:none; min-width:0; }
#jsp_inquiry .jsp-field--narrow { flex:42 1 220px; min-width:0; display:flex; flex-direction:column; gap:8px; font-weight:600; font-size:15px; color:#111; }
#jsp_inquiry .jsp-field { display:flex; flex-direction:column; gap:8px; font-weight:600; font-size:15px; color:#111; }
#jsp_inquiry .jsp-textarea { min-height:180px; padding:16px 18px; border:1px solid #d5d9e0; border-radius:8px; font-size:14px; font-weight:400; color:#111; line-height:1.6; resize:vertical; outline:none; }
#jsp_inquiry .jsp-agree { margin-top:28px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 14px; font-size:14px; line-height:1.5; }
#jsp_inquiry .jsp-agree__label { display:flex; align-items:flex-start; gap:10px; color:#111; cursor:pointer; }
#jsp_inquiry .jsp-checkbox { width:18px; height:18px; accent-color:#0d3b8c; margin:1px 0 0; flex-shrink:0; }
#jsp_inquiry .jsp-agree__note { font-size:13px; color:#7a818c; }
#jsp_inquiry .jsp-btn-textlink { padding:0; border:0; background:none; font-size:14px; font-weight:500; color:#0d3b8c; cursor:pointer; text-decoration:none; line-height:1.5; }
#jsp_inquiry .jsp-modal { position:fixed; inset:0; z-index:100; background:rgba(17,24,39,0.5); display:flex; align-items:center; justify-content:center; padding:16px; }
#jsp_inquiry .jsp-modal__box { width:100%; max-width:680px; max-height:min(80vh,calc(100vh - 32px)); background:#fff; border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,0.18); display:flex; flex-direction:column; overflow:hidden; }
#jsp_inquiry .jsp-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 24px 18px; border-bottom:1px solid #e3e6eb; }
#jsp_inquiry .jsp-modal__title { margin:0; font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; line-height:1.4; color:#111; padding-right:8px; }
#jsp_inquiry .jsp-modal__close { flex-shrink:0; width:32px; height:32px; margin:-6px -8px 0 0; padding:0; border:0; background:none; color:#6b7382; font-size:22px; line-height:1; cursor:pointer; border-radius:6px; }
#jsp_inquiry .jsp-modal__body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:24px; font-size:14px; line-height:1.7; }
#jsp_inquiry .jsp-modal__item { display:flex; flex-direction:column; gap:6px; }
#jsp_inquiry .jsp-modal__item-title { font-weight:600; font-size:15px; color:#111; }
#jsp_inquiry .jsp-modal__item-desc { color:#8a919c; }
#jsp_inquiry .jsp-modal__foot { display:flex; justify-content:flex-end; padding:16px 24px; border-top:1px solid #e3e6eb; background:#fff; }
#jsp_inquiry .jsp-btn-close { height:44px; padding:0 28px; border-radius:999px; border:1px solid #cfd4dc; background:#fff; color:#333; font-size:14px; font-weight:600; cursor:pointer; transition:border-color .15s,color .15s; }
#jsp_inquiry .jsp-error { margin:14px 0 0; font-size:13px; color:#d8232a; }
#jsp_inquiry .jsp-submit-wrap { margin-top:32px; }
#jsp_inquiry .jsp-btn-submit { height:50px; padding:0 30px; border-radius:999px; border:0; background:#0d3b8c; color:#fff; font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; cursor:pointer; }

/* ---- hover / focus ---- */
#jsp_inquiry .jsp-btn-reset:hover { border-color:#0d3b8c; color:#0d3b8c; }
#jsp_inquiry .jsp-btn-search:hover { background:#0b3376; }
#jsp_inquiry .jsp-input:focus { border-color:#0d3b8c; }
#jsp_inquiry .jsp-textarea:focus { border-color:#0d3b8c; }
#jsp_inquiry .jsp-btn-textlink:hover { text-decoration:underline; }
#jsp_inquiry .jsp-modal__close:hover { color:#111; background:#f4f6fa; }
#jsp_inquiry .jsp-btn-close:hover { border-color:#0d3b8c; color:#0d3b8c; }

/* ---- 사양 행 레이아웃 ----
 * 포트 행만 [select | 구분선 | 위치 pill] 3열 그리드, 나머지는 단순 flex.
 * 섹션이 2개 이상이면(Tandem 이상) 맨 앞에 "Section N" 라벨 열이 붙는다. */
#jsp_inquiry .jsp-loaderror { margin: 0 0 20px; padding: 14px 18px; border-radius: 8px; background: #fdf2f1; color: #c0392b; font-size: 14px; }
#jsp_inquiry .jsp-spec__line { display: flex; gap: 10px; }
#jsp_inquiry .jsp-select { width: 240px; }
#jsp_inquiry .jsp-spec__line--port { display: grid; grid-template-columns: minmax(140px,240px) 1px minmax(0,1fr); gap: 10px 14px; }
#jsp_inquiry .jsp-spec__line--port-sec { grid-template-columns: auto minmax(140px,240px) 1px minmax(0,1fr); }
#jsp_inquiry .jsp-spec__line--port .jsp-select { width: 100%; }

/* ---- 반응형 ----
 * 콘텐츠 폭이 ~770px 아래로 내려가면 포트 행의 SIDE/REAR/N/A 가 줄바꿈되면서
 * 세로로 3줄이 된다. 그 전에 select 와 pill 을 위아래로 분리한다. */
@media (max-width: 900px) {
  #jsp_inquiry .jsp-spec__line--port,
  #jsp_inquiry .jsp-spec__line--port-sec { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #jsp_inquiry .jsp-spec__line--port .jsp-divider { display: none; }
  #jsp_inquiry .jsp-spec__line--port .jsp-select { max-width: 320px; }
}

/* 라벨 열을 유지할 폭이 안 나오면 행 전체를 위아래로 쌓는다 */
@media (max-width: 640px) {
  #jsp_inquiry .jsp-section { padding: 56px 16px 90px; }
  #jsp_inquiry .jsp-spec__row { grid-template-columns: minmax(0,1fr); }
  #jsp_inquiry .jsp-spec__label { border-right: 0; border-bottom: 1px solid #e3e6eb; padding: 14px 16px; }
  #jsp_inquiry .jsp-select { width: 100%; }
  #jsp_inquiry .jsp-spec__line--port .jsp-select { max-width: none; }
  #jsp_inquiry .jsp-intro { margin-bottom: 40px; }
  #jsp_inquiry .jsp-block { margin-top: 64px; }
}