/* ---------------------------------------------------------------------------
 * 전시회 참가신청 — MFDS 제품 등록 폼
 *
 * 쓰이는 곳: application/views/trade/mfds/client/product/form_v.php
 *   · 고객 신청폼   /marketing/infomation/application/{ex_idx} 안의 #MfdsProduct
 *   · 관리자 모달   /resource/exhibition_apply/update/{midx} → 'MFDS CODE 제품등록'
 *
 * 2026-08-25: view 안에 있던 <style> 블록을 이리로 옮기고 크기를 줄였다.
 *   입력칸이 40px · 16px 로 전부 전체폭이라 항목 3개만 넣어도 화면을 다 먹었다.
 *   (프로젝트 규칙: CSS 는 view 에 인라인으로 두지 않는다 — CLAUDE.md)
 * ------------------------------------------------------------------------- */

.ProductForm{
    /* 모든 줄이 이 들여쓰기를 공유한다 — 입력칸이든 값이든 왼쪽 끝이 맞아야 한다.
       입력칸은 테두리 1px 을 더 먹으므로 텍스트 줄에는 그만큼을 더해준다. */
    --pf-inset: .55em;
    /* 줄 높이를 하나로 묶는다. 브라우저 기본값에 맡기면 input·select·텍스트가
       29.2 / 25.3 / 18.8px 로 제각각이라 간격이 고르지 않았다. */
    --pf-row: 2.25em;
    padding-right: 2.4em;
    font-size: .8125rem;
    line-height: 1.45;
}

/* ── 카드 한 장 = 제품 한 건 ───────────────────────────────────────────── */
.ProductForm__item{
    position: relative;
    margin-top: .4em;
    padding: .5em .6em;
    background-color: #f6f7f9;
    border: 1px solid #dfe2e8;
    border-radius: .3em;
}
.ProductForm .ProductForm__item:first-child{ margin-top: 0; }

/* 새로 입력하는 카드는 색으로 구분한다 */
.ProductForm__item.insert{
    background-color: #eef1fb;
    border-color: #c9d2ee;
}

.ProductForm__item .item{
    display: flex;
    flex-direction: column;
}
/* 입력 카드는 칸 사이를 띄우고, 저장된 카드는 줄로 나눈다 */
.ProductForm__item.insert .item,
.ProductForm__item.modify .item{ gap: .3em; }
.ProductForm__item:not(.insert):not(.modify) .item > * + *{
    border-top: 1px solid #e7e9ee;
}

/* ── 입력 요소 ────────────────────────────────────────────────────────── */
.ProductForm__item input[type="text"],
.ProductForm__item select{
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: var(--pf-row);
    margin: 0;
    padding: .32em var(--pf-inset);
    font-size: 1em;
    line-height: 1.45;
    color: #222;
    background-color: #fff;
    border: 1px solid #d3d7de;
    border-radius: .25em;
}
.ProductForm__item select{ padding-right: 1.5em; }
.ProductForm__item input[type="text"]:focus,
.ProductForm__item select:focus{
    border-color: #40427f;
    outline: none;
}

/* 저장된 카드의 읽기전용 칸은 '값'으로 읽히게 — 입력칸처럼 보이지 않는다.
   테두리를 지우는 대신 투명하게 둬야 다른 줄과 글자 시작점이 어긋나지 않는다. */
.ProductForm__item input[readonly]{
    min-height: var(--pf-row);
    padding: .32em var(--pf-inset);
    color: #333;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
}

/* ── NMPA 시판허가 번호 여부 ──────────────────────────────────────────── */
/* 위 칸들과 같은 기준선에서 시작한다 (테두리 1px 을 보정) */
.ProductForm__nmpa{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .1em .45em;
    min-height: var(--pf-row);
    box-sizing: border-box;
    padding: .32em calc(var(--pf-inset) + 1px);
}
.ProductForm__nmpa > span:first-child{
    color: #555;
    font-weight: 600;
}
.ProductForm__nmpa strong{ color: #222; }
.ProductForm__nmpa .radio{
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: 0;
}
.ProductForm__nmpa .radio label{
    display: inline-flex;
    align-items: center;
    gap: .25em;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.ProductForm__nmpa .radio input[type="radio"]{ margin: 0; }
/* 번호 입력칸은 라디오 아래 한 줄을 통째로 쓴다 */
.ProductForm__nmpaNo{
    flex: 0 0 100%;
    padding-top: .3em;
    margin-left: calc(var(--pf-inset) * -1 - 1px);
    margin-right: calc(var(--pf-inset) * -1 - 1px);
    padding-left: 0;
    padding-right: 0;
}

/* ── 오른쪽 조작 버튼 ─────────────────────────────────────────────────── */
/* 카드가 길어져도 첫 줄 옆에 붙어 있게 위로 정렬한다 */
.ProductForm__item .control{
    position: absolute;
    right: -2.4em;
    top: .5em;
    bottom: .5em;
    width: 2.4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .25em;
}
.ProductForm__item .control a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    border-radius: .25em;
    border: 1px solid #0d4a4e;
    background-color: #115D62;
    color: #fff;
}
.ProductForm__item .control a.del{
    background-color: #BE4795;
    border-color: #9a3579;
}
.ProductForm__item .control a span{
    font-size: .95em;
    line-height: 1;
}

/* ── 수정 레이어 ──────────────────────────────────────────────────────── */
/* 화면 정중앙에 띄운다. left/top 50% + translate 로 잡아서 폭이 바뀌어도
   가운데가 어긋나지 않는다 (예전에는 margin-left 를 폭의 절반으로 직접 적었다). */
.ProductForm__item.modify{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1010;
    width: 30em;
    max-width: calc(100vw - 2em);
    max-height: 82vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: .9em 1em;
    background-color: #fff;
    border: 1px solid #40427f;
    border-radius: .4em;
    box-shadow: 0 .6em 2em rgba(0, 0, 0, .28);
}
/* 무엇을 고치는 중인지 보여주는 제목줄 */
.ProductForm__modifyTitle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    margin: -.2em 0 .7em;
    padding-bottom: .5em;
    border-bottom: 1px solid #e3e5ea;
}
.ProductForm__modifyTitle span{
    font-size: 1.05em;
    font-weight: bold;
    color: #40427f;
}
.ProductForm__modifyTitle .close{
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    color: #888;
    border-radius: .25em;
}
.ProductForm__modifyTitle .close:hover{
    color: #222;
    background-color: #f0f1f4;
}

.ProductForm__item.modify .control{
    position: static;
    flex-direction: row;
    justify-content: flex-end;
    width: auto;
    margin-top: .8em;
}
.ProductForm__item.modify .control a{
    width: auto;
    height: auto;
    line-height: 1.2em;
    padding: .45em .9em;
}
.ProductForm__item.modify .control a span{ display: inline-block; }
.ProductForm__item.modify .control a .txt{ font-size: .95em; }

/* 저장 검증을 통과하지 못해도 빠져나갈 수 있어야 한다 */
.ProductForm__item.modify .control a.cancel{
    color: #444;
    background-color: #fff;
    border-color: #c8ccd4;
}
.ProductForm__item.modify .control a.cancel:hover{ background-color: #f2f3f6; }

/* 수정 중에는 뒤를 덮어 이 레이어만 만지게 한다 */
.ProductForm__blind{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .35);
    z-index: 1005;
}

/* ── 오류 표시 ────────────────────────────────────────────────────────── */
.ProductForm__notice{
    color: #e74c3c;
    font-size: .85em;
    line-height: 1.4em;
    margin-top: .5em;
}
.ProductForm__notice::before{ content: "*"; margin-right: .2em; }

.ProductForm__error{
    border: 1px solid #e74c3c !important;
    background-color: #ffeaea !important;
}

/* ── 좁은 화면 ────────────────────────────────────────────────────────── */
@media (max-width: 640px){
    .ProductForm{ padding-right: 0; }
    .ProductForm__item .control{
        position: static;
        flex-direction: row;
        justify-content: flex-end;
        width: auto;
        margin-top: .5em;
    }
}