/* 파일 이름 규칙 만들기 — 카드 폭(컨테이너) 기준: 좁으면(폰) 위에서 아래로 쌓기, 넓으면 칸을 한 줄·두 칸으로 */
[data-app="file-namer"]{ container-type:inline-size; display:flex; flex-direction:column; gap:12px; }
[data-app="file-namer"] .ndt-in{ max-width:100%; }
[data-app="file-namer"] .fn-h{ margin:0; font-size:15.5px; font-weight:900; letter-spacing:-.02em; color:#1A1A1A; }
[data-app="file-namer"] .ndt-k small{ font-weight:600; color:#6B717B; }
[data-app="file-namer"] fieldset{ margin:0; padding:0; border:0; min-width:0; }
[data-app="file-namer"] legend{ padding:0; }
[data-app="file-namer"] .fn-ex{ display:flex; align-items:flex-start; gap:8px; margin:0; padding:8px 10px; border-radius:10px; background:#FFF7E0; color:#5C4300; font-size:13px; line-height:1.5; }
[data-app="file-namer"] .fn-ex b{ flex:none; padding:0 7px; border-radius:6px; background:#F5C84C; color:#3A2A00; font-size:12px; line-height:20px; }
/* 이름 조각 색: 날짜 파랑 · 버전 주황 · 작성자 보라 · 나머지 검정 */
[data-app="file-namer"] .fn-p-date{ color:#1D4ED8; }
[data-app="file-namer"] .fn-p-ver{ color:#B45309; }
[data-app="file-namer"] .fn-p-author{ color:#7E22CE; }
[data-app="file-namer"] .fn-s, [data-app="file-namer"] .fn-x{ font-style:normal; color:#8A8F98; font-weight:600; }

/* ── 새 이름 만들기 ── */
[data-app="file-namer"] .fn-make{ display:flex; flex-direction:column; gap:10px; padding:12px; border:1.5px solid #C9D7F5; border-radius:14px; background:#F6F9FF; }
[data-app="file-namer"] .fn-hd{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
[data-app="file-namer"] .fn-rule{ display:flex; flex-wrap:wrap; align-items:center; gap:3px; margin:0; font-size:12.5px; }
[data-app="file-namer"] .fn-rk{ margin-right:4px; font-weight:800; color:#4B5059; }
[data-app="file-namer"] .fn-pill{ padding:1px 8px; border-radius:999px; background:#fff; border:1px solid #DCE3F2; font-weight:800; color:#1A1A1A; white-space:nowrap; }
[data-app="file-namer"] .fn-pill.fn-p-date{ color:#1D4ED8; border-color:#BFD0F7; }
[data-app="file-namer"] .fn-pill.fn-p-ver{ color:#B45309; border-color:#F3D3AE; }
[data-app="file-namer"] .fn-pill.fn-p-author{ color:#7E22CE; border-color:#E2CDF5; }
[data-app="file-namer"] .fn-mfs{ display:flex; flex-wrap:wrap; gap:8px; }
[data-app="file-namer"] .fn-mf{ display:flex; flex-direction:column; gap:3px; flex:1 1 100%; min-width:0; }
[data-app="file-namer"] .fn-mf[data-k="date"], [data-app="file-namer"] .fn-mf[data-k="ver"]{ flex:1 1 140px; }
[data-app="file-namer"] .fn-inrow{ display:flex; gap:4px; align-items:center; min-width:0; }
[data-app="file-namer"] .fn-inrow .ndt-in{ flex:1 1 auto; min-width:0; background:#fff; }
[data-app="file-namer"] .fn-mf > .ndt-in{ background:#fff; }
[data-app="file-namer"] .fn-inrow .ndt-btn{ flex:none; min-height:40px; }
[data-app="file-namer"] .fn-vrow .ndt-btn{ width:40px; padding:0; font-size:17px; }
[data-app="file-namer"] .fn-vin{ text-align:center; font-variant-numeric:tabular-nums; font-weight:800; }
[data-app="file-namer"] input[type="date"].ndt-in{ min-width:0; }
[data-app="file-namer"] .fn-exts{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
[data-app="file-namer"] .fn-ext{ min-height:36px; min-width:46px; padding:0 10px; border:1px solid #D9DCE1; border-radius:999px; background:#fff; color:#3A3F47; font-size:13.5px; font-weight:700; cursor:pointer; }
[data-app="file-namer"] .fn-ext[aria-pressed="true"]{ background:#1A1A1A; border-color:#1A1A1A; color:#fff; }
[data-app="file-namer"] .fn-extc{ flex:0 1 110px; min-height:36px; background:#fff; }
[data-app="file-namer"] .fn-out{ display:flex; flex-direction:column; gap:8px; }
[data-app="file-namer"] .fn-name{ padding:12px 14px; border-radius:12px; background:#fff; border:1.5px solid #9DB5EA; font-size:19px; font-weight:800; line-height:1.35; letter-spacing:-.01em; color:#1A1A1A; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
[data-app="file-namer"] .fn-empty{ font-size:14px; font-weight:600; color:#8A8F98; }
[data-app="file-namer"] .fn-acts{ display:flex; flex-wrap:wrap; gap:6px; }
[data-app="file-namer"] .fn-acts .ndt-btn{ flex:1 1 140px; }
[data-app="file-namer"] .fn-mnote{ margin:0; font-size:12.5px; line-height:1.5; color:#4B5059; }
[data-app="file-namer"] .fn-mnote:empty{ display:none; }
[data-app="file-namer"] .fn-w{ color:#B42318; font-weight:800; }
[data-app="file-namer"] .fn-msg{ margin:0; font-size:13px; font-weight:700; color:#13703F; }
[data-app="file-namer"] .fn-msg:empty{ display:none; }

/* ── 규칙 · 공지 ── */
[data-app="file-namer"] .fn-two{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
[data-app="file-namer"] .fn-box{ display:flex; flex-direction:column; gap:9px; min-width:0; padding:12px; border:1px solid #E6E7EB; border-radius:14px; background:#fff; }
[data-app="file-namer"] .fn-box > p{ margin:0; }
[data-app="file-namer"] .fn-order{ list-style:none; margin:-4px 0 0; padding:0; display:flex; flex-direction:column; gap:3px; }
[data-app="file-namer"] .fn-oi{ display:grid; grid-template-columns:minmax(0,1fr) auto 32px 32px; align-items:center; gap:4px; padding:2px 4px 2px 8px; border-radius:10px; background:#F5F6F8; }
[data-app="file-namer"] .fn-oi.off{ background:#fff; outline:1px dashed #D9DCE1; outline-offset:-1px; }
[data-app="file-namer"] .fn-oi.off .fn-ochk span, [data-app="file-namer"] .fn-oi.off .fn-oex{ color:#9AA0A8; }
[data-app="file-namer"] .fn-oi.off .fn-oex{ text-decoration:line-through; }
[data-app="file-namer"] .fn-ochk{ display:flex; align-items:center; gap:8px; min-height:40px; min-width:0; font-size:14px; font-weight:800; color:#1A1A1A; cursor:pointer; }
[data-app="file-namer"] .fn-ochk input{ flex:none; width:18px; height:18px; margin:0; accent-color:#1A1A1A; }
[data-app="file-namer"] .fn-oex{ max-width:9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:700; }
[data-app="file-namer"] .fn-oex:not(.fn-p-date):not(.fn-p-ver):not(.fn-p-author){ color:#6B717B; }
[data-app="file-namer"] .fn-mv{ width:32px; padding:0; color:#6B717B; }
[data-app="file-namer"] .fn-mv:disabled{ opacity:.25; }
[data-app="file-namer"] .fn-seg{ display:flex; flex-direction:column; gap:4px; }
[data-app="file-namer"] .fn-segs{ display:flex; gap:4px; }
[data-app="file-namer"] .fn-segs label{ flex:1 1 auto; min-width:0; position:relative; }
[data-app="file-namer"] .fn-segs input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
[data-app="file-namer"] .fn-segs span{ display:flex; align-items:center; justify-content:center; min-height:40px; padding:2px 6px; border:1px solid #D9DCE1; border-radius:10px; background:#fff; color:#3A3F47; font-size:13.5px; font-weight:800; text-align:center; line-height:1.2; cursor:pointer; white-space:nowrap; font-variant-numeric:tabular-nums; }
[data-app="file-namer"] .fn-segs input:checked + span{ background:#1A1A1A; border-color:#1A1A1A; color:#fff; }
[data-app="file-namer"] .fn-segs input:focus-visible + span{ outline:3px solid #93B4F5; outline-offset:2px; }
[data-app="file-namer"] .fn-rhint{ line-height:1.5; }
[data-app="file-namer"] .fn-nhd{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; }
[data-app="file-namer"] .fn-ndet summary{ cursor:pointer; min-height:36px; display:flex; align-items:center; font-size:13px; font-weight:800; color:#314B86; }
[data-app="file-namer"] .fn-npre{ margin:4px 0 0; padding:10px 12px; border:1px solid #E6E7EB; border-radius:10px; background:#FAFBFC; white-space:pre-wrap; overflow-wrap:anywhere; word-break:keep-all; font:inherit; font-size:12.5px; line-height:1.65; color:#333; }

/* ── 있는 이름 고치기 ── */
[data-app="file-namer"] .fn-only{ display:block; padding:7px 10px; border-radius:10px; background:#EEF4FF; color:#1E3A8A; font-size:12.5px; line-height:1.5; }
[data-app="file-namer"] .fn-only b{ font-weight:900; }
[data-app="file-namer"] .fn-fin{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
[data-app="file-namer"] .fn-taw{ display:flex; flex-direction:column; gap:3px; min-width:0; }
[data-app="file-namer"] .fn-tahd{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
[data-app="file-namer"] textarea.ndt-in.fn-ta{ min-height:132px; font-size:13.5px; line-height:1.55; }
[data-app="file-namer"] .fn-fopts{ display:flex; flex-direction:column; gap:8px; min-width:0; }
[data-app="file-namer"] .fn-fo{ display:flex; flex-direction:column; gap:3px; min-width:0; }
[data-app="file-namer"] .fn-fsum{ font-size:13px; color:#4B5059; }
[data-app="file-namer"] .fn-fsum b{ color:#1A1A1A; }
[data-app="file-namer"] .fn-unsure{ padding:7px 10px; border-radius:10px; background:#FFF4E5; color:#7A3E00; font-size:12.5px; font-weight:700; line-height:1.5; }
[data-app="file-namer"] .fn-rows{ list-style:none; margin:0; padding:0; border-top:1px solid #E9EBEF; }
[data-app="file-namer"] .fn-rows:empty{ display:none; }
[data-app="file-namer"] .fn-r{ display:grid; grid-template-columns:20px minmax(0,1fr) 68px; grid-template-areas:"n old mv" ". new mv" ". chips chips"; gap:2px 6px; align-items:start; padding:8px 0; border-bottom:1px solid #E9EBEF; }
[data-app="file-namer"] .fn-r.is-bad{ background:#FEF6F5; }
[data-app="file-namer"] .fn-rn{ grid-area:n; padding-top:1px; font-size:12px; font-weight:800; color:#8A8F98; text-align:center; font-variant-numeric:tabular-nums; }
[data-app="file-namer"] .fn-old{ grid-area:old; min-width:0; font-size:12.5px; color:#6B717B; overflow-wrap:anywhere; }
[data-app="file-namer"] .fn-arr{ display:none; }
[data-app="file-namer"] .fn-new{ grid-area:new; min-width:0; font-size:14px; font-weight:800; color:#1A1A1A; overflow-wrap:anywhere; }
[data-app="file-namer"] .fn-new::before{ content:'→ '; color:#8A8F98; font-weight:700; }
[data-app="file-namer"] .fn-chips{ grid-area:chips; display:flex; flex-wrap:wrap; gap:3px; min-width:0; }
[data-app="file-namer"] .fn-chips:empty{ display:none; }
[data-app="file-namer"] .fn-c{ padding:0 7px; border-radius:6px; font-size:11.5px; font-weight:800; line-height:20px; white-space:nowrap; }
[data-app="file-namer"] .fn-c.ok{ background:#E7F6EC; color:#13703F; }
[data-app="file-namer"] .fn-c.warn{ background:#FFF0DB; color:#8A4B00; }
[data-app="file-namer"] .fn-c.bad{ background:#FDE7E5; color:#B42318; }
[data-app="file-namer"] .fn-c.info{ background:#EEF0F3; color:#4B5059; }
[data-app="file-namer"] .fn-rmv{ grid-area:mv; display:flex; gap:4px; justify-content:flex-end; }
[data-app="file-namer"] .fn-rmv .ndt-btn{ width:32px; padding:0; color:#6B717B; }
[data-app="file-namer"] .fn-rmv .ndt-btn:disabled{ opacity:.25; }
[data-app="file-namer"] .fn-facts .ndt-btn{ flex:1 1 150px; white-space:normal; text-align:center; }
[data-app="file-namer"] .fn-sort{ display:flex; flex-direction:column; gap:6px; }
[data-app="file-namer"] .fn-sort > p{ margin:0; }
[data-app="file-namer"] .fn-sorts{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
[data-app="file-namer"] .fn-sc{ min-width:0; padding:8px 10px; border-radius:10px; background:#F5F6F8; }
[data-app="file-namer"] .fn-scn{ background:#F0F6FF; }
[data-app="file-namer"] .fn-sh{ margin:0 0 4px; font-size:12px; font-weight:900; color:#6B717B; }
[data-app="file-namer"] .fn-scn .fn-sh{ color:#1D4ED8; }
[data-app="file-namer"] .fn-sc ol{ margin:0; padding-left:1.6em; display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:1.45; color:#3A3F47; }
[data-app="file-namer"] .fn-sc li{ overflow-wrap:anywhere; }
[data-app="file-namer"] .fn-scn li{ font-weight:700; color:#1A1A1A; }
[data-app="file-namer"] .fn-sc li::marker{ color:#9AA0A8; font-size:12px; }

/* ── 아래 ── */
[data-app="file-namer"] .fn-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
[data-app="file-namer"] .fn-save{ margin:0; flex:1 1 220px; }
[data-app="file-namer"] .fn-save.fn-warn{ padding:8px 10px; border-radius:10px; background:#FEF3F2; color:#912018; font-size:13px; font-weight:700; }
[data-app="file-namer"] .fn-foot .fn-msg{ flex:1 1 100%; }

/* 좁은 카드(폰): 날짜 모양 단추 글자가 쪼개지지 않게 */
@container (max-width:340px){
  [data-app="file-namer"] .fn-segs span{ padding:2px 4px; font-size:13px; letter-spacing:-.01em; }
}
/* 폰·태블릿(손가락): 입력 글자 16px — 누를 때 화면이 확대되지 않게 */
@media (pointer:coarse){
  [data-app="file-namer"] .ndt-in, [data-app="file-namer"] textarea.ndt-in.fn-ta{ font-size:16px; }
}
/* 넓은 카드: 입력 칸 한 줄 · 규칙·공지 두 칸 · 고치기 표 한 줄 */
@container (min-width:620px){
  [data-app="file-namer"] .fn-make{ padding:14px 16px; }
  [data-app="file-namer"] .fn-mf{ flex:1 1 150px; }
  [data-app="file-namer"] .fn-mf[data-k="date"]{ flex:0 1 220px; }
  [data-app="file-namer"] .fn-mf[data-k="ver"]{ flex:0 1 150px; }
  [data-app="file-namer"] .fn-out{ flex-direction:row; align-items:stretch; }
  [data-app="file-namer"] .fn-name{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; font-size:24px; }
  [data-app="file-namer"] .fn-acts{ flex:0 0 170px; flex-direction:column; }
  [data-app="file-namer"] .fn-acts .ndt-btn{ flex:1 1 auto; }
  [data-app="file-namer"] .fn-two{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  [data-app="file-namer"] .fn-fin{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; }
  [data-app="file-namer"] .fn-sorts{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  [data-app="file-namer"] .fn-facts .ndt-btn{ flex:0 1 auto; }
  [data-app="file-namer"] .fn-r{ grid-template-columns:24px minmax(0,1fr) 18px minmax(0,1.25fr) 68px; grid-template-areas:"n old arr new mv" ". chips chips chips ."; align-items:center; gap:3px 8px; padding:7px 0; }
  [data-app="file-namer"] .fn-arr{ display:block; grid-area:arr; color:#8A8F98; font-weight:800; text-align:center; }
  [data-app="file-namer"] .fn-new::before{ content:none; }
  [data-app="file-namer"] .fn-rn{ padding-top:0; }
}