/* ============================================================
   Camera HUD Frame  –  v1.0.0
   ============================================================ */

/* ---------- 共通ベース ---------- */
.chf-wrap {
    display: block;
    margin: 1.5em auto;
    max-width: 100%;
    font-family: 'Courier New', 'Menlo', monospace;
    line-height: 1;
}

.chf-frame {
    position: relative;
    display: block;
    overflow: hidden;
    background: #000;
    line-height: 0;
}

.chf-image {
    display: block;
    width: 100%;
    height: auto;
    opacity: .92;
    transition: opacity .3s ease;
}

.chf-frame:hover .chf-image {
    opacity: 1;
}

/* ---------- HUD 共通 ---------- */
.chf-hud {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .5em .75em;
    font-size: clamp(10px, 1.4vw, 14px);
    letter-spacing: .06em;
    pointer-events: none;
    white-space: nowrap;
}

.chf-hud-top  { top: 0; }
.chf-hud-bottom { bottom: 0; justify-content: space-between; }

/* ---------- パラメータ ---------- */
.chf-param {
    display: inline-flex;
    align-items: baseline;
    gap: .12em;
}

.chf-param-label {
    font-size: .75em;
    opacity: .75;
}

.chf-param-value {
    font-size: 1.15em;
    font-weight: 700;
}

/* ---------- EVバー ---------- */
.chf-ev {
    display: inline-flex;
    align-items: center;
    gap: .35em;
}

.chf-ev-bar {
    display: inline-flex;
    gap: 3px;
    align-items: flex-end;
}

.chf-ev-tick {
    display: inline-block;
    width: 4px;
    height: 8px;
    border-radius: 1px;
    opacity: .3;
    transition: opacity .2s;
}

.chf-ev-active {
    opacity: 1;
    height: 12px;
}

.chf-ev-value {
    font-size: .9em;
    min-width: 2.2em;
    text-align: center;
}

/* ---------- バッテリー ---------- */
.chf-battery {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.chf-bat-body {
    display: inline-block;
    width: 22px;
    height: 11px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    padding: 1.5px;
    position: relative;
}

.chf-bat-fill {
    display: block;
    height: 100%;
    border-radius: 1px;
    background: currentColor;
    transition: width .3s ease;
}

.chf-bat-tip {
    width: 3px;
    height: 5px;
    border-radius: 0 1px 1px 0;
    background: currentColor;
    opacity: .6;
}

.chf-bat-full  { color: inherit; }
.chf-bat-mid   { color: #f5a623; }
.chf-bat-low   { color: #e74c3c; animation: chf-bat-blink 1s step-end infinite; }

@keyframes chf-bat-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* ---------- グリッド線 ---------- */
.chf-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.chf-grid-line {
    position: absolute;
    background: rgba(255,255,255,.18);
}

.chf-grid-h1 { top: 33.33%;  left: 0;  right: 0;  height: 1px; }
.chf-grid-h2 { top: 66.66%;  left: 0;  right: 0;  height: 1px; }
.chf-grid-v1 { left: 33.33%; top: 0;   bottom: 0; width: 1px;  }
.chf-grid-v2 { left: 66.66%; top: 0;   bottom: 0; width: 1px;  }

/* ---------- フォーカスポイント ---------- */
.chf-focus-point {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(50px, 12%, 90px);
    height: clamp(35px, 8%, 65px);
    pointer-events: none;
}

.chf-focus-corner {
    position: absolute;
    width: 10px;
    height: 10px;
}

.chf-fc-tl { top: 0;    left: 0;  border-top: 2px solid; border-left: 2px solid; }
.chf-fc-tr { top: 0;    right: 0; border-top: 2px solid; border-right: 2px solid; }
.chf-fc-bl { bottom: 0; left: 0;  border-bottom: 2px solid; border-left: 2px solid; }
.chf-fc-br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }

/* ---------- コーナー装飾 ---------- */
.chf-corner {
    position: absolute;
    width: clamp(12px, 3%, 24px);
    height: clamp(12px, 3%, 24px);
    pointer-events: none;
}

.chf-corner-tl { top: 0;    left: 0;  border-top: 2px solid; border-left: 2px solid; }
.chf-corner-tr { top: 0;    right: 0; border-top: 2px solid; border-right: 2px solid; }
.chf-corner-bl { bottom: 0; left: 0;  border-bottom: 2px solid; border-left: 2px solid; }
.chf-corner-br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }

/* ---------- ヒストグラム ---------- */
.chf-histogram {
    width: 64px;
    height: 32px;
    opacity: .7;
}

.chf-histogram svg {
    width: 100%;
    height: 100%;
}

/* ---------- キャプション ---------- */
.chf-caption {
    font-size: .82em;
    text-align: center;
    margin-top: .5em;
    opacity: .7;
    letter-spacing: .04em;
    line-height: 1.4;
}

/* ============================================================
   NIKON スタイル  (黄緑アクセント / モノクロHUD)
   ============================================================ */
.chf-style-nikon .chf-frame {
    border: 1px solid #1a1a1a;
}

.chf-style-nikon .chf-hud {
    background: rgba(0, 0, 0, .72);
    color: #e8e8e8;
}

.chf-style-nikon .chf-hud-top {
    background: rgba(0,0,0,.78);
}

.chf-style-nikon .chf-param-value {
    color: #d4f542;  /* Nikon グリーン */
}

.chf-style-nikon .chf-mode {
    background: #d4f542;
    color: #000;
    font-weight: 700;
    padding: .15em .45em;
    border-radius: 2px;
    font-size: .95em;
}

.chf-style-nikon .chf-ev-tick {
    background: #e8e8e8;
}

.chf-style-nikon .chf-ev-active {
    background: #d4f542;
}

.chf-style-nikon .chf-focus-corner,
.chf-style-nikon .chf-corner {
    border-color: #d4f542;
}

.chf-style-nikon .chf-grid-line {
    background: rgba(212,245,66,.15);
}

/* ============================================================
   CANON スタイル  (赤アクセント / 深みのある黒)
   ============================================================ */
.chf-style-canon .chf-frame {
    border: 1px solid #111;
}

.chf-style-canon .chf-hud {
    background: rgba(10, 8, 8, .80);
    color: #f0ece8;
}

.chf-style-canon .chf-param-value {
    color: #ff4040;  /* Canon レッド */
}

.chf-style-canon .chf-mode {
    background: #cc0000;
    color: #fff;
    font-weight: 700;
    padding: .15em .45em;
    border-radius: 2px;
    font-size: .95em;
}

.chf-style-canon .chf-ev-tick {
    background: #f0ece8;
}

.chf-style-canon .chf-ev-active {
    background: #ff4040;
}

.chf-style-canon .chf-focus-corner,
.chf-style-canon .chf-corner {
    border-color: rgba(255,64,64,.85);
}

.chf-style-canon .chf-grid-line {
    background: rgba(255,64,64,.12);
}

/* ============================================================
   SONY スタイル  (オレンジアクセント / グレー系)
   ============================================================ */
.chf-style-sony .chf-frame {
    border: 1px solid #222;
}

.chf-style-sony .chf-hud {
    background: rgba(20, 20, 24, .78);
    color: #dce0e8;
}

.chf-style-sony .chf-param-value {
    color: #ff8c00;  /* Sony オレンジ */
}

.chf-style-sony .chf-mode {
    border: 1.5px solid #ff8c00;
    color: #ff8c00;
    font-weight: 700;
    padding: .1em .4em;
    border-radius: 2px;
    font-size: .95em;
}

.chf-style-sony .chf-ev-tick {
    background: #dce0e8;
}

.chf-style-sony .chf-ev-active {
    background: #ff8c00;
}

.chf-style-sony .chf-focus-corner,
.chf-style-sony .chf-corner {
    border-color: #ff8c00;
}

.chf-style-sony .chf-hud-top {
    font-size: clamp(9px, 1.2vw, 12px);
    letter-spacing: .08em;
}

.chf-style-sony .chf-grid-line {
    background: rgba(255,140,0,.12);
}

/* ============================================================
   FUJIFILM スタイル  (シアン + フィルム風テクスチャ雰囲気)
   ============================================================ */
.chf-style-fujifilm .chf-frame {
    border: 1px solid #1c1c1c;
}

.chf-style-fujifilm .chf-hud {
    background: rgba(5, 12, 20, .82);
    color: #cce8f0;
    font-family: 'Trebuchet MS', sans-serif;
    letter-spacing: .1em;
}

.chf-style-fujifilm .chf-param-value {
    color: #00d4e8;  /* Fuji シアン */
}

.chf-style-fujifilm .chf-mode {
    background: transparent;
    color: #00d4e8;
    border: 1.5px solid #00d4e8;
    font-weight: 700;
    padding: .1em .4em;
    border-radius: 3px;
    font-size: .9em;
}

.chf-style-fujifilm .chf-ev-tick {
    background: #cce8f0;
}

.chf-style-fujifilm .chf-ev-active {
    background: #00d4e8;
}

.chf-style-fujifilm .chf-focus-corner,
.chf-style-fujifilm .chf-corner {
    border-color: rgba(0,212,232,.8);
}

.chf-style-fujifilm .chf-grid-line {
    background: rgba(0,212,232,.12);
}

/* ---------- レスポンシブ微調整 ---------- */
@media (max-width: 480px) {
    .chf-hud { padding: .35em .5em; }
    .chf-wb, .chf-focal { display: none; }
}

/* ---------- エディター内プレビュー用 ---------- */
.wp-block .chf-wrap {
    margin: .75em auto;
}