@font-face{
  font-family:"Pretendard Variable";
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url("assets/fonts/PretendardVariable.woff2") format("woff2");
}
:root{
  --sidebar:#0f172a;
  --sidebar-light:#1e293b;
  --sidebar-border:#334155;
  --bg:#f8fafc;
  --card:#ffffff;
  --primary:#3b82f6;
  --primary-dark:#2563eb;
  --text:#0f172a;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#e2e8f0;
  --green:#16a34a;
  --amber:#d97706;
  --radius:14px;
  --side-w:264px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Pretendard Variable","Pretendard","Malgun Gothic","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  letter-spacing:-.01em;
  font-feature-settings:"tnum";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

/* 본문 이동 링크 — 클릭 가능한 링크임이 드러나도록 */
.note a,.lead a,.desc a,.sec>p a{
  color:var(--primary);font-weight:700;
  text-decoration:underline;text-decoration-color:rgba(37,99,235,.4);
  text-underline-offset:3px;text-decoration-thickness:1.5px;
  transition:color .15s,text-decoration-color .15s}
.note a:hover,.lead a:hover,.desc a:hover,.sec>p a:hover{
  color:var(--primary-dark);text-decoration-color:currentColor}

/* ---------- Sidebar ---------- */
.side{
  position:fixed;inset:0 auto 0 0;width:var(--side-w);
  background:var(--sidebar);color:#cbd5e1;
  display:flex;flex-direction:column;z-index:40;
  border-right:1px solid var(--sidebar-border);
}
.side__brand{
  display:flex;align-items:center;gap:10px;
  padding:18px 20px;border-bottom:1px solid var(--sidebar-border);
}
.side__brand img{width:30px;height:30px;border-radius:8px}
.side__brand b{color:#fff;font-size:16px;letter-spacing:-.2px}
.side__brand span{color:var(--muted-2);font-size:11px;display:block;font-weight:400}
.side__nav{overflow-y:auto;overscroll-behavior:contain;padding:14px 12px 24px;flex:1;
  scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.25) transparent}
.side__nav::-webkit-scrollbar{width:6px}
.side__nav::-webkit-scrollbar-track{background:transparent}
.side__nav::-webkit-scrollbar-thumb{background:rgba(148,163,184,.22);border-radius:99px}
.side__nav:hover::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4)}
.side__section{margin-top:8px;padding-top:2px;border-top:1px solid var(--sidebar-border)}
.side__nav>.side__section:first-child{margin-top:0;border-top:none}
.side__group{
  width:100%;display:flex;align-items:center;gap:8px;
  background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;
  color:#f1f5f9;font-size:12.5px;font-weight:800;letter-spacing:-.1px;
  padding:14px 12px 8px}
.side__group:before{content:"";flex:0 0 auto;width:3px;height:13px;border-radius:2px;background:var(--primary)}
.side__group>span{flex:1 1 auto;min-width:0}
.side__group:hover{color:#fff}
.side__chevron{flex:0 0 auto;width:14px;height:14px;color:var(--muted-2);transition:transform .2s}
.side__group:hover .side__chevron{color:#cbd5e1}
.side__section.collapsed .side__chevron{transform:rotate(-90deg)}
.side__links{overflow:hidden;max-height:600px;transition:max-height .22s ease}
.side__section.collapsed .side__links{max-height:0}
.side__link{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:9px;font-size:13.5px;color:#cbd5e1;
  transition:background .15s,color .15s;margin-bottom:1px;
}
.side__link .n{
  flex:0 0 auto;min-width:15px;text-align:right;
  color:var(--muted-2);font-size:11px;font-weight:700;
}
.side__link:hover{background:var(--sidebar-light);color:#fff}
.side__link.active{background:var(--primary);color:#fff}
.side__link.active .n{color:#fff}
.side__foot{padding:14px 20px;border-top:1px solid var(--sidebar-border);
  font-size:11px;color:var(--muted-2)}
.side__foot a{color:#93c5fd}

/* ---------- Layout ---------- */
.wrap{margin-left:var(--side-w);max-width:940px;padding:0 40px 120px}

/* ---------- Topbar (always visible) ---------- */
.topbar{
  position:sticky;top:0;z-index:30;margin-left:var(--side-w);
  display:flex;align-items:center;gap:14px;
  height:60px;padding:0 40px;
  background:rgba(248,250,252,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__brand{display:none}
.topbar__crumb{display:flex;align-items:center;gap:8px;min-width:0}
.topbar__group{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--primary);
  background:#eff6ff;border:1px solid #dbeafe;border-radius:7px;padding:3px 9px}
.topbar__sep{color:var(--muted-2);font-size:13px}
.topbar__title{font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Search ---------- */
.search{position:relative;margin-left:auto;width:320px;max-width:42vw}
.search__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--muted-2);pointer-events:none}
.search__input{
  width:100%;height:38px;padding:0 14px 0 36px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  font-size:13.5px;color:var(--text);outline:none;
  transition:border-color .15s,box-shadow .15s}
.search__input::placeholder{color:var(--muted-2)}
.search__input:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.search__panel{
  position:absolute;top:calc(100% + 8px);right:0;width:420px;max-width:88vw;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.14);padding:6px;z-index:50;
  max-height:min(70vh,520px);overflow-y:auto}
.search__item{display:flex;gap:11px;align-items:flex-start;
  padding:10px 12px;border-radius:9px;transition:background .12s}
.search__item:hover,.search__item.active{background:#eff6ff}
.search__no{flex:0 0 auto;width:22px;height:22px;border-radius:6px;
  background:var(--line);color:var(--muted);font-size:11px;font-weight:700;
  display:grid;place-items:center;margin-top:1px}
.search__item.active .search__no{background:var(--primary);color:#fff}
.search__body{min-width:0}
.search__body b{display:block;font-size:13.5px;font-weight:700;color:var(--text)}
.search__body small{display:block;font-size:12px;color:var(--muted);
  margin-top:2px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search mark{background:#fef08a;color:inherit;border-radius:2px;padding:0 1px}
.search__empty{padding:18px 14px;text-align:center;font-size:13px;color:var(--muted)}

/* ---------- Pager (prev/next) ---------- */
.pager{display:flex;justify-content:space-between;align-items:stretch;gap:12px;
  margin:40px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.pager__link{display:inline-flex;align-items:center;gap:9px;max-width:47%;
  padding:8px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);box-shadow:var(--shadow);
  transition:border-color .15s,background .15s}
.pager__link:hover{border-color:var(--primary);background:#f8fbff}
.pager__arrow{flex:0 0 auto;font-size:15px;font-weight:800;line-height:1;color:var(--primary)}
.pager__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.pager__next .pager__body{align-items:flex-end}
.pager__group{font-size:10.5px;font-weight:800;letter-spacing:.2px;color:var(--primary);
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pager__title{font-size:13.5px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pager__link:hover .pager__title{color:var(--primary-dark)}
@media (max-width:520px){ .pager__title{font-size:12.5px} }

/* ---------- Footer ---------- */
.foot{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted-2);text-align:center}
.foot a{color:var(--primary)}

/* ---------- Hero ---------- */
.hero{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.hero .eyebrow{color:var(--primary);font-weight:700;font-size:13px;letter-spacing:.02em}
.hero h1{font-size:40px;line-height:1.2;margin:10px 0 14px;letter-spacing:-.6px}
.hero p{font-size:17px;color:var(--muted);max-width:780px;margin:0}
.hero__badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;
  font-weight:600;box-shadow:var(--shadow)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--primary)}
.pill.green .dot{background:var(--green)}

/* ---------- Section ---------- */
.sec{padding:56px 0 8px;scroll-margin-top:24px;border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:none}
.sec__head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.sec__num{flex:0 0 auto;color:var(--text);
  font-weight:800;font-size:26px;line-height:1;letter-spacing:-.4px}
.sec h2{font-size:26px;margin:0;letter-spacing:-.4px}
.sec .lead{color:var(--muted);font-size:16px;margin:0 0 8px}

/* ---------- Steps ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:22px 0 4px}
.steps>li{position:relative;padding:0 0 20px 44px;margin:0}
.steps>li:before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;
  background:transparent;color:var(--primary-dark);border:1px solid #bfdbfe;
  font-weight:700;font-size:13px;display:grid;place-items:center}
.steps>li:not(:last-child):after{
  content:"";position:absolute;left:14px;top:28px;bottom:2px;width:1px;background:var(--line)}
.steps b{font-weight:700}
.steps .desc{color:var(--muted);font-size:14.5px;margin-top:2px}

/* ---------- Screenshot frame ---------- */
figure.shot{margin:24px 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.shot__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:#f1f5f9;border-bottom:1px solid var(--line)}
.shot__bar i{width:11px;height:11px;border-radius:50%;background:#cbd5e1;display:inline-block}
.shot__bar i:nth-child(1){background:#f87171}
.shot__bar i:nth-child(2){background:#fbbf24}
.shot__bar i:nth-child(3){background:#34d399}
.shot__bar span{margin-left:8px;font-size:12px;color:var(--muted);font-weight:600}
.shot__img{display:block;width:100%}
.shot__ph{
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:
    linear-gradient(135deg,#f8fafc 25%,transparent 25%) -12px 0/24px 24px,
    linear-gradient(225deg,#f8fafc 25%,transparent 25%) -12px 0/24px 24px,
    linear-gradient(315deg,#f1f5f9 25%,transparent 25%) 0 0/24px 24px,
    linear-gradient(45deg,#f1f5f9 25%,#eef2f7 25%) 0 0/24px 24px;
  color:var(--muted-2);text-align:center;padding:20px}
.shot__ph svg{width:34px;height:34px;opacity:.55}
.shot__ph b{color:var(--muted);font-size:14px;font-weight:700}
.shot__ph small{font-size:12px;max-width:80%}
figcaption{padding:12px 16px;font-size:13px;color:var(--muted);
  border-top:1px solid var(--line);background:#fbfdff}
figcaption b{color:var(--text)}

/* two-up */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid2 figure.shot{margin:0}

/* per-step inline screenshot */
.step-shot{margin:14px 0 2px;max-width:600px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.step-shot .shot__bar{padding:9px 12px}
.step-shot .shot__img,.step-shot img{display:block;width:100%}
.step-shot .shot__ph{aspect-ratio:16/9}
.step-shot figcaption{padding:9px 13px;font-size:12.5px}
.step-shot--phone{max-width:300px}

/* ---------- Callouts ---------- */
.note{display:flex;gap:12px;padding:14px 16px;border-radius:12px;margin:18px 0;
  font-size:14.5px;border:1px solid;line-height:1.6}
.note .ic{flex:0 0 20px;font-size:18px;line-height:1.4}
.note.tip{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.note.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.note.info{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}
.note.warn.note--em{background:#fef3c7;border:2px solid #f59e0b;border-left-width:6px;box-shadow:0 2px 10px rgba(245,158,11,.18)}
.note.note--em>div{line-height:1.6}
.note b{font-weight:700}

/* ---------- Feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:22px 0}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 16px 14px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}
.fcard .ic{font-size:22px;line-height:1}
.fcard b{font-size:14.5px}
.fcard p{grid-column:1 / -1;margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.55}

/* chips / market list */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:6px 12px;font-size:13px;font-weight:600;box-shadow:var(--shadow)}

/* ---------- Tabs (마켓별 가이드) ---------- */
.tabs{margin:22px 0 4px}
.tabs__nav{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0 4px;
  border-bottom:2px solid var(--line)}
.tabs__tab{appearance:none;font-family:inherit;cursor:pointer;
  position:relative;margin-bottom:-2px;
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 20px;font-size:14px;font-weight:700;color:var(--muted);
  background:#eef2f7;border:2px solid var(--line);border-top-width:3px;
  border-radius:10px 10px 0 0;
  transition:color .15s,background .15s,border-color .15s}
.tabs__tab:hover{color:var(--text);background:#e4eaf2}
.tabs__tab.active{color:var(--primary-dark);background:#fff;
  border-color:var(--line);border-top-color:var(--primary);border-bottom-color:#fff;z-index:2}
.tabs__panel{display:none;
  border:2px solid var(--line);border-top:none;
  border-radius:0 0 14px 14px;padding:28px 26px;background:#fff}
.tabs__panel.active{display:block;animation:tabfade .2s ease}
@keyframes tabfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tabs__panel .step-shot{max-width:760px}
.mk-title{font-size:19px;margin:34px 0 4px;letter-spacing:-.3px}
.mk-lead{font-size:15px;color:var(--muted);margin:0 0 4px}
.mk-lead b{color:var(--text)}
.mk-need{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.02em;
  margin:16px 0 2px}
.mk-shotlabel{display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--text);margin:20px 0 2px}
.mk-shotlabel .num{flex:0 0 auto;width:22px;height:22px;border-radius:6px;
  background:var(--primary);color:#fff;font-size:12px;font-weight:800;
  display:grid;place-items:center}
.mk-shotlabel.sc .num{background:var(--amber)}

/* 판매자센터 메뉴 위치(경로) */
.mk-path{display:flex;align-items:flex-start;gap:10px;
  background:#f8fafc;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;margin:10px 0 4px}
.mk-path .ic{flex:0 0 auto;font-size:15px;line-height:1.3}
.mk-path .body{font-size:13.5px;color:var(--text);line-height:1.5}
.mk-path .lbl{font-weight:800;color:var(--muted);margin-right:6px}
.mk-path .crumb{display:inline-block;padding:1px 8px;border-radius:6px;
  background:#eef2ff;color:#3730a3;font-weight:700;white-space:nowrap}
.mk-path .sep{color:var(--muted);margin:0 4px;font-weight:700}
.mk-ip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#fff1f2;color:#be123c;border:1px solid #fecdd3;
  padding:1px 8px;border-radius:6px;font-weight:800;letter-spacing:.02em;white-space:nowrap}

/* status badges inline */
.tag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:12px;font-weight:700}
.tag.blue{background:#dbeafe;color:#1e40af}
.tag.green{background:#dcfce7;color:#166534}
.tag.amber{background:#fef3c7;color:#92400e}
.tag.gray{background:#e2e8f0;color:#475569}

/* mobile nav toggle */
.navbtn{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .side{transform:translateX(-100%);transition:transform .25s ease}
  .side.open{transform:none}
  .wrap{margin-left:0;padding:0 22px 100px}
  .topbar{margin-left:0;gap:12px;padding:0 18px;height:56px}
  .topbar__crumb{display:none}
  .topbar__brand{display:flex;align-items:center;gap:8px}
  .topbar__brand img{width:26px;height:26px;border-radius:7px}
  .topbar__brand b{font-size:15px}
  .search{width:auto;flex:1;max-width:none}
  .search__panel{right:auto;left:0;width:min(92vw,420px)}
  .navbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;
    border:1px solid var(--line);background:var(--card);cursor:pointer}
  .navbtn span,.navbtn span:before,.navbtn span:after{
    content:"";display:block;width:16px;height:2px;background:var(--text);border-radius:2px;position:relative}
  .navbtn span:before{position:absolute;top:-5px}
  .navbtn span:after{position:absolute;top:5px}
  .backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:35}
  .backdrop.show{display:block}
  .hero h1{font-size:30px}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .hero{padding:36px 0 28px}
  .sec h2{font-size:21px}
  .steps>li{padding-left:38px}
}