/*
 * congruence-cut-and-move.css
 * 切って動かす！等積変形 スタイル
 * すべてのセレクタは .ccm-root プレフィックスでスコープ化し、テーマへの干渉を防いでいます。
 * WordPressのページ全体に影響するため、html/bodyへのグローバル指定は使いません。
 */

.ccm-root,
.ccm-root *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* WordPressのページ全体をロックしないよう、ウィジェット自身に高さを持たせる。
   テーマ（Cocoon等）がdiv要素のdisplayや余白を上書きすることがあるため、
   レイアウトを決める主要プロパティはimportantで保護する。 */
.ccm-root{
    font-family:"BIZ UDGothic","M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
    background:#1e3a5f;
    display:flex !important;
    flex-direction:column !important;
    padding:10px 14px;
    gap:8px;
    border-radius:18px;
    overflow:hidden;
}

/* 一覧画面では内容分だけの高さにして、下の余白を作らない */
.ccm-root.ccm-gallery-mode{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
}

/* 操作画面だけ、図形を動かしやすい高さを確保する */
.ccm-root.ccm-workspace-mode{
    height:85vh !important;
    min-height:360px !important;
    max-height:800px !important;
    overflow:hidden !important;
}

.ccm-root header{
    flex:0 0 auto !important;
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:14px;
    color:#fff;
    flex-wrap:wrap;
}
.ccm-root header h1{
    font-size:clamp(18px,2.6vw,26px);
    letter-spacing:0.04em;
}
.ccm-root header p{
    font-size:clamp(11px,1.6vw,14px);
    color:#d4af37;
    font-weight:bold;
}

/* ===== ギャラリー（ミニ画面一覧） ===== */
.ccm-root #ccmGalleryView{
    flex:0 0 auto !important;
    min-height:0;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    overflow:visible;
}
.ccm-root .gallery-instruction{
    color:#fff;
    font-size:clamp(13px,2vw,17px);
    font-weight:bold;
    text-align:center;
}
.ccm-root .gallery-grid{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    align-items:flex-start;
    max-width:1100px;
}
.ccm-root .gallery-card{
    all:unset;
    cursor:pointer;
    background:#fff;
    border-radius:16px;
    padding:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:190px;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
    transition:transform .15s;
}
.ccm-root .gallery-card:hover{ transform:translateY(-3px) scale(1.03); }
.ccm-root .gallery-card:active{ transform:translateY(0) scale(0.99); }
.ccm-root .gallery-thumb{
    width:100%;
    aspect-ratio:720/420;
    background:#f4f7fb;
    border-radius:10px;
    display:block;
}
.ccm-root .gallery-label{
    font-weight:bold;
    color:#1e3a5f;
    font-size:14px;
}

/* ===== ワークスペース（フル画面操作） ===== */
.ccm-root #ccmWorkspaceView{
    flex:1 1 0% !important;
    min-height:0;
    display:none !important;
    flex-direction:column !important;
    gap:8px;
}

.ccm-root .stage-wrap{
    flex:1 1 0% !important;
    min-height:0;
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    position:relative;
}

.ccm-root #ccmCanvas{
    width:100%;
    height:100%;
    display:block;
    background:#ffffff;
    border-radius:12px;
    /* タブレット・スマホで図形ドラッグ時にページスクロールや選択が優先されないようにする */
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
}

.ccm-root #ccmCanvas *{
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
}

.ccm-root .piece{ cursor:grab; }
.ccm-root .piece:active{ cursor:grabbing; }
.ccm-root #ccmCanvas.cut-mode .piece{ cursor:pointer; }

.ccm-root .vertex-dot{ cursor:pointer; }

.ccm-root .float-info{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(30,58,95,0.92);
    color:#fff;
    padding:6px 18px;
    border-radius:999px;
    font-size:clamp(12px,2vw,15px);
    font-weight:bold;
    white-space:nowrap;
    box-shadow:0 4px 10px rgba(0,0,0,0.25);
    transition:background .2s;
}
.ccm-root .float-info.success{ background:#1e7d32; }
.ccm-root .float-info.fail{ background:#c0392b; }

.ccm-root .area-info{
    position:absolute;
    top:10px;
    right:10px;
    background:rgba(212,175,55,0.95);
    color:#1e3a5f;
    padding:5px 14px;
    border-radius:999px;
    font-size:clamp(11px,1.8vw,13px);
    font-weight:bold;
    display:none;
}

.ccm-root .controls{
    flex:0 0 auto !important;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    align-items:center;
}

.ccm-root .btn{
    border:none;
    border-radius:999px;
    padding:10px 20px;
    font-size:clamp(13px,1.8vw,16px);
    font-weight:bold;
    font-family:inherit;
    cursor:pointer;
    background:#fff;
    color:#1e3a5f;
    box-shadow:0 3px 8px rgba(0,0,0,0.25);
    transition:transform .12s, background .12s, color .12s;
    white-space:nowrap;
}
.ccm-root .btn:hover{ transform:translateY(-1px); }
.ccm-root .btn:active{ transform:translateY(0); }
.ccm-root .btn:disabled{
    opacity:0.35;
    cursor:not-allowed;
    transform:none;
}
.ccm-root .btn.back-btn{ background:#eef2f7; }
.ccm-root .btn.cut-btn{ background:#d4af37; color:#1e3a5f; }
.ccm-root .btn.cut-btn.active{ background:#b8941f; color:#fff; }
.ccm-root .btn.op-btn{ background:#5fb8c9; color:#fff; }
.ccm-root .btn.orient-reset-btn{ background:#9aa9bb; color:#fff; }
.ccm-root .btn.reset-btn{ background:#6c757d; color:#fff; }

.ccm-root .divider{
    width:1px;
    height:28px;
    background:rgba(255,255,255,0.3);
    margin:0 4px;
}

@media (max-width: 480px){
    .ccm-root.ccm-workspace-mode{ height:90vh !important; min-height:340px !important; }
    .ccm-root .gallery-card{ width:150px; padding:10px; }
}