/*!
 * JJ-basic — write.custom.css
 * (c) 2025-2026 JEILJOA — https://jeiljoa.com
 * Free use with attribution. DO NOT REMOVE THIS NOTICE.
 * 
 * 컬러 변수는 jjtheme.css의 :root 변수를 사용
 */

/* ==========================================================================
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:var(--white); 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:var(--brand); }
#bo_w .icon-btn:hover i{ color:var(--brand-d); }

/* ==========================================================================
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:var(--white); 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) / 모바일에서는 2열 유지하되 각 행은 전체 너비
========================================================================== */
#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; }

/* 모바일: 2열 유지하되, 이름/비밀번호와 전화번호는 전체 너비 사용 */
@media (max-width: 767px) { 
    #bo_w .bo_w_info { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }
    
    /* 이름/비밀번호 행: 전체 너비 */
    #bo_w .bo_w_info .name-pw-row {
        grid-column: span 2;
        flex-direction: row !important;
    }
    
    /* 전화번호 행: 전체 너비 */
    #bo_w .bo_w_info .phone-row {
        grid-column: span 2;
    }
    
    /* 이름과 비밀번호 필드가 1:1 비율로 */
    .write_div .name-field,
    .write_div .pw-field {
        flex: 1;
    }
}

/* ==========================================================================
F. 캡챠 (공통 클래스 .captcha-container 사용, style.css에 정의)
========================================================================== */
/* 원글 캡챠 영역 - 추가 스타일 최소화 (공통은 style.css에서 관리) */
#bo_w .write_div .captcha,
#bo_w .write_div #captcha,
#bo_w .write_div fieldset.captcha {
    margin: 0;
}

/* 원글 캡챠 내부 버튼 텍스트 스크린리더 전용화 */
#bo_w .write_div #captcha_reload span,
#bo_w .write_div #captcha_mp3 span {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    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%; }

/* ==========================================================================
I. 카테고리 + 옵션 체크박스 같은 행
========================================================================== */
#bo_w .bo_w_cate_opt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#bo_w .bo_w_cate_opt select {
  width: auto !important;
  min-width: 200px;
  max-width: 100%;
  flex-shrink: 0;
  /* frm_input 수준 디자인 */
  height: 40px;
  padding: 0 28px 0 10px;
  border: 1px solid #d0d3db;
  border-radius: 3px;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  -webkit-appearance: none;
  font-size: 0.92rem;
  color: var(--txt);
  cursor: pointer;
  box-sizing: border-box;
}
#bo_w .bo_w_cate_opt select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(44, 95, 138, 0.15);
}

#bo_w .bo_w_cate_opt .bo_v_option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
J. 이름/비밀번호 및 전화번호 필드 스타일
========================================================================== */
/* ===== 이름/비밀번호 가로 배치 ===== */
.write_div .name-pw-row {
    display: flex;
    gap: 10px;
    margin-bottom: 0px !important;
}

/* 아주 작은 기기(480px 이하)에서만 세로 배치 */
@media (max-width: 480px) {
    .write_div .name-pw-row {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }
}

.write_div .name-field,
.write_div .pw-field {
    flex: 1;
}

/* ===== 전화번호 줄 ===== */
.write_div .phone-row {
    display: flex;
    flex-direction: column;
}

/* 라벨 숨기지 않고 깔끔하게 (sound_only가 아닌 경우를 대비) */
.write_div .phone-row label {
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: normal;
    color: #555;
}

/* ===== 모든 인풋 높이 통일 ===== */
.write_div .full_input,
.write_div .frm_input {
    height: 45px;
    box-sizing: border-box;
    width: 100%;
}

/* ===== 아이콘과 인풋 수직 정렬 ===== */
.write_div .icon-input {
    display: flex;
    align-items: center;
}

.write_div .icon-input .icon-left {
    position: relative;
    left: 30px;
    z-index: 1;
}

.write_div .icon-input .with-icon {
    padding-left: 35px;
}


/* ===== 내용 입력창 높이 증가 ===== */
#bo_w .wr_content textarea {
    min-height: 250px;
}