@charset "utf-8";
/* ============================================================================
   apmedia 게시판 폼 공통 컴포넌트 (단일 소스 — 7개 board 스킨 공유)
     · .apmedia-fopt  원형 옵션 체크박스(공지/HTML/비밀/메일) : 제목 앞 배치
                      미러링 원본 = skin/board/ap_story/style.css L622~627 vradio
                      (은은한 링 + 체크 시 안쪽 포인트컬러 정원 scale+opacity fade)
     · .apmedia-fatt  글쓰기 첨부 박스 그리드(썸네일/아이콘 · 개별 삭제·교체 · 10개 상한)
     · .apmedia-vatt  보기 첨부 박스 그리드(이미지=미리보기 / 일반=아이콘박스 · 파일명 ellipsis)
   게이트 준수: grid 0 / aspect-ratio 0 / max·min-width 0 / inline style 0 /
     색·시간 전부 토큰 var() / 자식 %·px 0 / img 부모 div wrap / 클래스 apmedia- prefix
   테마 대응: --text-color / --border-color 계열 토큰 사용 → 라이트·다크 자동 전환
   ========================================================================== */

/* ───────────────────── 원형 옵션 (T1) ───────────────────── */
.apmedia-fopt {
    --fopt-mark: 1.25rem;
    --fopt-dot: 0.75rem;
    --fopt-pad-y: clamp(0.4rem, 0.6vw, 0.55rem);
    --fopt-pad-x: clamp(0.7rem, 1vw, 0.95rem);
    --fopt-gap: clamp(0.4rem, 0.8vw, 0.75rem);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--fopt-gap); margin: 0; padding: 0; list-style: none;
}
.apmedia-fopt-item { position: relative; margin: 0; padding: 0; }
.apmedia-fopt-label { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--fopt-pad-y) var(--fopt-pad-x); border: var(--line-thin) solid var(--border-color); border-radius: var(--radius-pill); color: var(--text-color-secondary); line-height: 1; cursor: pointer; user-select: none; transition: color var(--dur-snap) var(--ease-cta), background var(--dur-snap) var(--ease-cta), border-color var(--dur-snap) var(--ease-cta); }
.apmedia-fopt-label:hover { color: var(--text-color); border-color: var(--border-color-strong); background: var(--background-color-secondary); }
.apmedia-fopt-mark { position: relative; flex: 0 0 auto; width: var(--fopt-mark); height: var(--fopt-mark); border: var(--line-thin) solid var(--border-color-strong); border-radius: var(--radius-pill); transition: border-color var(--dur-snap) var(--ease-cta); }
.apmedia-fopt-mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--fopt-dot); height: var(--fopt-dot); border-radius: var(--radius-pill); background: var(--signature-color); transform: translate(-50%, -50%) scale(0.2); opacity: 0; transition: transform var(--dur-base) var(--ease-cta), opacity var(--dur-base) var(--ease-cta); }
.apmedia-fopt-ic { display: inline-flex; flex: 0 0 auto; width: var(--size-icon-md); height: var(--size-icon-md); }
.apmedia-fopt-input:checked + .apmedia-fopt-label { color: var(--signature-color); border-color: var(--signature-color-20); background: var(--signature-color-08); }
.apmedia-fopt-input:checked + .apmedia-fopt-label .apmedia-fopt-mark { border-color: var(--signature-color); }
.apmedia-fopt-input:checked + .apmedia-fopt-label .apmedia-fopt-mark::after { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.apmedia-fopt-input:focus-visible + .apmedia-fopt-label { outline: var(--line-mid) solid var(--signature-color); outline-offset: 2px; }
.apmedia-fopt-field { margin: var(--space-lg) 0; }
.apmedia-fopt-fieldlb { display: block; margin: 0 0 var(--space-xs); font-size: var(--fs-t-label); font-weight: 600; color: var(--text-color); }

/* ───────────────────── 글쓰기 첨부 (P1) ───────────────────── */
.apmedia-fatt {
    --fatt-box-w: clamp(8rem, 13vw, 10.5rem);
    --fatt-thumb-h: clamp(4.5rem, 7vw, 6rem);
    --fatt-gap: clamp(0.6rem, 1vw, 0.9rem);
    --fatt-pad: clamp(0.55rem, 0.9vw, 0.75rem);
    display: block; margin: var(--space-lg) 0;
}
.apmedia-fatt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: 0 0 var(--space-xs); }
.apmedia-fatt-title { font-size: var(--fs-t-label); font-weight: 600; color: var(--text-color); }
.apmedia-fatt-count { font-size: var(--fs-t-caption); color: var(--text-color-tertiary); font-variant-numeric: tabular-nums; }
.apmedia-fatt-count.apmedia-fatt-limit { color: var(--signature-color); }
.apmedia-fatt-hint { margin: 0 0 var(--space-sm); font-size: var(--fs-t-caption); line-height: var(--lh-cozy); color: var(--text-color-tertiary); }
.apmedia-fatt-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--fatt-gap); margin: 0; padding: 0; }
.apmedia-fatt-box { position: relative; width: var(--fatt-box-w); display: flex; flex-direction: column; padding: var(--fatt-pad); border: var(--line-thin) solid var(--border-color); border-radius: var(--radius-sm-md); background: var(--background-color-secondary); transition: border-color var(--dur-snap) var(--ease-cta), box-shadow var(--dur-snap) var(--ease-cta); }
.apmedia-fatt-box:hover { border-color: var(--border-color-strong); box-shadow: var(--card-shadow); }
.apmedia-fatt-box.apmedia-fatt-cut { opacity: 0.45; }
.apmedia-fatt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%; height: var(--fatt-thumb-h); border: var(--line-mid) dashed var(--border-color-strong); border-radius: var(--radius-sm); color: var(--text-color-tertiary); background: transparent; cursor: pointer; font: inherit; font-size: var(--fs-t-caption); transition: color var(--dur-snap) var(--ease-cta), border-color var(--dur-snap) var(--ease-cta), background var(--dur-snap) var(--ease-cta); }
.apmedia-fatt-empty:hover { color: var(--signature-color); border-color: var(--signature-color); background: var(--signature-color-06); }
.apmedia-fatt-plus { display: inline-flex; width: var(--size-icon-lg); height: var(--size-icon-lg); }
.apmedia-fatt-file { display: none; flex-direction: column; gap: var(--space-2xs); width: 100%; }
.apmedia-fatt-box.apmedia-fatt-full .apmedia-fatt-file { display: flex; }
.apmedia-fatt-box.apmedia-fatt-full .apmedia-fatt-empty { display: none; }
.apmedia-fatt-thumb { height: var(--fatt-thumb-h); }
.apmedia-fatt-fileic, .apmedia-vatt-fileic { display: inline-flex; width: var(--size-icon-lg); height: var(--size-icon-lg); }
.apmedia-fatt-name, .apmedia-vatt-name { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apmedia-fatt-name { font-size: var(--fs-t-caption); color: var(--text-color); }
.apmedia-fatt-box.apmedia-fatt-cut .apmedia-fatt-name { text-decoration: line-through; }
.apmedia-fatt-meta, .apmedia-vatt-meta { display: block; font-size: var(--fs-caption-sm); color: var(--text-color-tertiary); }
.apmedia-fatt-cap { margin-top: var(--space-2xs); width: 100%; padding: var(--space-2xs) var(--space-xs); border: var(--line-thin) solid var(--border-color); border-radius: var(--radius-sm); background: var(--background-color); color: var(--text-color); font: inherit; font-size: var(--fs-caption-sm); }
.apmedia-fatt-cap:focus { outline: none; border-color: var(--signature-color); }
.apmedia-fatt-remove { position: absolute; top: var(--space-2xs); right: var(--space-2xs); display: none; align-items: center; justify-content: center; width: var(--size-circle-xs); height: var(--size-circle-xs); padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-black-70); color: var(--color-white); cursor: pointer; transition: background var(--dur-snap) var(--ease-cta); }
.apmedia-fatt-remove svg { display: block; width: var(--size-icon-xs); height: var(--size-icon-xs); }
.apmedia-fatt-remove:hover { background: var(--signature-color); }
.apmedia-fatt-box.apmedia-fatt-fresh .apmedia-fatt-remove { display: inline-flex; }
.apmedia-fatt-del { display: none; align-items: center; gap: var(--space-2xs); margin-top: var(--space-2xs); cursor: pointer; user-select: none; font-size: var(--fs-caption-sm); color: var(--text-color-tertiary); transition: color var(--dur-snap) var(--ease-cta); }
.apmedia-fatt-box.apmedia-fatt-keep.apmedia-fatt-full:not(.apmedia-fatt-fresh) .apmedia-fatt-del { display: inline-flex; }
.apmedia-fatt-del:hover, .apmedia-fatt-box.apmedia-fatt-cut .apmedia-fatt-del { color: var(--signature-color); }
.apmedia-fatt-delmark { display: inline-flex; width: var(--size-icon-sm); height: var(--size-icon-sm); }
.apmedia-fatt-swap { display: none; align-self: flex-start; align-items: center; gap: var(--space-3xs); margin-top: var(--space-2xs); padding: 0; border: 0; background: transparent; color: var(--text-color-tertiary); cursor: pointer; font: inherit; font-size: var(--fs-caption-sm); transition: color var(--dur-snap) var(--ease-cta); }
.apmedia-fatt-box.apmedia-fatt-full .apmedia-fatt-swap { display: inline-flex; }
.apmedia-fatt-swap:hover { color: var(--signature-color); }
.apmedia-fatt-swapic { display: inline-flex; width: var(--size-icon-xs); height: var(--size-icon-xs); }

/* ───────────────────── 보기 첨부 (P1.5) ───────────────────── */
.apmedia-vatt {
    --vatt-box-w: clamp(11rem, 20vw, 15rem);
    --vatt-thumb-h: clamp(5rem, 8vw, 7rem);
    --vatt-gap: clamp(0.6rem, 1vw, 0.9rem);
    --vatt-pad: clamp(0.6rem, 1vw, 0.85rem);
    display: flex; flex-wrap: wrap; gap: var(--vatt-gap); margin: 0; padding: 0; list-style: none;
}
.apmedia-vatt-box { display: flex; flex-direction: column; gap: var(--space-2xs); width: var(--vatt-box-w); padding: var(--vatt-pad); border: var(--line-thin) solid var(--border-color); border-radius: var(--radius-sm-md); background: var(--background-color-secondary); color: var(--text-color); text-decoration: none; transition: border-color var(--dur-snap) var(--ease-cta), box-shadow var(--dur-snap) var(--ease-cta), transform var(--dur-snap) var(--ease-cta); }
.apmedia-vatt-box:hover { border-color: var(--signature-color-20); box-shadow: var(--card-shadow); transform: translateY(var(--lift-xs)); text-decoration: none; }
.apmedia-vatt-thumb { height: var(--vatt-thumb-h); }
.apmedia-vatt-box:hover .apmedia-vatt-thumb img { transform: scale(1.04); }
.apmedia-vatt-name { font-size: var(--fs-t-caption); font-weight: 600; color: var(--text-color); }
.apmedia-vatt-box:hover .apmedia-vatt-name { color: var(--signature-color); }

/* ───── 공통(그룹) — 썸네일 컨테이너 · 이미지 · 파일아이콘 · 확장자 배지 · 숨김 input ───── */
.apmedia-fatt-thumb, .apmedia-vatt-thumb { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-sm); background: var(--background-color-tertiary); color: var(--text-color-tertiary); }
.apmedia-fatt-thumb img, .apmedia-vatt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-tap) var(--ease-cta); }
.apmedia-fopt-ic svg, .apmedia-fatt-plus svg, .apmedia-fatt-fileic svg, .apmedia-fatt-delmark svg, .apmedia-fatt-swapic svg, .apmedia-vatt-fileic svg { display: block; width: 100%; height: 100%; }
.apmedia-fatt-ext, .apmedia-vatt-ext { position: absolute; left: var(--space-2xs); bottom: var(--space-2xs); padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-xs); background: var(--color-black-70); color: var(--color-white); font-size: var(--fs-caption-sm); line-height: 1.2; text-transform: uppercase; }
.apmedia-fopt-input, .apmedia-fatt-input, .apmedia-fatt-delchk { position: absolute; width: var(--line-thin); height: var(--line-thin); margin: 0; opacity: 0; overflow: hidden; z-index: -1; }