/* ===== フロント ===== */
.ogl{margin:20px 0;font-family:'Noto Sans JP',"Hiragino Sans","Yu Gothic",sans-serif;color:#2a1a1f}
.ogl,.ogl *{box-sizing:border-box}
.ogl p{margin:0}
.ogl__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.ogl__tp{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #f0e4ea;
 border-radius:14px;overflow:hidden;box-shadow:0 5px 10px -8px rgba(140,32,68,.25)}

/* 写真 */
.ogl__ph{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,#fdf1f5,#f5dde6 55%,#eccdd9);
 display:grid;place-items:center;color:#b9adb5;font-size:11px;font-weight:700;text-align:center;padding:8px}
.ogl__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:1}

/* 属性＝誰か。写真に重ねる */
.ogl__attrs{position:absolute;top:7px;left:7px;z-index:2;display:flex;flex-wrap:wrap;gap:3px;max-width:calc(100% - 14px)}
.ogl__at{font-size:11.5px;font-weight:800;color:#fff;background:rgba(61,22,38,.72);border-radius:99px;
 padding:2px 8px;white-space:nowrap;line-height:1.5}

.ogl__in{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;
 padding:8px 8px 10px;text-align:center;justify-content:flex-start}
.ogl__nm{font-size:15px;font-weight:800;color:#a52643;line-height:1.45}

/* プレイ＝何をしてくれるか */
.ogl__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:3px}
.ogl__tag{font-size:12.5px;font-weight:700;color:#fff;background:#f4699f;border-radius:99px;
 padding:2px 9px;white-space:nowrap;line-height:1.5}

.ogl__d{font-size:12.5px;font-weight:600;color:#575757;line-height:1.55}
.ogl__after{margin-top:10px!important;font-size:15.6px;color:#463e34;line-height:1.75}
.ogl__after b{color:#c2396a}

/* スマホは横並び1列 */
@media(max-width:599px){
 .ogl__grid{display:flex;flex-direction:column;gap:8px}
 .ogl__tp{flex-direction:row}
 .ogl__ph{flex:none;width:132px;min-height:132px;aspect-ratio:auto}
 .ogl__attrs{top:5px;left:5px;gap:2px;max-width:calc(100% - 10px)}
 .ogl__at{font-size:10.5px;padding:2px 7px}
 .ogl__in{padding:10px 11px;text-align:left;gap:6px}
 .ogl__nm{font-size:14.5px}
 .ogl__tags{justify-content:flex-start}
 .ogl__tag{font-size:11px;padding:2px 7px}
 .ogl__d{font-size:12px}
}

/* ===== 編集画面 ===== */
.ogb-edit .ogb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:781px){.ogb-edit .ogb-cards{grid-template-columns:1fr}}
.ogb-card{border:1px solid #e0dde3;border-radius:10px;padding:10px;background:#fff}
.ogb-thumb{aspect-ratio:4/3;background:#f3eff2;border-radius:8px;overflow:hidden;
 display:grid;place-items:center;color:#9b9099;font-size:12px;margin-bottom:8px}
.ogb-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.ogb-pick{display:flex;gap:6px;margin-bottom:10px}
.ogb-pick .components-button{flex:1;justify-content:center}
.ogb-file{position:relative;overflow:hidden}
.ogb-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.ogb-sub{font-size:11px;font-weight:700;color:#7a6f78;margin:10px 0 2px}

/* --- 加工モーダル --- */
.ogb-modal{width:min(1140px,96vw);height:min(840px,92vh)}
.ogb-modal .components-modal__content{display:flex;flex-direction:column;padding:0;overflow:hidden}
.ogb-modal .components-modal__header{padding:0 16px;border-bottom:1px solid #dcdcde}

.ogb-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
 padding:10px 16px;border-bottom:1px solid #dcdcde;background:#f6f7f7;flex:none}
.ogb-bar .components-button{height:30px}
.ogb-sep{width:1px;height:22px;background:#dcdcde;margin:0 2px}
.ogb-grp{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#50575e}
.ogb-range{width:110px}
.ogb-select{padding:2px 6px;font-size:12px;max-width:170px}
.ogb-count{padding:1px 9px;border-radius:999px;background:#f0f0f1;
 font-size:11px;font-weight:600;color:#50575e;min-width:44px;text-align:center}
.ogb-hint{margin-left:auto;font-size:11px;color:#787c82}

.ogb-stage{position:relative;flex:1 1 auto;display:flex;min-height:0;background:#1d2327;overflow:auto}
.ogb-holder{position:relative;margin:auto;padding:16px;line-height:0}
.ogb-canvas{display:block;cursor:crosshair;border-radius:4px;
 box-shadow:0 0 0 1px rgba(255,255,255,.15);touch-action:none}
.ogb-sel{position:absolute;display:none;border:2px solid #72aee6;
 background:rgba(114,174,230,.22);pointer-events:none;border-radius:2px}
.ogb-loading{position:absolute;inset:0;display:grid;place-items:center;color:#c3c4c7;font-size:13px}
.ogb-err{color:#f0a6a6;font-size:13px;margin:auto;padding:24px}

.ogb-cropbox{position:absolute;display:none;z-index:1;box-sizing:border-box;
 border:2px solid #72aee6;cursor:move;touch-action:none}
.ogb-cropbox.is-passive{pointer-events:none;border-style:dashed}
.ogb-cropbox.is-passive .ogb-handle{display:none}
.ogb-handle{position:absolute;width:13px;height:13px;box-sizing:border-box;
 background:#fff;border:2px solid #2271b1;border-radius:3px;touch-action:none}
.ogb-handle--nw{left:-7px;top:-7px;cursor:nwse-resize}
.ogb-handle--n {left:50%;top:-7px;margin-left:-7px;cursor:ns-resize}
.ogb-handle--ne{right:-7px;top:-7px;cursor:nesw-resize}
.ogb-handle--e {right:-7px;top:50%;margin-top:-7px;cursor:ew-resize}
.ogb-handle--se{right:-7px;bottom:-7px;cursor:nwse-resize}
.ogb-handle--s {left:50%;bottom:-7px;margin-left:-7px;cursor:ns-resize}
.ogb-handle--sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.ogb-handle--w {left:-7px;top:50%;margin-top:-7px;cursor:ew-resize}
.ogb-cropinfo{position:absolute;display:none;z-index:2;padding:2px 8px;border-radius:3px;
 background:#72aee6;color:#0b2540;font-size:11px;font-weight:600;line-height:1.6;
 pointer-events:none;white-space:nowrap}

.ogb-actions{display:flex;align-items:center;gap:8px;flex:none;
 padding:12px 16px;border-top:1px solid #dcdcde;background:#f6f7f7}
.ogb-note{flex:1;font-size:12px;color:#787c82}