/* frontend/css/kana-pad.css — iOS かな 플릭 패드(js/korzina/kana/flick-pad.js) 전용.
   계약 ~/Desktop/control/KORZINA-KANA-INPUT.md · 정본 control/design/kana-input/ios-ref/README.md(iOS 26.3 실측).
   키보드 색은 theme.css에 없는 iOS 시스템 키보드 색이라 이 파일의 .kz-kana 범위 토큰으로만 둔다(실측 픽셀 표본).
   테마 선택자 = html[data-theme="dark"] 단일(theme.css 규칙 — prefers-color-scheme 직접 사용 금지).
   치수(pt=px): 키 47 높이 · 가로 간격 6 · 세로 간격 7 · 좌우 여백 7.7 · 키 반경 12 · 윗모서리 26 · 후보 띠 44. */
.kz-kana {
  --kz-kb-bg: #e2e4e8;
  --kz-key-bg: #ffffff;
  --kz-key-fg: #000000;
  --kz-key-down: #c9ccd2;          /* 누른 기능 키 — 실측 아님(근사) */
  --kz-fn-dim: #8e8e93;            /* → · 입력 전 ↺ */
  --kz-done: #007aff;              /* enterkeyhint=done 키(실측) */
  --kz-on-accent: #ffffff;
  /* 플릭 표시 v0.3(FLICK-UX 「확정 명세 v0.3」) */
  --kz-flick-down: #e6e6e9;        /* 누른 플릭 키(시뮬 실측, 말풍선 중에도 유지) */
  --kz-pop-bg: #ffffff;            /* 말풍선·십자 칸 — 불투명 */
  --kz-pop-out: #ffffff;           /* 말풍선 중 키 줄 위(후보 띠·패드 밖)에 걸친 부분 */
  --kz-pop-fg: #000000;
  --kz-pop-filter: none;
  --kz-cross-sel-bg: #0088ff;      /* 십자 선택 칸(실측) */
  --kz-cross-sel-fg: #ffffff;
  --kz-cross-center-bg: #0088ff;   /* 십자 가운데(선택 없을 때) — 라이트만 파랑 */
  --kz-cross-center-fg: #ffffff;
  --kz-label-dim: #737373;         /* 십자 중 다른 키 라벨(실측) — 키 채움은 그대로 */
}
html[data-theme="dark"] .kz-kana {
  --kz-kb-bg: #171717;
  --kz-key-bg: #3d3d3d;
  --kz-key-fg: #ffffff;
  --kz-key-down: #5c5c5c;
  --kz-fn-dim: #98989d;
  --kz-done: #0a84ff;              /* 다크 done 키는 미표본 — iOS 다크 systemBlue */
  --kz-flick-down: #3d3d3d;        /* 다크 = 눌림 표시 없음(실기기 기록 두 편) */
  /* 다크 말풍선·십자 = 키보다 한 단 밝은 층(실기기: 키 위 ≈#4a4a4a, 밑 키 라벨은 보이지 않음).
     키 줄 위는 불투명 #4a4a4a — 반투명(흰 0.08)은 밑 라벨·키 모양이 비친다(헤드리스 WebKit은 backdrop 흐림도 안 그림).
     키 줄 위·패드 밖으로 나간 몸통(윗줄 ↑)만 반투명 흰 층 + 흐림 → 실기기처럼 더 어둡게(≈#2a–#2e). */
  --kz-pop-bg: #4a4a4a;
  --kz-pop-out: rgba(255,255,255,0.08);
  --kz-pop-fg: #ffffff;
  --kz-pop-filter: blur(20px);
  --kz-cross-sel-bg: rgba(255,255,255,0.12);   /* 한 단 더 밝게 — 파랑 없음 */
  --kz-cross-sel-fg: #ffffff;
  --kz-cross-center-bg: transparent;
  --kz-cross-center-fg: #ffffff;
  --kz-label-dim: #a7a7a7;
}

.kz-kana {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--kz-kb-bg);
  border-radius: 26px 26px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color: var(--kz-key-fg);
  font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.kz-kana-inner { max-width: 520px; margin: 0 auto; }
.kz-kana-cand { height: 44px; }   /* 후보 막대 — iOS 입력 전처럼 빈 띠 */
.kz-kana-keys {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 47px);
  column-gap: 6px; row-gap: 7px;
  padding: 10px 7.7px 0;
}
.kz-kana-key {
  display: flex; align-items: center; justify-content: center;
  background: var(--kz-key-bg);
  border-radius: 12px;
  color: var(--kz-key-fg);
  cursor: default;
  line-height: 1;
}
.kz-kana-key svg { width: 24px; height: 24px; }
.kz-kana-key[data-key="del"] svg { width: 28px; height: 28px; stroke-width: 1.5; }
.kz-kana-key.is-down { background: var(--kz-key-down); }
.kz-kana-kana.is-down, .kz-kana-punct.is-down { background: var(--kz-flick-down); }

.kz-kana-ch { font-size: 25px; font-weight: 300; position: relative; }
.kz-kana-wa-bar { position: absolute; left: 100%; bottom: -1px; font-size: 16px; margin-left: -3px; }
.kz-kana-lbl { font-size: 16px; font-weight: 300; letter-spacing: 0.08em; }
.kz-kana-punct .kz-kana-lbl { font-size: 20px; font-weight: 300; letter-spacing: 0; font-feature-settings: "palt"; }
.kz-kana-unused .kz-kana-lbl { font-size: 17px; letter-spacing: 0; }       /* ABC */
.kz-kana-arrow { font-size: 22px; color: var(--kz-fn-dim); }
.kz-kana-key[data-key="undo"] { color: var(--kz-fn-dim); }
.kz-kana.has-text .kz-kana-key[data-key="undo"] { color: var(--kz-key-fg); }
.kz-kana-key[data-key="emoji"] svg { width: 27px; height: 27px; }
.kz-kana-face { font-size: 15px; letter-spacing: -0.2em; }
.kz-kana-modlbl { position: relative; display: inline-block; width: 30px; height: 26px; }
.kz-kana-modlbl b { position: absolute; left: 8px; bottom: 0; font-size: 15px; font-weight: 300; }
.kz-kana-modlbl i { position: absolute; top: -1px; font-style: normal; font-size: 15px; }
.kz-kana-modlbl i:first-child { left: 1px; }
.kz-kana-modlbl i:last-child { right: 0; }

.kz-kana-enter { background: var(--kz-done); color: var(--kz-on-accent); }
.kz-kana-enter svg { width: 26px; height: 26px; stroke-width: 1.8; }
.kz-kana-enter.is-down { background: var(--kz-done); opacity: 0.75; }

/* 플릭 표시 v0.3 — 말풍선(방향 한 칸) · 십자(360ms 정지) · 십자 중 다른 키 라벨만 흐림. 전환 애니메이션 없음.
   모양은 flick-visual.js가 clip-path 경로로 준다(꼭지·안쪽 직각). 윗줄 ↑ 말풍선은 패드 위로 넘친다 — 조상에 overflow 금지. */
.kz-kana.is-crossing .kz-kana-keys > .kz-kana-key:not(.kz-kana-enter) { color: var(--kz-label-dim); }
.kz-kana.is-crossing .kz-kana-keys > .kz-kana-key .kz-kana-arrow { color: var(--kz-label-dim); }
.kz-kana-pop { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.kz-kana-bubble, .kz-kana-cross {
  position: absolute; box-sizing: border-box;
  background: var(--kz-pop-bg); color: var(--kz-pop-fg);
  -webkit-backdrop-filter: var(--kz-pop-filter); backdrop-filter: var(--kz-pop-filter);
}
.kz-kana-bubble {   /* 윗줄 ↑처럼 키 줄 위로 나간 몸통 = 반투명 층(--kz-pop-cut = 그 높이, flick-visual), 경계는 12px 번짐 */
  background: linear-gradient(to bottom, var(--kz-pop-out) calc(var(--kz-pop-cut, 0px) - 12px), var(--kz-pop-bg) var(--kz-pop-cut, 0px));
}
.kz-kana-pop-ch, .kz-kana-cross-cell {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-size: 25px; font-weight: 300; line-height: 1;   /* = .kz-kana-ch(키 라벨) */
}
.kz-kana-cross-cell.is-sel { background: var(--kz-cross-sel-bg); color: var(--kz-cross-sel-fg); }
.kz-kana-cross-cell[data-dir="c"].is-sel { background: var(--kz-cross-center-bg); color: var(--kz-cross-center-fg); }

/* 키보드 아래 시스템 띠(🌐 · 🎤) */
.kz-kana-sys { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 4px 26px 0; }
.kz-kana-sysk { background: transparent; width: 36px; height: 36px; }
.kz-kana-sysk svg { width: 28px; height: 28px; }
.kz-kana-sysk.is-down { background: transparent; opacity: 0.5; }

/* 「이 키는 여기서 쓰지 않아요」 — 1.2초 */
.kz-kana-toast {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-fg);
  font: 14px/1.3 -apple-system, "Apple SD Gothic Neo", sans-serif;
  padding: 9px 14px; border-radius: 10px; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.kz-kana-toast.is-on { opacity: 1; }