/* ARIFE Market v223
   A compact, depth-led marketplace skin. Existing data, filters and checkout
   hooks stay intact; this file owns presentation only. */

:root{
  --market-ink:#05080d;
  --market-panel:#0b1119;
  --market-panel-2:#101824;
  --market-line:rgba(148,172,204,.18);
  --market-line-strong:rgba(178,203,235,.34);
  --market-text:#f5f8fc;
  --market-muted:#8995a6;
  --market-lime:#4fd3ea;
  --market-blue:#6f92ff;
  --market-violet:#8c6bff;
  --market-radius:24px;
}

body.market-v223{
  min-width:320px;
  color:var(--market-text);
  background:
    radial-gradient(circle at 13% 5%,rgba(111,146,255,.12),transparent 28rem),
    radial-gradient(circle at 88% 18%,rgba(140,107,255,.09),transparent 30rem),
    #05080d;
}

body.market-v223::before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background-image:radial-gradient(rgba(160,185,219,.22) .7px,transparent .7px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,#000,transparent 78%);
}

.market-v223 .market-page{
  position:relative;
  overflow:clip;
  padding:clamp(28px,4vw,64px) 0 96px;
}

.market-v223 .market-shell{
  width:min(1640px,calc(100vw - 56px));
  max-width:none;
  margin:0 auto;
}

/* Hero */
.market-v223 .market-hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(420px,34vw,560px);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  align-items:stretch;
  gap:0;
  overflow:hidden;
  padding:0;
  border:1px solid var(--market-line);
  border-radius:36px;
  background:
    linear-gradient(125deg,rgba(111,146,255,.13),transparent 37%),
    linear-gradient(155deg,#0f1722 0,#080d14 62%,#060a10 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 38px 100px rgba(0,0,0,.38);
}

.market-v223 .market-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(90deg,transparent 49.85%,rgba(173,199,235,.08) 50%,transparent 50.15%),
    linear-gradient(transparent 49.85%,rgba(173,199,235,.06) 50%,transparent 50.15%);
  background-size:96px 96px;
  mask-image:linear-gradient(90deg,transparent 36%,#000);
}

.market-v223 .market-hero-main{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  padding:clamp(34px,5vw,78px);
}

.market-v223 .market-hero .kicker{
  width:max-content;
  margin:0 0 18px;
  padding:8px 11px;
  border:1px solid rgba(79,211,234,.28);
  border-radius:999px;
  color:var(--market-lime);
  background:rgba(79,211,234,.055);
  font:800 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.16em;
}

.market-v223 .market-hero h1{
  max-width:820px;
  margin:0;
  color:#f7f9fc;
  font-size:clamp(48px,6.1vw,94px);
  font-weight:850;
  line-height:.94;
  letter-spacing:-.073em;
  text-wrap:balance;
}

.market-v223 .market-hero h1 em{
  color:var(--market-lime);
  font-style:normal;
  text-shadow:0 0 42px rgba(79,211,234,.18);
}

.market-v223 .market-hero-copy{
  max-width:480px;
  margin:24px 0 0;
  color:#a2adbb;
  font-size:clamp(14px,1.1vw,17px);
  line-height:1.65;
}

.market-v223 .market-hero-side{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:clamp(26px,3vw,44px);
  border:0;
  border-left:1px solid rgba(165,190,222,.12);
  border-radius:0;
  background:
    radial-gradient(circle at 50% 42%,rgba(112,146,255,.2),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.025),transparent);
  transform-style:preserve-3d;
  perspective:1100px;
}

.market-v223 .market-hero-side>p,
.market-v223 .market-access{
  display:none;
}

.market-v223 .market-side-head{
  position:relative;
  z-index:5;
  align-items:flex-start;
}

.market-v223 .market-side-head small{
  color:#758297;
  font:800 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.15em;
}

.market-v223 .market-side-head strong{
  margin-top:8px;
  font-size:15px;
  line-height:1.3;
  letter-spacing:-.02em;
}

.market-v223 .market-side-index{
  color:rgba(255,255,255,.32);
  font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
}

.market-v223 .market-hero-side>.button{
  position:absolute;
  z-index:6;
  right:clamp(26px,3vw,44px);
  bottom:clamp(26px,3vw,44px);
  min-width:170px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:0 17px;
  border:1px solid rgba(79,211,234,.78);
  border-radius:16px;
  color:#091007;
  background:linear-gradient(180deg,#4fd3ea,#3cc9e2);
  box-shadow:
    inset 0 1px rgba(255,255,255,.85),
    0 4px 0 #0d6f81,
    0 18px 36px rgba(13,111,129,.18);
  font-size:12px;
  font-weight:900;
}

.market-v223 .market-hero-side>.button:hover{
  color:#091007;
  filter:brightness(1.04);
  transform:translateY(-2px);
}

.market-orbit{
  --hero-tilt-x:0deg;
  --hero-tilt-y:0deg;
  position:absolute;
  z-index:2;
  left:50%;
  top:48%;
  width:min(29vw,390px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
  transform-style:preserve-3d;
  transition:transform .22s ease-out;
  pointer-events:none;
}

.market-orbit::before,
.market-orbit::after{
  content:"";
  position:absolute;
  inset:8%;
  border:1px solid rgba(143,173,255,.34);
  border-radius:50%;
  transform:rotateX(68deg) rotateZ(14deg);
  box-shadow:0 0 70px rgba(111,146,255,.09);
}

.market-orbit::after{
  inset:17%;
  border-color:rgba(79,211,234,.28);
  transform:rotateY(68deg) rotateZ(-22deg);
}

.market-orbit__core{
  position:absolute;
  left:50%;
  top:50%;
  width:36%;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.42);
  border-radius:29%;
  background:
    linear-gradient(145deg,rgba(255,255,255,.9),rgba(117,150,255,.88) 32%,rgba(139,87,255,.76) 62%,#111927 83%);
  box-shadow:
    inset -22px -24px 38px rgba(2,5,11,.43),
    inset 14px 12px 26px rgba(255,255,255,.26),
    0 45px 90px rgba(69,90,195,.35);
  transform:translate(-50%,-50%) translateZ(70px) rotate(-18deg);
}

.market-orbit__core::before{
  content:"";
  position:absolute;
  inset:13%;
  border:1px solid rgba(255,255,255,.31);
  border-radius:23%;
}

.market-orbit__satellite{
  position:absolute;
  width:11%;
  aspect-ratio:1;
  border-radius:28%;
  background:var(--market-lime);
  box-shadow:0 0 30px rgba(79,211,234,.56);
}

.market-orbit__satellite.one{left:8%;top:32%;transform:translateZ(35px) rotate(24deg)}
.market-orbit__satellite.two{right:9%;bottom:25%;width:7%;background:var(--market-blue);box-shadow:0 0 28px rgba(111,146,255,.55)}

/* Compact sell dock injected by product data module */
.market-v223 .market-role-dock{
  grid-template-columns:1fr auto auto;
  gap:10px;
  margin:20px 0 0;
  padding:14px 14px 14px 18px;
  border:1px solid var(--market-line);
  border-radius:18px;
  background:rgba(10,15,22,.86);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}

.market-v223 .market-role-dock strong{font-size:13px}
.market-v223 .market-role-dock small{margin-top:3px;font-size:12px}
.market-v223 .market-role-dock a{
  min-width:0;
  padding:11px 15px;
  border-radius:12px;
}

/* Catalogue controls */
.market-v223 .market-catalogue{
  margin-top:22px;
  padding:0;
  border:0;
  background:transparent;
}

.market-v223 .market-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
  margin:0;
}

.market-v223 .market-search,
.market-v223 .market-sort{
  min-height:54px;
  border:1px solid var(--market-line);
  border-radius:16px;
  background:rgba(10,15,22,.9);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}

.market-v223 .market-search{
  position:relative;
  display:block;
}

.market-v223 .market-search::before{
  content:"⌕";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-53%);
  color:var(--market-lime);
  font-size:22px;
}

.market-v223 .market-search input{
  width:100%;
  height:54px;
  padding:0 18px 0 48px;
  border:0;
  outline:0;
  color:#eef3f8;
  background:transparent;
  font-size:14px;
}

.market-v223 .market-search input::placeholder{color:#667387}
.market-v223 .market-search:focus-within{border-color:rgba(79,211,234,.55);box-shadow:0 0 0 3px rgba(79,211,234,.06)}

.market-v223 .market-sort{
  width:100%;
  height:54px;
  padding:0 38px 0 15px;
  color:#c8d1dd;
  outline:0;
  font-size:12px;
}

.market-v223 .market-tags-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin:13px 0 26px;
}

.market-v223 .market-tags{
  display:flex;
  gap:7px;
  overflow:auto;
  padding:1px 0 7px;
  scrollbar-width:none;
}

.market-v223 .market-tags::-webkit-scrollbar{display:none}

.market-v223 .market-tag{
  flex:0 0 auto;
  min-height:36px;
  padding:0 13px;
  border:1px solid var(--market-line);
  border-radius:999px;
  color:#8f9aaa;
  background:rgba(9,14,21,.76);
  font-size:11px;
  font-weight:800;
  transition:.18s ease;
}

.market-v223 .market-tag:hover{
  color:#f5f8fc;
  border-color:var(--market-line-strong);
  transform:translateY(-1px);
}

.market-v223 .market-tag.active{
  border-color:var(--market-lime);
  color:#091007;
  background:var(--market-lime);
  box-shadow:0 8px 24px rgba(79,211,234,.13);
}

.market-v223 .market-count{
  color:#788496;
  font:800 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
  white-space:nowrap;
}

/* Product cards */
.market-v223 .market-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.35vw,22px);
  perspective:1400px;
}

.market-v223 .market-card{
  --card-rx:0deg;
  --card-ry:0deg;
  --card-lift:0px;
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--market-line);
  border-radius:var(--market-radius);
  background:linear-gradient(155deg,rgba(255,255,255,.035),transparent 28%),#0a1018;
  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 24px 58px rgba(0,0,0,.2);
  transform:perspective(1000px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(var(--card-lift));
  transform-style:preserve-3d;
  transition:border-color .2s,box-shadow .2s,transform .18s ease-out,opacity .45s,filter .45s;
  will-change:transform;
}

/* 2026-09-08 — '나타나기 전'(opacity:0) 상태를 없앤다.
   쪽 나눔으로 숨어 있던 카드는 이 표시가 벗겨지지 않아 자리만
   차지한 빈 네모로 남았다(실측: 353px 짜리 숨은 카드 3장).
   자바스크립트 쪽(arife-market-v223.js)에서도 안 붙이지만,
   혹시 다른 판이 붙이더라도 화면에서는 아무 일도 없게 둔다. */
.market-v223 .market-card.is-reveal-pending{
  opacity:1;
  filter:none;
  transform:none;
}

.market-v223 .market-card:hover{
  --card-lift:-5px;
  border-color:rgba(172,198,230,.42);
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    0 34px 78px rgba(0,0,0,.34),
    0 0 0 1px rgba(111,146,255,.055);
}

.market-v223 .market-card[hidden]{display:none!important}

.market-v223 .market-media{
  position:relative;
  min-height:0;
  aspect-ratio:16/10;
  overflow:hidden;
  border:0;
  border-bottom:1px solid rgba(151,177,211,.12);
  border-radius:0;
  background:
    radial-gradient(circle at 50% 55%,hsla(var(--market-hue),78%,62%,.24),transparent 38%),
    linear-gradient(145deg,#111a27,#060a10 72%);
  transform:translateZ(12px);
}

.market-v223 .market-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg,transparent 25%,rgba(255,255,255,.1) 43%,transparent 58%);
  transform:translateX(-140%);
  transition:transform .65s ease;
}

.market-v223 .market-card:hover .market-media::after{transform:translateX(140%)}

.market-v223 .market-art{
  transform:scale(.86) translateZ(25px);
  transform-style:preserve-3d;
  transition:transform .28s ease;
}

.market-v223 .market-card:hover .market-art{transform:scale(.92) translateZ(38px) rotate(-1.5deg)}

.market-v223 .market-art-object{
  box-shadow:
    inset -20px -22px 32px rgba(1,5,11,.46),
    inset 12px 10px 20px rgba(255,255,255,.18),
    0 26px 55px hsla(var(--market-hue),80%,55%,.25);
}

.market-v223 .market-badges{
  left:13px;
  top:13px;
  gap:6px;
}

.market-v223 .market-badge{
  padding:7px 9px;
  border-color:rgba(255,255,255,.12);
  border-radius:999px;
  color:#dfe7f1;
  background:rgba(5,9,14,.68);
  backdrop-filter:blur(10px);
  font-size:12px;
}

.market-v223 .market-badge.contract{display:none}

.market-v223 .market-preview-trigger{
  left:auto;
  right:12px;
  bottom:12px;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:#fff;
  background:rgba(5,9,14,.68);
  backdrop-filter:blur(12px);
  opacity:0;
  transform:translateY(6px);
  transition:.18s ease;
}

.market-v223 .market-card:hover .market-preview-trigger,
.market-v223 .market-preview-trigger:focus-visible{
  opacity:1;
  transform:translateY(0);
}

.market-v223 .market-card-body{
  min-height:0;
  display:grid;
  grid-template-rows:auto auto 1fr auto auto;
  gap:0;
  padding:17px;
  transform:translateZ(18px);
}

.market-v223 .market-seller{
  margin:0 0 9px;
  color:#728095;
  font-size:12px;
}

.market-v223 .market-seller span:first-child{
  max-width:68%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.market-v223 .market-seller span:last-child{color:#7f8b9c}

.market-v223 .market-card h3{
  min-height:0;
  margin:0;
  overflow:hidden;
  color:#f4f7fb;
  font-size:clamp(16px,1.2vw,20px);
  line-height:1.25;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.market-v223 .market-description{
  display:-webkit-box;
  min-height:38px;
  margin:9px 0 14px;
  overflow:hidden;
  color:#7f8a99;
  font-size:11px;
  line-height:1.55;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.market-v223 .market-card-foot{
  align-items:end;
  margin:0;
  padding:0;
  border:0;
}

.market-v223 .market-card-foot>div>span,
.market-v223 .market-card-foot>span,
.market-v223 .market-price-notes{
  display:none;
}

.market-v223 .market-card-foot strong{
  color:#fff;
  font-size:17px;
  letter-spacing:-.03em;
}

.market-v223 .market-detail{
  min-height:41px;
  margin-top:14px;
  border:1px solid rgba(179,203,232,.22);
  border-radius:12px;
  color:#dce5ef;
  background:#111925;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
  font-size:11px;
  font-weight:900;
}

.market-v223 .market-detail:hover{
  border-color:var(--market-lime);
  color:#091007;
  background:var(--market-lime);
}

.market-v223 .market-empty{
  margin:30px 0 0;
  padding:70px 24px;
  border:1px dashed var(--market-line);
  border-radius:24px;
  background:rgba(9,14,21,.7);
}

.market-v223 .market-empty strong{font-size:17px}
.market-v223 .market-empty p{margin:7px 0 0;color:#738095;font-size:12px}

/* Modal cleanup */
.market-v223 .market-preview-dialog,
.market-v223 .contract-dialog{
  border:1px solid var(--market-line-strong);
  border-radius:26px;
  background:#0b1119;
  box-shadow:0 45px 140px rgba(0,0,0,.7);
}

.market-v223 .market-preview-head,
.market-v223 .contract-top{
  border-color:var(--market-line);
}

.market-v223 .market-preview-stage{border-radius:18px}
.market-v223 .market-preview-status,
.market-v223 .market-preview-foot .footer-biz,
.market-v223 .market-preview-foot>div>small,
.market-v223 .contract-note,
.market-v223 .fee-policy-note{display:none}

.market-v223 .market-preview-close,
.market-v223 .contract-close{
  border-color:var(--market-line-strong);
  background:#101824;
}

.market-v223 .market-preview-foot>.button,
.market-v223 .contract-submit{
  border-radius:12px;
  color:#071006;
  background:var(--market-lime);
}

/* Responsive */
@media (max-width:1320px){
  .market-v223 .market-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .market-v223 .market-hero{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)}
}

@media (max-width:980px){
  .market-v223 .market-shell{width:min(100% - 34px,860px)}
  .market-v223 .market-hero{
    min-height:650px;
    grid-template-columns:1fr;
    grid-template-rows:auto 270px;
  }
  .market-v223 .market-hero-main{justify-content:flex-start;padding:44px 38px 26px}
  .market-v223 .market-hero-side{
    border-left:0;
    border-top:1px solid rgba(165,190,222,.12);
  }
  .market-orbit{width:250px}
  .market-v223 .market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .market-v223 .market-role-dock{grid-template-columns:1fr auto auto}
}

@media (max-width:640px){
  .market-v223 .market-page{padding-top:16px}
  .market-v223 .market-shell{width:calc(100% - 22px)}
  .market-v223 .market-hero{
    min-height:590px;
    grid-template-rows:auto 240px;
    border-radius:24px;
  }
  .market-v223 .market-hero-main{padding:32px 22px 20px}
  .market-v223 .market-hero .kicker{margin-bottom:13px}
  .market-v223 .market-hero h1{font-size:clamp(42px,13vw,62px)}
  .market-v223 .market-hero-copy{margin-top:18px;font-size:13px}
  .market-v223 .market-hero-side{padding:20px}
  .market-v223 .market-side-head strong{font-size:13px}
  .market-v223 .market-hero-side>.button{right:20px;bottom:20px;min-width:146px}
  .market-orbit{left:38%;width:210px}
  .market-v223 .market-role-dock{grid-template-columns:1fr 1fr}
  .market-v223 .market-role-dock>div{grid-column:1/-1}
  .market-v223 .market-role-dock a{text-align:center}
  .market-v223 .market-toolbar{grid-template-columns:minmax(0,1fr) 112px}
  .market-v223 .market-search input{font-size:12px}
  .market-v223 .market-tags-wrap{grid-template-columns:1fr;gap:3px;margin-bottom:18px}
  .market-v223 .market-count{grid-row:1;text-align:right}
  .market-v223 .market-tags{grid-row:2}
  .market-v223 .market-grid{grid-template-columns:1fr;gap:14px}
  .market-v223 .market-card{border-radius:19px}
  .market-v223 .market-media{aspect-ratio:16/9}
  .market-v223 .market-preview-trigger{opacity:1;transform:none}
  .market-v223 .market-card-body{padding:16px}
  .market-v223 .market-description{min-height:0;margin-bottom:12px;-webkit-line-clamp:1}
}

@media (prefers-reduced-motion:reduce){
  .market-v223 .market-card,
  .market-v223 .market-art,
  .market-v223 .market-media::after,
  .market-orbit{
    transition:none!important;
    transform:none!important;
  }
  .market-v223 .market-card.is-reveal-pending{opacity:1;filter:none}
}