@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/variable/pretendardvariable.min.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Cormorant+Garamond:ital,wght@1,500;1,600&display=swap");

:root {
  --bg: #f6f6f7;
  --accent: #ec4b7b;
  --accent-dim: #d83d6c;
  --n50: #fafafa; --n100: #f5f5f5; --n200: #e5e5e5; --n300: #d4d4d4;
  --n400: #a3a3a3; --n500: #737373; --n600: #525252; --n700: #404040;
  --n800: #262626; --n900: #171717;
  --kr: "Pretendard Variable", Pretendard, -apple-system, system-ui, "Apple SD Gothic Neo", sans-serif;
  --mont: "Montserrat", var(--kr);
  --serif: "Cormorant Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--n600); font-family: var(--kr);
  letter-spacing: 0.01em; -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 768px; margin: 0 auto; padding: 36px 20px 90px; }

/* ── 상단 헤더 ───────────────────────────── */
.head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px; align-self: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
}
.logo-word { font-family: var(--mont); font-weight: 700; font-size: 17px; color: var(--n900); letter-spacing: .02em; }
.slash { color: var(--n300); font-weight: 400; }
.head h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--n900); }
.head-right { display: flex; align-items: center; gap: 8px; }
.ro-chip { background: #fff; color: var(--accent-dim); border: 1px solid var(--n200); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.icon-btn { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--n200); background: #fff; color: var(--n500); cursor: pointer; font-size: 15px; }
.icon-btn:hover { color: var(--n800); border-color: var(--n300); }
.text-btn { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--n200); background: #fff; color: var(--n600); cursor: pointer; font-family: var(--kr); font-size: 13px; font-weight: 600; white-space: nowrap; }
.text-btn:hover { color: var(--n900); border-color: var(--n300); }

/* ── 탭 (검정 활성) ──────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 30px; }
.tab {
  border: 0; cursor: pointer; font-family: var(--kr);
  border-radius: 999px; padding: 8px 15px; font-size: 13.5px; font-weight: 500;
  background: #fff; color: var(--n600); box-shadow: inset 0 0 0 1px var(--n200);
  transition: color .15s, background .15s;
}
.tab:hover { color: var(--n900); }
.tab.on { background: var(--n900); color: #fff; box-shadow: none; font-weight: 600; }
.tab .cnt { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--n400); }
.tab.on .cnt { color: rgba(255,255,255,.65); }

/* ── 섹션 ───────────────────────────────── */
.section { margin-bottom: 34px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.sec-head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--n900); }
.sec-label { font-family: var(--serif); font-style: italic; font-size: 12.5px; letter-spacing: 0.22em; color: var(--accent); }

/* 카테고리 필터 (서브탭) */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

/* ── 문의 목록 ───────────────────────────── */
.list { display: flex; flex-direction: column; gap: 10px; }
.item {
  background: #fff; border: 1px solid var(--n200); border-radius: 16px; padding: 16px 18px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.item:hover { border-color: var(--n300); box-shadow: 0 6px 22px -14px rgba(23,23,23,.3); }
.item-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--n400); margin-bottom: 9px; }
.cat { display: inline-flex; align-items: center; gap: 6px; color: var(--n500); font-weight: 500; }
.cat .dot { width: 7px; height: 7px; border-radius: 999px; }
.flag { color: var(--accent-dim); font-weight: 600; }
.meta-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.plat { color: var(--n400); }
.time { font-variant-numeric: tabular-nums; }
.q { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--n900); margin: 0 0 11px; }
.draft {
  background: var(--n50); border: 1px solid var(--n100); border-radius: 12px; padding: 11px 13px;
  font-size: 13px; line-height: 1.6; color: var(--n600); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.item.open .draft { -webkit-line-clamp: unset; }
.draft-cap { font-size: 11px; font-weight: 600; color: var(--n400); margin-bottom: 5px; display: flex; gap: 7px; align-items: center; }
.conf { font-size: 10.5px; font-weight: 600; color: var(--n400); }
.note { margin-top: 8px; font-size: 12px; color: var(--n400); }

/* ── 빈 상태 (점선) ─────────────────────── */
.empty { border: 1px dashed var(--n300); background: rgba(255,255,255,.6); border-radius: 16px; padding: 38px 20px; text-align: center; }
.empty p { margin: 0; font-size: 14px; font-weight: 600; color: var(--n600); }
.empty .sub { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--accent); margin: 6px 0; letter-spacing: .04em; }
.empty span { font-size: 12.5px; color: var(--n400); }

/* ── 패널 / 폼 ───────────────────────────── */
.panel { background: #fff; border: 1px solid var(--n200); border-radius: 16px; padding: 22px 24px; }
.panel + .panel, .panel + .list, .list + .panel { margin-top: 14px; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--n900); letter-spacing: -0.01em; }
.conn-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--n100); color: var(--n500); }
.conn-badge.on { background: rgba(18,184,134,.12); color: #0f9d70; }
.panel.soon { background: var(--n50); border-style: dashed; }
.panel.soon .panel-sub { margin-bottom: 0; }
.panel-sub { font-size: 13px; color: var(--n400); margin: 0 0 18px; line-height: 1.55; }
.panel label { display: block; font-size: 12.5px; font-weight: 600; color: var(--n500); margin: 16px 0 6px; }
.panel label:first-of-type { margin-top: 0; }
.panel-val { font-size: 14.5px; line-height: 1.55; color: var(--n700); }
.panel-val.pre { white-space: pre-wrap; background: var(--n50); border: 1px solid var(--n100); border-radius: 12px; padding: 12px 14px; }
.panel-val.mono { font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; }
.panel-val.copy { cursor: pointer; } .panel-val.copy:hover { color: var(--accent-dim); }
.hint { font-weight: 400; color: var(--n400); font-size: 12px; }
code { background: var(--n100); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.status-grid { display: flex; gap: 22px; margin-top: 22px; font-size: 13.5px; color: var(--n500); flex-wrap: wrap; }
.status-grid > div { display: flex; align-items: center; gap: 8px; }
.sdot { width: 7px; height: 7px; border-radius: 999px; background: var(--n300); }
.sdot.on { background: #12b886; } .sdot.warn { background: var(--accent); }

/* ── 온보딩 (채널 연결 따라하기) ─────────────────────────────── */
.conn-badge.time { background: rgba(236,75,123,.10); color: var(--accent-dim); }
.copy-box {
  background: var(--n50); border: 1px dashed var(--n300); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; word-break: break-all; font-size: 13px;
  color: var(--n700); transition: border-color .15s, background .15s, color .15s;
}
.copy-box::after { content: "  ⧉ 복사"; color: var(--n400); font-family: var(--sans, sans-serif); white-space: nowrap; }
.copy-box:hover { border-color: var(--accent); background: #fff; color: var(--accent-dim); }
.copy-box.copied { border-style: solid; border-color: #12b886; color: #0f9d70; background: rgba(18,184,134,.06); }
.copy-box.copied::after { content: ""; }

details.guide { margin-top: 14px; border-top: 1px solid var(--n100); padding-top: 10px; }
details.guide > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-dim);
  list-style: none; user-select: none; padding: 4px 0;
}
details.guide > summary::-webkit-details-marker { display: none; }
details.guide > summary::before { content: "▸ "; }
details.guide[open] > summary::before { content: "▾ "; }
details.guide[open] > summary { margin-bottom: 6px; }

.onboard-steps { margin: 4px 0 2px; padding: 0; list-style: none; counter-reset: step; }
.onboard-steps li {
  position: relative; padding: 11px 0 11px 40px; font-size: 13.5px; line-height: 1.55;
  color: var(--n700); border-bottom: 1px solid var(--n50);
}
.onboard-steps li:last-child { border-bottom: none; }
.onboard-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 9px; width: 25px; height: 25px; border-radius: 999px;
  background: var(--n900); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-sub { display: block; font-size: 12px; color: var(--n400); margin-top: 3px; }
.step-tip {
  margin-top: 14px; background: rgba(236,75,123,.06); border: 1px solid rgba(236,75,123,.18);
  border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.6; color: var(--n600);
}

.input, .textarea {
  width: 100%; border-radius: 10px; border: 1px solid var(--n200);
  padding: 10px 13px; font-size: 14px; font-family: var(--kr); background: #fff; color: var(--n800);
}
.textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
.input:focus, .textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.input::placeholder, .textarea::placeholder { color: var(--n400); }

.seg { display: inline-flex; background: var(--n100); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; cursor: pointer; font-family: var(--kr); padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--n500); }
.seg button.on { background: #fff; color: var(--n900); font-weight: 600; box-shadow: 0 1px 2px rgba(23,23,23,.08); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: #fff; border: 0;
  font-weight: 600; font-size: 13.5px; font-family: var(--kr); cursor: pointer;
  padding: 10px 20px; border-radius: 999px; box-shadow: 0 12px 26px -14px rgba(236,75,123,.6);
  transition: transform .2s, box-shadow .25s;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: .5; transform: none; box-shadow: none; cursor: default; }

.gform { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.flabel { font-size: 12.5px; font-weight: 600; color: var(--n700); }
.ghelp { font-size: 12.5px; color: var(--n500); line-height: 1.55; margin: 1px 0 0; padding: 9px 11px; background: var(--n50); border-radius: 9px; border: 1px solid var(--n100); }
.ghelp b { color: var(--n700); }
.textarea.sm { min-height: 60px; }

.glist { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ggroup { font-family: var(--mont); font-size: 12px; font-weight: 700; color: var(--n500); letter-spacing: .04em; margin: 18px 0 9px; }
.gcard { background: #fff; border: 1px solid var(--n200); border-radius: 14px; padding: 15px 17px; position: relative; }
.gcard:hover { border-color: var(--n300); }
.gcard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gcat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--n500); font-weight: 500; }
.gcat .dot { width: 7px; height: 7px; border-radius: 999px; }
.gtitle { font-size: 14.5px; font-weight: 700; color: var(--n900); }
.gactions { margin-left: auto; display: flex; gap: 2px; }
.gbtn { border: 0; background: transparent; color: var(--n300); cursor: pointer; font-size: 14px; width: 26px; height: 26px; border-radius: 7px; line-height: 1; }
.gcard:hover .gbtn { color: var(--n400); }
.gbtn.edit:hover { background: var(--n100); color: var(--n700); }
.gbtn.del:hover { background: #ffe4e6; color: var(--accent-dim); }

/* 구조화 표시: 라벨–값 행 */
.grow { display: flex; gap: 10px; font-size: 13px; line-height: 1.55; margin-top: 5px; }
.rk { flex: none; min-width: 42px; color: var(--n400); font-weight: 600; font-size: 12px; padding-top: 1px; }
.rv { color: var(--n700); white-space: pre-wrap; }
.gex { color: var(--n500); }
.gex .ex { background: var(--n100); border-radius: 6px; padding: 1px 7px; margin-right: 5px; display: inline-block; font-size: 12px; }

/* 인라인 편집 폼 */
.gedit { display: flex; flex-direction: column; gap: 10px; }
.gedit .seg { align-self: flex-start; }
.gedit-actions { display: flex; gap: 8px; align-items: center; }
.btn-save { background: var(--n900); color: #fff; border: 0; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--kr); }
.btn-save:hover { background: var(--n700); }
.btn-cancel { background: transparent; border: 0; color: var(--n500); cursor: pointer; font-size: 13px; font-weight: 500; }
.btn-cancel:hover { color: var(--n800); }

@media (max-width: 520px) { .wrap { padding: 24px 14px 70px; } }

/* ── 요금제 (PRICING) ───────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.plan { position: relative; background: #fff; border: 1px solid var(--n200); border-radius: 18px; padding: 24px 20px; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; }
.plan:hover { border-color: var(--n300); box-shadow: 0 10px 30px -18px rgba(23,23,23,.3); }
.plan.featured { border-color: var(--accent); box-shadow: 0 20px 44px -22px rgba(236,75,123,.5); }
.plan.featured:hover { transform: translateY(-2px); }
.plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 13px; border-radius: 999px; letter-spacing: .04em; box-shadow: 0 8px 18px -8px rgba(236,75,123,.7); }
.plan-name { font-family: var(--mont); font-weight: 700; font-size: 14px; color: var(--n900); letter-spacing: .06em; }
.plan-price { display: flex; align-items: baseline; gap: 2px; margin: 13px 0 4px; }
.plan-price .amt { font-size: 29px; font-weight: 800; color: var(--n900); letter-spacing: -.02em; }
.plan-price .won { font-size: 15px; font-weight: 700; color: var(--n900); }
.plan-price .per { font-size: 12.5px; color: var(--n400); margin-left: 4px; }
.plan-target { font-size: 12.5px; color: var(--n500); margin-bottom: 16px; }
.plan-feats { list-style: none; margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid var(--n100); display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-feats li { font-size: 13px; color: var(--n600); line-height: 1.5; padding-left: 22px; position: relative; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.plan-feats b { color: var(--n900); font-weight: 700; }
.plan-cta { width: 100%; border-radius: 999px; padding: 11px 0; font-size: 13.5px; font-weight: 600; font-family: var(--kr); cursor: pointer; transition: transform .2s, box-shadow .25s, border-color .15s, color .15s; }
.plan-cta.primary { background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: #fff; border: 0; box-shadow: 0 12px 26px -14px rgba(236,75,123,.6); }
.plan-cta.primary:hover { transform: translateY(-1px); }
.plan-cta.ghost { background: #fff; color: var(--n700); border: 1px solid var(--n200); }
.plan-cta.ghost:hover { border-color: var(--n300); color: var(--n900); }
.plans-note { font-size: 12px; color: var(--n400); line-height: 1.6; margin-top: 18px; text-align: center; }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; gap: 16px; } }

/* ── 온보딩 체크리스트 ───────────────────────────── */
.onboard-card{background:linear-gradient(180deg,#fff,#fffdfb);border:1px solid var(--n200);border-radius:18px;padding:22px 24px;margin-bottom:24px;box-shadow:0 18px 40px -28px rgba(236,75,123,.35)}
.ob-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ob-title{margin:0;font-size:18px;font-weight:800;color:var(--n900);letter-spacing:-.01em}
.ob-sub{margin:5px 0 0;font-size:13px;color:var(--n500)}
.ob-x{border:0;background:transparent;color:var(--n300);font-size:15px;cursor:pointer;padding:4px 7px;border-radius:8px;line-height:1}
.ob-x:hover{background:var(--n100);color:var(--n600)}
.ob-bar{height:6px;background:var(--n100);border-radius:999px;margin:16px 0 18px;overflow:hidden}
.ob-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-dim));border-radius:999px;transition:width .4s ease}
.ob-steps{display:flex;flex-direction:column;gap:10px}
.ob-step{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--n200);border-radius:14px;padding:14px 16px;transition:border-color .15s}
.ob-step:hover{border-color:var(--n300)}
.ob-step.done{background:rgba(18,184,134,.05);border-color:rgba(18,184,134,.25)}
.ob-num{width:28px;height:28px;flex:none;border-radius:999px;background:var(--n900);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}
.ob-step.done .ob-num{background:#12b886;color:transparent;font-size:0;position:relative}
.ob-step.done .ob-num::after{content:"✓";color:#fff;font-size:15px;position:absolute;inset:0;display:grid;place-items:center}
.ob-body{flex:1;min-width:0}
.ob-body b{display:block;font-size:14.5px;color:var(--n900);font-weight:700;margin-bottom:2px}
.ob-body span{font-size:12.5px;color:var(--n500);line-height:1.5}
.ob-go{flex:none;border:0;cursor:pointer;font-family:var(--kr);background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:#fff;font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;transition:transform .15s}
.ob-go:hover{transform:translateY(-1px)}
.ob-step.done .ob-go{background:var(--n100);color:var(--n500);pointer-events:none;box-shadow:none}
.ob-step.locked{border-style:dashed;background:var(--n50)}
.ob-step.locked .ob-body b{color:var(--n400)}
.ob-go:disabled{background:var(--n100);color:var(--n400);cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none}
.ob-need{display:block;font-size:12px;color:#b8860b;font-weight:700;margin-top:5px}
.ob-hint{font-size:12.5px;color:var(--n500);margin:14px 0 0;text-align:center}
.ob-hint a{color:var(--accent-dim);font-weight:600;text-decoration:none}
.ob-hint a:hover{text-decoration:underline}

/* ── 현재 요금제 배너 + 결제 메시지 ───────────────── */
.plan-now{background:#fff;border:1px solid var(--n200);border-radius:16px;padding:18px 20px;margin-bottom:16px}
.pn-left{display:flex;align-items:center;gap:14px}
.pn-badge{font-family:var(--mont);font-weight:800;font-size:13px;letter-spacing:.06em;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-dim));padding:6px 13px;border-radius:999px;flex:none}
.pn-title{font-size:15px;font-weight:700;color:var(--n900)}
.pn-usage{font-size:12.5px;color:var(--n500);margin-top:2px;font-variant-numeric:tabular-nums}
.pn-bar{height:6px;background:var(--n100);border-radius:999px;margin-top:14px;overflow:hidden}
.pn-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-dim));border-radius:999px;transition:width .4s ease}
.pay-msg{font-size:13px;min-height:18px;margin:0 0 14px;text-align:center;color:#666}
.plan-cta[disabled]{opacity:.55;cursor:default;pointer-events:none}