/* DF 마이레이어 v1.0.0 — 디자인필 전용 */
.dfml{
	position:fixed;top:var(--dfml-top,170px);width:var(--dfml-w,240px);
	max-height:calc(100vh - var(--dfml-top,170px) - 20px);
	display:flex;flex-direction:column;
	background:#171b23;color:#fff;z-index:99990;
	font-family:inherit;font-size:14px;line-height:1.5;
	box-shadow:0 12px 32px rgba(0,0,0,.35);
	visibility:visible;
}
.dfml--right{right:var(--dfml-offset,0);border-radius:12px 0 0 12px;}
.dfml--left{left:var(--dfml-offset,0);border-radius:0 12px 12px 0;}
html.dfml-ready .dfml{transition:transform .35s ease,visibility 0s linear 0s;}

html.dfml-closed .dfml--right{transform:translateX(calc(100% + var(--dfml-offset,0px) + 40px));}
html.dfml-closed .dfml--left{transform:translateX(calc(-100% - var(--dfml-offset,0px) - 40px));}
html.dfml-closed .dfml{visibility:hidden;}
html.dfml-ready.dfml-closed .dfml{transition:transform .35s ease,visibility 0s linear .35s;}

.dfml__head{display:flex;align-items:center;justify-content:space-between;gap:8px;
	padding:14px 12px 14px 16px;border-bottom:1px solid rgba(255,255,255,.08);}
.dfml__title{font-size:14px;font-weight:700;letter-spacing:-.01em;color:#fff;margin:0;}
.dfml__close{all:unset;box-sizing:border-box;cursor:pointer;width:28px;height:28px;border-radius:6px;
	display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);}
.dfml__close:hover,.dfml__close:focus-visible{background:rgba(255,255,255,.1);color:#fff;}

.dfml__body{flex:1;overflow:auto;padding:14px;}
.dfml__placeholder{min-height:320px;border:1px dashed rgba(255,255,255,.2);border-radius:8px;
	display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
	color:rgba(255,255,255,.45);font-size:13px;}
.dfml__placeholder small{font-size:12px;}

/* 닫힌 뒤 다시 여는 탭 */
.dfml-handle{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;top:var(--dfml-top,170px);z-index:99989;
	background:#171b23;color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;
	writing-mode:vertical-rl;padding:14px 8px;box-shadow:0 6px 18px rgba(0,0,0,.25);
	opacity:0;visibility:hidden;pointer-events:none;}
.dfml-handle--right{right:var(--dfml-offset,0);border-radius:8px 0 0 8px;}
.dfml-handle--left{left:var(--dfml-offset,0);border-radius:0 8px 8px 0;}
html.dfml-ready .dfml-handle{transition:opacity .25s ease .2s;}
html.dfml-closed .dfml-handle{opacity:1;visibility:visible;pointer-events:auto;}
.dfml-handle:hover,.dfml-handle:focus-visible{background:#262c38;}

@media print{.dfml,.dfml-handle{display:none!important;}}