/* =====================================================================
 * foreign-input.css — 외국어 입력 모드 UI
 * 기존 디자인 토큰/색(브랜드 #696cff, .card, .btn-primary, boxicons) 재사용.
 * 새 색/컴포넌트 체계를 만들지 않는다.
 * ===================================================================== */

/* 루트: 지원 템플릿에서만 JS가 display 를 켠다 (fragment 는 기본 숨김) */
#foreignInputRoot { margin-bottom: 1rem; }

/* --- 토글 바 (OFF 기본: 얇은 바 1줄) --- */
.fi-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(105, 108, 255, 0.25);
  border-radius: 10px;
  background: rgba(105, 108, 255, 0.06);
}
.fi-bar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #566a7f;
  white-space: nowrap;
}
.fi-bar-title i { color: #696cff; font-size: 1.15rem; }
.fi-bar-desc {
  flex: 1 1 auto;
  font-size: 0.82rem;
  color: #a1acb8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bootstrap form-switch 재사용 — 크기만 소폭 조정 */
.fi-switch { margin: 0; padding-left: 2.6em; min-height: 1.4rem; }
.fi-switch .form-check-input { width: 2.1em; height: 1.15em; cursor: pointer; }

/* --- 펼침 패널 --- */
.fi-panel {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #e4e6e8;
  border-radius: 10px;
  background: #fff;
}
.fi-panel-hint { font-size: 0.85rem; color: #697a8d; margin-bottom: 8px; }

/* 안내문 + 「테스트 템플릿」 버튼 한 줄 (2026-07-27).
   좁은 폭에서는 버튼이 아래로 내려가되(wrap), 안내문이 눌리지 않게 flex:1 min-width:0 을 준다.
   ⚠ `display:inline-flex` 는 `.btn`(core.css 가 뒤에 로드돼 순서로 이김) 때문에 클래스 하나로는
      안 먹는다 — 헤더 `.ui-dual-btn` 과 같은 함정이라 `.btn.fi-test-btn` 으로 특이도를 올린다. */
.fi-hint-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.fi-hint-row .fi-panel-hint { flex: 1 1 auto; min-width: 0; }
.btn.fi-test-btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 테스트 템플릿 1·2·3 (2026-07-28) — 한 벌 → 상황별 세 벌.
   좁은 폭에서 세 개가 한 줄에 안 들어가면 감싸 내려가되, 안내문 열은 눌리지 않는다. */
/* ⚠ `flex: 0 0 auto` 로 두면 안 된다 — 줄여지지 않아 375px 에서 3번 버튼이 패널 밖으로
     125px 삐져나갔다(D25 표준 폭 점검에서 실측). 줄어들 수 있어야 안쪽 wrap 이 작동한다. */
.fi-test-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
/* 좁은 화면: 안내문과 버튼을 아래위로 쌓아 버튼 줄에 폭을 다 준다. */
@media (max-width: 620px) {
  .fi-hint-row .fi-panel-hint { flex: 1 1 100%; }
  .fi-test-group { flex: 1 1 100%; }
}
.fi-test-group .fi-test-lead {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: #697a8d;
  white-space: nowrap;
}
.fi-test-group .btn.fi-test-btn { font-size: 0.78rem; padding: 0.22rem 0.55rem; }
/* 번호는 문구와 분리된 span(번역 대상에서 제외하기 위함) — 시각적으로는 붙어 보이게 한다. */
.fi-test-group .fi-test-num { font-weight: 600; margin-right: 4px; opacity: 0.75; }
/* 방금 넣은 시나리오 표시 */
.fi-test-which {
  font-size: 0.78rem;
  color: #5b6b7c;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 6px;
}

/* --- (D17) 자동 활성화 저장 스위치 (패널 상단, 비번 통과 후 노출) --- */
/* (2026-07-27) 모드 바 안으로 옮기면서 블록형(아래 구분선 + 12px 여백) → 인라인으로 바꾼다.
   order 4 = [제목][스위치][설명 flex:1][자동활성화] 중 맨 끝. */
.fi-autosave {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  order: 4;
}
.fi-autosave-switch { margin: 0; }
.fi-autosave-switch .form-check-input { cursor: pointer; }
.fi-autosave-switch .form-check-label { font-size: 0.83rem; font-weight: 600; color: #566a7f; cursor: pointer; }

/* --- 붙여넣기 방식 전환(전체 ↔ 항목별) 세그먼트 --- */
.fi-submode {
  display: inline-flex;
  margin-bottom: 12px;
  border: 1px solid #d9dee3;
  border-radius: 8px;
  overflow: hidden;
}
.fi-submode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 0;
  background: #fff;
  color: #697a8d;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fi-submode-btn + .fi-submode-btn { border-left: 1px solid #d9dee3; }
.fi-submode-btn:hover { color: #696cff; }
/* 활성 탭: aria-selected 로 구동(테마의 .active 클래스와 충돌 회피) */
.fi-submode-btn[aria-selected="true"] { background: #696cff; color: #fff; }
.fi-submode-btn i { font-size: 1rem; }

/* --- 항목별 붙여넣기 행 [라벨 | 입력칸 / 노트] --- */
.fi-item-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.fi-item-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "label input" "label note";
  align-items: center;
  gap: 4px 12px;
}
.fi-item-label { grid-area: label; align-self: center; margin: 0; font-size: 0.85rem; font-weight: 600; color: #566a7f; }
.fi-item-input { grid-area: input; }
.fi-item-note {
  grid-area: note;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 1em;
  font-size: 0.75rem;
  color: #a1acb8;
}
.fi-item-note.ok { color: #28c76f; }
.fi-item-note.warn { color: #b76e00; }
@media (max-width: 575px) {
  .fi-item-row { grid-template-columns: 1fr; grid-template-areas: "label" "input" "note"; }
  .fi-item-label { align-self: start; }
}

.fi-textarea {
  width: 100%;
  /* (사용자 지시 2026-07-26) "붙여넣는 텍스트 크기 인식해서 스크롤바 없이" →
     4세션의 360px **고정**을 폐기하고 내용 추종(JS autoGrow)으로 바꾼다.
     높이는 autoGrow() 가 scrollHeight 로 세팅하므로 여기서는 최소치와 스크롤 금지만 선언한다.
       - min-height 220px: 빈 상태에서도 "여기에 붙여넣는다"가 보이도록 확보한 값.
         placeholder 3줄(0.9rem·line-height 1.5 ≈ 20px/줄) + 여백 기준으로, 기존 360px 는
         빈 칸 치고 과해 화면을 낭비했다(분석 버튼이 아래로 밀림). 실입력 시에는 자동으로 늘어난다.
       - max-height 없음: 상한을 두면 그 지점부터 내부 스크롤이 생겨 지시("스크롤바 없이")와 어긋난다.
         긴 입력은 페이지 스크롤이 흡수한다.
       - resize:none: 자동 높이와 사용자 드래그가 싸우므로(줄여놔도 다음 재계산에 되돌아감) 잠근다. */
  min-height: 220px;
  resize: none;
  overflow-y: hidden;
  font-size: 0.9rem;
  line-height: 1.5;
}
/* ⚠⚠ 테마(core.css) 와의 캐스케이드 충돌 — **명시도를 올리지 않으면 위 선언이 죽는다.**
     실측 근거(PL 실브라우저 + 정적 규칙 분석 일치):
       core.css `textarea.form-control` (0,1,1)  min-height: calc(1.53em + 0.875rem + 2px) ≈ 38.95px
       core.css `.form-control`         (0,1,0)  font-size: 0.9375rem(15px) · line-height: 1.53
     `.fi-textarea` 는 (0,1,0) 이라 ① min-height 는 명시도에서 지고 ② font-size/line-height 는
     동률이지만 **테마가 나중에 로드**(foreign-input.css=3번, core.css=8번)돼 진다.
     → 결과: 빈 붙여넣기칸이 220px 가 아니라 85px 로 쪼그라들어 있었다.
     ※ 과거 360px 가 먹혔던 이유 = `height` 로 줬고 테마는 textarea 에 height 를 선언하지 않아 충돌이 없었다.
       `height`→`min-height` 로 바꾸는 순간 테마 규칙과 부딪혔다.

     해결 방법 선택 = **선택자 명시도 (0,2,1)**. `!important` 도, 로드 순서 변경도 쓰지 않는다.
       - `textarea.fi-textarea` (0,1,1) 는 테마와 **동률 + 나중 로드 패배** → 해결 안 됨.
       - `#fiInput` (1,0,0) 은 이기지만 재사용 가능한 클래스를 id 에 묶어 fragment 재사용 시 깨진다.
       - `.fi-panel .fi-textarea` (0,2,0) 도 이기지만 **조상 구조 의존** — 요소를 옮기면 조용히 깨진다.
       - `textarea.fi-textarea.form-control` (0,2,1) = 요소 **자기 클래스만으로** 성립, 구조 무관, 항상 승리.
     위 기본 블록은 그대로 둔다 → 마크업에서 form-control 이 빠지면(테마 규칙도 함께 사라짐) 기본값이 적용된다. */
textarea.fi-textarea.form-control {
  min-height: 220px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.fi-detect-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.fi-detect-label { font-size: 0.85rem; color: #697a8d; }
.fi-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(105, 108, 255, 0.12);
  color: #696cff;
}
.fi-conf-text { font-size: 0.78rem; color: #a1acb8; }
.fi-detect-row .fi-analyze-btn { margin-left: auto; }

/* --- 분류 미리보기 --- */
.fi-preview { margin-top: 14px; }
.fi-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fi-preview-title { font-weight: 600; color: #566a7f; font-size: 0.9rem; }
.fi-preview-summary { font-size: 0.8rem; color: #a1acb8; margin-left: 6px; }

/* ⚠ `overflow: hidden` 을 쓰면 안 된다 (2026-07-28 사용자 신고 "분석 드롭박스들이 짤리는데").
     그건 둥근 모서리에 행 배경이 삐져나오지 않게 하려던 것인데, **드롭박스 팝업까지 같이 잘랐다** —
     실측: 목록 아래쪽 행에서 대상 칸 메뉴(280px)가 마지막 행은 123px, 그 위 행은 84px 잘렸다.
     모서리 처리는 컨테이너가 아니라 **첫/마지막 행에 직접** 걸어 같은 모양을 유지한다
     (반지름 7px = 바깥 8px − 테두리 1px 이라야 안쪽 곡률이 맞는다). */
.fi-rows { border: 1px solid #e4e6e8; border-radius: 8px; }
.fi-rows > .fi-row:first-child { border-top-left-radius: 7px; border-top-right-radius: 7px; }
.fi-rows > .fi-row:last-child { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; }
/* ★모든 행이 **같은 격자**를 쓴다★ (2026-07-28 사용자 지적
     "칸들이 뒤죽박죽으로 글자 길이에 따라 좌우로 드롭박스들이 움직이고 있는데 고정 좀").
   원인: 행마다 `display:grid` 라 격자가 **행 단위로 따로 계산**됐다. 게다가 일반 행은 4열,
     선택형 행은 5열이라 열 경계 자체가 달랐고, 마지막 배지 열이 `auto` 라 글자 길이에 따라
     앞 열까지 밀렸다 — 실측: 대상 칸 드롭박스 x 가 **862 / 841 / 667** 세 갈래.
   해법: 열을 **고정 폭**으로 잡고 두 행 종류가 같은 5열을 공유한다. 폭이 고정이면 컨테이너가
     같은 이상 모든 행에서 같은 값으로 풀려 세로 줄이 맞는다(서브그리드 없이 성립).
     [체크][원문 1fr][대상 칸][값 선택][배지] — 일반 행은 4열이 비고 배지는 항상 5열.
   ⚠ 배지 열만 고정 px 다. 병기 ON 이면 `Trung bình` 처럼 길어지므로(실측 77px) 96px 를 주고,
     그보다 긴 것(인식됨(수동) 병기 등)은 잘리지 말고 **줄바꿈**하게 둔다 — 줄이 늘어나도
     열 경계는 안 흔들린다. */
.fi-row {
  display: grid;
  /* 열 비중 (2026-07-28 사용자 지시 "인풋값네임 부분을 줄이고 뒤에 입력되는 부분 선택한
     드롭박스 크기를 늘려"): 대상 칸 이름은 짧고 정해져 있는데 300px 를 먹고 있었고, 정작 값
     드롭박스는 220px 라 요금제명(`SKY 데이터 충분 15GB+/100분(CU)`)이 `...` 로 잘렸다.
     → 대상 칸은 **가장 긴 라벨이 딱 들어가는 고정폭**(실측 `가입자번호 / 연락받을번호` 155px
       + 화살표·여백 ≈ 215px = 안쪽 가용 172px), 남는 폭은 값 드롭박스에 몰아준다.
     (2026-07-29 그 라벨에 띄어쓰기가 들어가 147.6 → 155.1px 로 넓어졌다 — 가용 172px 안이라 폭은 그대로 둔다.)
     ⚠ fr 을 써도 정렬은 유지된다 — 모든 행이 **같은 격자·같은 컨테이너 폭**이라 같은 값으로 풀린다.
       예전 어긋남의 원인은 fr 이 아니라 행마다 열 구성이 달랐던 것이다. */
  grid-template-columns: 28px minmax(0, 1fr) 215px minmax(0, 1.35fr) 96px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.fi-row > .fi-row-check { grid-column: 1; }
.fi-row > .fi-row-raw { grid-column: 2; }
.fi-row > .fi-row-select { grid-column: 3; }
.fi-row > .fi-row-valsel { grid-column: 4; }
.fi-row > div:last-child { grid-column: 5; }   /* 신뢰도 배지 — 항상 맨 오른쪽 같은 자리 */
.fi-row + .fi-row { border-top: 1px solid #f0f1f3; }
.fi-row.fi-excluded, .fi-row.fi-blocked { background: #fafafb; }

/* (H6) 폼에 적용되지 않는 선택형 행 — 좌측 주황 막대 + 옅은 주황 배경.
   주황(#ff9f43)은 "사용자 조치 필요"에만 쓴다. 위 회색(.fi-blocked)보다 뒤에 와서 이긴다.
   ⚠ border-left 가 아니라 inset box-shadow 를 쓰는 이유: 보더는 행 폭을 3px 먹어
      그리드 열 위치가 다른 행과 어긋난다(세로 스캔이 깨진다). 그림자는 레이아웃에 영향이 없다.
   설명 문구(.fi-row-note)는 이 행에서만 진하게 — 왜 빠지는지 읽혀야 한다(기본 #a1acb8 는 대비 1.76). */
.fi-row.fi-attention { background: rgba(255, 171, 0, 0.07); box-shadow: inset 3px 0 0 0 #ff9f43; }
.fi-row.fi-attention .fi-row-note { color: #b76e00; }

/* 미할당 행 — 어느 칸에도 안 들어가는 값 (2026-07-27 사용자 지시 "좀더 진하게").
   예전에는 `(미할당)` 드롭박스 글자(#697a8d, 대비 3.7)와 설명(#a1acb8, 대비 1.76)뿐이라
   "값이 버려졌다"는 사실이 거의 안 보였다. 판매자가 놓치면 그대로 빈칸으로 인쇄된다.
   ⚠ 주황(.fi-attention)은 "사용자 조치 필요" 전용이라 쓰지 않는다 — 미할당은 조치가 아니라
     상태 표시다. 색을 새로 만들지 않고 **같은 회색 계열을 진하게** 해 대비만 올린다.
   ⚠ .cs-display 는 custom-select 위젯이라 <select> 가 아닌 이 요소에 색을 줘야 한다. */
.fi-row.fi-unassigned .fi-row-note { color: #5b6b7c; }
.fi-row.fi-unassigned .cs-display,
.fi-row.fi-unassigned .form-select { color: #4b5563; font-weight: 600; }

/* 자필기재 칸으로 들어가는 행 (2026-07-28) — 값은 정상 반영되지만 **글자로 인쇄되지 않는다**.
   ⚠ 배경·좌측 막대로 강조했다가 사용자 지시로 뺐다("그냥 회색처리로 받으면 되지").
     설명 문구만 다른 행보다 읽히게 진하게 둔다(기본 #a1acb8 는 대비 1.76 이라 안 보인다). */
.fi-row.fi-handwritten .fi-row-note { color: #5b6b7c; }

.fi-row-raw { font-size: 0.88rem; color: #384551; word-break: break-all; }
.fi-row-note { display: block; font-size: 0.74rem; color: #a1acb8; margin-top: 2px; }
.fi-row-select { min-width: 0; }
.fi-row-select .form-select { padding: 0.28rem 1.6rem 0.28rem 0.6rem; font-size: 0.82rem; }
.fi-row-check { display: flex; justify-content: center; }

/* (D16 ⑤) 선택형 후보 행: [체크][원문][대상 칸 ▾][값 선택 ▾][배지] — 값 선택 드롭박스 열 추가 */
.fi-row-valsel { min-width: 0; }
.fi-row-valsel .form-select { padding: 0.28rem 1.6rem 0.28rem 0.6rem; font-size: 0.82rem; }
@media (max-width: 700px) {
  /* 좁은 화면: 두 행 종류 **모두** 같은 방식으로 접는다.
     첫 줄 [체크][원문][배지] · 둘째 줄 [대상 칸] 전폭 · 셋째 줄 [값 선택] 전폭.
     ⚠ 자리를 명시하지 않고 grid-column: 2/-1 만 주면 자동 배치가 엉켜 **배지 트랙이 0px** 가 되고
        그 안의 inline-flex 배지가 컨테이너에 맞춰 줄어 `높음` 이 잘린다(실측 28px < 40px). */
  .fi-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .fi-row > .fi-row-check { grid-row: 1; grid-column: 1; }
  .fi-row > .fi-row-raw { grid-row: 1; grid-column: 2; }
  .fi-row > div:last-child { grid-row: 1; grid-column: 3; }
  .fi-row > .fi-row-select { grid-row: 2; grid-column: 2 / -1; margin-top: 4px; }
  .fi-row > .fi-row-valsel { grid-row: 3; grid-column: 2 / -1; margin-top: 4px; }
}

/* 신뢰도 배지 (🟢높음/🟡보통/🔴낮음) */
.fi-grade {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.74rem;
  font-weight: 600;
  /* ⚠ nowrap 이 아니다 — 배지 열은 고정 폭(96px)이라, 병기 ON 의 긴 배지를 nowrap 으로 두면
     열 밖으로 삐져나가거나 잘린다. 줄바꿈은 열 경계를 흔들지 않는다. */
  white-space: normal;
  text-align: center;
  justify-content: center;
  line-height: 1.25;
}
.fi-grade.high   { background: rgba(40, 199, 111, 0.14); color: #28c76f; }
/* (M10) 신뢰도 「보통」을 주황 → **회색**으로 바꾼다.
   주황은 이 패널에서 `사용자 조치 필요`(.fi-attention 등) 신호로 이미 쓰고 있어, 같은 색을
   신뢰도에도 쓰면 "손봐야 하는 행"과 "그냥 확신도가 보통인 행"이 구분되지 않았다.
   색 매핑 고정: 높음=초록 · 보통=회색 · 낮음=빨강 · 주황=조치 필요 전용. */
.fi-grade.medium { background: rgba(133, 146, 163, 0.16); color: #697a8d; }
.fi-grade.low    { background: rgba(234, 84, 85, 0.14);  color: #ea5455; }
.fi-grade.manual { background: rgba(105, 108, 255, 0.12); color: #696cff; }

.fi-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.fi-toast {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.83rem;
  background: rgba(40, 199, 111, 0.10);
  color: #1f9d57;
  border: 1px solid rgba(40, 199, 111, 0.25);
}
.fi-toast.warn { background: rgba(255, 171, 0, 0.10); color: #b76e00; border-color: rgba(255, 171, 0, 0.3); }

/* =====================================================================
 * (T8-TPL) 고객 안내 템플릿 서브패널 — 기존 토큰/색 재사용.
 * ===================================================================== */
.fi-tpl {
  margin-bottom: 14px;
  border: 1px solid rgba(105, 108, 255, 0.25);
  border-radius: 10px;
  background: rgba(105, 108, 255, 0.04);
  overflow: hidden;
}
.fi-tpl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.fi-tpl-head:hover { background: rgba(105, 108, 255, 0.07); }
.fi-tpl-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  color: #566a7f;
  white-space: nowrap;
}
.fi-tpl-title i { color: #696cff; font-size: 1.05rem; }
.fi-tpl-sub {
  flex: 1 1 auto;
  font-size: 0.78rem;
  color: #a1acb8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fi-tpl-caret { color: #a1acb8; transition: transform 0.18s ease; }
.fi-tpl-caret.open { transform: rotate(180deg); }

.fi-tpl-body {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(105, 108, 255, 0.15);
  background: #fff;
}
/* [언어 드롭박스] [한국어 함께 표시] 가로 한 줄. 좁은 폭에서는 줄바꿈으로 흡수(넘침 금지). */
.fi-tpl-langrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.fi-tpl-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
/* 행 안에 들어가면 세로 여백은 행이 갖는다(이중 마진 방지). */
.fi-tpl-langrow > .fi-tpl-langs { margin-bottom: 0; }
.fi-tpl-lang {
  padding: 4px 12px;
  border: 1px solid #d9dee3;
  border-radius: 14px;
  background: #fff;
  color: #697a8d;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fi-tpl-lang:hover { border-color: #696cff; color: #696cff; }
.fi-tpl-lang.active {
  background: #696cff;
  border-color: #696cff;
  color: #fff;
}
/* (D16 ⑨) 편집 가능 미리보기 — <pre> → <textarea>. 판매자가 직접 수정 후 복사.
   ⚠ 이 블록의 선언 중 테마(core.css `.form-control`)와 겹치는 것은 **전부 캐스케이드에서 진다**
     (동률 (0,1,0) + 테마가 나중 로드). 실제로 적용되는 값은 아래 (0,2,1) 블록을 봐야 한다.
     아래에서 되살리지 않기로 한 항목(font-size·border·border-radius)은 **죽은 선언을 남겨두면
     오해를 부르므로 여기서도 지웠다** — 그 세 가지는 의도적으로 테마값을 그대로 쓴다. */
.fi-tpl-preview {
  display: block;
  width: 100%;
  margin: 0;
  background: #f8f9fa;
  font-family: inherit;
  /* (사용자 지시) 스크롤 없이 **전체 확장**한다 — 높이는 JS(autoGrowTpl)가 내용에 맞춰 세팅.
   *   4세션에 확정된 동작인데 편집 가능하게 <pre>→<textarea> 로 바꾸며 고정 높이가 되돌아왔다.
   *   min-height 는 빈 상태 대비 최소치만 두고, 내부 스크롤바는 만들지 않는다. */
  min-height: 120px;
  overflow-y: hidden;
  /* (사용자 지시 2026-07-26) 수동 리사이즈 그립 제거. autoGrow 가 매 재계산마다 scrollHeight 로
     높이를 덮어쓰므로, 사용자가 줄여놔도 다음 편집/언어변경에서 되돌아가 조작이 무시되는 것처럼 보였다. */
  resize: none;
}
/* ── 템플릿 편집칸 타이포 복구 (사용자 결정 2026-07-26) ───────────────────────────────
   배경: 이 칸의 선언 6건이 테마에 져서 죽어 있었다(내가 보고 → 사용자 "되살린다").
        결정 취지는 **"20~30줄짜리 긴 글을 읽기 편하게"** 이지 옛 선언의 기계적 전량 복원이 아니다.
        그래서 6건을 하나씩 판단해 **3건만 복구**하고 3건은 테마값을 유지한다.

   ✅ 복구 3건 — '읽기 편하게' 에 직접 기여하고 다른 화면과 충돌하지 않는 것
     · line-height 1.7   : 20~30줄 본문의 줄간격. 사용자가 명시한 이유 그 자체.
                           unitless 라 폰트 크기를 건드리지 않는다(D23/N4 준수).
     · padding 12px      : 세로 여백 7px→12px. 긴 텍스트 블록의 상하 숨통.
                           polish-spec §4.3 "신규 세로 간격은 4의 배수" 를 만족(12).
     · color #384551     : 본문 대비 향상. #f8f9fa 배경 대비 **4.15:1 → 8.8:1**.
                           테마값 #697A8D 는 원래 muted(힌트)용이고, polish-spec M11 도
                           "안내문 대비를 올려라" 방향이라 본문 색을 진하게 하는 것과 일치한다.

   ⛔ 복구 안 함 3건 — 근거를 남긴다(되살리라는 지시가 오면 이 블록에 3줄 추가로 끝)
     · font-size 0.84rem : **되살리면 15px → 13.44px 로 오히려 작아진다.** "읽기 편하게" 라는
                           결정 취지와 정면으로 반대이고, D23/폴리시 N4("어떤 제안도 font-size 를
                           바꾸지 않는다 — 개선은 간격·굵기·색·계층으로만")에도 어긋난다.
                           줄간격·여백·글자색 3건만으로 가독성 목표는 달성된다.
     · border #e4e6e8    : 이 화면의 다른 입력칸 30여 개가 전부 테마 #d9dee3 이다. 이 칸만 다른
                           회색이면 "일관성 규칙"(polish-spec §4 머리말: 새 디자인 시스템을 만들지
                           않는다)에 어긋나고, 차이도 육안으로 거의 구분되지 않는다(무의미한 특수화).
     · border-radius 8px : 같은 이유. 테마 0.375rem(6px) 이 폼 전역 값이라 이 칸만 8px 면 튄다.
   ── 명시도는 앞서 확립한 (0,2,1) 패턴 그대로. !important·로드 순서 변경 없음. */
textarea.fi-tpl-preview.form-control {
  min-height: 120px;
  line-height: 1.7;
  padding: 12px;
  color: #384551;
}

/* (D21 ④) 템플릿 언어 = 칩 → 드롭박스.
   ⚠ custom-select.js 가 이 select 를 위젯(.cs-wrap/.cs-display)으로 감싸고 **네이티브를
     1px + !important 로 축소해 숨긴다**(실측 렌더 폭 2px). 그래서 폭을 `.fi-tpl-langsel`
     (=네이티브)에 줘 봐야 화면에는 아무 효과가 없다 — 실측(1440px, joytel): 위젯 적용 상태의
     `.cs-wrap` 은 **1064px**(= .cs-wrap 의 width:100% 가 먹은 패널 전폭)이었고 여기 있던
     `max-width:22rem` 은 **죽은 선언**이었다. 폭은 반드시 위젯 쪽에 준다.
   폭 15rem = 헤더 언어 드롭박스(.ui-lang-side .cs-wrap)와 동일값(사용자 확정, N6).
     "가로로 길다"의 두 갈래(위젯 상태 1064px / 네이티브 상태 352px)를 한 값으로 수렴시킨다. */
.fi-tpl-langs .cs-wrap {
  flex: 0 0 auto;      /* 부모가 flex — 기본 shrink 로 옵션 길이에 따라 흔들리지 않게 고정 */
  width: 15rem;
  max-width: 100%;     /* 375px 등 좁은 폭에서 패널을 넘치지 않게 */
}
/* 위젯이 아직/전혀 적용되지 않은 폴백(custom-select.js 는 apply-script.js 가 비동기 주입하므로
   늦거나 실패할 수 있다). 이 상태의 352px 은 **옵션 길이 때문이 아니라** 테마 `.form-select`
   의 `width:100%` 를 여기 있던 `max-width:22rem` 이 자른 값이었다 → 상한만 15rem 으로 내린다.
   ⚠ `width:15rem` 으로 주면 안 된다 — 테마 `.form-select{width:100%}` 와 명시도 동률(0,1,0)인데
     core.css 가 나중에 로드돼 테마가 이긴다(이 파일에서 min-height 가 죽었던 것과 같은 함정).
     테마가 건드리지 않는 `max-width` 는 실제로 살아 있었다(실측 352px = 22rem). */
.fi-tpl-langsel {
  max-width: 15rem;
  margin-bottom: 8px;
}

/* '한국어 함께 표시' 토글 — 시각은 헤더 토글(.ui-dual-btn, ui-i18n.css)을 재사용하고
   여기서는 **패널 고유 사정 3가지만** 얹는다.
   ① 템플릿 언어가 ko 면 비활성 — 켜짐 상태(.active)는 그대로 보이되 조작만 막는다
      (숨기면 컨트롤 줄 구성이 언어마다 달라져 레이아웃이 다시 흔들린다).
      ⚠ `.ui-dual-btn.active` 가 배경색을 갖고 있어 `:disabled` 기본 스타일만으로는 구분이
        안 된다 → opacity 로 낮춘다. 색을 새로 만들지 않는다.
   ② 줄바꿈으로 내려가도 다른 줄 요소와 붙지 않게 축소 금지.
   ③ 아이콘·글자 수직 정렬은 .ui-dual-btn(inline-flex)이 이미 처리. */
.fi-tpl-dualko {
  flex: 0 0 auto;
}
.fi-tpl-dualko:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto;   /* 비활성이어도 title(사유)이 뜨게 — 왜 못 누르는지 알려야 한다 */
}
.fi-tpl-dualko:disabled:hover {
  border-color: #d9dee3;  /* hover 강조가 "누를 수 있다"는 오해를 주지 않게 무력화 */
}
.fi-tpl-dualko.active:disabled:hover {
  background: #696cff;
  border-color: #696cff;
}

/* (D16 ⑩/⑨) 결제 포함 체크박스 + 편집 안내 */
.fi-tpl-opts {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fi-tpl-edit-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: #a1acb8;
}
.fi-tpl-edit-hint i { font-size: 0.9rem; }
/* (사용자 지시) "수정하면 자동저장" 상시 안내 — textarea 바로 아래, 액션 라인 위 독립 줄.
   저장 상태 배지(.fi-tpl-saved)는 액션 라인에 있어 겹치지 않는다. */
.fi-tpl-autosave-note {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.76rem;
  color: #a1acb8;
}
.fi-tpl-autosave-note i { font-size: 0.9rem; }
.fi-tpl-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
/* '현재 템플릿 저장' = 액션 라인 오른쪽 끝(사용자 지시). 좌측 주 행동(복사/원래대로)과 분리해 오인 클릭 방지. */
.fi-tpl-actions .fi-tpl-save { margin-left: auto; }
.fi-tpl-copied {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #28c76f;
}

/* 편집본 서버 저장 상태 표시(계정 단위). 복사 배지와 같은 톤이지만 정보성이라 약하게. */
.fi-tpl-saved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: #697a8d;
}

/* 템플릿 회신 인식 배지 (앵커 정확 매칭) */
.fi-anchor-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(105, 108, 255, 0.12);
  color: #696cff;
  vertical-align: middle;
}
.fi-anchor-badge i { font-size: 0.85rem; }

/* --- 충돌 확인 모달(자체 오버레이) --- */
.fi-conflict-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10600;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.fi-conflict-box {
  background: #fff; border-radius: 12px;
  width: 100%; max-width: 520px;
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.fi-conflict-head { padding: 14px 18px; border-bottom: 1px solid #eceef0; font-weight: 600; color: #566a7f; }
.fi-conflict-head i { color: #ff9f43; margin-right: 6px; }
.fi-conflict-body { padding: 14px 18px; overflow-y: auto; }
.fi-conflict-item { padding: 8px 0; border-bottom: 1px solid #f4f5f6; font-size: 0.86rem; }
.fi-conflict-item:last-child { border-bottom: 0; }
.fi-conflict-item .old { color: #a1acb8; text-decoration: line-through; }
.fi-conflict-item .new { color: #696cff; font-weight: 600; }
.fi-conflict-foot { padding: 12px 18px; border-top: 1px solid #eceef0; display: flex; justify-content: flex-end; gap: 8px; }

/* --- 적용 후 하이라이트 (§5.7) --- */
.foreign-filled {
  animation: fiFlash 1.5s ease-out;
}
@keyframes fiFlash {
  0%   { background-color: rgba(105, 108, 255, 0.28); }
  100% { background-color: transparent; }
}

/* (L2) 모드 스위치가 라벨에서 **888px** 떨어져 있었다(1072px 바 기준, 900px 폭에서도 669px).
   `[제목][설명 flex:1][스위치]` + space-between 이라 설명이 가운데를 다 먹고 스위치가 끝으로 밀렸다.
   → 마크업은 그대로 두고 **순서만** 바꿔 스위치를 제목 바로 옆에 붙인다(무엇을 켜는 스위치인지 눈으로 이어진다).
   ⚠ CSS order 만 쓴다 — DOM 순서를 바꾸면 탭 순서가 시각 순서와 어긋난다(접근성). */
.fi-bar-title { order: 1; }
.fi-switch    { order: 2; }
.fi-bar-desc  { order: 3; }