/* KURA Viewer - Minimal Viewer Styles */

/* Measurement scale bar (map-style; bottom-right) */
.measure-scale-bar {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 110;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 4px;
    pointer-events: none;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: rgba(20, 20, 22, 0.85);
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
    font-family: 'Inter', -apple-system, sans-serif;
}
.measure-scale-bar.dark {
    color: rgba(245, 245, 245, 0.92);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
.measure-scale-segment {
    height: 6px;
    width: 100px;
    border: 1px solid currentColor;
    background: linear-gradient(to right,
        currentColor 0%, currentColor 50%,
        transparent 50%, transparent 100%);
    opacity: 0.85;
}
.measure-scale-label { font-weight: 500; }

.measure-spacing-chooser {
    position: fixed;
    bottom: 70px;             /* sit above the .viewer-controls bar */
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 1px;
    padding: 3px;
    border-radius: 4px;
    background: rgba(20, 20, 22, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: rgba(245, 245, 245, 0.9);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.measure-spacing-chooser.show { display: inline-flex; }
body:hover .measure-spacing-chooser.show,
.measure-spacing-chooser.show:hover { opacity: 1; }
.measure-spacing-chooser button {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 3px 9px;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.6;
    transition: background 0.12s ease, opacity 0.12s ease;
}
.measure-spacing-chooser button:hover { opacity: 0.95; }
.measure-spacing-chooser button.active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 600;
}
.measure-spacing-unit {
    padding: 0 6px 0 4px;
    opacity: 0.55;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    background: #0a0a0a;
    color: rgba(255, 255, 255, 0.92);
    -webkit-user-select: none;
    user-select: none;
}

#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Loading Overlay */
.viewer-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.6s ease;
}

.viewer-loading.fade-out {
    opacity: 0;
    pointer-events: none;
}

.viewer-loading-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #00d4aa;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.viewer-loading-text {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.viewer-loading-progress {
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    overflow: hidden;
}

.viewer-loading-progress-bar {
    height: 100%;
    width: 0%;
    background: #00d4aa;
    border-radius: 1px;
    transition: width 0.3s ease;
}

/* Error Overlay */
.viewer-error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.viewer-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.viewer-error-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.87);
    margin-bottom: 8px;
}

.viewer-error-message {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    max-width: 400px;
    text-align: center;
    line-height: 1.5;
}

/* Viewer Controls — bottom center, matches editor bottom-bar */
.viewer-controls {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

body:hover .viewer-controls,
body:active .viewer-controls,
.viewer-controls:hover,
.viewer-controls.always-visible {
    opacity: 1;
}

.viewer-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.viewer-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}

.viewer-btn.active {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
}

/* 明るい背景(プレーン明色/ライトモード)では白アイコンが埋もれるので暗色に反転
   (2026-07-11 松上報告: 下部ボタン群が白背景で見えない) */
body.bg-light .viewer-btn {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(30, 30, 30, 0.6);
}
body.bg-light .viewer-btn:hover {
    background: rgba(0, 0, 0, 0.10);
    color: rgba(20, 20, 20, 0.9);
}
body.bg-light .viewer-btn.active {
    background: rgba(0, 0, 0, 0.14);
    color: rgba(20, 20, 20, 0.95);
}

/* Animation Progress Bar */
.viewer-anim-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 100;
}

.viewer-anim-progress-bar {
    height: 100%;
    width: 0%;
    background: #00d4aa;
    transition: width 0.05s linear;
}

/* Logo — top center, matches editor header */
.viewer-logo {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    z-index: 100;
    pointer-events: none;
}

.viewer-logo img {
    max-height: 48px;
    max-width: 180px;
    object-fit: contain;
    opacity: 0.9;
}

.viewer-logo-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.92);
    opacity: 0.9;
}

/* Catchphrase — centered overlay, matches editor */
.viewer-catchphrase {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    z-index: 50;
    pointer-events: none;
    max-width: 80%;
    margin: 0 auto;
}

.viewer-catchphrase-line1 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin-bottom: 8px;
}

.viewer-catchphrase-line2 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

/* Watermark */
.viewer-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 80px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
    z-index: 50;
    letter-spacing: 20px;
    white-space: nowrap;
}

/* Copyright — bottom right, matches editor */
.viewer-copyright {
    position: fixed;
    bottom: 12px;
    right: 20px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    z-index: 100;
    pointer-events: none;
    letter-spacing: 0.5px;
    opacity: 0.6;
}

/* Fullscreen adjustments */
:fullscreen .viewer-controls {
    bottom: 28px;
}

/* 全画面ボタンは PC のみ。スマホ・タブレット（マウスの無い端末）では出さない。
   iOS Safari は Fullscreen API を video 以外に持たず動作しないため。
   JS 側でも非表示にしているが、JS より先にちらつかないようここでも消す。
   2026-07-27 松上指示 */
@media (hover: none) and (pointer: coarse) {
    #fullscreenBtn { display: none !important; }
}

/* Responsive */
@media (max-width: 768px) {
    /* スマホでは操作ボタンを小さく控えめに（作品の邪魔をしない）。
       2026-07-27 松上FB: iPhone で下部ボタンが大きすぎる。36px→28px。 */
    .viewer-controls {
        bottom: 12px;
        gap: 5px;
    }

    .viewer-btn {
        width: 28px;
        height: 28px;
        border-radius: 5px;
    }

    .viewer-btn svg {
        width: 14px;
        height: 14px;
    }

    /* 画質切替（4K 等）のラベルは inline style なので !important で上書き */
    #qualityBtnLabel {
        min-width: 19px !important;
        height: 14px !important;
        font-size: 8px !important;
        padding: 0 2px !important;
    }

    .viewer-logo {
        top: 12px;
        height: 44px;
    }

    .viewer-logo img {
        max-height: 32px;
    }

    .viewer-copyright {
        right: 12px;
        bottom: 8px;
    }

    .viewer-watermark {
        font-size: 40px;
    }

    .viewer-catchphrase-line1 {
        font-size: 14px;
    }

    .viewer-catchphrase-line2 {
        font-size: 11px;
    }
}

/* タッチ端末（スマホ・タブレット）の操作バー
   最初は隠しておき、画面をタップすると出る。指を離して約3秒で自動的に消える。
   作品を見ている間はUIを画面から消しておきたいため（2026-07-27 松上指示）。
   ・非表示中は pointer-events: none ＝ 最初のタップがボタンに当たらない
     （タップは下のキャンバスに抜けて、そのまま回転操作になる）
   ・表示/非表示の切替は JS（ViewerGL の setupTouchControlsAutoHide）が
     .touch-visible を付け外しして行う */
@media (hover: none) and (pointer: coarse) {
    /* iOS Safari は一度タップすると :hover が張り付いたままになる。
       上の `body:hover .viewer-controls`（詳細度 0,2,1）が
       `.viewer-controls.touch-visible`（0,2,0）より強いので、打ち消さないと
       「一度触ったら出っぱなし」になる。2026-07-27 実機で発覚。 */
    .viewer-controls,
    body:hover .viewer-controls,
    body:active .viewer-controls,
    .viewer-controls:hover,
    .viewer-controls.always-visible {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    /* 上の打ち消し群と同じ詳細度(0,2,1)にして、後勝ちで確実に表示させる */
    body .viewer-controls.touch-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── タッチ判定は JS でも行い body.kura-touch を付ける ──────────────
   メディアクエリだけに頼ると端末によって外れることがあったため
   （2026-07-27 実機で「出っぱなし」が再発）、JS が付けるクラスでも
   同じ切り替えができるようにしておく。両方入っていても衝突しない。 */
body.kura-touch .viewer-controls,
body.kura-touch:hover .viewer-controls,
body.kura-touch:active .viewer-controls,
body.kura-touch .viewer-controls:hover,
body.kura-touch .viewer-controls.always-visible {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* 打ち消し群と同じ詳細度(0,3,1)。後に置いて後勝ちさせる */
body.kura-touch .viewer-controls.touch-visible {
    opacity: 1;
    pointer-events: auto;
}

body.kura-touch #fullscreenBtn {
    display: none !important;   /* 全画面は PC のみ */
}

/* ── Focus Indicator (shared A-F styles with editor) ── */
.focus-indicator {
    position: fixed;
    width: 80px;
    height: 80px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 200;
}
.focus-indicator.show { opacity: 1; }

.fi-bracket, .fi-center, .fi-ring, .fi-dot { display: none; }

/* A: Brackets */
.style-a .fi-bracket, .style-a .fi-center { display: block; }
.fi-bracket { position:absolute; width:16px; height:16px; border-color:rgba(255,255,255,0.9); border-style:solid; border-width:0; }
.fi-tl { top:0; left:0; border-top-width:1.5px; border-left-width:1.5px; }
.fi-tr { top:0; right:0; border-top-width:1.5px; border-right-width:1.5px; }
.fi-bl { bottom:0; left:0; border-bottom-width:1.5px; border-left-width:1.5px; }
.fi-br { bottom:0; right:0; border-bottom-width:1.5px; border-right-width:1.5px; }
.fi-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:12px; height:12px; }
.fi-center::before,.fi-center::after { content:''; position:absolute; background:rgba(255,255,255,0.9); }
.fi-center::before { top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.fi-center::after  { left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.style-a.focusing { animation: fiAFocus 0.08s ease-in-out 2; }
.style-a.locked   { animation: fiALock 0.25s ease-out forwards; }
@keyframes fiAFocus { 0%,100%{opacity:1} 50%{opacity:0.2} }
@keyframes fiALock {
    0%   { opacity:1; transform:translate(-50%,-50%) scale(1); }
    30%  { opacity:1; transform:translate(-50%,-50%) scale(0.9); }
    60%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0; transform:translate(-50%,-50%) scale(1); }
}

/* B: Simple Ring */
.style-b .fi-ring { display: block; }
.style-b .fi-ring { position:absolute; inset:8px; border:1.5px solid rgba(255,255,255,0.9); border-radius:50%; }
.style-b.focusing { animation: fiAFocus 0.08s ease-in-out 2; }
.style-b.locked   { animation: fiBLock 0.25s ease-out forwards; }
@keyframes fiBLock { 0%{opacity:1;transform:translate(-50%,-50%) scale(1)} 30%{opacity:1;transform:translate(-50%,-50%) scale(0.82)} 60%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1)} }

/* C: Dot (color invert via mix-blend-mode) */
.style-c .fi-dot { display: block; }
.style-c .fi-dot { position:absolute; top:50%; left:50%; width:22px; height:22px; background:white; border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.style-c.focusing { animation: fiAFocus 0.08s ease-in-out 2; }
.style-c.locked   { animation: fiCLock 0.5s ease-out forwards; }
@keyframes fiCLock { 0%{opacity:1} 60%{opacity:1} 100%{opacity:0} }

/* D: Hover Focus (no visual — DOF tracks cursor) */

/* E: Hover Focus (no visual — DOF tracks cursor) */


/* Torch プリセット巡回の番号バッジ（2026-07-16） */
#torchLightBtn { position: relative; }
#torchLightBtn[data-preset]:not([data-preset=""])::after {
    content: attr(data-preset);
    position: absolute;
    top: 2px; right: 2px;
    font-size: 9px;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(255,255,255,0.9);
    color: #111;
    font-weight: 700;
}