/* ============ MAECHULUTION — 쇼핑·스마트스토어 상위노출 상세 비주얼 ============ */

/* badge row under hero copy */
.metric-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.metric-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: .55em 1.1em; font-weight: 600; font-size: .95rem; color: var(--ink-soft);
}
.metric-pill b { color: var(--blue-700); font-weight: 800; }

/* hero visual — smartstore rank board */
.store-mock {
  width: 100%; max-width: 380px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-2); overflow: hidden;
}
.store-mock .sm-top {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: .95rem; color: var(--ink);
}
.store-mock .sm-top .ss-logo { width: 22px; height: 22px; border-radius: 6px; background: #03C75A; display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 800; }
.store-mock .sm-top .ss-rank { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--blue-700); background: var(--blue-tint); padding: .25em .7em; border-radius: 999px; }
.sm-item { display: flex; gap: .9rem; padding: 1rem 1.2rem; align-items: center; }
.sm-item + .sm-item { border-top: 1px solid var(--line); }
.sm-item .sm-thumb { width: 56px; height: 56px; flex: none; border-radius: 12px; background: var(--bg-soft); display: grid; place-items: center; color: var(--line-strong); }
.sm-item .sm-thumb svg { width: 24px; height: 24px; }
.sm-item.is-ours .sm-thumb { background: var(--blue-tint); color: var(--blue-700); }
.sm-item .sm-meta { min-width: 0; }
.sm-item .sm-rk { font-size: .76rem; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.sm-item.is-ours .sm-rk { color: var(--blue-700); }
.sm-item .sm-name { font-weight: 700; font-size: .96rem; color: var(--ink); margin-top: .1rem; line-height: 1.3; }
.sm-item .sm-tags { margin-top: .35rem; font-size: .8rem; color: var(--muted); }
.sm-item .sm-badge { margin-left: auto; flex: none; font-size: .68rem; font-weight: 800; color: #fff; background: #03C75A; padding: .25em .55em; border-radius: 6px; letter-spacing: .03em; }
.sm-item.is-ours { background: linear-gradient(90deg, var(--blue-tint), transparent); }

/* stage label on each step */
.stage-flag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-700); background: var(--blue-tint); padding: .35em .85em; border-radius: 999px;
  margin-bottom: 1rem;
}
.stage-flag svg { width: 14px; height: 14px; }

/* STEP1 — product title anatomy */
.pn-card .pn-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .84rem; font-weight: 600; color: var(--blue-700); margin-bottom: 1.1rem;
}
.pn-card .pn-breadcrumb .seg { background: var(--blue-tint); padding: .25em .6em; border-radius: 7px; }
.pn-card .pn-breadcrumb svg { width: 13px; height: 13px; color: var(--line-strong); }
.pn-title {
  font-size: 1.1rem; font-weight: 700; line-height: 1.5; color: var(--ink-soft);
  background: var(--bg-soft); border-radius: 12px; padding: 1rem 1.1rem;
}
.pn-title .kw-front { background: var(--blue); color: #fff; padding: .05em .35em; border-radius: 5px; font-weight: 800; }
.pn-title .kw-sub { color: var(--ink); font-weight: 700; }
.pn-note { margin-top: .7rem; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.pn-note svg { width: 14px; height: 14px; color: var(--blue-700); }
.pn-tags { margin-top: 1.1rem; }
.pn-tags .pt-label { font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: .6rem; }
.pn-tags .pt-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.pn-tags .pt-chip { font-size: .82rem; font-weight: 600; color: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 999px; padding: .35em .8em; display: inline-flex; align-items: center; gap: .35rem; }
.pn-tags .pt-chip::before { content: "#"; color: var(--blue-700); font-weight: 800; }
.pn-tags .pt-chip.verified { border-color: var(--blue); color: var(--blue-700); background: var(--blue-tint); }

/* STEP2 — staircase ranking */
.stair { display: flex; align-items: flex-end; gap: .7rem; padding-top: 1.5rem; }
.stair-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .7rem; }
.stair-bar {
  width: 100%; border-radius: 12px 12px 0 0; position: relative;
  display: flex; align-items: flex-start; justify-content: center; padding-top: .6rem;
  height: 0; transition: height 1.1s var(--ease);
  color: #fff; font-weight: 800; font-size: .9rem;
}
.stair-bar.blue { background: linear-gradient(180deg, var(--blue-600), var(--blue)); }
.stair-bar.red { background: linear-gradient(180deg, #0086C2, #005f8f); }
.stair-col:nth-child(1) .stair-bar { height: 78px; }
.stair-col:nth-child(2) .stair-bar { height: 120px; }
.stair-col:nth-child(3) .stair-bar { height: 162px; }
.stair-col:nth-child(4) .stair-bar { height: 200px; }
.stair-col .stair-label { font-size: .76rem; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.3; }
.stair-col .stair-label small { display: block; color: var(--muted); font-weight: 500; }
.stair-legend { margin-top: 1.2rem; display: flex; gap: 1.4rem; font-size: .82rem; color: var(--muted); }
.stair-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: middle; margin-right: .45rem; }
.stair-legend i.b { background: var(--blue); }
.stair-legend i.r { background: #005f8f; }

/* STEP3 — 7 day golden timeline */
.gold {
  background: var(--ink); border-radius: var(--radius); padding: 1.6rem 1.5rem; color: #fff;
}
.gold .gold-head { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin-bottom: 1.4rem; font-size: .98rem; }
.gold .gold-head .new-badge { font-size: .68rem; font-weight: 800; color: var(--ink); background: #03C75A; padding: .2em .5em; border-radius: 5px; }
.gold .gold-head .gd { margin-left: auto; font-size: .8rem; color: rgba(255,255,255,.6); font-weight: 500; }
.gold-track { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: 1.4rem; }
.gold-track i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #03C75A, var(--blue)); }
.gold-days { display: flex; justify-content: space-between; margin-bottom: 1.4rem; }
.gold-day { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.45); width: 1.5em; text-align: center; }
.gold-day.peak { color: #03C75A; }
.gold-acts { display: grid; gap: .6rem; }
.gold-act { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: rgba(255,255,255,.82); }
.gold-act svg { width: 16px; height: 16px; color: var(--blue); flex: none; }

/* STEP4 — defend / goodservice */
.defend-list { display: grid; gap: .8rem; }
.defend-item {
  display: flex; gap: .8rem; align-items: flex-start;
  border-radius: 12px; padding: .9rem 1rem; border: 1px solid var(--line);
}
.defend-item.warn { background: #FFF6F4; border-color: #FFD9D2; }
.defend-item.warn .di-ic { color: #E5484D; }
.defend-item.good { background: var(--blue-tint); border-color: var(--blue-tint-2); }
.defend-item.good .di-ic { color: var(--blue-700); }
.defend-item .di-ic { flex: none; }
.defend-item .di-ic svg { width: 19px; height: 19px; }
.defend-item b { display: block; font-weight: 700; color: var(--ink); font-size: .92rem; }
.defend-item span { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.gs-score { margin-top: 1.1rem; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; background: var(--bg-soft); border-radius: 12px; }
.gs-score .gs-ring { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .92rem; color: var(--blue-700); background: conic-gradient(var(--blue) 0% 92%, var(--line) 92% 100%); }
.gs-score .gs-ring span { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; }
.gs-score .gs-txt b { font-weight: 700; color: var(--ink); font-size: .95rem; }
.gs-score .gs-txt p { color: var(--muted); font-size: .82rem; margin-top: .15rem; }

/* summary — cycle */
.cycle-sec { background: var(--ink); color: #fff; }
.cycle-sec .ds-head h2 { color: #fff; }
.cycle-sec .ds-head h2 .accent { color: var(--blue); }
.cycle-sec .ds-head p { color: rgba(255,255,255,.6); }
.cycle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.cycle-node {
  position: relative;
  border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius);
  background: rgba(255,255,255,.03); padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform .4s var(--ease), border-color .4s, background .4s;
}
.cycle-node:hover { transform: translateY(-5px); border-color: rgba(0,183,255,.45); background: rgba(0,183,255,.07); }
.cycle-node .cn-step { font-size: .74rem; font-weight: 800; letter-spacing: .12em; color: var(--blue); }
.cycle-node .cn-ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(0,183,255,.14); color: var(--blue); display: grid; place-items: center; margin: 1rem 0; }
.cycle-node .cn-ic svg { width: 23px; height: 23px; }
.cycle-node h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.02em; }
.cycle-node p { margin-top: .5rem; color: rgba(255,255,255,.6); font-size: .92rem; line-height: 1.55; text-wrap: pretty; }
.cycle-node .cn-arrow { position: absolute; right: -1.1rem; top: 50%; transform: translateY(-50%); color: var(--blue); z-index: 2; background: var(--ink); border-radius: 50%; }
.cycle-node .cn-arrow svg { width: 22px; height: 22px; }
.cycle-node:last-child .cn-arrow { display: none; }
@media (max-width: 900px){ .cycle-grid { grid-template-columns: 1fr 1fr; } .cycle-node .cn-arrow { display: none; } }
@media (max-width: 520px){ .cycle-grid { grid-template-columns: 1fr; } }