@charset "UTF-8";

.ruled_section{
--rs: 6px;/*定規の太さ*/
position:relative;
width:100%;
min-height:100vh;
background-color: white;
}

body.journal_single .ruled_section{
background-color: transparent;
}

body.news_single .ruled_section{
background-color: transparent;
}

/* 横定規 */
.ruler_h{
position:absolute;
z-index: 20;
top:0;
left:0;
right:0;
height:var(--rs);
overflow:hidden;
cursor:row-resize;
background-color: #eee;
}

/* 縦定規 */
.ruler_v{
position:absolute;
z-index: 20;
left:0;
top:0;
bottom:0;

width:var(--rs);
overflow:hidden;
cursor:col-resize;
background-color: #eee;
}

/* 数字レイヤー（帯と別。overflow切らず数字を帯の外へ出す。ドラッグは透過） */
.ruler_h_labels{
position:absolute;
top:0; left:0; right:0;
height:var(--rs);
z-index:21;
overflow:visible;
pointer-events:none;
}
.ruler_v_labels{
position:absolute;
left:0; top:0; bottom:0;
width:var(--rs);
z-index:21;
overflow:visible;
pointer-events:none;
}

/* 目盛り線（横） */
.ruler_h .t{ position:absolute; top:0; width:1px; background:#bbb; }
.ruler_h .t.s{ height:2px; }
.ruler_h .t.m{ height:2px; }
.ruler_h .t.l{ height:4px; }

/* 目盛り線（縦） */
.ruler_v .t{ position:absolute; left:0; height:1px; background:#bbb; }
.ruler_v .t.s{ width:2px; }
.ruler_v .t.m{ width:2px; }
.ruler_v .t.l{ width:4px; }


/*数字 0*/
.ruler_h_labels .n.n0{
  left: 10px;  /* ← ここの数値をお好みで調整してください */
}

/* 数字（横） */
.ruler_h_labels .n{
position:absolute;
top: 5px;

font-size: 5px;
color:#999;
user-select:none;
pointer-events:none;
white-space:nowrap;
line-height:1;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;

text-align: left;
}

/* 数字（縦） */
.ruler_v_labels .n{
position:absolute;
left: 5px;

font-size: 5px;
color:#999;
user-select:none;

pointer-events:none;
writing-mode:vertical-rl;
text-orientation:mixed;
white-space:nowrap;
line-height:1;

font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;

text-align: left;
}

/*画面サイズ*/
.size_badge{
position: absolute;
z-index: 5;
bottom: 25px;
right: 8px;

/*
bottom:calc(var(--rs) + 6px);
right:calc(var(--rs) + 6px);
*/

font-size: 8px;
color :#fff;
user-select: none;
pointer-events: none;

mix-blend-mode: difference;
}


.ruled_content{
position: relative;
margin: 0;
padding: 0;
width: 100%;


user-select: none;
}


/* --- ガイドライン --- */
.guide{
position:absolute;
z-index:999;
}

.guide_h{
left:0;
right:0;
height:1px;
background:rgba(0,0,255,.7);
cursor:row-resize;
}

.guide_v{
top:0;
bottom:0;
width:1px;
background:rgba(0,0,255,.7);
cursor:col-resize;
}

/* ホバー時：ガイドの色を明るい水色に */
.guide_h:hover{
background:#4a90e2;
background-color: yellow;
}
.guide_v:hover{
background:#4a90e2;
background-color: yellow;
}

/* ドラッグしやすくするための透明ヒットエリア */
.guide::before{
content:''; position:absolute;
}
.guide_h::before{
left:0; right:0; top:-3px; height:7px;
}
.guide_v::before{
top:0; bottom:0; left:-3px; width:7px;
}

/* ドラッグ中のラベル */
.guide_label{
position:absolute;
z-index:30;

background:rgba(0,0,255,.7);
color:#fff;
font-size:9px;
line-height:1;

padding:2px 4px;

border-radius:2px;
pointer-events:none;
white-space:nowrap;
user-select:none;
}

/* ドラッグ中のプレビュー線 */
.guide_preview{
position:absolute; z-index:15;
pointer-events:none;
}

.guide_preview_h{
left:0;
right:0;
height:1px;

border-top:1px dashed rgba(0,0,255,.6);
}

.guide_preview_v{
top:0;
bottom:0;
width:1px;

border-left:1px dashed rgba(0,0,255,.6);
}



/* ドラッグ中はテキスト選択を無効に */
body.dragging{ user-select:none; -webkit-user-select:none; }
body.dragging_h, body.dragging_h *{ cursor:row-resize !important; }
body.dragging_v, body.dragging_v *{ cursor:col-resize !important; }





/* スマホ終了
------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {



.ruled_section{
--rs: 7px;/*定規の太さ*/
position:relative;
width:100%;
min-height: auto;
background-color: white;
}

body.journal .ruled_section{
min-height: 100vh;
min-height: 100dvh;
}

body.journal_single .ruled_section{
min-height: 100vh;
min-height: 100dvh;
}



/* 横定規 */
.ruler_h{
position:absolute;
z-index: 20;
top: 0;
left: 0;
right: 0;
height:var(--rs);

overflow:hidden;
cursor:row-resize;
}

/* 縦定規 */
.ruler_v{
position:absolute;
z-index: 20;

left: 0;
top: 0;
bottom: 0;

width:var(--rs);

overflow:hidden;
cursor:col-resize;
}

/* 目盛り線（横） */
.ruler_h .t{ position:absolute; top:0; width:1px; background:#bbb; }
.ruler_h .t.s{ height:2px; }
.ruler_h .t.m{ height:4px; }
.ruler_h .t.l{ height:4px; }

/* 目盛り線（縦） */
.ruler_v .t{ position:absolute; left:0; height:1px; background:#bbb; }
.ruler_v .t.s{ width:2px; }
.ruler_v .t.m{ width:4px; }
.ruler_v .t.l{ width:4px; }


/* 数字（横） */
.ruler_h_labels .n{
position:absolute;
top: 2px;

font-size: 7px;
color:#999;
user-select:none;
pointer-events:none;

white-space:nowrap;
line-height:1;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}


/* 数字（縦） */
.ruler_v_labels .n{
position:absolute;
left: 2px;

font-size: 7px;
color:#999;
user-select:none;
pointer-events:none;

writing-mode:vertical-rl;
text-orientation:mixed;
white-space:nowrap;
line-height:1;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}

/*画面サイズ*/
.size_badge{
position: fixed;
z-index:5;
left: auto;
right: 10px;
top: 35px;
bottom: auto;

font-size:9px;

color:#fff;
user-select:none;
pointer-events:none;

mix-blend-mode: difference;
}







.ruled_content{
padding: 0;
margin: 0;
}

/* --- ガイドライン --- */
.guide{
position:absolute;
z-index:999;
}

.guide_h{
left:0;
right:0;
height:1px;

background:rgba(0,0,255,.7);
cursor:row-resize;
}

.guide_v{
top:0;
bottom:0;
width:1px;

background:rgba(0,0,255,.7);
cursor:col-resize;
}

/* ドラッグしやすくするための透明ヒットエリア */
.guide::before{
content:''; position:absolute;
}

.guide_h::before{
left:0; right:0; top:-3px; height:7px;
}

.guide_v::before{
top:0; bottom:0; left:-3px; width:7px;
}


/* ドラッグ中のラベル */
.guide_label{
position:absolute;
z-index:30;

background:blue;

color:#fff;
font-size: 9px;
line-height:1;

padding:2px 4px;
border-radius:2px;

pointer-events:none;
white-space:nowrap;
user-select:none;
}


/* ドラッグ中のプレビュー線 */
.guide_preview{
position:absolute; z-index:15;
pointer-events:none;
}



.guide_preview_h{
left:0;
right:0;
height:1px;

border-top:1px dashed rgba(0,0,255,.6);
}

.guide_preview_v{
top:0;
bottom:0;
width:1px;

border-left:1px dashed rgba(0,0,255,.6);
}



/* ドラッグ中はテキスト選択を無効に */
body.dragging{ user-select:none; -webkit-user-select:none; }
body.dragging_h, body.dragging_h *{ cursor:row-resize !important; }
body.dragging_v, body.dragging_v *{ cursor:col-resize !important; }


}/*PC終了*/