/* 협업로그 COLLABLOG — 리뷰 포털 스타일 (참고: jobplanet.co.kr의 공개 레이아웃 원칙)
 * white #fff · soft #f7f8fa · green #00a86b · text #202329
 * 빨강/주황은 새 기록·진행 중·주의 상태에만 사용합니다.
 */
:root {
  --bg: #ffffff;
  --soft: #f7f8fa;
  --soft-2: #eef1f4;
  --mint: #eefaf5;
  --ink: #202329;
  --ink-2: #3b4049;
  --muted: #646b76;
  --line: #e4e7eb;
  --line-2: #cfd4db;
  --green: #00a86b;
  --green-2: #00965f;
  --green-ink: #00784c;
  --green-bg: #e7f7f0;
  --red: #f04438;
  --red-ink: #c8281c;
  --amber: #c08400;
  --amber-ink: #7a5200;
  --amber-bg: #fff5df;
  --blue-ink: #2457c5;
  --blue-bg: #eaf1fd;
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 12px;
  --wrap: 1180px;
  --shadow: 0 4px 16px rgba(32, 35, 41, .07);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--font);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
body.has-modal { overflow: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
code { font-size: .9em; background: var(--soft-2); padding: 1px 5px; border-radius: 4px; }
[hidden] { display: none !important; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus-visible { outline: none; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r-sm); text-decoration: none; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------- 셸 */

.app { min-height: 100vh; display: flex; flex-direction: column; }

.preview-flag {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  min-height: 36px; padding: 4px 16px;
  background: var(--soft); border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: center;
}
.preview-flag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: 0 0 auto; }
.link-btn--strip { min-height: 28px; font-size: 12.5px; color: var(--green-ink); }

.main-col { min-width: 0; flex: 1; display: flex; flex-direction: column; }

.topbar { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); }
.topbar__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; min-height: 64px; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; min-height: 44px; flex: 0 0 auto; }
.logo__mark { width: 30px; height: 30px; }
.logo__text { font-weight: 800; font-size: 18px; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.logo__text small { display: block; font-size: 9.5px; letter-spacing: .14em; font-weight: 700; color: var(--green-ink); margin-top: 3px; }

.gnb { flex: 1; min-width: 0; align-self: stretch; }
.gnb ul { display: flex; gap: 4px; height: 100%; }
.gnb li { display: flex; }
.gnb-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; min-height: 64px; text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 15.5px; color: var(--ink-2);
}
.gnb-link:hover { color: var(--green-ink); }
.gnb-link[aria-current="page"] { color: var(--green-ink); }
.gnb-link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--green); }
.nav-note { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); padding: 2px 6px; border-radius: 999px; white-space: nowrap; }

.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.credit-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px; }
.credit-pill b { font-size: 15px; color: var(--green-ink); }
.credit-pill:hover, .credit-pill[aria-current="page"] { border-color: var(--green); }
.acct-link { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); }
.acct-link:hover, .acct-link[aria-current="page"] { border-color: var(--green); color: var(--green-ink); }
.role-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font-weight: 700; font-size: 13.5px; }
.role-pill__k { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.role-pill:hover { border-color: var(--line-2); }

.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: inherit; }
.icon-btn:hover { background: var(--soft); }
.icon-btn .ic, .icon-btn svg { width: 22px; height: 22px; }
.topbar .menu-btn { display: none; }

/* 드로어 (모바일 전용) */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(320px, 86vw); height: 100%;
  background: #fff; color: var(--ink); display: flex; flex-direction: column; overflow-y: auto;
  border-right: 1px solid var(--line); box-shadow: 12px 0 40px rgba(32, 35, 41, .18);
  transform: translateX(-102%); visibility: hidden;
  transition: transform .26s var(--ease), visibility 0s linear .26s;
}
.sidebar.is-open { transform: none; visibility: visible; transition: transform .26s var(--ease), visibility 0s; }
.sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sidebar__nav { padding: 8px 12px 0; flex: 1; }
.nav-group { padding: 12px 0 6px; }
.nav-group + .nav-group { border-top: 1px solid var(--line); }
.nav-group__label { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 10px 8px; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 10px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: 15px; }
.nav-link > span:not([class]) { white-space: nowrap; }
.nav-link:hover { background: var(--soft); }
.nav-link[aria-current="page"] { background: var(--green-bg); color: var(--green-ink); }
.nav-badge { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: var(--green); color: #fff; font-size: 12px; font-weight: 800; }
.nav-link .nav-note { margin-left: auto; }
.sidebar__foot { padding: 16px 12px 20px; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.plan-chip { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--soft); }
.plan-chip__k { font-size: 12px; font-weight: 700; color: var(--muted); }
.plan-chip__v { font-weight: 800; font-size: 15px; margin-top: 4px; }
.plan-chip__s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.plan-chip__s b { color: var(--green-ink); }
.preview-btn { display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 8px 12px; border-radius: var(--r); border: 1px dashed var(--line-2); background: #fff; text-align: left; font-weight: 700; font-size: 13.5px; }
.preview-btn small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.preview-btn:hover { border-color: var(--green); }
.scrim { position: fixed; inset: 0; background: rgba(32, 35, 41, .45); z-index: 35; }
.sidebar .drawer-close { display: inline-grid; }

.main { flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 24px 24px 72px; }
.main:focus { outline: none; }
.noscript { padding: 24px; border: 1px solid var(--line); border-radius: var(--r); }

.site-foot { border-top: 1px solid var(--line); background: var(--soft); }
.site-foot__inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 14px; padding: 26px 24px 28px; font-size: 12.5px; color: var(--muted); }
.site-foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.logo--foot .logo__mark { width: 26px; height: 26px; }
.site-foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.site-foot__links a, .site-foot__links .link-btn { color: var(--ink-2); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.site-foot__links a:hover, .site-foot__links .link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-foot__biz { display: flex; flex-wrap: wrap; gap: 2px 16px; line-height: 1.7; color: var(--ink-2); }
.site-foot__biz div { display: inline-flex; gap: 6px; min-width: 0; }
.site-foot__biz dt { color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.site-foot__biz a { color: inherit; text-underline-offset: 3px; }
.site-foot__note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.site-foot__note p { flex: 1 1 420px; }

.bottom-nav { display: none; }

/* ------------------------------------------------------------- 공통 */

.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green-ink); }
.eyebrow .ic { width: 15px; height: 15px; }
.eyebrow--inv { color: var(--green-ink); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }

.section-title { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.3; letter-spacing: -.03em; font-weight: 800; }
.page-head .section-title, .scope .section-title, .done .section-title { font-size: clamp(24px, 2.4vw, 32px); margin-top: 6px; }
.section-title--sm { font-size: clamp(20px, 2vw, 26px); }
.h-md { font-size: clamp(19px, 1.7vw, 22px); font-weight: 800; letter-spacing: -.025em; line-height: 1.3; }
.h-sm { font-size: 16px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.lede { font-size: 15.5px; color: var(--muted); max-width: 720px; margin-top: 10px; line-height: 1.65; }
.lede b { color: var(--ink); }
.note { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); background: var(--soft); border-radius: var(--r-sm); padding: 12px 14px; margin-top: 18px; }
.note .ic { margin-top: 2px; color: var(--green-ink); }
.hint { font-size: 13px; color: var(--muted); margin: 4px 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  font-weight: 700; font-size: 14.5px; text-decoration: none; text-align: center;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { border-color: var(--ink-2); }
.btn--green { background: var(--green); border-color: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-2); border-color: var(--green-2); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); }
.btn--line { background: #fff; }
.btn--line-inv { background: #fff; border-color: var(--line-2); }
.btn--danger { background: #fff; border-color: #f3b4ae; color: var(--red-ink); }
.btn--danger:hover { background: #fdecea; border-color: var(--red-ink); }
.btn--sm { padding: 0 14px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn .ic { width: 16px; height: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.link-btn { background: none; border: 0; padding: 0 2px; min-height: 44px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: 13.5px; }
.link-btn:hover { color: var(--green-ink); }
.link-btn.is-danger { color: var(--red-ink); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.3; background: var(--soft-2); color: var(--ink-2); white-space: nowrap; }
.badge .ic { width: 12px; height: 12px; }
.badge--ink { background: var(--ink); color: #fff; }
.badge--green { background: var(--green-bg); color: var(--green-ink); }
.badge--blue { background: var(--blue-bg); color: var(--blue-ink); }
.badge--line { background: #fff; border: 1px solid var(--line); color: var(--muted); }
.badge--warn { background: var(--amber-bg); color: var(--amber-ink); }
.badge--red { background: #fdecea; color: var(--red-ink); }
.tag { font-size: 11.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

.ptag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--soft-2); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ptag--accent, .ptag--red { background: var(--green-bg); color: var(--green-ink); }

.mono { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--r); background: var(--green-bg); color: var(--green-ink); font-weight: 800; font-size: 19px; border: 1px solid #cdeedf; }
.mono--xs { width: 32px; height: 32px; font-size: 14px; border-radius: 8px; }
.mono--sm { width: 40px; height: 40px; font-size: 17px; }
.mono--xl { width: 84px; height: 84px; font-size: 38px; border-radius: 16px; }

.stars { position: relative; display: inline-block; color: #dde1e6; font-size: 16px; letter-spacing: 1px; line-height: 1; white-space: nowrap; font-family: Arial, "DejaVu Sans", sans-serif; }
.stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--green); }
.stars--sm { font-size: 13px; }
.stars--lg { font-size: 22px; }

.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; align-self: center; }
.sdot--live { background: var(--red); }
.sdot--scheduled { background: var(--amber); }
.sdot--observed { background: #fff; border: 2px solid var(--ink-2); }
.sdot--unknown_end { background: repeating-linear-gradient(45deg, var(--muted) 0 2px, transparent 2px 4px); border: 1px solid var(--muted); }

.bar { display: block; height: 10px; border-radius: 4px; background: var(--soft-2); }
.bar.tall { height: 16px; }
.w20 { width: 20%; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.chip:hover { border-color: var(--green); color: var(--green-ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .ic { width: 16px; height: 16px; }
.chip--icon[aria-pressed="true"] .ic { color: var(--green); }

.field-inline { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: 13px; color: var(--muted); font-weight: 600; max-width: 100%; }
.field-inline select { border: 0; background: transparent; min-height: 38px; font-weight: 700; color: var(--ink); padding: 0 4px; font-size: 14px; max-width: 100%; min-width: 0; }
.field-inline:focus-within { border-color: var(--green); }
.field-inline select:focus-visible { outline: none; }
.search-inline { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; flex: 1 1 260px; min-width: 0; }
.search-inline input { border: 0; background: transparent; min-height: 42px; width: 100%; font-size: 14.5px; min-width: 0; }
.search-inline input:focus-visible { outline: none; }
.search-inline:focus-within { border-color: var(--green); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.seg__btn { width: 42px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); }
.seg__btn + .seg__btn { border-left: 1px solid var(--line); }
.seg__btn[aria-pressed="true"] { background: var(--green-bg); color: var(--green-ink); }

.toolbar { display: grid; gap: 10px; margin-top: 14px; }
.toolbar__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 10px; min-height: 44px; border-top: 1px solid var(--line); padding-top: 6px; }
.result-bar p { font-size: 14px; font-weight: 600; }
.result-bar b { font-size: 16px; font-weight: 800; color: var(--green-ink); }

/* ------------------------------------------------------------- 홈 히어로 */

.hero { text-align: center; background: var(--mint); border: 1px solid #d6f0e5; border-radius: 16px; padding: 44px 24px 32px; }
.hero__eyebrow { margin-bottom: 8px; font-size: 13.5px; font-weight: 800; letter-spacing: .02em; color: var(--green-ink); }
.hero__title { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.3; letter-spacing: -.035em; font-weight: 800; }
.hero__title em { font-style: normal; color: var(--green-ink); box-shadow: inset 0 -.32em 0 rgba(0, 168, 107, .18); }
.hero__lede { margin: 10px auto 0; color: var(--muted); font-size: 15.5px; max-width: 720px; }
.hero-search { margin: 22px auto 0; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 24px; max-width: 670px; background: #fff; border: 2px solid var(--green); border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 120, 76, .10); }
.hero-search input { flex: 1; min-width: 0; border: 0; background: transparent; min-height: 54px; font-size: 16px; font-weight: 500; }
.hero-search input:focus-visible { outline: none; }
.hero-search:focus-within { box-shadow: 0 0 0 4px rgba(0, 168, 107, .18); }
.hero-search input::placeholder { color: #8b929c; }
.hero-search__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--green); color: #fff; flex: 0 0 auto; }
.hero-search__btn:hover { background: var(--green-2); }
.hero-search__btn .ic { width: 20px; height: 20px; }
.quick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin-top: 16px; }
.quick__k { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.chip--quick { min-height: 36px; padding: 0 12px; font-size: 13.5px; background: #fff; border-color: #d6eee4; color: var(--ink-2); }
.chip--quick[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }

.ticker { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.ticker b { color: var(--ink); font-weight: 700; }
.ticker em { font-style: normal; color: var(--muted); margin-left: 2px; }
.ticker em::before { content: "("; } .ticker em::after { content: ")"; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.home-main { min-width: 0; }
.rail { position: sticky; top: 84px; display: grid; gap: 12px; margin-top: 28px; }
.rail-box { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; background: #fff; display: grid; gap: 8px; }
.rail-box--green { background: var(--mint); border-color: #d6f0e5; }
.rail-box__title { font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-box__price { font-size: 14px; font-weight: 700; }
.rail-box__price b { font-size: 28px; font-weight: 800; color: var(--green-ink); letter-spacing: -.02em; }
.rail-box .small { color: var(--muted); }
.rail-box .btn { margin-top: 4px; }
.rail-link { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 13.5px; font-weight: 700; color: var(--green-ink); text-decoration: none; }
.rail-link .ic { width: 14px; height: 14px; }
.rail-counts li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rail-counts li:last-child { border-bottom: 0; }
.rail-counts b { margin-left: auto; font-weight: 800; }
.rail-list { display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.rail-list li { display: flex; gap: 8px; align-items: flex-start; }
.rail-list .ic { width: 15px; height: 15px; margin-top: 3px; color: var(--green-ink); }

/* ------------------------------------------------------------- 섹션 */

.section { margin-top: 40px; }
.section--first { margin-top: 28px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 24px; }
.section-note { font-size: 13.5px; color: var(--muted); max-width: 520px; }
.page-head { padding: 8px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.page-head--tight { margin-bottom: 20px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: 13.5px; text-decoration: none; color: var(--muted); }
.back:hover { color: var(--green-ink); }
.back .ic { width: 16px; height: 16px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 12px; min-height: 28px; }
.crumbs a { color: var(--ink-2); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a:hover { color: var(--green-ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 700; }

/* 주제 탭 + 리뷰 티저 */
.topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.topic { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 14.5px; color: var(--ink-2); }
.topic .ic { width: 16px; height: 16px; color: var(--muted); }
.topic:hover { border-color: var(--green); }
.topic[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.topic[aria-pressed="true"] .ic { color: #fff; }
.topic-note { font-size: 13px; color: var(--muted); margin: 12px 0 12px; }
.topic-note b { color: var(--ink); }
.teaser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.teaser { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; min-width: 0; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.teaser:hover { border-color: #bfe8d6; box-shadow: var(--shadow); }
.teaser__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.teaser__type { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.teaser__title { font-size: 16.5px; font-weight: 800; line-height: 1.42; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.teaser__title a { text-decoration: none; }
.teaser__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.teaser__title--locked { display: flex; gap: 6px; align-items: center; font-size: 14.5px; color: var(--muted); }
.teaser__title--locked .ic { width: 15px; height: 15px; }
.teaser__gb { display: grid; gap: 8px; }
.teaser__gb div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13.5px; color: var(--ink-2); }
.teaser__gb dd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.teaser__gb .is-hit dd { color: var(--ink); font-weight: 600; }
.gb-good, .gb-bad { font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; white-space: nowrap; margin-top: 1px; }
.gb-good { background: var(--green-bg); color: var(--green-ink); }
.gb-bad { background: var(--soft-2); color: var(--ink-2); }
.teaser__redact { display: grid; gap: 7px; padding: 4px 0; }
.teaser__hint { font-size: 13px; color: var(--muted); }
.teaser__who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.teaser__name { display: grid; min-width: 0; flex: 1; font-size: 14px; line-height: 1.3; }
.teaser__name small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teaser__score { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.teaser__cta { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 13.5px; font-weight: 700; color: var(--green-ink); text-decoration: none; }
.teaser__cta .ic { width: 14px; height: 14px; }
.teaser__cta:hover { text-decoration: underline; }

/* ----------------------------------------------- 인플루언서 카드 */

.creator-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.ccard { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); min-width: 0; }
.ccard:hover, .ccard:focus-within { border-color: #9fdcc1; box-shadow: var(--shadow); }
.ccard__top { display: flex; gap: 12px; align-items: center; }
.ccard__id { min-width: 0; flex: 1; }
.ccard__name { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.ccard__name a { text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.stretch:focus-visible { outline: none; }
.stretch:focus-visible::after { outline: 2px solid var(--green); outline-offset: 2px; }
.ccard__handle { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard__rating { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ccard__rating b { font-size: 17px; font-weight: 800; }
.ccard__rating .muted { font-size: 12.5px; margin-left: 4px; }
.ccard__dims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--soft); border-radius: var(--r-sm); padding: 8px 4px; }
.ccard__dims li { display: grid; text-align: center; gap: 1px; }
.ccard__dims li + li { border-left: 1px solid var(--line); }
.ccard__dims span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ccard__dims b { font-size: 14px; font-weight: 800; }
.ccard__empty { font-size: 13px; color: var(--muted); background: var(--soft); border-radius: var(--r-sm); padding: 12px; text-align: center; }
.ccard__meta { display: flex; flex-wrap: wrap; gap: 5px; }
.ccard__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.ccard__badges:empty { display: none; }
.ccard__camp { display: flex; gap: 7px; align-items: center; font-size: 13px; color: var(--ink-2); min-height: 20px; }
.ccard__camp span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ccard__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; }
.lock-tag, .open-tag { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); }
.lock-tag .ic, .open-tag .ic { width: 14px; height: 14px; }
.open-tag { color: var(--green-ink); }
.ccard__go { display: inline-flex; align-items: center; gap: 2px; color: var(--green-ink); }
.ccard__go .ic { width: 14px; height: 14px; }
.bm { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; color: var(--muted); flex: 0 0 auto; }
.bm:hover { border-color: var(--green); }
.bm[aria-pressed="true"] { color: var(--green); border-color: #9fdcc1; background: var(--green-bg); }
.bm .ic { width: 17px; height: 17px; }
.bm-btn[aria-pressed="true"] { color: var(--green-ink); border-color: #9fdcc1; background: var(--green-bg); }

.creator-list { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.crow { position: relative; display: grid; grid-template-columns: 40px minmax(140px, 1.3fr) minmax(0, 1fr) 140px 90px minmax(0, 1.1fr) 40px; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.crow:last-child { border-bottom: 0; }
.crow:hover { background: var(--soft); }
.crow h3 { font-size: 15.5px; font-weight: 800; }
.crow h3 a { text-decoration: none; }
.crow__id p { font-size: 12.5px; color: var(--muted); }
.crow__plat { display: flex; gap: 4px; flex-wrap: wrap; }
.crow__score { display: flex; align-items: center; gap: 6px; }
.crow__score b { font-size: 16px; font-weight: 800; }
.crow__score small { display: block; font-size: 11.5px; color: var(--muted); }
.crow__camp { display: flex; align-items: center; gap: 7px; font-size: 13px; }

.empty { display: flex; gap: 22px; align-items: center; padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--soft); grid-column: 1 / -1; }
.empty__big { font-size: 56px; font-weight: 800; line-height: 1; color: var(--green); }
.empty h3 { font-size: 17px; font-weight: 800; }
.empty p { color: var(--muted); margin-top: 4px; }
.empty .btn { margin-top: 12px; }
.empty--sm { padding: 20px; }

/* ----------------------------------------------- 페이월·범위 */

.paywall { position: relative; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-height: 380px; display: grid; background: var(--soft); }
.paywall__ghost { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 16px; opacity: .7; }
.ghost-card { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.ghost-mono { width: 40px; height: 40px; border-radius: 10px; background: var(--soft-2); }
.paywall__body { grid-area: 1 / 1; align-self: center; justify-self: center; z-index: 1; max-width: 520px; margin: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: 0 10px 30px rgba(32, 35, 41, .10); text-align: center; }
.paywall__body .eyebrow { justify-content: center; }
.paywall__body .btn-row { justify-content: center; }
.paywall__title { font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.35; margin: 8px 0 8px; }
.paywall__body p { color: var(--muted); font-size: 14px; }
.scope { padding: 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--soft); }
.lockpanel { margin-top: 16px; padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--soft); }
.lockpanel p { margin-top: 8px; max-width: 640px; }

/* ----------------------------------------------- 상세 · 대시보드 헤더 */

.idhead { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px 20px; }
.idhead__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; align-items: center; }
.idhead__who { display: flex; gap: 20px; align-items: center; min-width: 0; }
.idhead__who > div { min-width: 0; }
.idhead__name { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; margin-top: 2px; }
.idhead__meta { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.idhead__plat { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.idhead .eyebrow { margin-bottom: 2px; }
.idhead--plain { padding-bottom: 24px; }
.idhead__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.scoreboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--soft); }
.scoreboard > div { padding: 12px 14px; border-top: 1px solid var(--line); }
.scoreboard > div + div:not(:nth-child(2)) { border-left: 1px solid var(--line); }
.scoreboard__main { grid-column: 1 / -1; border-top: 0 !important; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; }
.scoreboard dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.scoreboard dd { font-size: 19px; font-weight: 800; margin-top: 2px; }
.scoreboard dd small { font-size: 12.5px; color: var(--muted); margin-left: 2px; font-weight: 600; }
.scoreboard__main dd { display: flex; align-items: center; gap: 8px; margin: 0; }
.scoreboard__main .num { font-size: 32px; line-height: 1; letter-spacing: -.03em; font-weight: 800; }
.scoreboard__main small { font-size: 14px; color: var(--muted); }

.disclose { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 16px; border: 1px solid #f1dca8; background: var(--amber-bg); border-radius: var(--r); font-size: 13.5px; }
.disclose .ic { margin-top: 2px; color: var(--amber-ink); }

.unlockbar { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px 12px 18px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--r); background: #fff; }
.unlockbar p { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; flex: 1 1 360px; }
.unlockbar .ic { margin-top: 2px; color: var(--muted); }
.unlockbar.is-open { background: var(--green-bg); border-color: #cdeedf; border-left-color: var(--green); }
.unlockbar.is-open .ic { color: var(--green-ink); }

.tabs { display: flex; gap: 2px; margin-top: 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; min-height: 48px; padding: 0 16px; border: 0; background: transparent; font-weight: 700; font-size: 15.5px; color: var(--muted); white-space: nowrap; }
.tab .num { font-size: 13px; margin-left: 3px; color: var(--green-ink); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--green); }
.tabpanel { padding-top: 20px; }
.tabpanel:focus-visible { outline-offset: 6px; }

.detail-grid { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.breakdown { position: sticky; top: 84px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; display: grid; gap: 12px; }
.bd__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bd__label { font-weight: 700; font-size: 14px; }
.bd__val { font-weight: 800; font-size: 15px; }
.bd__bar { height: 7px; background: var(--soft-2); border-radius: 4px; overflow: hidden; margin-top: 5px; }
.bd__bar b { display: block; height: 100%; background: var(--green); border-radius: 4px; transition: width .5s var(--ease); }
.bd__hint { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.breakdown--locked .bd { display: grid; gap: 8px; }

.review-filters { display: grid; gap: 10px; margin-bottom: 6px; }
.review-list { display: grid; gap: 12px; margin-top: 8px; }
.rcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; display: grid; gap: 12px; }
.rcard__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rcard__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.rcard__score { display: inline-flex; align-items: center; gap: 6px; }
.rcard__score .num { font-size: 18px; font-weight: 800; }
.rcard__meta { font-size: 13px; color: var(--ink-2); }
.rcard__title { font-size: 18px; font-weight: 800; letter-spacing: -.025em; line-height: 1.4; }
.sar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--soft); border-radius: var(--r); }
.sar div { padding: 12px 14px; }
.sar div + div { border-left: 1px solid var(--line); }
.sar dt { font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.sar dd { font-size: 14px; }
.gb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gb__item { padding: 12px 14px; border-radius: var(--r); font-size: 14px; border: 1px solid var(--line); }
.gb__item--good { background: #f4fbf8; border-color: #d6f0e5; }
.gb__item--bad { background: #fafbfc; }
.gb__k { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-weight: 800; font-size: 13px; margin-bottom: 4px; }
.gb__item--good .gb__k { color: var(--green-ink); }
.btag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.btag--good { background: var(--green-bg); color: var(--green-ink); }
.btag--bad { background: var(--soft-2); color: var(--ink-2); }
.rmini { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.rmini li { padding: 7px 4px; text-align: center; display: grid; gap: 1px; }
.rmini li + li { border-left: 1px solid var(--line); }
.rmini span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.rmini b { font-size: 13.5px; font-weight: 800; }
.rcard__note { display: flex; gap: 7px; align-items: center; font-size: 13px; color: var(--muted); }
.rcard__note .ic { width: 15px; height: 15px; }
.reply { padding: 12px 14px; background: var(--soft); border-left: 3px solid var(--green); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 14px; }
.reply__k { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 800; color: var(--green-ink); margin-bottom: 4px; }
.reply__k .ic { width: 14px; height: 14px; }
.rcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.rcard__foot > .muted { display: inline-flex; gap: 6px; align-items: center; }
.rcard__foot .ic { width: 14px; height: 14px; }
.rcard__foot .btn-row { margin: 0; }

.redacted-list { position: relative; display: grid; gap: 12px; }
.rcard--locked { gap: 10px; }
.lock-overlay { position: absolute; inset: 36px 24px auto; margin: auto; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 10px 30px rgba(32, 35, 41, .12); text-align: center; }
.lock-overlay .eyebrow { justify-content: center; }
.lock-overlay h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 6px; }
.lock-overlay p { color: var(--muted); font-size: 14px; }
.lock-overlay .btn { margin-top: 14px; }

.results-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.vbox { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.vbox--ink { background: var(--green-bg); border-color: #cdeedf; }
.vbox__k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink); }
.vbox--ink .vbox__k { color: var(--green-ink); }
.vbox__n { font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.vbox__n small { font-size: 15px; margin-left: 2px; }
.redacted-table { display: grid; border-top: 1px solid var(--line); }
.redacted-table div { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.redacted-table .bar { width: 100%; }

.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table thead th { font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--soft); }
.table tbody tr:hover { background: #fafbfc; }
.table .r { text-align: right; }
.table .plus { color: var(--green-ink); font-weight: 800; }
.table .minus { color: var(--ink); font-weight: 800; }
.table--cmp tbody th { font-weight: 700; width: 24%; }
.table--cmp td:last-child { background: #f6fcf9; }

.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }

/* ----------------------------------------------- 캠페인 */

.legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.legend li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 12px 16px; font-size: 12.5px; color: var(--muted); }
.legend li + li { border-left: 1px solid var(--line); }
.legend b { color: var(--ink); font-size: 14px; }
.legend li > span:not(.sdot) { flex: 1 1 100%; }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); gap: 12px; margin-top: 10px; align-items: start; }
.board--empty { display: block; }
.board__col { display: grid; gap: 10px; padding: 12px; background: var(--soft); border-radius: var(--r-lg); min-width: 0; }
.board__head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; padding: 4px 4px 8px; border-bottom: 1px solid var(--line); }
.board__head .num { margin-left: auto; font-size: 13px; color: var(--muted); }
.board__none { font-size: 13px; color: var(--muted); padding: 10px 4px; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; gap: 7px; min-width: 0; }
.kcard--live { border-left: 3px solid var(--red); }
.kcard__top { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.kcard__type { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--soft-2); padding: 2px 8px; border-radius: 999px; }
.kcard__title { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.kcard__who { font-size: 13.5px; }
.kcard__who a { font-weight: 700; text-underline-offset: 3px; display: inline-block; min-height: 24px; }
.kcard__who .muted { font-size: 12px; }
.kcard__when { font-size: 13px; color: var(--ink-2); }
.kcard__src { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ----------------------------------------------- 위저드 */

.wizard { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.wizard__progress { position: sticky; top: 84px; display: grid; gap: 14px; }
.pbar { height: 6px; background: var(--soft-2); border-radius: 3px; overflow: hidden; }
.pbar b { display: block; height: 100%; background: var(--green); transition: width .35s var(--ease); }
.steps { display: grid; gap: 4px; }
.steps li { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border-radius: var(--r-sm); font-weight: 700; color: var(--muted); border: 1px solid transparent; }
.steps .num { font-size: 12px; font-weight: 800; }
.steps li.is-now { background: var(--green-bg); color: var(--green-ink); border-color: #cdeedf; }
.steps li.is-done { color: var(--ink); }
.steps li.is-done .num { color: var(--green-ink); }
.wizard__body { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; min-width: 0; }
.form-errors:not(:empty) { padding: 12px 14px; border: 1px solid #f3b4ae; background: #fff6f5; border-radius: var(--r-sm); color: var(--red-ink); margin-bottom: 16px; font-size: 14px; }
.fs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
.fs--flat { gap: 0; margin-bottom: 8px; }
.fs__legend { font-size: 21px; font-weight: 800; letter-spacing: -.03em; padding: 0; margin-bottom: 4px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field__label { font-weight: 700; font-size: 14px; }
.req { font-size: 11.5px; font-weight: 700; color: var(--green-ink); margin-left: 4px; }
.opt { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.field input:is([type="text"], [type="search"], [type="email"], [type="number"], [type="date"], [type="month"], [type="url"]), .field select, .field textarea { width: 100%; min-width: 0; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; font-size: 15px; }
.field > .link-btn[data-action="toggle-add-creator"] { display: inline-flex; align-items: center; justify-content: flex-start; justify-self: start; gap: 8px; text-align: left; }
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 168, 107, .18); }
[aria-invalid="true"] { border-color: var(--red-ink) !important; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-err { color: var(--red-ink); font-size: 13px; font-weight: 600; }
.field-err:empty { display: none; }
.counter { font-size: 12px; color: var(--muted); text-align: right; }
.radio-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-cards--col { display: grid; }
.rcard-opt { position: relative; }
.rcard-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rcard-opt > span { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-weight: 600; font-size: 14px; transition: background .15s var(--ease), border-color .15s var(--ease); }
.rcard-opt--lg > span { display: grid; padding: 12px 16px; gap: 2px; border-radius: var(--r); }
.rcard-opt--lg small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.rcard-opt input:hover + span { border-color: var(--green); }
.rcard-opt input:checked + span { background: var(--green-bg); border-color: var(--green); color: var(--green-ink); font-weight: 700; }
.rcard-opt input:checked + span small { color: var(--green-ink); }
.rcard-opt input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.radio-cards--sm .rcard-opt > span { font-size: 13.5px; }
.proof { padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); display: grid; gap: 10px; background: var(--soft); }
.proof.is-set { border-style: solid; border-color: #9fdcc1; background: #f4fbf8; }
.proof__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.proof__head h3 { font-size: 15.5px; font-weight: 800; }
.proof__file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); }
.proof__file em { color: var(--muted); font-style: normal; font-weight: 500; }
.proof__file .link-btn { margin-left: auto; }
.rate-list { display: grid; gap: 10px; }
.rate { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px 16px; margin: 0; min-width: 0; background: #fff; }
.rate legend { display: contents; }
.rate legend b { display: block; font-size: 15px; font-weight: 800; }
.rate legend span { display: block; font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; }
.rate__opts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.rate__opt { position: relative; }
.rate__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rate__opt span { display: grid; place-items: center; gap: 1px; min-height: 54px; padding: 6px 2px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; text-align: center; }
.rate__opt b { font-size: 17px; font-weight: 800; line-height: 1; }
.rate__opt small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.rate__opt input:hover + span { border-color: var(--green); }
.rate__opt input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.rate__opt input:checked + span small { color: #e7f7f0; }
.rate__opt--na input:checked + span { background: var(--soft-2); color: var(--ink); border-color: var(--ink-2); border-style: dashed; }
.rate__opt--na input:checked + span small { color: var(--muted); }
.rate__opt input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--soft); }
.summary p { padding: 10px 12px; display: grid; font-size: 14px; }
.summary p + p { border-left: 1px solid var(--line); }
.summary span { font-size: 12px; color: var(--muted); font-weight: 600; }
.check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 0; font-size: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--green); }
.wizard__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.wizard__spacer { flex: 1; }
.done { padding: 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-top: 2px solid var(--line); }
.timeline li { padding: 16px 16px 0 0; display: grid; gap: 4px; position: relative; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); }
.timeline li.is-done { color: var(--ink); }
.timeline li.is-done::before { background: var(--green); border-color: var(--green); }
.timeline li.is-now { color: var(--ink); }
.timeline li.is-now::before { background: #fff; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.timeline b { font-size: 15px; }
.timeline span { font-size: 12.5px; }

/* ----------------------------------------------- 대시보드 */

.dash-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.dash-grid .stack > .tile { grid-column: auto; }
.stack { display: grid; gap: 12px; min-width: 0; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tile h3 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.tile__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tile--paper { background: var(--soft); border-color: var(--soft); }
.tile__link { margin-top: auto; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--green-ink); background: none; border: 0; padding: 0; }
.tile__link:hover { text-decoration: underline; }
.tile__link .ic { width: 15px; height: 15px; }
.mini-reviews li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mini-reviews .num { font-size: 18px; font-weight: 800; color: var(--green-ink); background: var(--green-bg); border-radius: var(--r-sm); text-align: center; padding: 6px 0; }
.mini-reviews b { display: block; font-size: 14.5px; line-height: 1.4; }
.mini-reviews small { color: var(--muted); font-size: 12.5px; }
.flow { display: grid; gap: 8px; counter-reset: f; margin: 6px 0; }
.flow li { counter-increment: f; display: block; position: relative; padding-left: 34px; font-size: 14px; }
.flow li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-size: 12px; font-weight: 800; line-height: 1.6; color: var(--green-ink); }
.flow--plain li { font-size: 14px; }
.deleted-log { margin-top: 20px; padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--soft); }
.deleted-log li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.deleted-log li:last-child { border-bottom: 0; }
.deleted-log .muted { margin-left: auto; }
.panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; min-width: 0; }
.panel .radio-cards { margin-bottom: 18px; }
.save-status { font-size: 13px; font-weight: 700; color: var(--green-ink); }
.mail-preview { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.mail-preview__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--soft); border-bottom: 1px solid var(--line); }
.mail-preview__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.mail-preview__bar em { margin-left: auto; font-size: 12px; color: var(--muted); font-style: normal; }
.mail-preview__body { padding: 24px; display: grid; gap: 10px; justify-items: start; }
.mail-preview__body h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

/* ----------------------------------------------- 요금제 */

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plan { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; min-width: 0; }
/* 브랜드·인플루언서 플랜은 같은 배경·테두리·버튼 색을 씁니다 (V3) */
.plan__k { font-size: 13px; font-weight: 800; color: var(--green-ink); }
.plan__name { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.plan__price { display: flex; align-items: baseline; gap: 3px; font-weight: 700; font-size: 17px; }
.plan__price .num { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.plan__price small { font-size: 14px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.plan__sub { font-weight: 700; font-size: 14.5px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.plan__sub b { color: var(--green-ink); }
.plan__list { display: grid; gap: 9px; font-size: 14.5px; }
.plan__list li { display: flex; gap: 9px; align-items: flex-start; }
.plan__list .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--green); }
.plan__warn { font-size: 13px; color: var(--muted); padding: 10px 12px; background: var(--soft); border-radius: var(--r-sm); }
.plan__warn--inv { background: #fff; }
.plan__cta { margin-top: auto; padding-top: 8px; display: grid; gap: 10px; justify-items: start; }
.plan__cta .btn--block { justify-self: stretch; }
.plan__state { display: flex; gap: 7px; align-items: center; font-weight: 700; font-size: 14px; }
.plan__state .ic { color: var(--green); }
.plan__state--inv { color: var(--muted); font-weight: 600; }
.plan--compact { padding: 22px; }
.plan--compact .plan__list { margin-top: 4px; }
.policy { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; margin-top: 40px; padding: 28px; background: var(--soft); border-radius: var(--r-lg); }
.policy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.policy li { display: grid; gap: 3px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.policy li b { color: var(--ink); font-size: 15px; }
.policy .h-md { margin-top: 6px; }

/* ----------------------------------------------- 계정 */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; display: grid; gap: 2px; min-width: 0; }
.kpi span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kpi b { font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.kpi small { font-size: 12.5px; color: var(--muted); }
.kpi--ink { background: var(--green-bg); border-color: #cdeedf; }
.kpi--ink b { font-size: 36px; color: var(--green-ink); line-height: 1.05; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-top: 28px; align-items: start; }
.acct-grid .h-md { margin-bottom: 12px; }
.acct-grid .table-wrap + .muted { margin-top: 8px; }
.sublist { display: grid; }
.sublist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sublist li > div { min-width: 0; }
.sublist b { display: block; font-size: 14.5px; }
.sublist small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sublist .btn-row { margin: 0; flex: 0 0 auto; }

/* ----------------------------------------------- 모달 */

.modal { border: 0; padding: 0; background: transparent; max-width: min(560px, calc(100vw - 32px)); width: 100%; max-height: calc(100dvh - 48px); color: var(--ink); overflow: visible; }
.modal--wide { max-width: min(800px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(32, 35, 41, .5); }
.modal[open] .modal__panel { animation: pop .24s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal__panel { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(32, 35, 41, .25); max-height: calc(100dvh - 48px); overflow: auto; }
.modal__head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 22px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.modal__title { font-size: 19px; font-weight: 800; letter-spacing: -.025em; line-height: 1.35; margin-top: 2px; }
.modal__body { padding: 18px 22px 22px; display: grid; gap: 12px; font-size: 14.5px; }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 6px; }
.confirm-id { display: flex; gap: 12px; align-items: center; }
.confirm-id small { display: block; font-size: 12.5px; color: var(--muted); }
.confirm-kv { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.confirm-kv div { padding: 12px 14px; }
.confirm-kv div + div { border-left: 1px solid var(--line); background: var(--green-bg); color: var(--green-ink); }
.confirm-kv dt { font-size: 12.5px; font-weight: 600; opacity: .8; }
.confirm-kv dd { font-size: 24px; font-weight: 800; margin-top: 2px; }
.del-target { padding: 12px 14px; border-left: 3px solid var(--line-2); background: var(--soft); display: grid; gap: 2px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.del-target small { color: var(--muted); font-size: 12.5px; }
.authbox { display: flex; gap: 10px; padding: 12px 14px; background: var(--blue-bg); color: #1d3f86; border-radius: var(--r-sm); font-size: 13.5px; }
.authbox b { display: block; margin-bottom: 2px; }
.authbox .ic { color: var(--blue-ink); margin-top: 2px; }
.sim-flag { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; font-weight: 600; padding: 10px 12px; background: var(--soft); border-radius: var(--r-sm); color: var(--ink-2); }
.sim-flag .ic { width: 15px; height: 15px; margin-top: 1px; color: var(--amber); }
.sub-sum { display: grid; gap: 2px; padding: 16px; background: var(--green-bg); border-radius: var(--r); }
.sub-sum span { font-size: 13px; font-weight: 700; color: var(--green-ink); }
.sub-sum b { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.sub-sum small { color: var(--muted); }
.onboard { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onboard__card { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); align-content: start; }
.onboard__card h3 { font-size: 17px; font-weight: 800; }
.onboard__card ol { display: grid; gap: 6px; counter-reset: o; font-size: 14px; }
.onboard__card li { counter-increment: o; display: flex; gap: 8px; }
.onboard__card li::before { content: counter(o) "."; font-weight: 800; color: var(--green-ink); }
.onboard__card--ink { background: #f4fbf8; border-color: #cdeedf; }
.onboard__card.is-pref { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.prose { display: grid; gap: 10px; }
.pv { padding: 14px 0; border-top: 1px solid var(--line); }
.pv:first-of-type { border-top: 0; padding-top: 0; }
.pv .h-sm { margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline; }
.pv .btn-row { margin-top: 10px; }
.pv .sublist li { padding: 10px 0; }
.switch { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14px; position: relative; }
.switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.switch__ui { width: 44px; height: 26px; border-radius: 13px; background: var(--line-2); position: relative; flex: 0 0 auto; transition: background .2s var(--ease); }
.switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.switch input:checked + .switch__ui { background: var(--green); }
.switch input:checked + .switch__ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--green); outline-offset: 2px; }

/* ----------------------------------------------- 접근 제어 · 비공개 표시 */

.q { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .3em; border-radius: 6px; background: var(--soft-2); color: var(--muted); font-weight: 800; font-size: .9em; line-height: 1; vertical-align: middle; }
.scoreboard__main .num .q, .vbox__n .q, .kpi b .q { font-size: .7em; }
.stars--locked { color: #e3e6ea; }
.bd__bar--locked { background: repeating-linear-gradient(90deg, var(--soft-2) 0 10px, #f5f6f8 10px 20px); }
.ccard.is-locked .ccard__rating b, .crow.is-locked .crow__score b { color: var(--muted); }
.ccard__dims--locked { background: #fafbfc; }
.rcard--locked { background: #fcfcfd; }
.rcard--locked .rcard__title { color: var(--muted); }
.scoreboard--locked .scoreboard__main { background: #fcfcfd; }

.access-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 14px; }
.access-bar > .ic { color: var(--green-ink); }
.access-bar p { flex: 1 1 360px; color: var(--ink-2); }
.hero__sub { margin-top: 14px; font-size: 13.5px; }
.hero__sub a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--green-ink); font-weight: 700; text-decoration: none; }
.hero__sub a:hover { text-decoration: underline; }
.hero__sub .ic { width: 14px; height: 14px; }

.verify-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--ink-2); }
.verify-pill .ic { width: 15px; height: 15px; }
.verify-pill--verified { background: var(--green-bg); border-color: #cdeedf; color: var(--green-ink); }
.verify-pill--pending { background: var(--amber-bg); border-color: #f1dca8; color: var(--amber-ink); }
.verify-pill--rejected { background: #fdecea; border-color: #f3b4ae; color: var(--red-ink); }
.link-btn--top { min-height: 40px; font-size: 13px; color: var(--muted); }

.sample-banner { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 14px 0; padding: 12px 16px; border: 1px solid #d6f0e5; border-radius: var(--r); background: var(--mint); font-size: 14px; }
.sample-banner > .ic { color: var(--green-ink); }
.sample-banner p { flex: 1 1 320px; }
.camp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.camp-stats li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; background: #fff; }
.camp-stats b { font-weight: 800; }

.gate { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px 28px; align-items: center; margin-bottom: 16px; padding: 24px 26px; border: 1px solid #cdeedf; border-radius: var(--r-lg); background: var(--mint); }
.gate__title { font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.025em; line-height: 1.35; margin: 6px 0 6px; }
.gate__main p { color: var(--ink-2); font-size: 14.5px; }
.gate .btn-row { margin-top: 14px; }
.csteps { display: grid; gap: 8px; }
.csteps__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.csteps__item b { display: block; font-size: 14px; }
.csteps__item small { display: block; font-size: 12.5px; color: var(--muted); }
.csteps__n { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--soft-2); font-weight: 800; font-size: 13px; color: var(--muted); }
.csteps__item.is-done .csteps__n { background: var(--green); color: #fff; }
.csteps__item.is-wait .csteps__n { background: var(--amber-bg); color: var(--amber-ink); }
.csteps__item.is-fail .csteps__n { background: #fdecea; color: var(--red-ink); }
.idhead--masked .mono { background: var(--soft-2); color: var(--muted); border-color: var(--line); }

.verify-top { margin-bottom: 14px; }
.vstatus { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; margin-bottom: 14px; display: grid; gap: 6px; }
.vstatus .h-md { display: flex; align-items: center; gap: 8px; }
.vstatus--pending { background: var(--amber-bg); border-color: #f1dca8; }
.vstatus--ok { background: var(--green-bg); border-color: #cdeedf; }
.vstatus--fail { background: #fff6f5; border-color: #f3b4ae; }
.vstatus .btn-row { margin-top: 8px; }
.verify-form { display: grid; gap: 14px; }
.vtarget { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--soft); }
.vtarget b { display: block; font-size: 14.5px; }
.vtarget small { display: block; color: var(--muted); font-size: 12.5px; }
.vm { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.vm .disclose { margin-top: 0; }

.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.auth-tab { min-height: 44px; border: 0; background: var(--soft); font-weight: 700; font-size: 15px; color: var(--muted); }
.auth-tab + .auth-tab { border-left: 1px solid var(--line); }
.auth-tab[aria-selected="true"] { background: #fff; color: var(--green-ink); box-shadow: inset 0 -3px 0 var(--green); }
#login-form { display: grid; gap: 12px; }
.acct-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.acct-type { position: relative; }
.acct-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.acct-type > span { display: grid; gap: 2px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; }
.acct-type b { font-size: 14.5px; }
.acct-type small { font-size: 12px; color: var(--muted); }
.acct-type input:checked + span { border-color: var(--green); background: var(--green-bg); box-shadow: 0 0 0 1px var(--green); }
.acct-type input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.field input[readonly] { background: var(--soft); color: var(--muted); }
.login-next { padding: 12px 14px; border-radius: var(--r-sm); background: var(--soft); }
.login-next .field__label { margin-bottom: 6px; }
.table--matrix td { font-size: 13.5px; }
.table--matrix td:last-child { background: transparent; }
.plan__warn a { color: var(--green-ink); font-weight: 700; }

/* ----------------------------------------------- 토스트 */

.toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 13px 16px; border-radius: var(--r); font-size: 14px; font-weight: 600; border-left: 4px solid var(--green); box-shadow: 0 8px 24px rgba(32, 35, 41, .25); animation: pop .22s var(--ease); transition: opacity .3s, transform .3s; }
.toast--warn { border-left-color: var(--amber); }
.toast.is-out { opacity: 0; transform: translateY(6px); }

/* ----------------------------------------------- 진입 효과 */

.view.is-entering .rv { animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* ----------------------------------------------- V3 추가 */

.mono--img { overflow: hidden; padding: 0; background: var(--soft-2); }
.mono--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mono--img.is-fallback { background: var(--green-bg); }
.img-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; color: var(--green-ink); }
.ptag--public { background: var(--blue-bg); color: var(--blue-ink); }
.ptag--demo { background: var(--soft-2); color: var(--muted); }
.src-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 13px; font-weight: 700; color: var(--blue-ink); text-underline-offset: 3px; }
.src-link .ic { width: 13px; height: 13px; transform: rotate(-45deg); }
.idhead__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.data-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 16px; border: 1px solid #cfdcf6; background: var(--blue-bg); border-radius: var(--r); font-size: 13.5px; color: var(--ink-2); }
.data-note .ic { margin-top: 2px; color: var(--blue-ink); flex: 0 0 auto; }
.data-note a { color: var(--blue-ink); font-weight: 700; }
.scoreboard--public .badge { font-size: 13px; }
.small-dd { font-size: 14px !important; font-weight: 700 !important; }

.creator-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin: 28px 0; padding: 28px 30px; border: 1px solid #cdeedf; border-radius: var(--r-lg); background: var(--mint); }
.creator-banner > div:first-child { flex: 1 1 420px; min-width: 0; }
.creator-banner__k { font-size: 14px; font-weight: 800; color: var(--green-ink); }
.creator-banner__title { font-size: clamp(20px, 2.2vw, 27px); font-weight: 800; letter-spacing: -.03em; line-height: 1.3; margin: 6px 0 8px; }
.creator-banner__price b { font-size: 22px; font-weight: 800; }
.creator-banner__list { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.creator-banner .btn-row { margin-top: 0; }

.kcard__media { position: relative; aspect-ratio: 21 / 9; margin: -14px -14px 4px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; background: var(--soft-2); display: grid; place-items: center; }
.kcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kcard__media .img-fallback { font-size: 28px; }
.kcard__ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--soft) 0%, var(--green-bg) 100%); }
.kcard__ph .mono { width: 64px; height: 64px; font-size: 26px; border-radius: 16px; box-shadow: var(--shadow); }
.kcard__ph-ic { position: absolute; right: 12px; bottom: 10px; color: var(--green-ink); }
.kcard__ph-ic .ic { width: 20px; height: 20px; }
.kcard__top .ptag { margin-left: auto; }
.kcard__top .kcard__type { margin-left: 0; }
.camp-sections { display: grid; gap: 26px; margin-top: 8px; }
.camp-section__head { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.camp-section__head .ic { color: var(--green-ink); }
.camp-section__head .num { font-size: 14px; color: var(--muted); font-weight: 700; }
.camp-stats__note { color: var(--muted); border-style: dashed !important; }

.w-search { margin-bottom: 8px; }
.add-creator { display: grid; gap: 10px; margin-top: 10px; padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--soft); }
.money { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.money input[type="number"] { flex: 1 1 140px; min-width: 0; }
.check--inline { min-height: 36px; padding: 4px 0; font-size: 13.5px; }
.btn-row--tight { margin-top: 0; gap: 6px; }
.file-btn { position: relative; cursor: pointer; }
.file-btn:focus-within { outline: 3px solid var(--green); outline-offset: 2px; }
.proof__file--local { align-items: center; }
.proof__thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.pub-preview { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--soft); }
.rcard--preview { background: #fff; }
.private-box { padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r); background: #fff; font-size: 13.5px; }
.private-box .rail-list { margin-top: 6px; }
.rcard__body { display: grid; gap: 4px; font-size: 14.5px; }
.rcard__k { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.opened { display: grid; gap: 12px; margin-bottom: 22px; padding: 16px; border: 1px solid #cfdcf6; border-radius: var(--r-lg); background: #f7faff; }
.teaser--locked { background: var(--soft); }
.teaser__cta--btn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--green-ink); text-align: left; }
.ticker__s { color: var(--muted); }
.free-path { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 16px; padding: 22px 26px; border: 1px dashed #9fdcc1; border-radius: var(--r-lg); background: #fff; }
.free-path > div:first-child { flex: 1 1 420px; min-width: 0; }
.free-path p:not(.eyebrow) { margin-top: 6px; color: var(--ink-2); font-size: 14.5px; }
.free-path .btn-row { margin-top: 0; }
.sublist--mod li.mod { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; }
.sublist--mod .field { margin: 0; }
.sublist--mod small { white-space: normal; }
.pv--danger { border-top-color: #f6cfcb; }
.rcard-opt > span small { margin-left: 6px; font-weight: 500; font-size: 12px; color: var(--muted); }
.lock-overlay .btn-row { justify-content: center; }
.lock-overlay .btn-row .btn { margin-top: 0; }
.verify-top .csteps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* ----------------------------------------------- 인플루언서 플랜 소개 · 관리 화면 미리보기 */

.intro-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; padding: 36px 36px 32px; border: 1px solid #cdeedf; border-radius: var(--r-lg); background: var(--mint); }
.intro-hero__k { font-size: 16px; font-weight: 800; color: var(--green-ink); margin: 8px 0 4px; }
.intro-hero .lede { margin-top: 10px; }
.intro-hero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; }
.intro-hero__price b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.intro-hero__price small { font-size: 13px; color: var(--muted); }
.intro-deco { display: grid; gap: 8px; padding: 20px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: #fff; pointer-events: none; user-select: none; }
.intro-deco__k { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.intro-deco__row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.intro-deco__row b { color: var(--muted); }
.intro-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 12px; }
.intro-benefits li { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.intro-benefits .ic { color: var(--green-ink); width: 22px; height: 22px; }
.intro-benefits b { font-size: 16px; font-weight: 800; }
.intro-benefits span { font-size: 14px; color: var(--ink-2); }
.intro-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-top: 12px; }
.intro-flow li { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.intro-flow__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: 13px; }
.intro-flow small { font-size: 13px; color: var(--muted); }
.sample-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 16px; padding: 20px 24px; border: 1px solid #f1dca8; border-radius: var(--r-lg); background: var(--amber-bg); }
.sample-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.sample-head p:not(.eyebrow) { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.sample-head .btn-row { margin-top: 0; }
.reply--locked { opacity: .9; }
@media (max-width: 767px) {
  .intro-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; }
  .sample-head { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ----------------------------------------------- 반응형 */

@media (max-width: 1279px) {
  .topbar__inner { gap: 16px; }
  .gnb-link { padding: 0 9px; font-size: 15px; }
  .role-pill__k { display: none; }
  .home-grid { grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; }
  .crow { grid-template-columns: 40px minmax(120px, 1.3fr) 130px 90px minmax(0, 1fr) 40px; }
  .crow__plat { display: none; }
}

@media (max-width: 1023px) {
  .topbar__inner { padding: 0 16px; gap: 8px; min-height: 56px; }
  .topbar .menu-btn { display: inline-grid; margin-left: -8px; }
  .gnb { display: none; }
  .logo__text { font-size: 17px; }
  .main { padding: 16px 16px 120px; }
  .site-foot__inner { padding: 18px 16px 100px; }
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: #fff; border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(32, 35, 41, .06);
  }
  .bn-link { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 4px 2px; border: 0; background: transparent; color: var(--muted); text-decoration: none; font-size: 11.5px; font-weight: 700; border-radius: var(--r-sm); text-align: center; line-height: 1.15; }
  .bn-link .ic { width: 21px; height: 21px; }
  .bn-link[aria-current="page"] { color: var(--green-ink); background: var(--green-bg); }
  .toast-region { right: 16px; left: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: none; }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 32px; }
  .idhead__grid { grid-template-columns: minmax(0, 1fr); }
  .gate { grid-template-columns: minmax(0, 1fr); }
  .detail-grid, .dash-grid, .acct-grid { grid-template-columns: minmax(0, 1fr); }
  .breakdown { position: static; }
  .wizard { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wizard__progress { position: static; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { flex-direction: column; justify-content: center; gap: 1px; text-align: center; padding: 6px 4px; font-size: 12.5px; line-height: 1.2; }
  .legend { grid-template-columns: 1fr 1fr; }
  .legend li:nth-child(3) { border-left: 0; }
  .legend li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kpis { grid-template-columns: 1fr 1fr; }
  .policy { grid-template-columns: minmax(0, 1fr); }
  .chip { min-height: 44px; }
  .chip--quick { min-height: 44px; }
}

@media (max-width: 767px) {
  body { font-size: 14.5px; }
  .preview-flag { font-size: 12px; min-height: 34px; padding: 2px 12px; gap: 2px 8px; }
  .pf-more { display: none; }
  .role-pill, .link-btn--top, .acct-link { display: none; }
  .credit-pill { min-height: 40px; padding: 0 12px; }
  .verify-pill span { display: none; }
  .verify-pill { width: 40px; padding: 0; justify-content: center; }
  .login-cta { padding: 0 12px; font-size: 13px; }
  .verify-top .csteps { grid-template-columns: minmax(0, 1fr); }
  .acct-types { grid-template-columns: minmax(0, 1fr); }
  .gate { padding: 18px 16px; }
  .hero { padding: 28px 16px 20px; border-radius: var(--r-lg); }
  .hero__title { font-size: 24px; }
  .hero__lede { font-size: 14.5px; }
  .hero-search { padding-left: 16px; margin-top: 18px; }
  .hero-search input { min-height: 50px; font-size: 15px; }
  .quick { justify-content: flex-start; }
  .quick__k { flex: 1 1 100%; text-align: left; }
  .ticker { justify-content: flex-start; }
  .section { margin-top: 32px; }
  .toolbar__row { display: grid; grid-template-columns: 1fr 1fr; }
  .field-inline { width: 100%; min-height: 44px; }
  .field-inline select { flex: 1; min-height: 42px; }
  .search-inline { grid-column: 1 / -1; }
  .toolbar__row .seg { justify-self: end; }
  .seg__btn { height: 42px; width: 44px; }
  .chips { gap: 6px; }
  .chip { padding: 0 13px; font-size: 13.5px; }
  .topic { padding: 0 13px; font-size: 14px; }
  .crow { grid-template-columns: 40px minmax(0, 1fr) auto 40px; gap: 10px; padding: 12px; }
  .crow__ev, .crow__camp, .crow__plat { display: none; }
  .crow__score .stars { display: none; }
  .empty { flex-direction: column; align-items: flex-start; padding: 22px; gap: 8px; }
  .paywall { min-height: 0; }
  .paywall__ghost { grid-template-columns: 1fr 1fr; padding: 10px; gap: 8px; }
  .paywall__body { margin: 12px; padding: 20px; }
  .scope, .lockpanel, .done { padding: 22px 18px; }
  .idhead { padding: 18px 16px 14px; }
  .idhead__who { gap: 14px; align-items: flex-start; }
  .mono--xl { width: 60px; height: 60px; font-size: 26px; border-radius: 12px; }
  .idhead__name { font-size: 23px; }
  .scoreboard__main .num { font-size: 28px; }
  .scoreboard dd { font-size: 17px; }
  .scoreboard > div { padding: 10px 12px; }
  .idhead__actions .btn { flex: 1 1 auto; }
  .tab { padding: 0 12px; font-size: 15px; }
  .rcard { padding: 16px; }
  .rcard__title { font-size: 16.5px; }
  .sar { grid-template-columns: minmax(0, 1fr); }
  .sar div + div { border-left: 0; border-top: 1px solid var(--line); }
  .gb { grid-template-columns: minmax(0, 1fr); }
  .rmini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rmini li:nth-child(4) { border-left: 0; }
  .rmini li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .lock-overlay { inset: 16px 8px auto; padding: 18px; }
  .results-top { grid-template-columns: minmax(0, 1fr); }
  .board { grid-template-columns: minmax(0, 1fr); }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .legend li + li { border-left: 0; border-top: 1px solid var(--line); }
  .wizard__body { padding: 18px 16px; }
  .steps li .num { display: none; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .rate__opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary { grid-template-columns: 1fr 1fr; }
  .summary p:nth-child(3) { border-left: 0; }
  .summary p:nth-child(n+3) { border-top: 1px solid var(--line); }
  .wizard__nav .btn { flex: 1 1 auto; }
  .wizard__spacer { display: none; }
  .timeline { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--line); margin-left: 6px; }
  .timeline li { padding: 0 0 16px 20px; }
  .timeline li::before { top: 4px; left: -7px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 22px 18px; }
  .policy { padding: 22px 18px; }
  .policy ul { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpi { padding: 14px; }
  .kpi--ink { grid-column: 1 / -1; }
  .onboard { grid-template-columns: minmax(0, 1fr); }
  .modal { max-width: calc(100vw - 16px); margin: auto auto 8px; }
  .modal__head { padding: 16px 16px 12px; }
  .modal__body { padding: 14px 16px 18px; }
  .modal__actions .btn { flex: 1 1 auto; }
  .deleted-log .muted { margin-left: 0; }
}

@media (max-width: 380px) {
  .credit-pill span { display: none; }
  .logo__text small { display: none; }
  .toolbar__row { grid-template-columns: minmax(0, 1fr); }
  .toolbar__row .seg { justify-self: start; }
}