/* ============================================================
ARIFE 마켓 · 기업 라이선스 말투 맞추기 v2700
마켓 상품 카드를 기업 라이선스 카드와 같은 말투로 맞춘다.
격자(한 줄 3~4개)는 그대로 두고 표면·라벨·글자만 맞춘다.
구분은 미리보기 단추 색 하나로 한다.
마켓 = 청록 (#4fd3ea) — 누구나 사는 일반 거래
기업 = 보라 (#8c7dff) — 인증 기업 전용
색 규칙(청록=실행 · 보라=추천/프리미엄)과도 맞는다.
============================================================ */
:root{
--mk-line:rgba(143,170,198,.23);
--mk-panel:#0c1117;
--mk-muted:#8f9baa;
--mk-kicker:#8d9aaa;
--mk-cyan:#4fd3ea;
--mk-violet:#8c7dff;
}
/* ── 1) 카드 표면 ──────────────────────────────────────────── */
.market-card:not(#_):not(#_){
overflow:hidden!important;
border:1px solid var(--mk-line)!important;
border-radius:22px!important;
background:var(--mk-panel)!important;
box-shadow:none!important;
transition:transform .24s ease,border-color .24s ease!important;
}
.market-card:not(#_):not(#_):hover{
transform:translateY(-5px)!important;
border-color:#4b5968!important;
box-shadow:0 24px 60px rgba(0,0,0,.32)!important;
}
/* ── 2) 위쪽 라벨 — 기업 카드의 mono 알약과 같은 값 ─────────── */
.market-card:not(#_):not(#_) .market-badge{
display:inline-flex!important;
align-items:center!important;
min-height:30px!important;
padding:0 12px!important;
border:1px solid rgba(255,255,255,.2)!important;
border-radius:999px!important;
background:rgba(6,10,16,.54)!important;
color:#fff!important;
font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
letter-spacing:.08em!important;
backdrop-filter:blur(10px)!important;
}
/* '이용 범위 / 월 이용' 쪽은 보라로 성격을 표시한다 */
.market-card:not(#_):not(#_) .market-badge.contract{
border-color:rgba(140,125,255,.42)!important;
color:#cfc7ff!important;
}
/* ── 3) 본문 ───────────────────────────────────────────────── */
.market-card:not(#_):not(#_) .market-card-body{
padding:24px!important;
}
.market-card:not(#_):not(#_) .market-seller{
margin:0 0 13px!important;
color:var(--mk-kicker)!important;
font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace!important;
letter-spacing:.1em!important;
text-transform:uppercase!important;
}
.market-card:not(#_):not(#_) h3{
margin:0!important;
font-size:24px!important;
letter-spacing:-.04em!important;
line-height:1.2!important;
}
.market-card:not(#_):not(#_) .market-description{
min-height:50px!important;
margin:11px 0 18px!important;
color:var(--mk-muted)!important;
font-size:14px!important;
line-height:1.65!important;
word-break:keep-all!important;
}
/* 값·조건 줄 */
.market-card:not(#_):not(#_) .market-card-foot{
display:flex!important;
align-items:end!important;
justify-content:space-between!important;
gap:12px!important;
margin:22px 0 15px!important;
padding-top:18px!important;
border-top:1px solid #252e38!important;
}
.market-card:not(#_):not(#_) .market-card-foot strong{
font-size:22px!important;
letter-spacing:-.03em!important;
}
.market-card:not(#_):not(#_) .market-card-foot span{
color:#758496!important;
font-size:12px!important;
}
/* 작은 조건 알약 */
.market-card:not(#_):not(#_) :is(.market-tag,.market-note,.market-terms span,.market-scope span){
padding:7px 10px!important;
border:1px solid #2b3540!important;
border-radius:999px!important;
color:#aeb7c2!important;
font-size:11px!important;
}
/* 마지막 단추 */
.market-card:not(#_):not(#_) .market-detail{
padding:0!important;
border:0!important;
background:transparent!important;
}
.market-card:not(#_):not(#_) .market-detail button{
display:flex!important;
width:100%!important;
height:50px!important;
align-items:center!important;
justify-content:space-between!important;
padding:0 16px!important;
border:1px solid #34404c!important;
border-radius:12px!important;
background:#111821!important;
color:#fff!important;
font-weight:800!important;
font-size:13px!important;
box-shadow:none!important;
cursor:pointer!important;
}
.market-card:not(#_):not(#_) .market-detail button:hover{
border-color:var(--mk-cyan)!important;
color:var(--mk-cyan)!important;
}
/* ── 4) 미리보기 단추 — 마켓은 청록 ─────────────────────────── */
.market-preview-trigger:not(#_):not(#_){
border-color:rgba(164,237,249,.55)!important;
background:linear-gradient(145deg,#a4edf9,var(--mk-cyan))!important;
box-shadow:inset 0 1px rgba(255,255,255,.7),0 4px 0 #0d6f81,0 10px 26px rgba(0,0,0,.4)!important;
color:#04171c!important;
}
.market-preview-trigger:not(#_):not(#_) > span{
color:#04171c!important;
}
.market-preview-trigger:not(#_):not(#_):hover{
border-color:#d3f7ff!important;
box-shadow:inset 0 1px rgba(255,255,255,.8),0 4px 0 #0d6f81,0 0 26px rgba(79,211,234,.45)!important;
}
/* ── 5) 미리보기 단추 — 기업은 보라 ─────────────────────────── */
.enterprise-preview__play:not(#_):not(#_) i,
.enterprise-media-stage__control:not(#_):not(#_) i{
background:linear-gradient(145deg,#cfc7ff,var(--mk-violet))!important;
box-shadow:inset 0 1px rgba(255,255,255,.7),0 3px 0 #4634a8!important;
color:#150b3a!important;
}
.enterprise-preview__play:not(#_):not(#_):hover,
.enterprise-media-stage__control:not(#_):not(#_):hover{
border-color:#cfc7ff!important;
box-shadow:inset 0 1px rgba(255,255,255,.12),0 11px 29px rgba(0,0,0,.48),0 0 24px rgba(140,125,255,.28)!important;
}
/* ── 6) 팝업창도 같은 말투 ──────────────────────────────────── */
.contract-dialog:not(#_):not(#_){
border:1px solid #394655!important;
border-radius:24px!important;
background:#0d141b!important;
box-shadow:0 30px 100px rgba(0,0,0,.65)!important;
}
.contract-backdrop:not(#_):not(#_){
background:rgba(1,4,7,.76)!important;
backdrop-filter:blur(14px)!important;
}
.contract-close:not(#_):not(#_){
width:44px!important;
height:44px!important;
border:1px solid #35414d!important;
border-radius:50%!important;
background:#151d25!important;
color:#fff!important;
font-size:25px!important;
}
.contract-panel:not(#_):not(#_) h3{
font-size:30px!important;
letter-spacing:-.04em!important;
}
.contract-summary:not(#_):not(#_) div{
border:1px solid #2b3540!important;
border-radius:14px!important;
background:#0a0f15!important;
}
.contract-summary:not(#_):not(#_) small{
color:#758496!important;
font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace!important;
letter-spacing:.1em!important;
}
.contract-field:not(#_):not(#_) select{
height:52px!important;
border:1px solid #34414e!important;
border-radius:12px!important;
background:#090e13!important;
font:700 15px inherit!important;
}
.contract-field:not(#_):not(#_) label{
color:#9ca9b8!important;
font-size:12px!important;
font-weight:700!important;
}
.contract-submit:not(#_):not(#_){
min-height:52px!important;
border-radius:999px!important;
border:1px solid var(--mk-cyan)!important;
background:var(--mk-cyan)!important;
color:#04171c!important;
font-weight:800!important;
}
/* ── 7) 기업 등록 안내 띠 (스크립트가 붙인다) ───────────────── */
.enterprise-signup-nudge-v2700{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:20px;
margin:0 0 24px;
padding:20px 24px;
border:1px solid rgba(140,125,255,.34);
border-radius:18px;
background:linear-gradient(135deg,rgba(30,24,64,.72),rgba(11,15,22,.86));
}
.enterprise-signup-nudge-v2700 strong{
display:block;
margin-bottom:6px;
font-size:17px;
letter-spacing:-.02em;
}
.enterprise-signup-nudge-v2700 p{
margin:0;
color:#9aa5b6;
font-size:13px;
line-height:1.6;
word-break:keep-all;
}
.enterprise-signup-nudge-v2700 a{
display:inline-flex;
align-items:center;
gap:8px;
min-height:50px;
padding:0 22px;
border:1px solid var(--mk-violet);
border-radius:999px;
background:var(--mk-violet);
color:#120a33;
font-weight:800;
white-space:nowrap;
text-decoration:none;
}
.enterprise-signup-nudge-v2700 a:hover{ background:#a99cff; border-color:#a99cff; }
@media (max-width:720px){
.enterprise-signup-nudge-v2700{ grid-template-columns:minmax(0,1fr); }
.enterprise-signup-nudge-v2700 a{ width:100%; justify-content:center; }
}
/* ── 8) 계약 팝업이 잘려 뒤죽박죽이던 것 ────────────────────
창은 860px 로 잘라 두었는데(overflow:hidden) 안쪽 내용은 1,022px 이었다.
왼쪽 미리보기는 `justify-content:flex-end` 라 내용이 아래로 밀려 있어서,
위쪽은 텅 비고 아래쪽 그림·제목은 잘린 채 겹쳐 보였다.
창은 그대로 두고 **오른쪽 입력 칸만 안에서 굴러가게** 한다.
왼쪽 미리보기는 창 높이에 맞춰 가운데로 모은다. */
.contract-dialog:not(#_):not(#_){
overflow:hidden!important;
align-items:stretch!important;
/* 줄 높이를 창 높이에 묶어 둔다. 이걸 안 하면 줄이 내용 길이만큼
늘어나서 아래 max-height:100% 가 "내용 전체" 를 가리키게 되고,
결국 아무것도 굴러가지 않는다(실측: 172px 잘림). */
grid-template-rows:minmax(0,1fr)!important;
}
.contract-dialog:not(#_):not(#_) > *{
min-height:0!important;
}
.contract-panel:not(#_):not(#_){
max-height:100%!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
}
.contract-preview:not(#_):not(#_){
min-height:0!important;
max-height:100%!important;
overflow:hidden!important;
justify-content:center!important;
gap:14px!important;
}
.contract-preview:not(#_):not(#_) .contract-preview-graphic{
width:100%!important;
max-width:300px!important;
margin:0 auto!important;
}
/* 좁은 화면에서는 미리보기를 접고 입력만 남긴다 — 잘려 보이는 것보다 낫다 */
@media (max-width:860px){
.contract-dialog:not(#_):not(#_){ grid-template-columns:minmax(0,1fr)!important; }
.contract-preview:not(#_):not(#_){ display:none!important; }
}
/* ── 9) 팝업 왼쪽 미리보기 그림 ─────────────────────────────
카드 썸네일용 장식(`.market-art`)을 300×188 상자에 그대로 넣어 놓아
조각들이 제자리를 벗어나 있었다. 실측(상자 기준 좌표):
장식 본체 [43,27 215×134] ← 가운데가 아니다
▶ 덩어리 [144,86 79×79] ← 오른쪽으로 8px 삐져나감
4K FILM [196,133 52×19] ← ▶ 덩어리 위에 올라탐
가운데 ▶ 하나 + 왼쪽 아래 규격 알약으로 정리한다.
색은 카드 미리보기와 같은 청록. */
.contract-preview:not(#_):not(#_) .contract-preview-graphic{
position:relative!important;
width:100%!important;
max-width:320px!important;
height:auto!important;
aspect-ratio:16/10!important;
margin:0 auto!important;
overflow:hidden!important;
border-radius:18px!important;
}
.contract-preview:not(#_):not(#_) .contract-preview-graphic .market-art{
position:absolute!important;
inset:0!important;
width:auto!important;
height:auto!important;
margin:0!important;
}
.contract-preview:not(#_):not(#_) .market-art-ring{
left:50%!important; top:50%!important;
width:64%!important; height:19%!important;
transform:translate(-50%,-50%)!important;
}
.contract-preview:not(#_):not(#_) .market-art-object{
left:50%!important; top:50%!important;
width:64px!important; height:64px!important;
min-width:0!important; max-width:none!important;
display:grid!important;
place-items:center!important;
border:1px solid rgba(220,244,252,.6)!important;
border-radius:50%!important;
background:linear-gradient(145deg,#a4edf9,var(--mk-cyan))!important;
box-shadow:inset 0 1px rgba(255,255,255,.7),0 6px 18px rgba(0,0,0,.42)!important;
transform:translate(-50%,-50%)!important;
}
.contract-preview:not(#_):not(#_) .market-art-object i{
margin-left:2px!important;
color:#04171c!important;
font-size:21px!important;
font-style:normal!important;
line-height:1!important;
}
.contract-preview:not(#_):not(#_) .market-art-chip{
left:14px!important; right:auto!important;
top:auto!important; bottom:12px!important;
padding:6px 10px!important;
border:1px solid rgba(255,255,255,.2)!important;
border-radius:999px!important;
background:rgba(6,10,16,.6)!important;
color:#dbe7f2!important;
font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
letter-spacing:.08em!important;
}
/* ── 10) 실제 등록 상품 카드에도 같은 옷을 입힌다 ───────────
견본 카드와 실제 상품 카드는 만들어지는 곳이 달라 이름이 다르다.
미리보기 단추 : 견본 `.market-preview-trigger` / 실제 `.market-media-play`
마지막 단추 : 견본 `.market-detail > button` / 실제 `button.market-detail`
이름이 다르면 지금까지 맞춰 놓은 모양이 실제 상품에는 하나도 안 걸린다.
두 이름 다 받는다. */
.market-media-play:not(#_):not(#_){
position:absolute!important;
z-index:9!important;
left:50%!important; top:50%!important;
right:auto!important; bottom:auto!important;
width:52px!important; min-width:52px!important; max-width:52px!important;
height:52px!important; min-height:52px!important; max-height:52px!important;
display:grid!important;
place-items:center!important;
gap:0!important;
padding:0!important;
overflow:hidden!important;
border:1px solid rgba(164,237,249,.55)!important;
border-radius:50%!important;
background:linear-gradient(145deg,#a4edf9,var(--mk-cyan))!important;
box-shadow:inset 0 1px rgba(255,255,255,.7),0 4px 0 #0d6f81,0 10px 26px rgba(0,0,0,.4)!important;
color:#04171c!important;
font-size:0!important;
transform:translate(-50%,-50%)!important;
opacity:1!important;
}
.market-media-play:not(#_):not(#_)[hidden]{ display:none!important; }
.market-media-play:not(#_):not(#_) > b{ display:none!important; }
.market-media-play:not(#_):not(#_) > span{
display:block!important;
margin-left:2px!important;
color:#04171c!important;
font-size:17px!important;
line-height:1!important;
}
/* 마지막 단추 — 실제 상품 카드는 버튼 자체가 `.market-detail` 이다 */
.market-card:not(#_):not(#_) button.market-detail{
display:flex!important;
width:100%!important;
height:50px!important;
align-items:center!important;
justify-content:space-between!important;
padding:0 16px!important;
border:1px solid #34404c!important;
border-radius:12px!important;
background:#111821!important;
color:#fff!important;
font-weight:800!important;
font-size:13px!important;
box-shadow:none!important;
cursor:pointer!important;
}
.market-card:not(#_):not(#_) button.market-detail:hover{
border-color:var(--mk-cyan)!important;
color:var(--mk-cyan)!important;
}
/* 실제 카드는 값 줄에 조건 알약이 없어 허전하다 — 위 여백만 맞춘다 */
.market-card:not(#_):not(#_) .market-card-foot > div{
display:flex!important;
align-items:end!important;
gap:8px!important;
}
/* ── 11) 큰 미리보기 창의 재생 단추 ─────────────────────────
또 두 벌이 겹쳤다. 카드·팝업에서 고친 것과 똑같은 사고다.
v226 — 64px 정사각, 글자 숨김(font-size:0),
::before 로 ▶, ::after 로 '미리보기 재생' 알약
v1800 — 아래쪽 알약, 글자 12px (나중이라 글자 크기가 이김)
폭 64px 은 v226 것이 남고 글자는 12px 로 되살아나서,
64px 상자 안에 '▶ 미리보기 재생' 이 한 글자씩 세로로 쌓이고
그 위에 ::before 의 ▶ 와 ::after 알약까지 함께 그려졌다.
(실제 화면: ▶ 하나 + 세로로 쌓인 글자 + 알약 하나, 셋이 겹침)
카드·팝업과 같은 청록 동그라미 하나로 통일한다. */
.market-preview-play:not(#_):not(#_){
position:absolute!important;
z-index:6!important;
left:50%!important; top:50%!important;
right:auto!important; bottom:auto!important;
width:58px!important; min-width:58px!important; max-width:58px!important;
height:58px!important; min-height:58px!important; max-height:58px!important;
display:grid!important;
place-items:center!important;
gap:0!important;
padding:0!important;
overflow:visible!important;
border:1px solid rgba(164,237,249,.55)!important;
border-radius:50%!important;
background:linear-gradient(145deg,#a4edf9,var(--mk-cyan))!important;
box-shadow:inset 0 1px rgba(255,255,255,.7),0 4px 0 #0d6f81,0 12px 30px rgba(0,0,0,.42)!important;
color:#04171c!important;
font-size:0!important; /* 진짜 글자는 접는다 */
line-height:1!important;
transform:translate(-50%,-50%)!important;
}
/* ▶ 는 하나만. 아래 알약(::after)은 지운다 — 같은 말을 두 번 한다. */
.market-preview-play:not(#_):not(#_)::before{
content:"▶"!important;
display:block!important;
position:static!important;
margin-left:3px!important;
color:#04171c!important;
font-size:21px!important;
line-height:1!important;
}
.market-preview-play:not(#_):not(#_)::after{
content:none!important;
display:none!important;
}
/* 재생 중에는 멈춤 표시로 */
.market-preview-play:not(#_):not(#_)[aria-pressed="true"]{
background:linear-gradient(145deg,#dff6fc,#8fe3f3)!important;
}
.market-preview-play:not(#_):not(#_)[aria-pressed="true"]::before{
content:"Ⅱ"!important;
margin-left:0!important;
}
.market-preview-play:not(#_):not(#_):hover{
border-color:#d3f7ff!important;
box-shadow:inset 0 1px rgba(255,255,255,.8),0 4px 0 #0d6f81,0 0 26px rgba(79,211,234,.45)!important;
}
/* 큰 미리보기에는 장식 ▶ 덩어리가 하나 더 있다. 진짜 재생 단추가
가운데에 생겼으니 둘이 겹쳐 보인다 — 장식 쪽을 접는다. */
.market-preview-stage:not(#_):not(#_) .market-art-object{
display:none!important;
}
/* ── 12) 기업 라이선스 그림칸의 '권한 인증' 라벨 ────────────
상자 오른쪽·아래 모서리에 여백 없이 붙어 떨어질 듯 보였고,
`
` 때문에 두 줄로 쪼개져 있었다.
다른 표시들과 같은 알약 하나로, 한 줄로 정리한다. */
.enterprise-console-visual:not(#_):not(#_) > span{
left:auto!important; top:auto!important;
right:16px!important; bottom:15px!important;
display:inline-flex!important;
align-items:center!important;
min-height:28px!important;
padding:0 11px!important;
border:1px solid rgba(140,125,255,.32)!important;
border-radius:999px!important;
background:rgba(8,12,22,.62)!important;
white-space:nowrap!important;
font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
letter-spacing:.06em!important;
}
/* `
` 은 display 를 바꿔도 크롬에서 줄을 계속 끊는다.
글자를 통째로 갈아 끼워 한 줄로 만든다.
(이 칸은 aria-hidden 이라 읽어 주는 기계에는 영향이 없다) */
.enterprise-console-visual:not(#_):not(#_) > span{
font-size:0!important;
}
.enterprise-console-visual:not(#_):not(#_) > span::before{
content:"권한 인증"!important;
color:inherit!important;
font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
letter-spacing:.06em!important;
}