/*!
 * JJ-basic — write.custom.css
 * (c) 2025 JEILJOA — https://jeiljoa.com
 * Free use with attribution. DO NOT REMOVE THIS NOTICE.
 */

/* ==========================================================================
A. 유틸리티
========================================================================== */
#bo_w .sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path: inset(50%); white-space:nowrap; border:0;
}

#bo_w .icon-input{ position:relative; display:block; width:100%; }
#bo_w .icon-input .icon-left{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:#b8bdc7; font-size:14px; pointer-events:none;
}
#bo_w .with-icon{ padding-left:32px !important; }

/* ==========================================================================
B. 액션 아이콘 버튼
========================================================================== */
#bo_w .icon-btn{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #d1d5db; border-radius:8px; background:#fff; cursor:pointer;
  vertical-align:middle;
}
#bo_w .icon-btn:disabled{ opacity:.4; cursor:not-allowed; }
#bo_w .icon-btn i{ font-size:18px; line-height:1; color:#7aa2ff; }
#bo_w .icon-btn:hover i{ color:#5f86ff; }

/* ==========================================================================
C. 파일 한 행 레이아웃 (고정 슬롯)
========================================================================== */
#bo_w .file-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"file alt actions";
  align-items:center;
  gap:10px;
  margin-top:8px;
}
#bo_w .file-row.is-collapsed{ display:none; } /* 감춤만, DOM 유지 */
#bo_w .file-row .cell-file   { grid-area:file;  display:flex; align-items:center; gap:8px; min-width:0; }
#bo_w .file-row .cell-alt    { grid-area:alt;   min-width:0; display:flex; align-items:center; }
#bo_w .file-row .cell-action { grid-area:actions; display:inline-flex; align-items:center; gap:6px; justify-self:end; align-self:center; }

#bo_w .file-thumb{ width:36px; height:36px; border:1px solid #e5e7eb; object-fit:cover; border-radius:4px; display:none; }
#bo_w .old-file-name{ font-size:12px; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
#bo_w .old-file-name a{ text-decoration:underline; }
#bo_w .badge-old{ font-size:11px; padding:2px 6px; border:1px solid #e5e7eb; border-radius:12px; color:#374151; background:#f9fafb; }

/* 삭제 체크박스: 파일명 오른쪽 */
#bo_w .file-del-wrap{
  display:inline-flex; align-items:center;
  margin-left:6px;
}
#bo_w .file-del-wrap input[type="checkbox"]{
  width:14px; height:14px;
}

/* 파일 입력 숨김 */
#bo_w .file-input-hidden{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ✅ 번호 배지(사파리 안정화)
   - inline-block + 고정 line-height
   - vertical-align:middle
   - 텍스트 표시 보장 */
#bo_w .file-idx-badge{
  display:inline-block;
  height:18px; line-height:18px;
  padding:0 6px; min-width:18px; text-align:center;
  margin-left:6px; font-size:11px; font-weight:600;
  border-radius:999px; border:1px solid #d1d5db; background:#fff; color:#6b7280;
  vertical-align:middle;
  -webkit-font-smoothing: antialiased; /* 시인성 보강 */
}

/* 버튼+배지 래퍼 */
#bo_w .pick-wrap{ display:inline-flex; align-items:center; }

/* 링크 행 */
#bo_w .link-row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; margin-top:8px; }
#bo_w .link-row .col-act{ display:flex; gap:6px; align-items:center; justify-content:flex-end; }

/* ─ 모바일 레이아웃 ─ */
@media (max-width: 767px){
  #bo_w .file-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "file actions"
      "alt  alt";
  }
  #bo_w .old-file-name{ max-width:150px; }
}

/* ==========================================================================
D. 폼 요소 공통/컴팩트
========================================================================== */
#bo_w input[type="text"],
#bo_w input[type="password"],
#bo_w input[type="email"],
#bo_w input[type="url"],
#bo_w input[type="tel"],
#bo_w input[type="date"],
#bo_w .frm_input,
#bo_w textarea,
#bo_w select {
  width: 100% !important;
  box-sizing: border-box;
  font-size: 0.92rem;
}
#bo_w .icon-input{ width:100%; min-width:0; display:block; }
#bo_w .with-icon{ width:100%; }

#bo_w .file-row .cell-alt,
#bo_w .file-row .cell-file,
#bo_w .link-row > div:first-child { min-width:0; }

#bo_w .pick-btn{ height:28px; padding:0 8px; border:1px solid #cfd4dc; border-radius:4px; background:#f3f4f6; font-size:12px; }
#bo_w .pick-btn:hover{ background:#e9ebf0; }
#bo_w .icon-btn { width:28px; height:28px; border-radius:6px; }
#bo_w .icon-btn i{ font-size:16px; }

#bo_w .file-row { gap:8px; margin-top:6px; }
#bo_w .file-thumb { width:30px; height:30px; }
#bo_w .old-file-name { max-width:200px; font-size:11.5px; }
#bo_w .badge-old { font-size:10.5px; padding:1px 5px; }
#bo_w .link-row { gap:8px; margin-top:6px; }

#bo_w .btn_confirm .btn { height:40px; line-height:40px; padding:0 12px; font-size:0.95rem; }
@media (max-width: 767px){
  #bo_w .icon-btn { width:34px; height:34px; }
  #bo_w .icon-btn i { font-size:18px; }
  #bo_w .pick-btn { height:34px; padding:0 10px; }
  #bo_w .file-thumb { width:36px; height:36px; }
  #bo_w .btn_confirm .btn { height:46px; line-height:46px; }
}

/* ==========================================================================
E. 비회원 입력 2열(PC) / 1열(모바일)
========================================================================== */
#bo_w .bo_w_info{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:center;
}
#bo_w .bo_w_info .frm_input,
#bo_w .bo_w_info input,
#bo_w .bo_w_info select{
  width:100% !important; min-width:0; float:none !important; display:block; margin:0 !important;
}
#bo_w .bo_w_info .half_input{ width:100% !important; float:none !important; display:block; margin:0 !important; }
#bo_w .bo_w_info > label.sound_only{ position:absolute !important; }
#bo_w .bo_w_info .half_input:nth-child(odd),
#bo_w .bo_w_info .half_input:nth-child(even){ margin-left:0 !important; clear:none !important; }
@media (max-width:767px){ #bo_w .bo_w_info{ grid-template-columns:1fr; } }

/* ==========================================================================
F. 캡챠 1행 고정 + 안내문/버튼 텍스트 SR 전용화
========================================================================== */
#bo_w .write_div .captcha,
#bo_w .write_div #captcha,
#bo_w .write_div fieldset.captcha{
  display:flex !important; align-items:center; gap:8px; flex-wrap:nowrap; width:100%; box-sizing:border-box;
}
#bo_w .write_div .captcha img,
#bo_w .write_div #captcha img{ height:42px; width:auto; display:block; }
#bo_w .write_div .captcha input[type="text"],
#bo_w .write_div #captcha input[type="text"],
#bo_w .write_div .captcha .captcha_input,
#bo_w .write_div #captcha #captcha_key{
  height:42px; line-height:42px; padding:0 10px; flex:1 1 160px; min-width:0; box-sizing:border-box;
}
#bo_w .write_div .captcha button,
#bo_w .write_div #captcha button,
#bo_w .write_div .captcha .btn_frmline,
#bo_w .write_div #captcha .btn_frmline{
  height:42px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; flex:0 0 auto;
}
/* 안내문(#captcha_info) 화면 숨김 + SR 노출 */
#bo_w #captcha_info{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path: inset(50%); white-space:nowrap; border:0;
}

/* ==========================================================================
G. (핵심) 모바일에서만 ALT 숨김
========================================================================== */
@media (max-width:767px){
  #bo_w #fileSection[data-use-desc="0"] .file-row{
    grid-template-columns: 1fr auto;
    grid-template-areas: "file actions";
  }
  #bo_w #fileSection[data-use-desc="0"] .file-row .cell-alt{
    display:none !important;
  }
}

/* ==========================================================================
H. 모바일 입력 확대 방지
========================================================================== */
@media (max-width: 767px){
  #bo_w input[type="text"],
  #bo_w input[type="password"],
  #bo_w input[type="email"],
  #bo_w input[type="url"],
  #bo_w input[type="tel"],
  #bo_w input[type="date"],
  #bo_w textarea,
  #bo_w select{
    font-size:16px !important;
    line-height:1.4;
  }
}
html { -webkit-text-size-adjust: 100%; }