/* 약관 단계: 약관 창 말고는 전부 가립니다. */
html.fl-studio-pending body > *:not(.fl-terms-gate):not(.mfx-cookie-consent) {
visibility: hidden !important;
}
html.fl-studio-pending .fl-terms-gate,
html.fl-studio-pending .mfx-cookie-consent {
visibility: visible !important;
}
/* 로그인 대기 단계: 작업 화면만 가립니다.
머리말과 로그인 관문은 그대로 보여야 합니다. 예전에는 화면 전체를 가려서
머리말이 텅 빈 채 로그인 버튼만 떠 있는 모양이 됐습니다. */
html.fl-auth-pending main.fl {
visibility: hidden !important;
}
/* 작업 화면은 감춰도 자리는 차지하므로, 로그인 관문 뒤로 페이지가 스크롤됩니다.
관문이 떠 있는 동안에는 스크롤을 막습니다. */
html.fl-auth-pending,
html.fl-auth-pending body { overflow: hidden !important; }
/* STUDIO 이용 약관 게이트 — 스튜디오(FL) UI 와 같은 결의 어두운 콘솔 디자인 */
/* 동의 전 잠금 : studio.js 를 불러오기도 전에 화면을 덮어 잠깐이라도 조작되지 않게 합니다.
의 인라인 스크립트가 html 에 이 클래스를 붙이므로 새로고침해도 깜빡임이 없습니다. */
html.fl-terms-lock,
html.fl-terms-lock body { overflow: hidden !important; }
html.fl-terms-lock body > main.fl,
html.fl-terms-lock body > footer,
html.fl-terms-lock body > .toast {
visibility: hidden !important;
pointer-events: none !important;
}
html.fl-terms-lock body::before {
content: "";
position: fixed;
inset: 0;
z-index: 11500;
background:
radial-gradient(1100px 480px at 50% -8%, rgba(43, 223, 120, .12), transparent 70%),
#0b0f0e;
}
.fl-terms-gate {
position: fixed;
inset: 0;
z-index: 11600;
display: grid;
place-items: center;
padding: 22px;
background:
radial-gradient(1100px 480px at 50% -8%, rgba(43, 223, 120, .12), transparent 70%),
rgba(8, 12, 11, .94);
font-family: inherit;
}
.fl-terms-gate[hidden] { display: none; }
body.studio-terms-open { overflow: hidden; }
.fl-terms-card {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: min(760px, 100%);
max-height: min(88vh, 900px);
border: 1px solid #2b3f49;
border-radius: 12px;
background: linear-gradient(180deg, #1a262c 0%, #131d22 46%, #101a1e 100%);
box-shadow: 0 30px 90px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
color: #dfeaef;
overflow: hidden;
animation: flTermsUp .2s ease-out;
}
@keyframes flTermsUp { from { opacity: 0; transform: translateY(14px) scale(.99); } }
/* ── 머리말 ── */
.fl-terms-head {
padding: 20px 24px 16px;
border-bottom: 1px solid #2b3f49;
background: linear-gradient(180deg, #203037 0%, #1a262c 100%);
}
.fl-terms-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.fl-terms-brand strong { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; color: #8ba3ad; }
.fl-terms-brand em { font-style: normal; color: #2bdf78; }
.fl-terms-head h1 { margin: 0 0 8px; font-size: 20px; font-weight: 900; letter-spacing: .01em; }
.fl-terms-head p { margin: 0; font-size: 12px; line-height: 1.7; color: #8ba3ad; }
/* ── 약관 본문 ── */
.fl-terms-body {
min-height: 0;
overflow-y: auto;
padding: 16px 24px 4px;
background: #0d1519;
border-top: 1px solid #101a1e;
scrollbar-width: thin;
scrollbar-color: #2f4550 #0d1519;
}
.fl-terms-body::-webkit-scrollbar { width: 10px; }
.fl-terms-body::-webkit-scrollbar-track { background: #0d1519; }
.fl-terms-body::-webkit-scrollbar-thumb { background: #273a43; border: 2px solid #0d1519; border-radius: 6px; }
.fl-terms-body::-webkit-scrollbar-thumb:hover { background: #2f4550; }
.fl-terms-body article {
padding: 12px 14px;
margin-bottom: 8px;
border: 1px solid #223038;
border-radius: 6px;
background: linear-gradient(180deg, #16222799 0%, #111b1f 100%);
}
.fl-terms-body h3 {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 7px;
font-size: 12.5px;
font-weight: 800;
color: #e7f3ee;
}
.fl-terms-no {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 18px;
padding: 0 5px;
border: 1px solid #2b3f49;
border-radius: 3px;
background: #101a1e;
font-size: 9.5px;
font-weight: 800;
letter-spacing: .06em;
color: #2bdf78;
}
.fl-terms-body p { margin: 0; font-size: 12px; line-height: 1.75; color: #a9bfc7; }
.fl-terms-body b { color: #ffbd45; }
.fl-terms-updated {
margin: 4px 0 18px !important;
padding-top: 12px;
border-top: 1px solid #223038;
font-size: 10.5px !important;
color: #647c87 !important;
}
/* ── 바닥 : 동의 체크 · 버튼 ── */
.fl-terms-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 14px 24px;
border-top: 1px solid #2b3f49;
background: linear-gradient(180deg, #1a262c 0%, #162126 100%);
}
.fl-terms-check {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
color: #cddfe6;
cursor: pointer;
user-select: none;
}
.fl-terms-check input {
width: 16px;
height: 16px;
accent-color: #16a94d;
cursor: pointer;
}
.fl-terms-status {
display: flex;
align-items: center;
gap: 7px;
font-size: 11.5px;
color: #8ba3ad;
}
.fl-terms-status i { color: #2bdf78; }
.fl-terms-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fl-terms-gate .fl-mini,
.fl-terms-gate .fl-cta {
height: 30px;
border-radius: 4px;
font-family: inherit;
cursor: pointer;
}
.fl-terms-gate .fl-cta { padding: 0 16px; }
.fl-terms-gate .fl-cta:disabled {
cursor: not-allowed;
background: linear-gradient(180deg, #3a4a44 0%, #2a3733 100%);
color: #7d8f88;
box-shadow: none;
filter: none;
}
.fl-terms-gate .fl-mini { padding: 0 13px; }
/* 메뉴바에서 약관을 다시 여는 버튼 */
.fl-terms-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 8px;
height: 20px;
padding: 0 8px;
border: 1px solid #2b3f49;
border-radius: 3px;
background: linear-gradient(180deg, #23333b 0%, #1a262c 100%);
color: #8ba3ad;
font: inherit;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
.fl-terms-link:hover { border-color: #2f4550; color: #dfeaef; }
.fl-terms-link i { font-size: 10px; color: #2bdf78; }
@media (max-width: 620px) {
.fl-terms-gate { padding: 8px; }
.fl-terms-card { max-height: 95vh; }
.fl-terms-head, .fl-terms-body, .fl-terms-foot { padding-left: 15px; padding-right: 15px; }
.fl-terms-actions { width: 100%; margin-left: 0; }
.fl-terms-actions .fl-cta { flex: 1; justify-content: center; }
.fl-terms-link span { display: none; }
}