/* ARIFE Market v224
   Compact refinement aligned with Cinema / AI Studio surfaces. */

body.market-v223.market-v224{
  --market-lime:#4fd3ea;
  --market-blue:#65bff2;
  --market-violet:#8f73e9;
  --market-panel:#0a1117;
  --market-panel-2:#0e161e;
  --market-line:rgba(103,133,156,.28);
  --market-line-strong:rgba(114,153,181,.46);
  background:
    radial-gradient(circle at 18% 0,rgba(65,125,163,.08),transparent 32rem),
    #060a0e;
}

.market-v224 .market-page{
  padding:20px 0 72px;
}

.market-v224 .market-shell{
  width:min(1480px,calc(100vw - 42px));
}

/* Compact hero — editor/studio scale, not a landing-page billboard */
.market-v224 .market-hero{
  min-height:0;
  height:318px;
  grid-template-columns:minmax(0,1.32fr) minmax(370px,.68fr);
  border-color:#263540;
  border-radius:20px;
  background:
    linear-gradient(120deg,rgba(57,110,148,.11),transparent 34%),
    linear-gradient(155deg,#0d151c,#080e13 70%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 15px 36px rgba(0,0,0,.24);
}

.market-v224 .market-hero::before{
  opacity:.5;
  background-size:64px 64px;
}

.market-v224 .market-hero-main{
  justify-content:center;
  padding:34px 46px;
}

.market-v224 .market-hero .kicker{
  margin-bottom:13px;
  padding:6px 9px;
  border-color:rgba(79,211,234,.26);
  background:rgba(79,211,234,.04);
  font-size:11px;
  letter-spacing:.14em;
}

.market-v224 .market-hero h1{
  max-width:620px;
  font-size:clamp(38px,3.6vw,56px);
  font-weight:850;
  line-height:.98;
  letter-spacing:-.06em;
}

.market-v224 .market-hero h1 em{
  color:#4fd3ea;
  text-shadow:0 0 24px rgba(79,211,234,.12);
}

.market-v224 .market-hero-copy{
  margin-top:15px;
  color:#7f909f;
  font-size:12px;
  line-height:1.5;
}

.market-v224 .market-hero-side{
  min-width:0;
  margin:11px;
  padding:19px;
  overflow:hidden;
  border:1px solid #2a3742;
  border-radius:15px;
  background:
    radial-gradient(circle at 50% 48%,rgba(73,139,182,.13),transparent 36%),
    linear-gradient(145deg,#111920,#0b1117 72%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 8px 22px rgba(0,0,0,.16);
}

.market-v224 .market-side-head{
  align-items:flex-start;
}

.market-v224 .market-side-head small{
  color:#607485;
  font-size:11px;
}

.market-v224 .market-side-head strong{
  margin-top:6px;
  color:#dce6ed;
  font-size:12px;
  font-weight:850;
}

.market-v224 .market-side-index{
  color:#586b7a;
  font-size:11px;
}

.market-v224 .market-orbit{
  left:49%;
  top:49%;
  width:210px;
}

.market-v224 .market-orbit::before{
  inset:13%;
  border-color:rgba(86,168,217,.24);
}

.market-v224 .market-orbit::after{
  inset:23%;
  border-color:rgba(79,211,234,.2);
}

.market-v224 .market-orbit__core{
  width:33%;
  border-radius:25%;
  background:linear-gradient(145deg,#cdeaff,#6fa8da 31%,#7660c9 62%,#111a22 84%);
  box-shadow:
    inset -14px -16px 25px rgba(2,5,11,.42),
    inset 8px 7px 15px rgba(255,255,255,.21),
    0 25px 54px rgba(48,94,130,.26);
}

.market-v224 .market-orbit__satellite{
  box-shadow:0 0 18px rgba(79,211,234,.38);
}

/* Fix the clipped/full-width CTA caused by older global .button rules. */
.market-v224 .market-hero-side>a.button{
  position:absolute!important;
  inset:auto 17px 17px auto!important;
  width:154px!important;
  min-width:154px!important;
  max-width:calc(100% - 34px)!important;
  min-height:41px!important;
  height:41px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 13px!important;
  overflow:visible!important;
  border:1px solid #4fd3ea!important;
  border-radius:10px!important;
  color:#071006!important;
  background:linear-gradient(180deg,#4fd3ea,#3cc9e2)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.72),
    0 3px 0 #0d6f81,
    0 9px 18px rgba(13,111,129,.14)!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
  transform:none!important;
}

.market-v224 .market-hero-side>a.button:hover{
  filter:brightness(1.045);
  transform:translateY(-1px)!important;
}

/* Compact registration bar */
.market-v224 .market-role-dock{
  min-height:56px;
  grid-template-columns:minmax(0,1fr) 122px 138px;
  margin-top:12px;
  padding:9px 10px 9px 15px;
  border-color:#273541;
  border-radius:13px;
  background:linear-gradient(145deg,#0c1319,#080e13);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}

.market-v224 .market-role-dock strong{
  color:#d9e4eb;
  font-size:11px;
}

.market-v224 .market-role-dock small{
  color:#687988;
  font-size:11px;
}

.market-v224 .market-role-dock a{
  min-height:34px;
  display:grid;
  place-items:center;
  padding:0 10px;
  border-color:#31414d;
  border-radius:9px;
  background:#111920;
  color:#afbdc8;
  font-size:12px;
}

.market-v224 .market-role-dock a:last-child{
  border-color:#4fd3ea;
  color:#071006;
  background:linear-gradient(180deg,#4fd3ea,#3cc9e2);
  box-shadow:inset 0 1px rgba(255,255,255,.7),0 3px 0 #0d6f81;
}

/* Controls */
.market-v224 .market-catalogue{
  margin-top:13px;
}

.market-v224 .market-toolbar{
  grid-template-columns:minmax(0,1fr) 136px;
  gap:8px;
}

.market-v224 .market-search,
.market-v224 .market-sort{
  min-height:46px;
  height:46px;
  border-color:#293844;
  border-radius:11px;
  background:linear-gradient(180deg,#121920,#0d1319);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}

.market-v224 .market-search::before{
  left:15px;
  color:#4fd3ea;
  font-size:17px;
}

.market-v224 .market-search input{
  height:44px;
  padding-left:41px;
  font-size:11px;
}

.market-v224 .market-sort{
  padding-left:13px;
  color:#b7c3cd;
  font-size:12px;
}

.market-v224 .market-tags-wrap{
  gap:12px;
  margin:8px 0 17px;
}

.market-v224 .market-tags{
  gap:5px;
  padding-bottom:4px;
}

.market-v224 .market-tag{
  min-height:30px;
  padding:0 10px;
  border-color:#293844;
  border-radius:10px;
  background:#0c1319;
  color:#7f909e;
  font-size:12px;
}

.market-v224 .market-tag:hover{
  border-color:#496273;
  color:#d8e4eb;
}

.market-v224 .market-tag.active{
  border-color:#4fd3ea;
  color:#081005;
  background:linear-gradient(180deg,#4fd3ea,#3cc9e2);
  box-shadow:inset 0 1px rgba(255,255,255,.64),0 3px 0 #0d6f81;
}

.market-v224 .market-count{
  color:#6d8190;
  font-size:11px;
}

/* Product cards use the same compact panel language as the editor */
.market-v224 .market-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.market-v224 .market-card{
  border-color:#283844;
  border-radius:13px;
  background:linear-gradient(145deg,#101820,#0a1016 72%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.03),
    0 9px 22px rgba(0,0,0,.16);
}

.market-v224 .market-card:hover{
  --card-lift:-3px;
  border-color:#4b6577;
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    0 15px 30px rgba(0,0,0,.22);
}

.market-v224 .market-media{
  aspect-ratio:16/9;
  border-color:#24323d;
  background:
    radial-gradient(circle at 50% 55%,hsla(var(--market-hue),64%,57%,.17),transparent 39%),
    linear-gradient(145deg,#121c24,#080e13 72%);
}

.market-v224 .market-art{
  transform:scale(.72) translateZ(18px);
}

.market-v224 .market-card:hover .market-art{
  transform:scale(.77) translateZ(24px);
}

.market-v224 .market-badges{
  left:9px;
  top:9px;
}

.market-v224 .market-badge{
  padding:5px 7px;
  border-radius:7px;
  font-size:11px;
}

.market-v224 .market-preview-trigger{
  right:9px;
  bottom:9px;
  min-height:28px;
  padding:0 8px;
  border-radius:10px;
  font-size:11px;
}

.market-v224 .market-card-body{
  padding:12px;
}

.market-v224 .market-seller{
  margin-bottom:6px;
  font-size:11px;
}

.market-v224 .market-card h3{
  font-size:15px;
}

.market-v224 .market-description{
  min-height:32px;
  margin:6px 0 10px;
  font-size:12px;
  line-height:1.45;
}

.market-v224 .market-card-foot strong{
  font-size:14px;
}

.market-v224 .market-detail{
  min-height:34px;
  margin-top:10px;
  border-color:#30414d;
  border-radius:8px;
  background:linear-gradient(180deg,#1b252d,#121a21);
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 3px 8px rgba(0,0,0,.16);
  font-size:12px;
}

.market-v224 .market-detail:hover{
  border-color:#4fd3ea;
  color:#071006;
  background:linear-gradient(180deg,#4fd3ea,#3cc9e2);
  box-shadow:inset 0 1px rgba(255,255,255,.64),0 3px 0 #0d6f81;
}

.market-v224 .market-preview-dialog,
.market-v224 .contract-dialog{
  border-color:#334754;
  border-radius:16px;
  background:#0a1117;
}

@media (max-width:1180px){
  .market-v224 .market-hero{
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  }
  .market-v224 .market-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:860px){
  .market-v224 .market-shell{
    width:calc(100% - 26px);
  }
  .market-v224 .market-hero{
    height:286px;
    grid-template-columns:minmax(0,1fr) minmax(280px,.78fr);
  }
  .market-v224 .market-hero-main{
    padding:28px 30px;
  }
  .market-v224 .market-hero h1{
    font-size:38px;
  }
  .market-v224 .market-orbit{
    width:175px;
  }
  .market-v224 .market-role-dock{
    grid-template-columns:minmax(0,1fr) 110px 128px;
  }
  .market-v224 .market-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px){
  .market-v224 .market-page{
    padding-top:12px;
  }
  .market-v224 .market-shell{
    width:calc(100% - 18px);
  }
  .market-v224 .market-hero{
    height:430px;
    grid-template-columns:1fr;
    grid-template-rows:205px 225px;
    border-radius:15px;
  }
  .market-v224 .market-hero-main{
    justify-content:flex-start;
    padding:24px 20px 16px;
  }
  .market-v224 .market-hero h1{
    font-size:36px;
  }
  .market-v224 .market-hero-copy{
    margin-top:10px;
    font-size:12px;
  }
  .market-v224 .market-hero-side{
    margin:6px 9px 9px;
    padding:15px;
  }
  .market-v224 .market-orbit{
    left:38%;
    width:150px;
  }
  .market-v224 .market-hero-side>a.button{
    inset:auto 12px 12px auto!important;
    width:132px!important;
    min-width:132px!important;
    height:37px!important;
    min-height:37px!important;
  }
  .market-v224 .market-role-dock{
    grid-template-columns:1fr 1fr;
    min-height:0;
    padding:10px;
  }
  .market-v224 .market-role-dock>div{
    grid-column:1/-1;
  }
  .market-v224 .market-role-dock small{
    display:none;
  }
  .market-v224 .market-toolbar{
    grid-template-columns:minmax(0,1fr) 104px;
  }
  .market-v224 .market-grid{
    grid-template-columns:1fr;
  }
  .market-v224 .market-card{
    border-radius:12px;
  }
}

/* ★ 좁은 화면에서 마켓 첫 화면 단추가 잘려 안 보이던 것 (클로드코드)
   `.market-hero` 에 `height:430px` 과 `grid-template-rows:205px 225px` 이
   못박혀 있는데, 아래 칸(`.market-hero-side`)은 `min-height:306px` 이라
   81px 이 넘친다. `.market-hero` 가 `overflow:hidden` 이라 그 81px 이 잘려
   `작품 둘러보기` 가 반만 보이고 `작품 등록` 은 아예 사라졌다(390px 기준).
   높이를 내용에 맞춰 늘어나게 둔다. */
@media (max-width:680px){
  .market-v224 .market-hero{
    height:auto!important;
    grid-template-rows:auto auto!important;
  }
}