/* 조선굴림체 (조선일보 · 눈누) — 영상·웹·서버 임베딩 상업 이용 허용, 수정·재판매 금지 */
@font-face{font-family:'JoseonGulim';src:url('/fonts/JoseonGulim/ChosunGu.TTF') format('truetype');font-weight:normal;font-display:swap}
/* 조선궁서체 (조선일보) — 조선굴림체와 같은 라이선스, 배포된 형태 그대로(TTF). 스티커 그림판 하트용. 원본 파일: 공통/fonts/2_사용 가능 - 공식 원본 파일/조선궁서체 */
@font-face{font-family:'JoseonGungseo';src:url('/fonts/JoseonGungseo/ChosunGs.TTF') format('truetype');font-weight:normal;font-display:swap}
/* 나눔고딕 (네이버) — OFL. 스티커 타원 말풍선용. 원본 파일: 공통/fonts/web/files/NanumGothic */
@font-face{font-family:'NanumGothic';src:url('/fonts/NanumGothic/NanumGothic.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Mona12 — OFL(예약 이름 Mona). 스티커 잘했어요용. 원본 파일: 공통/fonts/1_사용 가능/모나폰트/Mona/01 Main
   웹용으로 한글 11,172자 + 영문 · 기호만 남긴 woff2. 예약 이름 조건대로 글꼴 안 이름은 PikkSubC (라이선스: fonts/Mona12/LICENSE/ 폴더, mona.txt 등 5개)
   피그마는 Mona12 Text KR인데, 그 파일은 브라우저에서 ㅇ·ㅎ·8 안쪽이 까맣게 채워져서 같은 글자 모양인 Mona12 본 파일을 씀 */
@font-face{font-family:'Mona12';src:url('/fonts/Mona12/PikkSubC-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Noto Sans KR (Google) — OFL. 스티커 괜찮아 난 최강용. 원본 파일: 공통/fonts/1_사용 가능/Noto Sans KR (github.com/notofonts/noto-cjk)
   Noto 3종은 웹용으로 한글 11,172자 + 영문 · 기호만 남긴 woff2 (4.5MB → 800KB). 라이선스: fonts/NotoSansKR/LICENSE.txt */
@font-face{font-family:'NotoSansKR';src:url('/fonts/NotoSansKR/NotoSansKR-Regular.sub.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Noto Sans KR Medium (Google) — OFL. 스티커 집중선 하트용. 원본 파일: 공통/fonts/1_사용 가능/Noto Sans KR */
@font-face{font-family:'NotoSansKRMedium';src:url('/fonts/NotoSansKR/NotoSansKR-Medium.sub.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Noto Sans KR DemiLight (Google) — OFL. 스티커 폭발 별 줄용. 원본 파일: 공통/fonts/1_사용 가능/Noto Sans KR */
@font-face{font-family:'NotoSansKRDemiLight';src:url('/fonts/NotoSansKR/NotoSansKR-DemiLight.sub.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* 스포카 한 산스 네오 Regular (Spoqa) — OFL(예약 이름 Spoqa Han Sans Neo). 스티커 초록 체크 구름 말풍선용. 원본 파일: 공통/fonts/1_사용 가능/스포카 한 산스 네오
   웹용으로 한글 11,172자 + 영문 · 기호만 남긴 woff2 (12MB → 645KB). 예약 이름 조건대로 글꼴 안 이름은 PikkSubA (라이선스: fonts/SpoqaHanSansNeo/OFL.txt) */
@font-face{font-family:'SpoqaHanSansNeo';src:url('/fonts/SpoqaHanSansNeo/PikkSubA-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Inter Medium (Rasmus Andersson) — OFL. 스티커 다크 말풍선용. 원본 파일: 공통/fonts/1_사용 가능/Inter (공식 배포 web/Inter-Medium.woff2) */
@font-face{font-family:'InterMedium';src:url('/fonts/Inter/Inter-Medium.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Inter Regular (Rasmus Andersson) — OFL. 스티커 문자 말풍선용. 원본 파일: 공통/fonts/1_사용 가능/Inter (공식 배포 v4.1 web/Inter-Regular.woff2) */
@font-face{font-family:'InterRegular';src:url('/fonts/Inter/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* 도스샘물 (leedheo) — MIT(예약 이름 DOSSaemmul). 스티커 대화창용. 원본 파일: 공통/fonts/web/files/DOSSaemmul
   웹용으로 한글 11,172자 + 영문 · 기호만 남긴 woff2 (8MB → 107KB). 예약 이름 조건대로 글꼴 안 이름은 PikkSubB (라이선스: fonts/DOSSaemmul/LICENSE.txt) */
@font-face{font-family:'DOSSaemmul';src:url('/fonts/DOSSaemmul/PikkSubB-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* =========================================================
   ReplyFlow v2 — Evaluator 디자인 시스템(v16) 토큰 적용
   색은 토큰으로만. 다크 기본, <html data-theme="light">로 전환
   ========================================================= */
:root,[data-theme="dark"]{
  --page:#070707; --bg:#121212; --bg2:#181818;
  --ink:#ededed; --ink2:#bdbdbd; --muted:#8e8e93; --muted2:#5f5f66; --on-ink:#0a0a0a; --accent:#2C87E9;
  --line:#232323; --line2:#1a1a1a; --strong-line:#3a3a3a; --hover:#1c1c1c;
  --field:#0e0e0e; --field-line:#262626; --field-focus:#3a3a3a;
  --btn:#1c1c1c; --btn-line:#272727; --chip-on:#1f1f1f; --chip-on-line:#2a2a2a;
  --seg-track:#1c1c1c; --seg-on:#333333; --card-cream:#1b1b1b;
  --soft:#1f1f1f; --soft2:#262626; --well:#0f0f0f; --track:#1c1c1c; --fill:#333333;
  --tbl-hover:#161616; --tbl-sel:#1a1f2b;
  --modal:#141414; --drawer:#111111; --scrim:rgba(0,0,0,.66); --shadow:0 16px 40px rgba(0,0,0,.6);
  --red:#f87171; --red-bg:rgba(248,113,113,.10); --red-line:rgba(248,113,113,.24);
  --amber:#fbbf24; --amber-bg:rgba(251,191,36,.10); --amber-line:rgba(251,191,36,.24);
  --green:#4ade80; --green-bg:rgba(74,222,128,.10); --green-line:rgba(74,222,128,.24);
  --blue:#60a5fa; --blue-bg:rgba(96,165,250,.10); --blue-line:rgba(96,165,250,.24);
  --pink:#f472b6; --pink-bg:rgba(244,114,182,.10); --pink-line:rgba(244,114,182,.24);
  --violet:#a78bfa; --violet-bg:rgba(167,139,250,.10); --violet-line:rgba(167,139,250,.24);
  --ring:rgba(59,130,246,.35);
  /* 인스타그램 DM 미리보기 (앱 화면 재현용) */
  --ig-bg:#000000; --ig-bubble:#262626; --ig-ink:#f5f5f5; --ig-line:#262626; --ig-link:#4f9dff;
  color-scheme:dark;
}
[data-theme="light"]{
  --page:#f7f7f8; --bg:#ffffff; --bg2:#fafafa;
  --ink:#0a0a0a; --ink2:#3f3f46; --muted:#71717a; --muted2:#a1a1aa; --on-ink:#ffffff; --accent:#2C87E9;
  --line:#e6e6e9; --line2:#f0f0f2; --strong-line:#d4d4d8; --hover:#f4f4f5;
  --field:#ffffff; --field-line:#e4e4e7; --field-focus:#a1a1aa;
  --btn:#ffffff; --btn-line:#e4e4e7; --chip-on:#ffffff; --chip-on-line:#e4e4e7;
  --seg-track:#ececee; --seg-on:#ffffff; --card-cream:#f4f4f5;
  --soft:#f1f1f3; --soft2:#e9e9ec; --well:#fafafa; --track:#f0f0f2; --fill:#d4d4d8;
  --tbl-hover:#fafafa; --tbl-sel:#eff6ff;
  --modal:#ffffff; --drawer:#ffffff; --scrim:rgba(0,0,0,.35); --shadow:0 12px 32px rgba(0,0,0,.10);
  --red:#dc2626; --red-bg:#fef2f2; --red-line:#fecaca;
  --amber:#b45309; --amber-bg:#fffbeb; --amber-line:#fde68a;
  --green:#15803d; --green-bg:#f0fdf4; --green-line:#bbf7d0;
  --blue:#1d4ed8; --blue-bg:#eff6ff; --blue-line:#bfdbfe;
  --pink:#be185d; --pink-bg:#fdf2f8; --pink-line:#fbcfe8;
  --violet:#6d28d9; --violet-bg:#f5f3ff; --violet-line:#ddd6fe;
  --ring:rgba(37,99,235,.25);
  --ig-bg:#ffffff; --ig-bubble:#efeff0; --ig-ink:#0a0a0a; --ig-line:#ededed; --ig-link:#0064e0;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
/* 글자 크기 토큰 (테마 무관). 제목 아래 설명(.sub)은 14px 고정 */
:root{--fs-sub:14px}
/* 왕타이틀 글자 토큰 (디자인 시스템 v1.0, 인테스트에서 먼저 씀) */
:root{--size-20:20px;--size-22:22px;--weight-600:600;--tracking-tight:-.014em;--leading-30:30px;--leading-33:33px;--text-title-size:var(--size-22);--text-title-leading:var(--leading-33);--size-13:13px;--leading-20:20px;--tracking-0:0;--text-title-sub-size:var(--size-14);--text-title-sub-leading:var(--leading-20);--text-title-sub-tracking:var(--tracking-0);--size-18:18px;--leading-27:27px;--text-empty-title-size:var(--size-18);--text-empty-title-leading:var(--leading-27);--text-empty-title-weight:var(--weight-600);--text-btn-leading:var(--leading-20);--text-btn-weight:var(--weight-600);--weight-500:500;--text-nav-size:var(--size-13);--text-nav-leading:var(--leading-20);--text-nav-weight:var(--weight-500);--text-nav-on-weight:var(--weight-600);--text-seg-size:var(--size-13);--text-seg-leading:var(--leading-20);--text-seg-weight:var(--weight-600);--text-th-size:var(--size-13);--text-th-weight:var(--weight-600);--text-td-size:var(--size-14);--size-16:16px;--text-acct-name-size:var(--size-16);--text-set-hint-size:var(--size-13);--text-set-hint-leading:var(--leading-20);--text-foot-link-size:var(--size-13);--text-foot-link-weight:var(--weight-500);--text-modal-desc-size:var(--size-15);--text-modal-desc-leading:var(--leading-22);--size-15:15px;--text-req-size:var(--size-15);--text-req-weight:var(--weight-600);--text-req-leading:var(--leading-22);--text-input-size:var(--size-14);--text-font-chip-size:var(--size-14);--text-empty-desc-size:var(--size-14);--text-row-title-size:var(--size-14);--size-24:24px;--tracking-tighter:-.017em;--text-auth-title-size:var(--size-24);--text-auth-title-weight:var(--weight-600);--text-auth-title-tracking:var(--tracking-tighter);--text-auth-desc-size:var(--size-14);--text-btn-lg-size:var(--size-14);--leading-22:22px;--text-btn-lg-leading:var(--leading-22);--size-12:12px;--size-14:14px;--text-modal-title-size:var(--size-20);--text-modal-title-weight:var(--weight-600);--text-modal-option-size:var(--size-13);--text-modal-input-size:var(--size-14);--text-modal-check-size:var(--size-14);--text-modal-check-weight:var(--weight-500);--text-modal-note-size:var(--size-13);--size-11:11px;--size-12:12px;--size-13:13px;--size-14:14px;--size-16:16px;--size-18:18px;--leading-16:16px;--leading-18:18px;--leading-20:20px;--leading-24:24px;--leading-27:27px;--text-section-size:var(--size-18);--text-section-weight:var(--weight-600);--text-heading-size:var(--size-16);--text-heading-weight:var(--weight-600);--text-card-size:var(--size-14);--text-card-weight:var(--weight-600);--text-menu-size:var(--size-14);--weight-400:400;--text-menu-weight:var(--weight-500);--text-chip-size:var(--size-13);--text-chip-weight:var(--weight-500);--text-label-size:var(--size-13);--text-badge-weight:var(--weight-600);--text-card-num-size:var(--size-14);--text-label-weight:var(--weight-500);--text-tag-size:var(--size-11);--text-tag-weight:var(--weight-600);--text-title-weight:var(--weight-600);--text-title-tracking:var(--tracking-tight)}
body{font-family:Pretendard,"Apple SD Gothic Neo",system-ui,sans-serif;background:var(--page);color:var(--ink);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 셸 ---------- */
.shell{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto 1fr;min-height:100vh}
/* 앱 바: 모바일 전용 (사이드바가 없어서 영역 세그먼트를 여기에). 데스크톱은 사이드바에 로고·세그먼트 */
.appbar{grid-column:1/-1;position:relative;display:flex;align-items:center;height:56px;padding:0 22px;background:var(--page)}
.side-seg{display:flex;margin:0 0 10px} /* + 사이드바 gap 2 = 메뉴까지 12 */
@media (min-width:761px){.shell>.appbar{display:none}}
.side-seg .seg-btn{min-width:0}
.sidebar{background:var(--page);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;padding:2px 10px 20px;letter-spacing:-.2px}
.logo i{width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700}
.nav{display:flex;flex-direction:column;gap:0}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--muted)}
.nav a:hover{background:var(--hover);color:var(--ink)}
.nav a.on{background:color-mix(in srgb,var(--soft) 50%,var(--soft2));color:var(--ink)} /* --soft와 --soft2 중간 (라이트 #ededef) */
/* 사이드 메뉴: 인액티브 / 액티브 */
.t-nav{font-size:var(--text-nav-size);line-height:var(--text-nav-leading);font-weight:var(--text-nav-weight)}
.t-nav.on{font-weight:var(--text-nav-on-weight)}
/* 기능 메뉴와 설정·도움말 사이 구분선 */
.nav-sep{border:0;border-top:1px solid var(--line);margin:8px 10px}
.side-foot{border-top:1px solid var(--line);padding-top:10px}
.side-low{margin-top:auto;margin-bottom:8px} /* 설정·도움말·의견은 사이드바 아래쪽, 그 밑에 구분선 + 계정 */
.acct{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer}
.acct:hover{background:color-mix(in srgb,var(--soft) 50%,var(--soft2))} /* 사이드 메뉴 선택과 같은 회색 */
.avatar{width:30px;height:30px;border-radius:50%;background:var(--soft2);color:var(--ink);display:grid;place-items:center;font-weight:600;font-size:12px;flex:none;border:1px solid var(--line)}
.acct b{display:block}
.acct small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.dot{width:6px;height:6px;border-radius:50%;background:#2db84c;display:inline-block;flex:none}
.dot.err{background:#e5534b} .dot.warn{background:#e8892b} .dot.off{background:#76767c} /* 배지와 같은 색 */

.main{min-width:0}
/* 데스크톱: 본문을 사이드바 옆에 뜬 둥근 패널로. 위·아래·오른쪽 8px 여백, 네 모서리 둥글게.
   패널 높이를 화면에 맞추고 스크롤은 패널 안에서 → 아래 둥근 모서리가 늘 보임 */
@media (min-width:761px){
  .shell{height:100vh;min-height:0;grid-template-rows:1fr}
  .sidebar{border-right:0;position:static;height:auto;min-height:0;overflow-y:auto}
  .shell>.main{margin:8px 8px 8px 0;height:calc(100vh - 16px);display:flex;flex-direction:column;overflow:hidden;background:var(--bg);border:1px solid var(--line2);border-radius:16px}
  /* 상단 바는 스크롤 상자 밖 → 스크롤·탄성 스크롤에도 꼼짝 안 함. 스크롤은 본문(.page)만 */
  .shell>.main>.topbar{flex:none;position:static;background:var(--bg)}
  .shell>.main>.page{flex:1;min-height:0;max-width:none;overflow-y:auto;overscroll-behavior:contain}
  /* 기본 너비: 내용은 최대 1080px로 가운데. 상단 바 제목도 같은 줄에서 시작 */
  .shell>.main>.topbar,.shell>.main>.page{padding-left:max(48px,calc((100% - var(--wmax)) / 2));padding-right:max(48px,calc((100% - var(--wmax)) / 2))}
}
@media (max-width:760px){body,.shell>.main{background:var(--bg)}
  /* 모바일 위·아래 바: iOS 기본처럼 반투명 + 뒤 내용 흐리게 (글래스) */
  .page .ul-tabs{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  /* 모바일 최상단: 로고만 (Pikk, dm 글자 없이). 스크롤해도 붙어 있고 반투명. 영역 이동은 하단 탭 */
  .shell>.appbar{position:sticky;top:0;z-index:6;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  .app-logo{display:flex;color:var(--ink)}
  .app-logo .logo-dm{display:none}
  .page .ul-tabs{top:48px} /* 탭 줄은 로고 바 바로 밑에 붙음 */
  .shell>.main.deco-cat:has(#st-tpls:not([hidden]))>.topbar{display:none} /* 커스텀·스티커 목록: 제목 줄 없이 탭부터 */
  .shell>.main>.topbar{position:static;background:var(--bg)} /* 큰 제목은 iOS처럼 스크롤하면 같이 올라감 */
} /* 모바일도 본문 바탕은 데스크톱 패널과 같은 흰색 */
.shell>.main:has(.narrow-page){--wmax:720px} /* 설정·도움말: 내용 폭 720. 상단 제목도 같은 줄에서 시작 (기본 너비 규칙을 그대로 씀) */
:root{--tabs-top:8px;--wmax:1080px;--brand:#C6EF3A} /* 브랜드 색: 라임 (로그인 그래픽과 같은 색) */
.topbar{min-height:52px;display:flex;align-items:center;gap:10px;padding:40px 24px 16px;background:var(--page);position:sticky;top:0;z-index:5}
.topbar .crumb{color:var(--muted);font-size:13px}
.topbar .crumb b{color:var(--ink)}
.topbar .sp{flex:1}
.test-tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;font-size:12px;font-weight:600;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-line);white-space:nowrap}
.test-tag svg.i{width:13px;height:13px}
@media (min-width:761px){.topbar{padding-right:230px}}
.plan-chip{height:28px;display:inline-flex;align-items:center;padding:0 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.plan-chip:hover{color:var(--ink);background:var(--hover)}
.page{padding:8px 48px 96px;max-width:1440px}
.page-h{display:flex;align-items:flex-end;gap:12px;margin-bottom:24px;flex-wrap:wrap}
/* 왕타이틀: 페이지 제목·꾸미기 드롭다운 제목 공통 */
.t-title{font-size:var(--text-title-size);line-height:var(--text-title-leading);font-weight:var(--text-title-weight);letter-spacing:var(--text-title-tracking)}
.page-h p{margin:4px 0 0;color:var(--muted)}
/* 헤더 서브텍스트: 페이지 제목 아래 설명 */
.t-title-sub{font-size:var(--text-title-sub-size);line-height:var(--text-title-sub-leading);letter-spacing:var(--text-title-sub-tracking)}
.page-h .sp{flex:1}
/* 설정·도움말 제목 앞 이전 버튼 */
.back-btn{flex:none;width:44px;height:44px;margin-left:0;border:0;border-radius:12px;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .12s}
.back-btn:hover{background:var(--hover)}
.back-btn svg.i{width:22px;height:22px;stroke-width:2}
/* 상단 바로 올라간 제목·설명 */
.page-h.in-top{flex:0 1 auto;min-width:0;margin:0;align-items:center;gap:10px;min-height:44px}
.page-h.in-top p{margin:4px 0 0}

/* ---------- 카드 · 버튼 · 배지 ---------- */
.card{background:var(--bg);border:1px solid var(--line);border-radius:12px}
.card-pad{padding:16px 20px}
.card-h{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid var(--line2)}
.card-h + .card-pad{border-top:0!important} /* 제목 줄 밑선과 첫 줄 윗선이 겹치지 않게 */
.card-h .sp{flex:1}
.card-h a{font-weight:500;font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 12px;line-height:20px;border-radius:8px;border:1px solid var(--btn-line);background:var(--btn);color:var(--ink);font-weight:500;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:600}
.btn.primary:hover{opacity:.88;background:var(--ink)}
.btn.primary:disabled{opacity:1;background:var(--hover);border-color:var(--hover);color:var(--muted2)}
.btn.danger{color:var(--red)}
.btn.danger.fill{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger.soft{background:color-mix(in srgb,var(--red) 10%,var(--bg));border-color:transparent} /* 연한 붉은 배경, 테두리 없음 (삭제·탈퇴) */
.btn.danger.soft:hover{background:color-mix(in srgb,var(--red) 16%,transparent)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--hover)}
.btn.sm{padding:6px 12px;font-size:13px;line-height:20px;border-radius:7px}
/* 작은 주 버튼도 큰 버튼 텍스트 크기로 */
.btn.t-btn{font-size:var(--text-btn-lg-size);line-height:var(--text-btn-leading);font-weight:var(--text-btn-weight)}
.btn.lg{padding:8px 18px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.block{width:100%}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:8px;line-height:18px;white-space:nowrap;background:var(--soft);color:var(--ink2);border:0} /* 연한 바탕 + 아이콘 + 글자, 테두리 없음 */
.badge.on{color:#2db84c}
.badge.off{color:#76767c}
.badge.err{color:#e5534b}
.badge.warn{color:#e8892b}
.badge.brand{color:#1a8ce8}
.badge:is(.on,.off,.err,.warn,.brand){background:color-mix(in srgb,currentColor 12%,var(--bg))} /* 레퍼런스 색감: 진한 글자색 + 같은 색 12% 연한 바탕 (다크에서도 자동) */
/* 상태 아이콘 (점이 있는 배지는 점 그대로) */
.badge:is(.on,.off,.err,.warn,.brand):not(:has(.dot))::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor} /* 상태 점 (사이드바 '연결됨'처럼) */
.badge .dot{background:currentColor}
.muted{color:var(--muted)}
.small{font-size:12px}
.hint{font-size:12px;color:var(--muted2)}
.grid{display:grid;gap:16px}
.row{display:flex;align-items:center;gap:8px}

/* 안내 notice */
.banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;margin-bottom:16px;border:1px solid var(--line);background:var(--well);color:var(--ink2)}
.banner .sp{flex:1}
.banner .ic{display:grid;place-items:center;color:var(--muted)}
.banner b{color:var(--ink)}
.banner.err{background:var(--red-bg);border-color:var(--red-line)} .banner.err .ic{color:var(--red)}
.banner.warn{background:var(--amber-bg);border-color:var(--amber-line)} .banner.warn .ic{color:var(--amber)}
.banner.info{background:var(--blue-bg);border-color:var(--blue-line)} .banner.info .ic{color:var(--blue)}

.switch{position:relative;width:34px;height:20px;flex:none;border-radius:99px;background:var(--fill);border:0;cursor:pointer;transition:background .15s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.switch.on{background:var(--accent)}
.switch.on::after{transform:translateX(14px)}
.switch:disabled{opacity:.45;cursor:not-allowed}

/* 지표 줄 */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:16px;overflow:hidden}
.kpi{padding:16px 20px;border-left:1px solid var(--line2)}
.kpi:first-child{border-left:0}
.kpi small{display:block;color:var(--muted);font-size:13px}
.kpi b{display:block;font-size:24px;font-weight:500;letter-spacing:-.6px;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.kpi em.up{color:var(--green)}

/* 썸네일 */
.thumb{position:relative;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--soft);border:1px solid var(--line);flex:none;aspect-ratio:1}
.thumb svg.i{width:40%;height:auto;stroke-width:1.6}
.thumb .t-type{position:absolute;top:5px;right:5px;font-size:10px;font-weight:500;padding:1px 5px;border-radius:4px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.thumb.s{width:36px;border-radius:6px}
.thumb.m{width:52px}

/* 목록 행 */
.list-row{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line2);color:var(--ink)}
.list-row:last-child{border-bottom:0}
.list-row.link{cursor:pointer}
.list-row.link:hover{background:var(--tbl-hover)}
.list-row .grow{flex:1;min-width:0}
.list-row .title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kw{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--soft);color:var(--ink2);margin-right:4px}
.kw.fol{background:var(--pink-bg);color:var(--pink)}
.num{font-variant-numeric:tabular-nums;font-weight:500}
.stat-mini{text-align:right;min-width:60px}
.stat-mini small{display:block;color:var(--muted);font-size:11px}
.new-flash{animation:flash 2.2s ease}
@keyframes flash{0%,40%{background:var(--tbl-sel)}100%{background:transparent}}

/* 표 */
table.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:var(--text-th-size);color:var(--ink);font-weight:var(--text-th-weight);line-height:20px;text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap} /* 표 머리: 진한 글자, 아래 선 */
.tbl td{padding:20px 16px;border-bottom:1px solid var(--line2);vertical-align:middle;font-size:var(--text-td-size);line-height:20px;color:var(--ink)} /* 줄 넉넉하게, 줄마다 옅은 선 */
.tbl tr:last-child td{border-bottom:1px solid var(--line2)}
.tbl tbody tr:hover td{background:var(--tbl-hover)}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
.reason{font-size:12px;color:var(--muted);margin-top:3px}
.tbl td{white-space:nowrap}
.tbl td .reason{white-space:normal;min-width:200px;max-width:280px}
.tbl td .kw{margin-bottom:2px}

/* 카드 안 필터 바 + 알약 */
.fbar{display:flex;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.fbar .sp{flex:1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;line-height:20px;border-radius:99px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer}
.chip:hover{color:var(--ink)}
.chip.on{background:var(--chip-on);border-color:var(--chip-on-line);color:var(--ink)}
.chip .pill-n{font-size:11px;color:var(--muted2);font-variant-numeric:tabular-nums}
.chip.on .pill-n{color:var(--muted)}

/* 빈 상태 */
.empty{text-align:center;padding:120px 24px}
.empty .big{width:44px;height:44px;border-radius:12px;background:var(--soft);display:grid;place-items:center;margin:0 auto;color:var(--muted)}
.empty .big svg.i{width:20px;height:20px}
.empty h3{margin:0 0 4px}
/* 빈 화면 제목: 목록이 비었을 때 아이콘 아래 한 줄 */
.t-empty-title{font-size:var(--text-empty-title-size);line-height:var(--text-empty-title-leading);font-weight:var(--text-empty-title-weight)}
.empty p{color:var(--muted);margin:0 0 20px}
.empty p:last-child{margin-bottom:0} /* 버튼 없는 빈 화면은 아래 여백 없이 */

/* 입력 */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-weight:600;font-size:13px;color:var(--ink2)}
.field .hint{font-size:12px;color:var(--muted)}
.field .errtxt{font-size:12px;color:var(--red)}
.input,.textarea,.select{width:100%;border:1px solid var(--field-line);border-radius:8px;background:var(--field);color:var(--ink);padding:8px 12px;line-height:20px;outline:none;font-size:var(--text-input-size)}
.select{-webkit-appearance:none;appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.textarea{min-height:108px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--muted2)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--ink);box-shadow:none}
.input.bad{border-color:var(--red)}
.counter{align-self:flex-end;font-size:12px;color:var(--muted2);font-variant-numeric:tabular-nums}

/* ---------- 자동화 만들기 ---------- */
.wiz-wrap{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.steps{display:flex;gap:6px;margin-bottom:20px}
.steps .st{flex:1;display:flex;flex-direction:column;gap:8px}
.steps .st .bar{height:3px;border-radius:3px;background:var(--track)}
.steps .st.done .bar,.steps .st.cur .bar{background:var(--ink)}
.steps .st span{color:var(--muted2)}
.steps .st.cur span{color:var(--ink)}
.steps .st.done span{color:var(--muted)}
.steps .st.done{cursor:pointer}
.steps .st em{font-style:normal}
.wiz h2{letter-spacing:-.2px;margin-bottom:4px}
.wiz .sub{color:var(--muted);font-size:var(--fs-sub);margin:0 0 20px}
.wiz .card-pad{padding:22px 24px}
.wiz-foot{display:flex;gap:8px;justify-content:space-between;align-items:center;border-top:1px solid var(--line2);padding:14px 20px}
.wiz-foot .why{font-size:12px;color:var(--muted)}

.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.post-card{border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--bg2);cursor:pointer;text-align:left;position:relative;color:var(--ink)}
.post-card:hover{border-color:var(--strong-line)}
.post-card .thumb{width:100%;border-radius:6px}
.post-card .thumb svg.i{width:30%}
.thumb.m .t-type{display:none}
.post-card .thumb .t-type{display:block}
.post-card .cap{font-weight:500;font-size:13px;margin:8px 4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-card .meta{font-size:12px;color:var(--muted);margin:0 4px 4px}
.post-card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.post-card.sel::after{content:"✓";position:absolute;top:12px;left:12px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.post-card.used{opacity:.45;cursor:not-allowed}
.post-card .used-tag{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.65);color:#fff;border-radius:5px;padding:2px 7px}
.skel{background:linear-gradient(90deg,var(--soft),var(--soft2),var(--soft));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}

/* 택1 카드 (.chk.rad) */
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;margin-bottom:8px;background:var(--bg2)}
.opt:hover{border-color:var(--strong-line)}
.opt.sel{border-color:var(--accent);background:var(--tbl-sel)}
.opt .rd{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--strong-line);flex:none;margin-top:2px}
.opt.sel .rd{border:5px solid var(--accent)}
.opt b{display:block;font-weight:600}
.opt small{color:var(--muted);font-size:13px}

.kw-box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--field-line);border-radius:8px;padding:5px 6px;background:var(--field);min-height:36px}
.kw-box:focus-within{border-color:var(--ink);box-shadow:none}
.kw-box input{border:0;outline:0;flex:1;min-width:120px;padding:2px 4px;background:transparent}
.kw-box input::placeholder{color:var(--muted2)}
.kw-chip{display:inline-flex;align-items:center;gap:4px;height:24px;background:var(--soft2);color:var(--ink);font-weight:500;font-size:13px;padding:0 4px 0 9px;border-radius:6px}
.kw-chip button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 3px}
.kw-chip button:hover{color:var(--ink)}

.toggle-row{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);margin-bottom:10px}
.toggle-row .grow{flex:1}
.toggle-row b{display:flex;align-items:center;gap:6px;font-weight:600}
.toggle-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

.summary{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.summary .s-row{display:flex;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.summary .s-row:last-child{border-bottom:0}
.summary .s-row>span:first-child{width:92px;flex:none;color:var(--muted);font-size:13px}
.summary .s-row>div{flex:1;min-width:0;word-break:break-all}
.summary .edit{font-size:12px;cursor:pointer;color:var(--accent);flex:none}
.guide{background:var(--well);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.guide>b{display:flex;align-items:center;gap:6px;font-weight:600}
.guide ol{margin:8px 0 0;padding-left:18px;color:var(--ink2)}
.guide li{margin:4px 0}

/* DM 미리보기 — 인스타그램 화면 재현 */
.wiz-preview{position:sticky;top:76px}
.wiz-preview .lbl{color:var(--muted);margin:0 0 8px 2px;display:flex;align-items:center;gap:6px}
.phone{background:var(--ig-bg);color:var(--ig-ink);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.ph-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--ig-line)}
.ph-top .avatar{width:28px;height:28px;font-size:11px;background:linear-gradient(135deg,#FFB86B,#F2508B,#7B5CFF);color:#fff;border:0}
.ph-top .avatar{position:relative;overflow:hidden}
.ph-top .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-top b{font-size:13px}
.ph-top .small{color:var(--muted)}
.ph-body{padding:14px;min-height:340px;display:flex;flex-direction:column;gap:8px}
.ph-sys{font-size:11px;color:var(--muted);text-align:center;margin:4px 0}
.ph-cmt{align-self:flex-start;max-width:92%;font-size:13px;padding:2px 0}
.ph-cmt b{font-weight:600}
.ph-reply{align-self:flex-start;margin-left:16px;font-size:12px;color:var(--muted);border-left:2px solid var(--ig-line);padding-left:10px}
.ph-reply b{color:var(--ig-ink);font-weight:600}
.bubble{align-self:flex-start;max-width:86%;background:var(--ig-bubble);border-radius:18px 18px 18px 6px;padding:9px 13px;font-size:13px;white-space:pre-wrap;word-break:break-word}
.bubble.ph{color:var(--muted)}
.ph-link{color:var(--ig-link);font-weight:500}
.ph-wm{color:var(--muted);font-size:13px}
.dm-btn-card{align-self:flex-start;width:86%;border:1px solid var(--ig-line);border-radius:14px;overflow:hidden}
.dm-btn-card div{padding:9px 14px;text-align:center;font-weight:600;color:var(--ig-link);font-size:13px}
.dm-btn-card small{display:block;padding:0 14px 9px;text-align:center;color:var(--muted);font-size:11px}

/* 상세 · 통계 */
.detail-head{display:flex;gap:14px;align-items:center}
.detail-head .thumb{width:56px}
.two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}
.two>*{min-width:0}
.poll{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--muted)}
.poll::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}
.lchart{display:block;width:100%;height:200px}
.lchart .gl{stroke:var(--line2);stroke-width:1}
.lchart .ax{fill:var(--muted);font-size:11px;font-family:inherit}
.lchart .ln{fill:none;stroke:var(--accent);stroke-width:2}
.lchart .ar{fill:var(--accent);opacity:.08}
.lchart .pt{fill:var(--bg);stroke:var(--accent);stroke-width:2}
.lchart .pt.end{fill:var(--accent)}
.lchart .vl{fill:var(--ink);font-family:inherit}
.lchart .pt{transition:r .12s}
.lchart .pt.hov{r:5.5px}
.lchart .hit{fill:transparent;cursor:pointer}
.lchart .guide{stroke:var(--strong-line);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.lchart .guide.on{opacity:1}
.lchart-wrap{position:relative}
.ctip{position:absolute;left:0;top:0;min-width:200px;max-width:300px;padding:12px 14px;background:var(--bg2);border:1px solid var(--strong-line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:13px;pointer-events:none;opacity:0;transition:opacity .12s;z-index:5}
.ctip.on{opacity:1}
.ctip-h{display:flex;justify-content:space-between;gap:16px;color:var(--ink);margin-bottom:8px}
.ctip-r{display:flex;align-items:center;gap:8px;color:var(--ink2);margin-top:4px}
.ctip-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.ctip-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctip-v{flex:none;color:var(--ink2)}
.ctip-empty{color:var(--muted)}

/* 요금제 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{padding:22px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan.cur{border-color:var(--ink)}
.plan h3{}
.plan .price{font-size:24px;font-weight:500;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.plan .price small{font-size:13px;color:var(--muted);letter-spacing:0}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--ink2);flex:1}
.plan li::before{content:"✓";color:var(--muted);margin-right:8px}
.plan .cur-tag{position:absolute;top:-10px;left:18px;background:var(--ink);color:var(--on-ink);padding:2px 9px;border-radius:99px}
.usage{height:6px;border-radius:6px;background:var(--track);overflow:hidden;margin-top:8px}
.usage i{display:block;height:100%;background:var(--ink)}
.usage i.full{background:var(--amber)}

/* 도움말 */
details.faq{border-bottom:1px solid var(--line2);padding:0 20px}
details.faq:last-child{border-bottom:0}
details.faq summary{cursor:pointer;padding:14px 0;font-weight:500;list-style:none;display:flex;gap:10px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"＋";margin-left:auto;color:var(--muted)}
details.faq[open] summary::after{content:"－"}
details.faq p{margin:0 0 14px;color:var(--muted)}

/* 로그인 · 연결 */
.bare{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--page)}
/* 로그인·가입 화면: 왼쪽 패널 + 오른쪽 그래픽 자리 (좁으면 그래픽 숨김) */
.split{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--page)}
.split-l{display:flex;flex-direction:column;align-items:center;padding:0 24px;background:var(--bg)}
.split-l>.auth{margin:auto 0}
.auth-foot{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:40px -24px 0;padding:14px 24px;font-size:13px;color:var(--muted)}
.auth-foot .btn svg{width:14px;height:14px}
.af-r{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.af-r a{color:var(--muted)} .af-r a:hover{color:var(--ink)} .af-r b{font-weight:600}
/* 그래픽 자리: 청록·초록·라임 그라데이션 + 휘어진 빛 줄기 + 입자감 (테마와 상관없이 같은 색) */
.split-art{--art-teal:#1fb5c9;--art-green:#14864f;--art-lime:#c6ef3a;--art-cream:#f3f7d2;--art-sky:#7fe0ea;
  position:relative;overflow:hidden;background:var(--art-green)}
.split-art::before{content:"";position:absolute;inset:-20%;filter:blur(40px);background:
  radial-gradient(28% 24% at 48% 20%,var(--art-lime) 0%,transparent 75%),
  radial-gradient(22% 26% at 52% 55%,var(--art-cream) 0%,transparent 75%),
  radial-gradient(35% 30% at 95% 90%,var(--art-sky) 0%,transparent 75%),
  radial-gradient(40% 45% at 0% 20%,var(--art-teal) 0%,transparent 75%),
  radial-gradient(40% 45% at 100% 25%,var(--art-green) 0%,transparent 75%),
  radial-gradient(45% 40% at 0% 100%,var(--art-green) 0%,transparent 75%),
  linear-gradient(135deg,var(--art-teal) 0%,var(--art-green) 28%,var(--art-lime) 50%,var(--art-green) 72%,var(--art-teal) 100%)}
.split-art .sw{position:absolute;border-radius:50%;pointer-events:none}
.split-art .sw1{left:-5%;top:-12%;width:70%;height:60%;background:radial-gradient(closest-side,color-mix(in srgb,var(--art-cream) 55%,transparent),color-mix(in srgb,var(--art-lime) 30%,transparent) 70%,transparent);filter:blur(6px);transform:rotate(-25deg)}
.split-art .sw2{left:-5%;top:28%;width:115%;height:22%;background:linear-gradient(90deg,transparent,var(--art-teal) 30%,color-mix(in srgb,var(--art-sky) 60%,transparent) 65%,transparent);filter:blur(14px);transform:rotate(-32deg)}
.split-art .sw3{left:20%;top:52%;width:95%;height:30%;border-top:28px solid color-mix(in srgb,var(--art-lime) 65%,transparent);filter:blur(10px);transform:rotate(-22deg)}
.split-art::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 그라디언트 위·숫자 꽃 아래: 듬성듬성한 고운 입자 (노이즈에서 일부 점만 남겨 띄엄띄엄, 어두운 초록 티끌) */
.split-art .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.28;mix-blend-mode:multiply;background-size:260px 260px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .25 0 0 0 0 .12 14 0 0 0 -9.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* 꽃은 패널 오른쪽에 크게, 꽃머리 위로 56px 여백을 두고 줄기 끝은 항상 패널 아래로 넘쳐 안 보이게.
   폭은 패널 폭의 77%와 "높이가 (패널 높이 − 위 여백)의 108%가 되는 폭" 중 큰 값 → 창이 좁아져도 줄기 끝 아래 여백이 안 생김. 숫자 크기도 폭(91칸)에 맞춰 같이 */
.split-art{container-type:size}
.split-art .art-flower{--top:56px;--fw:max(77cqw, calc((100cqh - var(--top)) * 1.08 * 819 / 1629));position:absolute;z-index:1;right:1.5%;top:var(--top);width:var(--fw);aspect-ratio:819/1629;color:#fff;font:600 calc(var(--fw) / 91 * 1.5)/1 ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none;user-select:none}
.split-art .art-flower b{position:absolute;margin:-.5em 0 0 -.3em;font-weight:inherit}
/* 밀도 단계: 가벼운 숫자는 흐리고 가늘게, 무거운 숫자는 진하고 굵게 */
.split-art .art-flower .d1{opacity:.22;font-weight:400}
.split-art .art-flower .d2{opacity:.4;font-weight:400}
.split-art .art-flower .d3{opacity:.62}
.split-art .art-flower .d4{opacity:.85;font-weight:700}
.split-art .art-flower .d5{opacity:1;font-weight:800}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split-art{display:none}.split-l{padding:40px 16px 0}.auth-foot{margin:40px -16px 0;padding:14px 16px}}
.auth{width:100%;max-width:360px}
.auth .field + .btn{margin-top:8px} /* 마지막 입력 칸 ↔ 로그인 버튼 24 (칸 아래 16 + 8) */
.auth .logo{padding:0 0 36px;font-size:15px}
.auth .sub{color:var(--muted);margin:4px 0 28px}
.auth .switch-l{text-align:center;margin-top:16px;color:var(--muted);font-size:13px}
.connect{width:100%;max-width:520px;padding:32px}
.connect h1{font-weight:600;letter-spacing:-.4px}
.perm-list{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.perm-list li{display:flex;gap:12px;padding:12px 14px;border-radius:10px;background:var(--bg2);border:1px solid var(--line2)}
.perm-list li .ic{color:var(--muted);padding-top:1px}
.perm-list b{display:block;font-weight:600}
.perm-list small{color:var(--muted);font-size:13px}
.ig-btn{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:600}
.ig-btn:hover{opacity:.88;background:var(--ink)}
.steps-mini{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
.steps-mini i{width:24px;height:3px;border-radius:3px;background:var(--track)}
.steps-mini i.on{background:var(--ink)}
.done-ic{width:48px;height:48px;border-radius:14px;background:var(--green-bg);color:var(--green);display:grid;place-items:center;margin:0 auto}
.done-ic svg.i{width:22px;height:22px}

/* 모달 · 토스트 · 시트 */
.modal-bg{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;z-index:50;padding:16px}
/* 팝업 공통: 폭 400 · 머리(제목 18 / 설명 4 간격) · 본문 · 버튼 줄(구분선 없음). 의견·문의·스티커 요청·옵션 저장·확인 창 모두 같은 규칙 */
.modal{width:100%;max-width:400px;background:var(--modal);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.modal .m-head{padding:22px 24px 0}
.modal p{color:var(--muted);margin:4px 0 0}
.modal .acts{display:flex;gap:8px;justify-content:flex-end;padding:20px 24px 24px;margin-top:0} /* 팝업 버튼 위 구분선 없음 (모든 팝업 공통) */
.toast{position:fixed;left:50%;top:24px;transform:translateX(-50%);background:rgba(17,17,17,.92);color:#fff;padding:12px 16px;border-radius:12px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.18);max-width:calc(100% - 32px);min-width:280px} /* 알림은 화면 위쪽 가운데, 어두운 바탕에 흰 글자 (라이트·다크 같음) */
.toast b{display:block;font-weight:600}
.toast span{display:block;color:rgba(255,255,255,.7);font-size:12px;margin-top:2px}
.sheet-bg{place-items:end center;padding:0}
.sheet{width:100%;max-width:440px;max-height:88vh;overflow:auto;background:var(--page);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:12px 16px 24px}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:4px 0 12px}

.f-pair{grid-template-columns:1fr 1.4fr;gap:12px}
.tabbar{display:none}
.only-m,.only-m-flex{display:none}

/* ---------- 반응형 ---------- */
@media (max-width:1100px){ .kpis{grid-template-columns:repeat(2,1fr)} .kpi:nth-child(3){border-left:0} .kpi:nth-child(n+3){border-top:1px solid var(--line2)} }
@media (max-width:960px){ .wiz-wrap,.two,.plans{grid-template-columns:minmax(0,1fr)} .wiz-preview{position:static} }
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .appbar{height:48px;padding:0 16px}
  .seg-btn{min-width:96px}
  .hide-m{display:none}
  .only-m{display:block}
  .only-m-flex{display:inline-flex}
  .topbar{min-height:44px;padding:4px 16px 8px} /* 로고 바 바로 밑이라 위 여백 줄임 */
  .page{padding:16px 16px 104px}
  .page-h{margin-bottom:16px}
  .page-h.in-top{min-height:0}
  :root{--text-title-size:var(--size-20);--text-title-leading:var(--leading-30)}
  .page-h.in-top p{display:none} /* 모바일은 제목만, 설명 한 줄은 숨김 */
  .kpi{padding:14px 16px}
  .kpi b{font-size:21px}
  .card-h{padding:14px 16px}
  .card-pad{padding:16px}
  .list-row{padding:12px 16px;flex-wrap:wrap}
  .list-row .stat-mini{display:none}
  .fbar{padding:10px 16px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .chip{flex:none}
  .tbl{min-width:560px}
  .tbl td{white-space:nowrap}
  /* 하단 탭: 화면에서 살짝 뜬 둥근 반투명 바 (토스·iOS처럼). 꾸미기에서는 왼쪽에 뒤로 가기 원 + 꾸미기 메뉴 */
  .tabbar{display:flex;gap:8px;position:fixed;left:16px;right:16px;bottom:calc(4px + env(safe-area-inset-bottom));z-index:20;height:64px}
  .tb-pill,.tb-back{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--line2);box-shadow:0 8px 24px rgba(0,0,0,.12)}
  .tb-pill{flex:1;display:flex;padding:4px;border-radius:32px;position:relative}
  .tb-pill a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:28px;font-size:11px;font-weight:500;color:var(--muted2)}
  .tb-pill a svg.i{width:20px;height:20px}
  .tb-pill a{position:relative;z-index:1;transition:color .3s}
  .tb-pill a.on{color:var(--ink)}
  /* 선택 배경: 탭을 바꾸면 이전 탭 자리에서 새 탭으로 미끄러짐 (바 전환과 같은 곡선) */
  .tb-ink{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));transform:translateX(calc(var(--i) * 100%));border-radius:28px;background:color-mix(in srgb,var(--ink) 8%,transparent);transition:transform .3s cubic-bezier(.3,1.2,.5,1)} /* 탭 이동 모션 (바 전환 모션과 따로) */
  .tb-pill a.moved svg.i{animation:tbPop .3s ease-out}
  @keyframes tbPop{40%{transform:scale(1.06)}}
  .tabbar.swap .tb-ink{animation:tbFade .5s .3s backwards} /* 바 전환 땐 항목이 다 들어온 뒤 나타남 */
  @keyframes tbFade{from{opacity:0}}
  .tb-back{flex:none;width:64px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
  .tb-back svg.i{width:22px;height:22px}
  /* 바 전환 모션: 꾸미기로 들어가면 ← 원이 왼쪽에서 튀어나오고 메뉴가 오른쪽에서 밀려 들어옴, 나올 땐 반대로 */
  .tabbar.swap .tb-pill a{animation:tbIn .5s cubic-bezier(.2,.8,.2,1) .12s backwards}
  .tabbar.swap .tb-pill a:nth-child(2){animation-delay:.18s}
  .tabbar.swap .tb-pill a:nth-child(3){animation-delay:.24s}
  .tabbar.swap .tb-pill a:nth-child(4){animation-delay:.3s}
  .tabbar.to-deco .tb-pill{animation:tbPillIn .5s cubic-bezier(.3,1.2,.5,1)}
  .tabbar.to-main .tb-pill{animation:tbPillOut .5s cubic-bezier(.3,1.2,.5,1)}
  .tabbar.to-deco .tb-back{animation:tbBack .55s cubic-bezier(.3,1.5,.5,1) .08s backwards}
  .tabbar.to-main .tb-pill a{--tb-from:-40px}
  @keyframes tbIn{from{opacity:0;transform:translateX(var(--tb-from,40px))}}
  @keyframes tbPillIn{from{margin-left:-72px}} /* 메뉴 바가 오른쪽으로 비켜서며 ← 원 자리를 만듦 */
  @keyframes tbPillOut{from{margin-left:72px}} /* 꾸미기에서 나오면 ← 원 자리까지 다시 늘어남 */
  /* 들어갈 때·나올 때 같은 값, 방향만 반대 */
  .main.mode-deco,.main.mode-main{animation:pageIn .45s cubic-bezier(.2,.8,.2,1)}
  .main.mode-main{--pg-from:-48px}
  @keyframes pageIn{from{opacity:0;transform:translateX(var(--pg-from,48px))}}
  .tb-ghost{position:absolute;left:0;top:0;bottom:0;height:64px;pointer-events:none;animation:tbBack .55s cubic-bezier(.3,1.5,.5,1) .08s reverse both} /* 나올 때 ← 원이 들어올 때 모션을 거꾸로 */
  @keyframes tbBack{from{opacity:0;transform:scale(.3) rotate(-90deg)}}
  @media (prefers-reduced-motion:reduce){.tabbar.swap *{animation:none!important}}
  body.in-wiz .tabbar{display:none}
  body.in-wiz .page{padding-bottom:24px}
  .wiz .card-pad{padding:18px 16px}
  .wiz-foot{position:sticky;bottom:0;background:var(--bg);border-radius:0 0 12px 12px;padding:12px 16px}
  .wiz-foot .why{display:none}
  .wiz-foot .btn.primary{min-width:120px;padding-top:8px;padding-bottom:8px;line-height:var(--text-btn-lg-leading)}
  .steps .st-name{display:none}
  .steps .st.cur .st-name{display:inline}
  .post-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .f-pair{grid-template-columns:1fr}
  .summary .s-row{flex-wrap:wrap;gap:4px 12px}
  .summary .s-row>span:first-child{width:100%}
  .banner{flex-wrap:wrap}
  .toast{top:64px}
}

/* ---------- 실사용 버전 추가 ---------- */
.steps-guide{margin:14px 0 18px;padding-left:20px;color:var(--ink2)}
.steps-guide li{margin:6px 0}
.steps-guide code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--soft);padding:1px 5px;border-radius:5px}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted2);font-size:12px;margin:18px 0}
/* 인스타 연결: 처음 연결 안내(테스터 초대 수락), 토큰 붙여넣기는 접어 둠 */
.conn-first{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);font-size:13px;color:var(--ink2)}
.conn-first > b{color:var(--ink)}
.conn-first ol{margin:8px 0 0;padding-left:18px}
.conn-first li{margin:6px 0}
.conn-adv{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.conn-adv summary{cursor:pointer;font-size:13px;color:var(--muted)}
.conn-adv[open] summary{margin-bottom:4px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.err-box{background:var(--red-bg);border:1px solid var(--red-line);color:var(--red);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px}
.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.cap-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.post-card .cap{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:36px}
.opt.dis{opacity:.5;cursor:not-allowed}
.toggle-row.dis{opacity:.6}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0;word-break:break-all}

/* 게시물 썸네일 이미지 */
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb .t-ic{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;z-index:1}
.thumb .t-ic svg.i{width:12px;height:12px;stroke-width:2}
.thumb:not(:has(img)) .t-ic{display:none}

/* 사이드바가 있는데 화면이 좁을 때(761~1000px) 제목 칸이 눌리지 않게 숫자 칸을 숨김 */
@media (max-width:1000px){ .list-row .stat-mini{display:none} }

/* 사이드바 로고 옆 버전 표시 */
.logo-lock{--lh:18px;display:inline-flex;align-items:flex-end;gap:calc(var(--lh)*.3);color:var(--ink)}
.auth .logo-lock{--lh:26px}
.logo-mark{height:var(--lh);width:auto;flex:none}
.logo-dm{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-weight:400;font-size:calc(var(--lh)*1.04);line-height:.72;letter-spacing:-.01em}
.logo .ver{color:var(--muted2);margin-left:2px;font-variant-numeric:tabular-nums}

/* 의견 있나요? */
.fb-body .field{margin-bottom:4px} /* 팝업 안 입력 칸 사이 16 (줄 간격 12 + 4) */
.modal.fb .acts{border-top:0;margin-top:0} /* 의견 창: 버튼 위 구분선 없음 */
.fb-body{padding:24px 24px 0;display:flex;flex-direction:column;gap:12px}
.fb-moods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fb-mood{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font:inherit;cursor:pointer}
.fb-mood:hover{background:var(--hover)}
.fb-mood.on{border-color:var(--ink);color:var(--ink);background:var(--soft);font-weight:600}
#fb-in{width:100%;min-height:96px;resize:vertical;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink)}
#fb-in:focus{outline:none;border-color:var(--ink)}
.fb-imgs{display:flex;gap:8px;flex-wrap:wrap}
.fb-img{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--soft)}
.fb-img img{width:100%;height:100%;object-fit:cover;display:block}
.fb-img-x{position:absolute;top:4px;right:4px;width:20px;height:20px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.fb-img-x svg.i{width:12px;height:12px;stroke-width:2}
.fb-img-add{position:relative;flex:1;min-width:120px;height:64px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px;cursor:pointer}
.fb-img-add:hover{color:var(--ink);border-color:var(--ink)}
.fb-img-add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.fb-done{padding:36px 24px;text-align:center}
.fb-done .fb-big{font-size:36px;margin-bottom:8px}
.fb-done p{color:var(--muted);margin-top:4px}

/* 대댓글 문구 여러 개 */
.rep-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.rep-row{display:flex;gap:4px;align-items:center}
.rep-row .input{flex:1}
.rep-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.rep-sug small{width:100%;color:var(--muted);font-size:13px}
.rep-chip{font:inherit;font-size:13px;height:28px;padding:0 10px;border-radius:99px;border:1px dashed var(--line);background:transparent;color:var(--ink2);cursor:pointer}
.rep-chip:hover{border-style:solid;color:var(--ink);background:var(--hover)}

.fb-want{display:flex;gap:8px;align-items:center;color:var(--ink2);cursor:pointer}

/* 가입·재동의 화면의 약관 동의 */
.agree{border:1px solid var(--line);border-radius:10px;background:var(--bg2);margin:4px 0 16px;overflow:hidden}
.agree-item{display:flex;gap:10px;align-items:center;padding:10px 12px;font-size:13px;color:var(--ink2);cursor:pointer}
.agree-item + .agree-item{border-top:1px solid var(--line2)}
.agree-item.all{color:var(--ink);border-bottom:1px solid var(--line)}
.agree-item input{width:16px;height:16px;flex:none;accent-color:var(--accent)}
.agree-item .ag-req{color:var(--ink)}
.agree-item .ag-opt{color:var(--muted);font-weight:500}
.agree-item a{font-size:12px;flex:none}
.legal-links{text-align:center;margin:12px 0 0}
.auth .legal-links{text-align:left;margin-top:28px}
.fb-note{color:var(--muted);margin-top:-6px}

/* 말풍선 만들기 */
.bb-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start}
.bb-stage{min-height:360px;display:grid;place-items:center;padding:24px;
  background-color:var(--bg);background-image:linear-gradient(45deg,var(--soft) 25%,transparent 25%),linear-gradient(-45deg,var(--soft) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--soft) 75%),linear-gradient(-45deg,transparent 75%,var(--soft) 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.bb-stage canvas{max-width:100%}
.bb-panel{padding:20px;display:flex;flex-direction:column;gap:16px}
.bb-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.bb-theme{font:inherit;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;height:96px;padding:10px 6px 8px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink2);cursor:pointer}
.bb-theme.on{border-color:var(--ink);color:var(--ink);font-weight:600;background:var(--soft)}
.bb-colors{display:flex;gap:8px}
.bb-sw{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.bb-sw.on{outline:2px solid var(--ink);outline-offset:2px}
.bb-acts{display:flex;gap:8px}
.bb-acts .btn{flex:1}
@media (max-width:860px){.bb-wrap{grid-template-columns:1fr}.bb-stage{min-height:240px}}
.bb-sw{box-shadow:inset 0 0 0 1px rgba(128,128,128,.55)}
.bb-thumb{display:block}

/* 콘텐츠 관리 */
.adm-wrap{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.adm-cats,.adm-themes{padding:12px;display:flex;flex-direction:column;gap:4px}
.adm-h{display:flex;align-items:center;gap:8px;padding:4px 6px 10px}
.adm-h small{color:var(--muted)}
.adm-cname{max-width:200px;font-weight:600}
.adm-cat{display:flex;align-items:center;gap:2px;padding:6px 6px 6px 10px;border-radius:8px;cursor:pointer;color:var(--ink2)}
.adm-cat:hover{background:var(--hover)}
.adm-cat.on{background:var(--soft);color:var(--ink);font-weight:600}
.adm-cat small{color:var(--muted);font-weight:400;margin-left:4px}
.adm-add{display:flex;gap:6px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line2)}
.adm-add .input{flex:1;min-width:0}
.adm-theme{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.adm-theme:hover{background:var(--hover)}
.adm-theme canvas{width:96px;flex:none}
.adm-theme small{display:block;color:var(--muted);font-size:13px}
.adm-vis{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.adm-color{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.adm-color input[type=color]{width:40px;height:32px;padding:2px;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer}
.empty-s{padding:32px;text-align:center;color:var(--muted)}
.empty-s a{color:var(--ink);text-decoration:underline}
.grow{flex:1;min-width:0}
@media (max-width:860px){.adm-wrap{grid-template-columns:1fr}}
.bb-stage{position:relative}
.bb-loading{position:absolute;top:12px;left:12px;font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:3px 10px}

/* 운영자 의견함 */
.fb-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line2)}
.fb-item:last-child{border-bottom:0}
.fb-item .fb-m{font-size:20px;line-height:1.4}
.fb-item p{margin:0 0 4px;white-space:pre-wrap}
.fb-item small{color:var(--muted);font-size:13px}

/* 운영자: 시안 메뉴 */
.mock-tag{margin-left:auto;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:0 5px;line-height:16px}
.page.page-mock{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 52px);padding-bottom:26px;max-width:none}
.mock-banner{margin:0}
.mock-frame{flex:1;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--bg)}

/* 운영자: 도입 문의 */
.nav-n{margin-left:auto;background:var(--accent,#3b82f6);color:#fff;border-radius:99px;padding:0 7px;line-height:18px}
.iq-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap}
.iq-bar .input{max-width:260px}
.iq{border-bottom:1px solid var(--line2)}
.iq:last-child{border-bottom:0}
.iq summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none}
.iq summary::-webkit-details-marker{display:none}
.iq summary:hover{background:var(--hover)}
.iq .dot.new{background:#3b82f6}
.iq-d{color:var(--muted);font-size:13px;width:84px;flex:none}
.iq-body{padding:4px 16px 16px 42px;display:flex;flex-direction:column;gap:10px}
.iq-msg{margin:0;white-space:pre-wrap}
.iq-meta{font-size:13px;color:var(--muted)}
.iq-meta a{color:var(--ink);text-decoration:underline}
.iq-ctl{display:flex;flex-direction:column;gap:8px}
.iq-ctl .textarea{min-height:64px}
.st-words .textarea{display:block;min-height:0;resize:none;overflow:hidden} /* 여러 줄 문구도 처음엔 한 줄 칸. 줄바꿈하면 그만큼 늘어남 */

/* 운영자 지표: 30일 막대 */
.stat-bars{display:flex;align-items:flex-end;gap:4px;height:160px;padding:16px 20px 28px}
.stat-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;min-width:0}
.stat-bar i{display:block;width:100%;min-height:2px;background:var(--blue);border-radius:3px 3px 0 0;opacity:.85}
.stat-bar span{font-size:10px;color:var(--muted);order:-1;margin-bottom:2px}
.stat-bar em{position:absolute;bottom:-18px;font-style:normal;font-size:10px;color:var(--muted)}

/* 자동화 목록: 릴스·캐러셀·게시물 구분 */
.kw.post-type{background:var(--violet-bg);color:var(--violet);border-color:var(--violet-line)}

/* 의견함: 연락처 복사 · 처리 완료 · 답변 메모 */
.fb-item{align-items:flex-start}
.fb-item.done p{color:var(--muted)}
.fb-ct{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--muted)}
.fb-ct b{color:var(--ink);user-select:all}
.fb-done-at{margin-top:6px;font-size:12px;color:var(--green)}
.fb-memo{margin-top:8px;min-height:44px;font-size:13px}

/* 홈 최근 발송: 실패만 보기 */
.card-h .fail-link{color:var(--red);margin-right:12px}
/* 운영자 › 초대 링크 */
.inv-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;align-items:end}
.inv-form .btn{grid-column:1/-1;justify-self:start}
@media (max-width:720px){.inv-form{grid-template-columns:1fr}}
.inv-row.off{opacity:.55}
.inv-link{display:flex;align-items:center;gap:8px;margin:6px 0 4px;min-width:0}
.inv-link code{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* 링크 페이지 */
.pg-url{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-move{display:grid;gap:2px}
.pg-move .btn{padding:0 6px}
.pg-off .grow{opacity:.5}
.pg-add{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px}
@media (max-width:720px){.pg-add{grid-template-columns:1fr}}
.pg-slug{display:flex;align-items:center;gap:6px}
.pg-slug span{white-space:nowrap}
.pg-slug .input{flex:1;min-width:0}
.pg-phone{text-align:center;padding:34px 18px 24px}
.pg-av{width:58px;height:58px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;background:var(--ig-ink);color:var(--ig-bg);font-size:24px;font-weight:700}
.pg-t{display:block;font-size:15px}
.pg-bio{font-size:13px;color:var(--muted);white-space:pre-wrap;margin:6px 0 0}
.pg-links{display:grid;gap:8px;margin-top:18px}
.pg-links span{display:block;padding:12px;border-radius:11px;border:1px solid var(--line);font-size:13px;font-weight:600}

/* 드롭다운 (자동화 유형 필터) */
.dd{position:relative;display:inline-block;margin-bottom:12px}
.dd-btn{gap:8px}
.dd-n{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.dd-chev{display:inline-flex;color:var(--muted)}
.dd-chev svg{width:14px;height:14px;transform:rotate(90deg);transition:transform .15s}
.dd.open .dd-chev svg{transform:rotate(-90deg)}
.dd-menu{position:absolute;left:0;top:calc(100% + 6px);min-width:180px;padding:4px;background:var(--modal);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:20;display:none}
.dd.open .dd-menu{display:block}
.ul-tabs > .dd .dd-menu{left:auto;right:0} /* 탭 줄 오른쪽 끝 드롭다운은 오른쪽에 맞춰 펼침 (화면 밖으로 안 나가게) */
.dd-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:7px 10px;line-height:20px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.dd-item:hover{background:var(--hover)}
.dd-ck{display:inline-flex;width:14px;color:var(--accent);visibility:hidden}
.dd-ck svg{width:14px;height:14px}
.dd-item.on .dd-ck{visibility:visible}

/* 저장한 DM 문구 */
.tpl-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tpl-list{display:grid;gap:6px;margin-top:8px;max-height:260px;overflow:auto}
.tpl-row{display:flex;gap:6px;align-items:stretch}
.tpl-use{flex:1;min-width:0;text-align:left;white-space:pre-wrap;word-break:break-word;border:1px solid var(--field-line);border-radius:8px;background:var(--field);color:var(--ink);padding:8px 11px;font-size:13px;line-height:1.5;max-height:76px;overflow:hidden;cursor:pointer}
.tpl-use:hover{border-color:var(--field-focus)}

/* 게시물 반응 표 */
.reach-tbl{margin:12px 16px 0;border:1px solid var(--line2);border-radius:8px;overflow:hidden;font-size:13px}
.reach-r{display:grid;grid-template-columns:1fr 1.3fr 1.3fr 1fr;padding:8px 12px;border-top:1px solid var(--line2)}
.reach-r:first-child{border-top:0}
.reach-r span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.reach-h{color:var(--muted);font-size:12px;background:var(--field)}
.reach-r.warn{background:var(--amber-bg, rgba(245,158,11,.08))}

/* ---------- 커스텀 스티커 (모양 템플릿). 원본 Scrr/prototype/templates.html 화면 그대로 ---------- */
.st-wrap{display:grid;grid-template-columns:minmax(280px,420px) minmax(340px,616px);justify-content:space-between;gap:44px;align-items:start} /* 패널 최대 616 = 이름 칸 120 + 16 + 입력 칸 최대 480. 패널은 오른쪽 끝(상단 버튼 줄)에 붙임 */
/* 세그먼트 컨트롤 (둥근 사각형, 트랙 10px · 칸 8px): 옅은 바탕 트랙 위에, 고른 칸만 떠 있는 버튼. 칸 너비는 모두 같게 */
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--seg-track)}
.seg-btn{flex:1 1 0;min-width:104px;padding:5px 14px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--muted);font-family:inherit;cursor:pointer;white-space:nowrap;text-decoration:none}
.seg-btn:hover{color:var(--ink)}
.seg-btn.on{background:var(--seg-on);color:var(--ink)}
/* 세그먼트: DM 자동화 / 꾸미기 전환 */
.t-seg{font-size:var(--text-seg-size);line-height:var(--text-seg-leading);font-weight:var(--text-seg-weight)}
.st-sec[hidden]{display:none}
.st-tpls{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;max-width:1040px}
.st-tpl{flex:none;padding:5px 12px;line-height:20px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:500;cursor:pointer}
.st-tpl.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
/* 운영자 콘텐츠 관리의 문구/모양 탭 (밑줄 탭바) */
.st-cats{display:flex;gap:4px;margin-bottom:14px;box-shadow:inset 0 -1px var(--line);max-width:1040px}
.st-cat{background:none;border:0;border-bottom:2px solid transparent;padding:4px 14px 12px;color:var(--muted);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.st-cat:hover{color:var(--ink)}
.st-cat.on{color:var(--ink);border-bottom-color:var(--ink)}
/* 맨 위 템플릿 목록은 밑줄 탭바 (편집 화면 안 '세트' 선택은 위의 알약 그대로) */
#st-tpls{gap:4px;margin-bottom:20px;box-shadow:inset 0 -1px var(--line);max-width:none}
#st-tpls .st-tpl{height:auto;padding:4px 14px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent}
#st-tpls .st-tpl.on{background:transparent}
/* 밑줄 탭 (설정 등). 스티커 탭 줄과 같은 모양 */
.ul-tabs{display:flex;gap:4px;box-shadow:inset 0 -1px var(--line);overflow-x:auto;position:sticky;top:0;z-index:4;padding-top:var(--tabs-top);background:var(--bg)} /* 스크롤해도 탭 줄은 위에 고정. 위 여백은 스티커 탭 줄과 같은 --tabs-top */
.page:has(.ul-tabs){padding-top:0}
.ul-tab{flex:none;padding:4px 14px 12px;border:0;border-bottom:2px solid transparent;background:transparent;font-family:inherit;cursor:pointer}
/* 탭바: 설정·도움말·자동화·발송 기록·꾸미기 탭 공통 (인액티브 / 액티브) */
.t-tab{font-size:14px;font-weight:600;color:var(--muted)}
.t-tab:hover{color:var(--ink)}
.t-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.ul-tab .ul-n{margin-left:6px;color:var(--muted2);font-weight:500;font-variant-numeric:tabular-nums}
.ul-tabs .sp{flex:1}
.ul-tabs .log-camp{align-self:center;margin:0 0 8px;height:32px}
.ul-tabs > .dd{align-self:center;margin-bottom:8px}
.ul-tabs:has(> .dd){overflow:visible} /* 드롭다운 메뉴가 탭 줄에 잘리지 않게 */
.ul-tabs + .card{margin-top:16px}
.grid > .ul-tabs + .card{margin-top:0} /* 그리드 안에서는 그리드 간격(16)만 */
/* 탭 밑줄 이동 모션 (빠르게 180ms) — 밑줄은 .tab-ink 하나가 대신 그림 */
.has-ink .on{border-bottom-color:transparent!important}
.tab-ink{position:absolute;left:0;bottom:0;height:2px;background:var(--ink);pointer-events:none;transition:transform .18s cubic-bezier(.2,.7,.3,1),width .18s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.tab-ink{transition:none}}
.set-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:0} /* 설정 맨 아래: 왼쪽 로그아웃 · 오른쪽 약관 (모든 탭 공통) */
.set-foot .legal-links{margin:0;text-align:right}
.set-logout{margin-left:-12px;color:var(--muted)}
.set-logout:hover{color:var(--ink)}
#st-tpls .st-size{position:absolute;right:0;bottom:8px;flex:none} /* 탭 줄 높이에 영향 없게 (커스텀·스티커 탭 줄 높이 같게) */
#st-tpls .st-size button.on,.st-kinds .st-size button.on{background:var(--soft);color:var(--ink)}
/* 프로토타입 비교: 꾸미기 메뉴 전환 A(제목 탭)·B(제목 드롭다운)·C(분류 탭에 합치기) */
.page-h.st-editing .tt-dd{display:none}
.tt-dd-menu small{margin-left:5px;color:var(--muted2)}
.tt-dd{position:relative}
.tt-dd-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 8px 4px 0;font-family:inherit;color:var(--ink);cursor:pointer}
.tt-dd-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:180px;padding:6px;border-radius:12px;background:var(--modal);border:1px solid var(--line);box-shadow:var(--shadow)}
.tt-dd.open .tt-dd-menu{display:block}
.tt-dd-menu button{display:flex;align-items:center;width:100%;padding:8px 10px;line-height:20px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.tt-dd-menu button:hover{background:var(--hover)}
.tt-dd-menu button.on{font-weight:700}
.tt-dd-menu button svg.i{margin-left:auto;width:16px;height:16px}
/* 스크롤해도 탭 줄은 상단 바 바로 아래에 붙어 있음 (top은 상단 바 높이, 스크립트가 맞춤) */
/* 본문 위 여백(16px)을 탭 줄 안쪽으로 옮겨서 음수 위치 없이 맨 위에 딱 붙게 */
.page:has(> #st-tpls:not([hidden])){padding-top:0}
.page:has(> #st-edit:not([hidden])){padding-top:16px}
#st-tpls{position:sticky;top:0;z-index:4;padding-top:var(--tabs-top);background:var(--bg);box-shadow:inset 0 -1px var(--line)}
#st-tpls{transition:padding-top .2s}
#st-tpls.is-up{padding-top:0} /* 아래로 스크롤하면 헤더 쪽으로 붙음, 위로 올리면 원래대로 */
.st-stage{aspect-ratio:1;border-radius:24px;display:grid;place-items:center;padding:6%;background:var(--card-cream)}
.st-stage canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--vw,88%);height:var(--vw,88%);object-fit:contain;display:block} /* --vw: 운영자가 정한 미리보기 크기 */
.st-meta{margin-top:6px;font-size:12px;color:var(--muted);text-align:right}
.st-panel{margin-top:-16px} /* 첫 항목의 입력 칸 윗선을 미리보기 칸 윗선에 맞춤 (항목 위 여백 16만큼 올림) */
/* 커스텀 스티커는 본문 폭을 끝까지 씀 */
.page:has(.st-gal){max-width:none}
.st-gal{display:grid;grid-template-columns:repeat(auto-fill,var(--st-card,240px));gap:14px;justify-content:center}
.st-gal[hidden],.st-wrap[hidden],.st-tpls[hidden],.st-banners[hidden]{display:none}
/* 둘러보기 맨 위 배너: 커스텀·스티커로 이동 */
.st-banners{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:20px}
.st-banner{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:14px;background:var(--soft);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.st-banner:hover{background:var(--soft2)}
.st-banner>div{flex:1;min-width:0}
.st-banner b{display:block;font-size:16px;font-weight:700}
.st-banner small{display:block;margin-top:4px;color:var(--muted);font-size:13px}
.st-banner-go{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-ink)}
.st-card{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:14px;background:transparent;color:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .15s}
.st-card:hover,.st-card:focus-visible{border-color:var(--ink)}
.st-card-img{aspect-ratio:1;display:grid;place-items:center;padding:12%;background:repeating-conic-gradient(var(--soft) 0 25%,var(--bg2) 0 50%) 0 0/16px 16px}
.st-card-img canvas{max-width:100%;max-height:100%;display:block}
/* 썸네일은 모두 1:1. 세로로 긴 스티커는 칸 안에 맞춰 줄임 (칸이 늘어나지 않게) */
.st-card-img{position:relative;overflow:hidden}
.st-card-img canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(76% * var(--k, 1));height:calc(76% * var(--k, 1));max-width:none;max-height:none;object-fit:contain;aspect-ratio:auto !important}
/* 회원 화면 카드 바탕은 체크 대신 옅은 중성 회색 (운영자 카드는 투명 확인용 체크 그대로) */
#st-gal .st-card-img,#st-rec-gal .st-card-img{background:var(--card-cream)}
#st-gal .st-card,#st-rec-gal .st-card{border:0}
.st-rec{margin-top:80px}
.st-rec[hidden]{display:none}
.st-rec-h{margin-bottom:16px}
/* 썸네일 호버: 복사·다운로드 (터치 기기는 늘 보임) */
.st-card-wrap{position:relative}
/* 호버하면 카드를 살짝 어둡게 (핀터레스트처럼), 버튼은 그 위에 */
.st-card-wrap::after{content:"";position:absolute;inset:0;border-radius:14px;background:rgba(0,0,0,.22);opacity:0;transition:opacity .15s;pointer-events:none}
.st-card-wrap:hover::after{opacity:1}
.st-acts{z-index:1}
.st-card-wrap>.st-card{width:100%}
.st-mine-name{display:flex;align-items:center;gap:2px;height:28px;margin-top:6px;color:var(--ink)}
.st-mine-txt{min-width:0;cursor:text;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-mine-pen{position:relative;flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;color:var(--muted2);cursor:pointer}
.st-mine-pen svg.i{width:14px;height:14px;stroke-width:2}
.st-mine-pen:hover{background:var(--hover);color:var(--ink)}
.st-mine-pen{opacity:0;transition:opacity .12s} /* 연필은 카드에 마우스를 올렸을 때만 */
.st-mine:hover .st-mine-pen,.st-mine-pen:focus-visible,.st-mine-more:has(.open) .st-mine-pen{opacity:1}
.st-mine-pen svg.i{fill:currentColor}
.st-mine-more{position:relative;flex:none}
.st-mine-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:140px;padding:6px;border-radius:12px;background:var(--modal);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.st-mine-menu.open{display:block}
.st-mine-menu button{display:block;width:100%;padding:8px 10px;line-height:20px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.st-mine-menu button:hover{background:var(--hover)}
.st-mine-menu button.danger{color:var(--err,#e5484d)}
@media (hover:none){.st-mine-pen{opacity:1}}
.st-mine-pen[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:7px;background:rgba(17,17,17,.92);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.st-mine-pen:hover::after{opacity:1}
.st-mine-in{width:100%;height:28px;padding:0 8px;border:1px solid var(--ink);border-radius:6px;background:var(--field);color:var(--ink);font:inherit;font-size:15px;outline:none}
.st-mine::after{bottom:34px} /* 호버 어둡게는 그림 칸에만 */
.st-acts{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transition:opacity .15s;pointer-events:none}
.st-card-wrap:hover .st-acts,.st-card-wrap:focus-within .st-acts{opacity:1;pointer-events:auto}
@media (hover:none){.st-acts{opacity:1;pointer-events:auto}}
/* 아이콘만 있는 동그란 버튼 (반투명 검정 위 흰 아이콘) */
.st-act{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(0,0,0,.38);color:#fff;cursor:pointer;transition:background .12s}
.st-act:hover{background:rgba(0,0,0,.55)}
.st-act.on{color:#FFD43B}
/* 즐겨찾기는 왼쪽 아래. 넣어 둔 카드는 마우스를 안 올려도 별이 보임 */
.st-acts.st-fav{top:auto;right:auto;bottom:10px;left:10px}
.st-acts.st-fav.is-on{opacity:1;pointer-events:auto}
.st-fav .st-act::after{top:auto;bottom:calc(100% + 2px)} /* 별은 버튼(32)보다 아이콘(24)이 작아서 간격을 좁게 */
/* 별은 동그란 바탕·그림자 없이 아이콘만 */
.st-fav .st-act{width:32px;height:32px;background:transparent}
.st-fav .st-act:hover{background:transparent}
.st-fav .st-act svg.i{width:24px;height:24px}
.st-act.on svg.i{fill:currentColor}
.st-stage{position:relative}
.st-stage .st-acts.st-fav{bottom:14px;left:14px}
.st-stage .st-act{color:var(--muted)}
.st-stage .st-act:hover{color:var(--ink)}
.st-stage .st-act.on{color:#FFD43B}
.st-stage .st-acts.st-tools{top:14px;right:14px;opacity:1;pointer-events:auto}
.st-stage .st-acts.st-share-tool{top:auto;bottom:14px}
.st-stage .st-share-tool .st-act::after{top:auto;bottom:calc(100% + 6px)}
.st-stage .st-tools .st-act{width:44px;height:44px;border-radius:12px;background:transparent;color:var(--ink)} /* 뒤로가기 버튼과 같은 네모 모양 */
.st-stage .st-tools .st-act:hover{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2)}
.st-stage .st-tools .st-act:disabled{color:var(--muted);opacity:.35;cursor:default;background:transparent}
.st-stage .st-tools .st-act:disabled::after{display:none}
.st-empty{grid-column:1/-1}
.empty.st-empty{padding-top:80px} /* 스티커 목록 빈 화면: 위는 탭·칩 줄 밑이라 80, 나머지는 .empty 공통 */
.st-act svg.i{width:20px;height:20px;stroke-width:2}
/* 버튼 툴팁: 마우스를 올리면 바로 아래에 '복사'·'다운로드' */
.st-act{position:relative}
.st-act::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:7px;background:rgba(17,17,17,.92);color:#fff;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .1s}
.st-act:hover::after,.st-act:focus-visible::after{opacity:1}
.st-card-txt{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.st-card-txt small{font-size:12px;color:var(--muted)}
.st-sec{padding:12px 0;border-bottom:1px solid var(--line)}
.st-sec:last-child{border-bottom:0}
.st-lbl{font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between}
.st-words{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.st-words.one{grid-template-columns:1fr}
.st-sec .st-tpls{margin-bottom:0;flex-wrap:wrap}
.sa-set-name{margin-top:10px}
.sa-set-name .input{flex:1;min-width:0}
.sa-set-name .btn{flex:none}
.st-picks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.st-pick-c{min-width:40px;height:36px;padding:0 10px;border:1px solid var(--field-line);border-radius:8px;background:var(--field);color:var(--ink);font-size:16px;cursor:pointer}
.st-pick-c:last-child{font-size:13px}
.st-pick-c.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.st-sws{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.st-sw{width:28px;height:28px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer}
/* 고른 색은 검정 테두리만. 흰색은 안 골랐을 때 얇은 회색 선 */
.st-sw.on{border-color:var(--ink)}
[data-theme="light"] .st-sw.is-light:not(.on){border:1px solid var(--line)}
:root:not([data-theme="light"]) .st-sw.is-dark:not(.on){border:1px solid var(--strong-line)} /* 바깥 크기는 다른 색과 같게, 선만 얇게 */
.st-sw.st-pick{position:relative;overflow:hidden;background:conic-gradient(red,#ff0,lime,cyan,blue,#f0f,red) border-box} /* border-box: 투명 테두리 자리까지 한 장으로 (안 그러면 가장자리에 네모 무늬가 반복돼 보임) */
.st-sws{position:relative}
.st-hexpop{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:30;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:12px;background:var(--modal);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.st-sws.hex-open .st-hexpop{display:flex}
.st-hexpop{flex-direction:column;align-items:stretch;gap:12px;width:232px;height:auto;padding:12px}
.st-cp-sv{position:relative;height:140px;border-radius:8px;cursor:crosshair;touch-action:none}
.st-cp-knob{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3);pointer-events:none}
.st-cp-hue{-webkit-appearance:none;appearance:none;width:100%;height:12px;margin:0;border-radius:6px;background:linear-gradient(to right,red,#ff0,lime,cyan,blue,#f0f,red);cursor:pointer}
.st-cp-hue::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.st-cp-hue::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.st-hex-row{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:1px solid var(--field-line);border-radius:8px;background:var(--field);cursor:text}
.st-hex-row:focus-within{border-color:var(--ink)} /* 입력 중이면 어두운 테두리 (다른 입력 칸과 같은 포커스) */
.st-hex-in{flex:1;min-width:0}
.st-hex-dot{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.st-hex-hash{color:var(--muted);font-size:14px}
.st-hex-in{width:76px;height:28px;border:0;outline:none;background:none;color:var(--ink);font:inherit;font-size:14px;font-variant-numeric:tabular-nums;text-transform:uppercase}
.st-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}
.st-acc-h .st-toggle{margin-left:auto;font-size:14px} /* 옵션 줄: 이름 왼쪽 · 체크 오른쪽 */
.st-toggle input,.fb-want input{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;border:1.5px solid var(--strong-line);border-radius:5px;background:var(--field) center/12px 12px no-repeat;cursor:pointer}
/* 체크박스는 직접 그림: 호버해도 색 안 바뀜 */
.st-toggle input:checked,.fb-want input:checked{border-color:var(--accent);background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5'/%3E%3C/svg%3E")}
.st-toggle input:focus-visible,.fb-want input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#st-size{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:transparent;cursor:pointer}
/* 슬라이더: 테두리 없는 트랙(채운 만큼 강조색, --p는 stRender가 넣음) + 동그란 손잡이 */
#st-size::-webkit-slider-runnable-track{height:6px;border:0;border-radius:3px;background:linear-gradient(var(--accent),var(--accent)) 0 0/var(--p,50%) 100% no-repeat,var(--line)}
#st-size::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:0;border-radius:50%;background:var(--accent)}
#st-size::-moz-range-track{height:6px;border:0;border-radius:3px;background:var(--line)}
#st-size::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent)}
#st-size::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--accent)}
.st-row{display:flex;gap:6px}
.st-row[hidden]{display:none}
.st-row .btn{flex:1}
.st-save-row{margin-top:16px}
.st-save-row[hidden]{display:none}
.st-save-row .btn svg.i,.st-topacts .btn svg.i{width:18px;height:18px}
.st-save-row .btn,.st-topacts .btn{border-radius:10px}
/* 저장 버튼 + 화질 고르기(▾) 붙은 버튼 */
.split-btn{position:relative;display:flex;flex:1;min-width:0}
.split-btn #st-save{flex:1;min-width:0;white-space:nowrap;border-top-right-radius:0;border-bottom-right-radius:0}
.st-row .split-btn .split-chev,.st-topacts .split-btn .split-chev{flex:none;min-width:0;width:32px;padding:0;border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:transparent;position:relative}
.split-chev::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:1px;background:color-mix(in srgb,var(--on-ink) 25%,transparent)} /* 구분선은 위아래 10씩 띄운 짧은 선 */
.split-chev svg.i{width:16px !important;height:16px !important;transform:rotate(90deg);transition:transform .15s}
.split-btn.open .split-chev svg.i{transform:rotate(-90deg)}
.split-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:240px;padding:6px;border-radius:12px;background:var(--modal);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.split-btn.open .split-menu{display:block}
.split-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:10px;line-height:20px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.split-menu button:hover{background:var(--hover)}
.split-menu small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.split-menu .pro-badge{margin-left:auto}
.split-menu .split-check{flex:none;width:16px;height:16px}
.save-q{margin-left:-3px;opacity:.7}
.pro-badge{padding:1px 6px;border-radius:5px;background:var(--brand);color:#0a0a0a;font-size:11px;font-weight:700;letter-spacing:.3px}
.split-check svg.i{width:16px;height:16px}
.st-topacts{display:flex;gap:8px;margin-left:auto}
.st-topacts .btn{min-width:120px}
.st-topacts .split-btn{flex:none}
.st-topacts .st-req svg.i{width:16px!important;height:16px!important}
.st-topacts .split-btn #st-save{flex:none;min-width:0}
.split-btn #st-save{padding:0 14px}
.st-topacts .st-top-share,.st-topacts #st-copy{min-width:0;padding:0 16px}
.st-row .btn{min-width:0;padding-left:8px;padding-right:8px}
.st-count{grid-column:1/-1;align-items:center;margin-top:6px}
.st-count small{flex:none}
/* 운영자 콘텐츠 관리 — 스티커 팔레트 편집 */
.sa-sw{position:relative;display:inline-flex}
.sa-swb{width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.sa-swb{position:relative}
.sa-swb.on::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.sa-swb.on.light::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sa-swb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sa-pop{position:absolute;z-index:50;display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.sa-pop input[type=color]{width:32px;height:32px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer}
.sa-hex{width:96px;height:32px;padding:0 8px;border:1px solid var(--field-line);border-radius:6px;background:var(--field);color:var(--ink);font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;outline:none}
.sa-hex:focus{border-color:var(--ink)}
.sa-hex.bad{border-color:#e5484d}
.sa-def{display:flex;align-items:center;gap:8px}
.sa-sw input[type=color],.sa-defs input[type=color]{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.sa-sw input[type=color]::-webkit-color-swatch-wrapper,.sa-defs input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.sa-sw input[type=color]::-webkit-color-swatch,.sa-defs input[type=color]::-webkit-color-swatch{border:1px solid rgba(127,127,127,.35);border-radius:50%}
.sa-sw input[type=color]::-moz-color-swatch,.sa-defs input[type=color]::-moz-color-swatch{border:1px solid rgba(127,127,127,.35);border-radius:50%}
.sa-x{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;border:0;padding:0;font-size:9px;line-height:16px;background:var(--ink);color:var(--on-ink);cursor:pointer;opacity:0;transition:opacity .15s}
.sa-sw:hover .sa-x,.sa-x:focus-visible{opacity:1}
@media (hover:none){.sa-x{opacity:1}}
.sa-defs{display:flex;gap:18px;flex-wrap:wrap}
.sa-defs label{display:flex;align-items:center;gap:8px;cursor:pointer}
.sa-pads{display:flex;gap:10px 18px;flex-wrap:wrap}
.sa-gal-tip{margin:0 0 10px}
.sa-gal .st-card{cursor:grab;position:relative}
.sa-gal .st-card.dragging{opacity:.4}
.sa-gal .st-card.drop-before{box-shadow:-4px 0 0 var(--accent)}
.sa-gal .st-card.drop-after{box-shadow:4px 0 0 var(--accent)}
.sa-hid{color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:0 5px;margin-left:4px}
.sa-gal-row{max-width:1040px;margin-top:16px}
.sa-bar{display:flex;align-items:center;gap:8px;max-width:1040px;margin-bottom:8px}
.sa-bar .select{width:auto;min-width:140px}
.sa-gal.no-drag .st-card{cursor:pointer}
.sa-gal.small{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.sa-gal.small .st-card-txt{padding:8px 10px}
.sa-gal.small .st-card-txt b{font-size:13px}
.sa-gal.small .st-card-txt small{font-size:11px}
.sa-gal.small .sa-card-sw{padding:8px 10px;font-size:12px}
.sa-size{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sa-size button{display:grid;place-items:center;width:34px;height:32px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.sa-size button+button{border-left:1px solid var(--line)}
.sa-size button.on{background:var(--fill);color:var(--ink)}
.sa-card-sw{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid var(--line);font-size:13px;font-weight:600}
.sa-gal .st-card.is-hid .st-card-img{opacity:.45}
.sa-pads label{display:flex;align-items:center;gap:6px}
.sa-pads .input{width:76px}
@media (max-width:1000px){.st-wrap{grid-template-columns:minmax(0,1fr);max-width:480px}.st-panel{margin-top:0}}

/* ── 편집 항목: 이름 · 지금 값 한 줄 + 아래에 조정 칸 (다 펼쳐 둠) ── */
/* ── 편집 항목 공통 컴포넌트 (모든 항목 같은 규칙) ──
   항목 = 위아래 여백 16 + 머리줄(높이 32: 이름 · 오른쪽 조절/값/초기화) + [아래 조정 칸: 머리줄과 간격 8]
   → 항목 사이 간격은 늘 32, 이름 줄 높이는 늘 32. 구분선 없음 */
.st-panel .st-sec{padding:16px 0;border-bottom:0}
.st-panel .st-sec:not([hidden]):not(:has(~ .st-sec:not([hidden]))){padding-bottom:0} /* 패널 아래 빈 여백 없앰 → 글자 크기를 펼쳐도 미리보기보다 안 길어져서 아래 '추천'이 안 밀림 */
.st-acc-h{display:flex;align-items:center;gap:16px;height:32px;color:var(--ink)}
.st-acc-l{flex:none;line-height:32px}
.st-acc-v{flex:none;color:var(--muted);font-size:14px;white-space:nowrap}
.st-acc-b{padding-top:8px}
.st-acc-sws{flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.st-sw{flex:none} /* 좁아져도 동그라미 안 찌그러짐 (줄바꿈) */
.st-acc-reset{position:relative;flex:none;display:grid;place-items:center;width:24px;height:24px;margin:0 auto 0 -14px;padding:0;border:0;border-radius:6px;background:none;color:var(--muted2);cursor:pointer}
.st-acc-reset svg.i{width:14px;height:14px;stroke-width:2.2}
.st-acc-reset:hover{background:var(--hover);color:var(--ink)}
.st-acc-reset[hidden]{display:grid;visibility:hidden} /* 숨겨도 자리 유지 */
.st-acc-reset::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:7px;background:rgba(17,17,17,.92);color:#fff;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.st-acc-reset:hover::after{opacity:1}
.st-acc-row{display:flex;align-items:center;min-height:56px}
.st-acc-tog{cursor:pointer}
.st-acc-c{flex:none;display:grid;place-items:center;color:var(--muted)}
.st-acc-c svg.i{width:18px;height:18px;transform:rotate(90deg);transition:transform .15s}
.st-acc.open .st-acc-c svg.i{transform:rotate(-90deg)}
#st-size-sec .st-acc-b{display:none}
#st-size-sec.open .st-acc-b{display:block}
/* 문구·글꼴·세트: 이름은 왼쪽 칸, 입력·선택은 오른쪽 칸 (이름과 첫 줄 가운데 맞춤). 초기화는 이름 아래 */
#st-words-sec,#st-font-sec,#st-set-sec{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:24px;align-items:start} /* 이름 칸은 글자 폭만, 이름↔입력 간격 24 고정 → 좁아지면 입력 칸이 줄어듦 */
#st-words-sec[hidden],#st-font-sec[hidden],#st-set-sec[hidden]{display:none}
#st-words-sec .st-acc-h,#st-font-sec .st-acc-h,#st-set-sec .st-acc-h{position:relative;height:40px} /* 첫 줄 높이와 같게 고정 → 초기화가 생겨도 이름 위치 그대로 */
#st-words-sec .st-acc-b,#st-font-sec .st-acc-b,#st-set-sec .st-acc-b{padding-top:0}

/* ---- 공통 글자 스타일 (디자인 시스템, 비슷한 값은 하나로 묶음) ---- */
/* 섹션 제목 */
.st-rec-h{font-size:var(--text-section-size);font-weight:var(--text-section-weight)}
/* 중간 제목 */
.wiz h2,.st-banner-go{font-size:var(--text-heading-size);font-weight:var(--text-heading-weight)}
/* 카드 제목 */
.acct b,.card-h,.plan h3{font-size:var(--text-card-size);font-weight:var(--text-card-weight)}
/* 메뉴 항목 */
.tt-dd-menu button,.st-mine-menu button,.st-act::after,.st-mine-name,.st-acc-l{font-size:var(--text-menu-size);font-weight:var(--text-menu-weight)}
/* 칩 · 툴팁 */
.chip,.st-mine-pen[data-tip]::after,.st-acc-reset::after{font-size:var(--text-chip-size);font-weight:var(--text-chip-weight)}
/* 배지 · 라벨 */
.plan-chip,.badge,.kw,.steps .st span,.wiz-preview .lbl,.save-q{font-size:var(--text-label-size);font-weight:var(--text-label-weight)}
/* 작은 태그 */
.post-card .used-tag,.lchart .vl,.plan .cur-tag,.nav-n,.tt-dd-menu small,.sa-hid,.logo .ver,.mock-tag{font-size:var(--text-tag-size);font-weight:var(--text-tag-weight)}

/* ---- 모달 공통 스펙 (모든 팝업이 같이 씀) ---- */
.modal .m-head h3{font-size:var(--text-title-size);font-weight:var(--text-title-weight);letter-spacing:var(--text-title-tracking);line-height:var(--text-title-leading)} /* 미리보기: 모달 제목 = 왕타이틀 (원래 --text-modal-title-*) */
.modal .m-head p{font-size:var(--text-modal-desc-size);line-height:var(--text-modal-desc-leading);letter-spacing:var(--text-title-sub-tracking)} /* 모달 설명 = 헤더 서브텍스트 */
.modal .fb-mood{font-size:var(--text-modal-option-size)}
.modal .input,.modal #fb-in{font-size:var(--text-modal-input-size)}
.modal .fb-want{font-size:var(--text-modal-check-size);font-weight:var(--text-modal-check-weight);line-height:20px}
.modal .fb-note{font-size:var(--text-modal-note-size);line-height:20px}
.modal .acts .btn{padding:6px 14px;font-size:var(--size-15)} /* 미리보기: 모달 버튼 15·패딩 6/14 (원래 --text-btn-lg-size 14, 패딩 5/12) */
.modal .acts .btn.primary{font-weight:500} /* 미리보기: 모달 주 버튼 굵기 한 단계 낮춤 (원래 600) */

/* 큰 버튼 텍스트 (두께는 버튼 종류 따라: 기본 500, 주 버튼 600) */
.btn.lg{font-size:var(--text-btn-lg-size);line-height:var(--text-btn-lg-leading)}

/* ---- 로그인·가입 화면 공통 스펙 ---- */
.auth h1{font-size:var(--text-auth-title-size);font-weight:var(--text-auth-title-weight);letter-spacing:var(--text-auth-title-tracking)}
.auth .sub{font-size:var(--text-auth-desc-size)}

/* 설정 항목 제목 (이메일·모든 데이터 삭제·회원 탈퇴·테마 등) */
.t-row-title{font-size:var(--text-row-title-size)}

/* 빈 화면 설명: 빈 화면 제목 아래 한 줄 */
.empty p{font-size:var(--text-empty-desc-size);line-height:20px}

/* 폰트 칩 텍스트: 꾸미기 편집 「글꼴」 고르는 칩 */
.st-fonts .st-tpl{font-size:var(--text-font-chip-size)}

/* 드롭다운 쉐브론: 고르기 칸(.select) 화살표와 같은 모양·크기·색 */
.chev-dd path{vector-effect:non-scaling-stroke}
.chev-dd{flex:none;width:12px;height:12px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tt-dd-btn .chev-dd{width:20px;height:20px;stroke-width:2} /* 헤더 옆은 크게 */

/* 사이드바 로고: 누르면 홈 */
.logo-home{display:inline-flex;color:inherit;text-decoration:none}

/* 카테고리 칩: 탭 아래 한 줄, 고르면 그 카테고리만 */
.st-kinds{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:12px 0;position:sticky;top:var(--kinds-top,0);z-index:3;background:var(--bg);transition:transform .2s,opacity .2s}
.st-kinds.is-up{transform:translateY(-100%);opacity:0;pointer-events:none} /* 아래로 스크롤하면 탭 뒤로 숨고, 위로 올리면 다시 보임 */
.st-kinds .st-size{margin-left:auto;flex:none}
.st-kinds[hidden]{display:none}
#st-tpls:has(+ .st-kinds:not([hidden])){margin-bottom:0} /* 카테고리 칩이 있으면 탭 줄 아래 12는 칩 줄 위 패딩으로 */
.st-kinds:not([hidden]) ~ #st-gal{margin-top:8px} /* 칩 줄 아래 패딩 12 + 8 = 카드까지 20 */

/* 꾸미기 목록에서 아래로 스크롤하면 제목 줄 위아래 여백을 줄임, 위로 올리면 원래대로 */
@media (min-width:761px){.shell>.main>.topbar{transition:padding .2s}.shell>.main>.topbar.is-up{padding-top:16px;padding-bottom:8px}}

/* 스티커 검색: 탭 줄 오른쪽 끝 돋보기 → 누르면 입력 칸 */
.st-search{position:relative;flex:none;width:32px;height:38px;transition:width var(--search-dur,.3s) ease-out} /* 칸 너비만 천천히 늘어남, 아이콘은 제자리에서 같이 밀려감 */
.st-search.open{width:220px}
.st-search .st-search-btn{position:absolute;left:0;top:3px;z-index:1}
.st-search.open .st-search-btn{pointer-events:none;background:none}
.st-search .input{width:100%;height:38px;padding:8px 12px 8px 36px;border-color:transparent;background:transparent;opacity:0;transition:opacity var(--search-dur,.3s) ease-out,background-color var(--search-dur,.3s) ease-out} /* 회색 검색창 */
.st-search.open .input{background:var(--soft);opacity:1}
.st-search .input:focus{border-color:transparent}
#st-tpls .st-search{margin-left:auto;align-self:center;margin-bottom:8px}
.st-search-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.st-search-btn:hover{background:var(--hover);color:var(--ink)}
.st-search-btn svg.i{width:18px;height:18px}

/* 스티커 목록 맨 아래: 스티커 요청하기 */
.st-req-foot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:80px 0 24px;text-align:center}
.st-req-foot[hidden]{display:none}
.st-req-foot p{margin:0;color:var(--muted);font-size:var(--text-empty-desc-size);line-height:20px}
.st-req-foot .st-req svg.i{width:16px;height:16px}

/* 요청 버튼 텍스트: 스티커 요청하기 (큰 버튼 텍스트와 별개, 한 단계 굵게) */
.btn.st-req{padding-top:10px;padding-bottom:10px;font-size:var(--text-req-size);font-weight:var(--text-req-weight);line-height:var(--text-req-leading)}

/* 검색어 지우기: 글자가 있을 때만 오른쪽에 회색 동그라미 X, 호버하면 진해짐 */
.st-search .input{padding-right:36px}
.st-search .input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.st-search-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:none;place-items:center;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:var(--muted2);color:var(--bg);cursor:pointer;transition:background .15s}
.st-search-x svg.i{width:10px;height:10px;stroke-width:3}
.st-search-x:hover{background:var(--muted)}
.st-search.open.has-q .st-search-x{display:grid}

/* 글 속 링크 버튼 (밑줄) */
.link-btn{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* 빈 화면(즐겨찾기 없음·내 스티커 없음·검색 결과 없음 등)일 때는 맨 아래 요청 줄 숨김 */
#st-gal:has(.st-empty) ~ .st-req-foot{display:none}
.modal .textarea{min-height:80px;height:80px} /* 모달 안 여러 줄 입력칸 높이 (rows 줄 수와 상관없이 80) */
.btn.st-req svg.i{width:16px;height:16px} /* 요청·문의 버튼 편지 아이콘 공통 */

/* 하단 링크: 설정 맨 아래 로그아웃 · 이용약관 · 개인정보처리방침 (같은 글자·색) */
.t-foot-link{font-size:var(--text-foot-link-size);font-weight:var(--text-foot-link-weight);line-height:20px;color:var(--muted);text-decoration:none}
.t-foot-link:hover{color:var(--ink)}
.set-legal{display:flex;gap:16px}

/* 설정: 왼쪽 항목 이름 · 오른쪽 입력/버튼 (구분선으로 나눔) */
.set-list{display:flex;flex-direction:column}
.set-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:0} /* 마지막 줄 아래 구분선 없음 */
.set-list:has(+ .set-foot) .set-row:last-child{border-bottom:1px solid var(--line)} /* 예외: 아래에 회원 탈퇴·약관 줄이 있으면 구분선 둠 */
.set-label{padding-top:8px;font-weight:var(--weight-600);line-height:20px} /* 오른쪽 입력칸 글자 줄과 맞춤 */
.set-ctl{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.set-ctl>.input,.set-ctl>.select{max-width:480px}
.set-ctl>.select.set-auto{width:auto}
.set-ctl .hint{margin:0;font-size:var(--text-set-hint-size);line-height:var(--text-set-hint-leading);color:var(--muted)}
.set-val{line-height:20px;color:var(--ink2)}
.set-row:has(.set-val) .set-label{padding-top:0} /* 글자만 있는 줄은 위 맞춤 여백 없이 → 위아래 20 똑같이 */
.set-form{display:flex;flex-direction:column;gap:8px;width:100%;max-width:480px}
.set-acct{display:flex;flex-direction:column;gap:24px;width:100%;max-width:480px;padding-bottom:16px;border-bottom:1px solid var(--line2)}
.set-acct b{font-size:var(--text-acct-name-size);line-height:22px}
.set-acct .avatar{width:40px;height:40px;font-size:16px;line-height:40px;flex:none}
.set-acct .err-box{margin:0}
.input[readonly]{background:var(--soft);color:var(--ink2)}
@media (max-width:760px){.set-row{grid-template-columns:1fr;gap:10px}.set-label{padding-top:0}}

/* 설정 세그먼트: 흰 바탕(선택 표시)이 옆 칸으로 미끄러져 이동 */
.set-seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr}
.set-seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:8px;background:var(--seg-on);transition:transform .22s ease-out}
.set-seg.at-1::before{transform:translateX(100%)}
.set-seg .seg-btn{position:relative;z-index:1;transition:color .22s ease-out}
.set-seg .seg-btn.on{background:transparent}
.set-foot{align-items:flex-start}
.set-foot-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px} /* 약관 링크 밑에 회원 탈퇴 */
.set-withdraw{padding:0;border:0;background:none;font-family:inherit;cursor:pointer}

/* 설정 내용은 탭 줄 안쪽으로 14 들어감 → 첫 탭 글자와 항목 이름이 같은 선 (탭 줄은 위 뒤로가기와 맞춘 그대로) */
@media (min-width:761px){.set-list,.set-foot{padding-left:14px;padding-right:14px}}

/* 설정 > 결제 내역: 날짜 · 요금제 · 금액 · 영수증 */
.set-bills{display:flex;flex-direction:column;width:100%;max-width:480px}
.set-bill{display:grid;grid-template-columns:96px 1fr auto auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line2);line-height:20px;color:var(--ink2)} /* 글자 위아래 18 */
.set-bill:last-child{border-bottom:0}
.set-bill b{color:var(--ink);font-weight:600;font-size:var(--text-card-num-size)}
.set-acct .set-add{margin-left:auto} /* 계정 추가: 마지막 계정 버튼 줄 오른쪽 끝 */
.set-acct:last-of-type{padding-bottom:0;border-bottom:0}
.set-acct > .row:first-child{gap:12px} /* 프로필 동그라미 ↔ 이름·정보 */
.set-acct-name{display:flex;align-items:center;gap:6px;margin-bottom:4px} /* 계정 이름 ↔ 상태 배지 세로 가운데 */
.set-plan{padding-top:8px;line-height:20px} /* 요금제 이름: 항목 이름과 같은 8px 아래 → 다른 탭 첫 줄과 높이 같게 */
.set-row:first-child{padding-top:0} /* 탭 줄 → 첫 줄: 그리드 간격 16 + 항목 이름 맞춤 8 = 24 (모든 설정 탭 같음) */

/* 표가 든 카드: 테두리·둥근 모서리 없이 페이지에 바로 (레퍼런스 표처럼) */
@media (min-width:761px){.card:has(table.tbl){border:0;border-radius:0;background:transparent}} /* 모바일은 표 대신 목록이라 카드 그대로 */
.card:has(table.tbl) .card-h{padding-left:16px;padding-right:16px}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl .r{font-weight:600}
.tbl td .muted,.tbl td small{color:var(--muted)}

/* 라디오 카드: 둘 중 하나 고르기 (선택 = 파란 테두리 + 파란 점) */
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:480px}
.radio-card{display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-family:inherit;font-size:var(--text-input-size);line-height:20px;text-align:left;cursor:pointer;transition:border-color .15s}
.radio-card:hover{border-color:var(--strong-line)}
.radio-card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.radio-dot{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--strong-line);box-sizing:border-box;transition:border .15s}
.radio-card.on .radio-dot{border:5px solid var(--accent)}
/* 설정 한 줄 안에서 왼쪽 정보 · 오른쪽 버튼 양끝 정렬 */
.set-split{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding-top:8px} /* 왼쪽 정보 ↔ 오른쪽 버튼 세로 가운데. 위 8은 항목 이름과 높이 맞춤 */
.set-split .set-plan{padding-top:0}
.set-split>.btn{flex:none}
.set-split .hint{margin-top:4px}
/* 결제 내역 영수증 아이콘 버튼 */
.set-bill-ic{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.set-bill-ic:hover{background:var(--hover);color:var(--ink)}
.set-bill-ic svg.i{width:18px;height:18px}
/* 요금제 이름 = 계정 이름 스타일 (16px · 굵게, 배지와 세로 가운데) */
.set-plan b{font-size:var(--text-acct-name-size);line-height:22px}
.row.set-plan{align-items:center;gap:6px}
.badge{font-weight:var(--text-badge-weight)} /* 배지만 600 (같은 묶음의 키워드·라벨 등은 500 그대로) */
span.set-plan{font-size:var(--text-card-num-size);font-weight:var(--weight-500)} /* 결제 수단 카드 표시: 14 · 미디움 */
.set-bill span:nth-child(2){font-size:var(--text-card-num-size);font-weight:var(--weight-500);color:var(--ink)} /* 결제 내역 요금제 이름 = 결제 수단 카드 표시와 같은 스타일 */
/* 양끝 정렬 줄: 항목 이름 · 정보 · 버튼 모두 세로 가운데 */
.set-row:has(.set-split){align-items:center}
.set-row:has(.set-split) .set-label,.set-row .set-split{padding-top:0}
.set-bill span:first-child{font-size:var(--text-card-num-size)} /* 결제 내역 날짜 14 (굵기·색 그대로) */
.set-bill .set-bill-ic{margin:-6px 0} /* 아이콘 칸(32)이 줄 높이를 늘리지 않게 → 글자 기준 위아래 18 */
.set-row:has(.set-split .hint){align-items:start} /* 두 줄짜리(현재 요금제)는 항목 이름을 첫 줄에 맞춤 → 다른 탭 첫 항목 이름과 같은 높이 */
.set-row:has(.set-split .hint) .set-label{padding-top:1px}
.set-row:has(.set-split .hint) .set-split>.btn{align-self:center}

/* 오른쪽에 필터가 있는 탭 줄(발송 기록·자동화): 회색 선 없이 선택된 탭 검정 밑줄만 */
.ul-tabs:has(> .log-camp, > .dd),.ul-tabs.ul-bare{box-shadow:none} /* 선만 없앰, 탭 간격 등은 다른 탭 줄과 같음 */
.tbl td.muted{color:var(--muted)} /* 시간 같은 보조 칸은 회색 (표 글자색이 덮던 것) */
.tbl th{background:color-mix(in srgb,var(--soft) 80%,var(--bg));border-bottom:0} /* 표 머리: 아주 연한 회색 바탕 */
.tbl th:first-child{padding-left:16px}
.tbl th:last-child{padding-right:16px}
.tbl td:first-child{padding-left:16px}
.tbl td:last-child{padding-right:16px}

/* 표 머리 필터 (발송 기록: 시간 기간 · 자동화 · 상태) */
.th-dd{margin:0}
.th-dd-btn{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.th-dd-btn.on .chev-dd{stroke:var(--ink)} /* 필터가 걸려 있으면 쉐브론만 검정 (평소 회색) */
.th-dd .dd-menu{min-width:200px;max-width:320px;font-weight:400}
.th-dd .dd-item .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-wrap:has(.th-dd){overflow:visible} /* 메뉴가 표에 잘리지 않게 */
/* 탭 줄 → 표 간격 24 */
.ul-tabs + .card:has(table.tbl){margin-top:24px}

/* 표 위 [필터] 버튼 + 펼침 메뉴 (기간 · 자동화 여러 개) */
.flt-dd{margin:0 0 8px;align-self:center}
.flt-dd .dd-menu{left:auto;right:0;min-width:260px;max-width:340px}
.flt-dd .btn.on{color:var(--accent)}
.flt-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;line-height:18px}
.flt-h{padding:10px 10px 4px;font-size:12px;line-height:18px;color:var(--muted);font-weight:600}
.flt-foot{padding:8px 10px 4px;border-top:1px solid var(--line2);margin-top:4px}
.flt-menu .dd-item .grow,.th-dd .dd-item .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* 발송 기록: 자동화 이름에 마우스를 올리면 '자세히 보기' 툴팁, 누르면 그 자동화 상세로 */
.log-camp-link{position:relative;display:inline-block;max-width:100%;vertical-align:middle;color:inherit;text-decoration:none;cursor:pointer}
.log-camp-link .ell{display:block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 길면 … (툴팁은 바깥 a에 있어서 안 잘림) */
.log-camp-link::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 6px);padding:5px 9px;border-radius:7px;background:rgba(17,17,17,.92);color:#fff;font-size:var(--text-chip-size);font-weight:var(--text-chip-weight);line-height:16px;text-decoration:none;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.log-camp-link:hover::after{opacity:1}
.shell>.main:has(.ul-tabs.ul-bare){--wmax:1200px} /* 발송 기록: 표가 넓어서 페이지 폭 최대 1200 (제목 줄도 같이) */
.tbl .log-reason .reason{margin:0;min-width:200px;max-width:320px;font-size:var(--text-td-size);line-height:20px} /* 실패 사유 열: 표 내용과 같은 14 */
.tbl .reason.fold{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} /* 한 줄로 접힘 … */
.tbl .reason.fold.open{white-space:normal;overflow:visible} /* 누르면 펼쳐져서 전체 보임, 다시 누르면 접힘 */

/* 표 열 너비 조절 손잡이: 머리 칸 오른쪽 끝, 마우스를 올리면 세로 막대 */
.tbl.col-rs th{position:relative}
.col-h{position:absolute;top:0;bottom:0;right:-14px;width:16px;cursor:col-resize;z-index:2} /* 잡는 영역: 칸 전체 높이 · 경계 양쪽 8씩 (노션처럼 넉넉하게) */
.col-h::after{content:"";position:absolute;left:12px;top:8px;bottom:8px;width:2px;border-radius:0;background:var(--line);opacity:0;transition:opacity .12s}
.tbl.col-rs th:hover .col-h::after,.col-h:hover::after{opacity:1}
.col-h:hover::after,body.col-dragging .col-h::after{background:var(--muted2)} /* 잡았을 때도 회색 (조금 진하게) */
body.col-dragging{cursor:col-resize;user-select:none}
.tab-acts{display:flex;align-items:center;gap:8px;align-self:center;margin-bottom:8px}
.tab-acts .flt-dd{margin:0}

/* 드롭다운 메뉴 공통 스펙: 헤더 메뉴(.tt-dd-menu)와 필터·표 머리 메뉴(.dd-menu) 같은 모양
   메뉴 상자 12 둥글기 · 안쪽 6 · 항목 위아래 8 좌우 10 · 14/500 · 선택 항목 굵게(700) + 진한 체크 16 */
.dd-menu{padding:6px;border-radius:12px;min-width:180px}
.dd-item{padding:8px 10px;border-radius:8px;font-size:var(--text-menu-size);font-weight:var(--text-menu-weight);line-height:20px;gap:8px}
.dd-item.on{font-weight:700}
.dd-ck{width:16px;color:var(--ink)}
.dd-ck svg{width:16px;height:16px}
.flt-h{padding:8px 10px 4px}
.tbl tr.tbl-empty td{padding:0;border-bottom:0;background:transparent!important} /* 표 안 빈 화면 = 공통 빈 화면 스타일 */
/* 통계 표: 발송 기록 표와 같은 스타일 (이름 … · 호버 툴팁 · 열 조절). 실패 숫자만 빨강 */
.tbl .num-err{color:#e5534b}
.shell>.main:has(table.col-rs[data-rs="stats"]){--wmax:1200px}

/* 탭 줄 오른쪽 버튼(필터·새 자동화·상태 드롭다운)이 탭 줄 높이를 늘리지 않게 → 다른 탭 줄과 높이·밑줄 위치 같게 */
.ul-tabs > .tab-acts,.ul-tabs > .dd{position:absolute;right:0;bottom:8px;margin:0}
.ul-tabs:has(> .tab-acts){overflow:visible}
/* 탭 숫자: 탭 글자와 같은 14/600, 색만 연한 회색 */
.ul-tab .ul-n{font-size:14px;font-weight:600}
.card:has(table.tbl) > .card-h{font-size:var(--text-section-size);font-weight:var(--text-section-weight);line-height:27px} /* 표 위 제목(자동화별 성과) = 섹션 제목 */
/* 고정 너비 열: 칸보다 긴 글자는 … (툴팁이 잘리지 않게 칸 자체는 안 자름) */
.tbl.col-rs .log-camp-link{display:block}
.tbl.col-rs .log-camp-link .ell,.tbl.col-rs .log-reason .reason{max-width:100%;min-width:0}
.tbl.col-rs td > b{display:block;overflow:hidden;text-overflow:ellipsis}
.card:has(table.tbl) > .card-h{padding-left:0;padding-right:0} /* 표 위 제목은 페이지 왼쪽 선에 맞춤 */
/* 열을 좁히면 모든 칸 글자가 … 로 잘림 (옆 칸으로 넘쳐 겹치지 않게). 툴팁·펼침이 있는 칸만 칸 안 요소가 직접 자름 */
.tbl.col-rs td{overflow:hidden;text-overflow:ellipsis}
.tbl.col-rs td:has(.log-camp-link),.tbl.col-rs td.log-reason{overflow:visible}
.tbl th{height:40px;padding-top:0;padding-bottom:0;box-sizing:border-box} /* 표 머리 높이 40 고정 (모든 표 공통) */

/* 열 순서 바꾸기: 머리 칸을 잡고 끌면 놓일 자리에 세로 막대 */
.tbl.col-rs th{cursor:grab}
.tbl.col-rs th.col-moving{opacity:.35}
body.col-dragging-move,body.col-dragging-move *{cursor:grabbing!important;user-select:none}
.col-drop{position:absolute;top:0;width:2px;background:var(--muted2);pointer-events:none;z-index:6}

/* 여러 개 고르기 메뉴 항목: 왼쪽 네모 체크박스, 고르면 검정 칸 + 흰 체크 */
.dd-item.multi{gap:10px}
.dd-item.multi.on{font-weight:var(--text-menu-weight)}
.dd-box{flex:none;display:grid;place-items:center;width:18px;height:18px;border:2px solid var(--strong-line);border-radius:5px;box-sizing:border-box;color:transparent}
.dd-box svg.i{width:12px;height:12px;stroke-width:3}
.dd-item.multi.on .dd-box{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* 자동화 칸: 이름은 길면 … , 줄에 마우스를 올리면 끝에 → 버튼이 생김 (버튼에 올리면 뒤로가기 버튼처럼 바탕 채움) */
.camp-cell{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}
.camp-cell .ell{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.go-btn{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-4px 0;border-radius:8px;color:var(--ink);visibility:hidden;transition:background .12s}
.go-btn svg.i{width:16px;height:16px}
.tbl tr:hover .go-btn,.go-btn:focus-visible{visibility:visible}
.go-btn:hover{background:var(--soft2)} /* 줄 호버 바탕보다 진하게 */
.tbl.col-rs td:has(.camp-cell){overflow:hidden}
.col-ghost{position:absolute;top:0;display:flex;align-items:center;padding:0 16px;box-sizing:border-box;background:color-mix(in srgb,var(--soft2) 85%,transparent);border-radius:6px;box-shadow:var(--shadow);font-size:var(--text-th-size);font-weight:var(--text-th-weight);color:var(--ink);opacity:.9;pointer-events:none;z-index:7;white-space:nowrap;overflow:hidden} /* 끄는 동안 따라다니는 머리 칸 사본 */
.col-ghost .chev-dd{margin-left:4px}
.col-ghost .dd-menu{display:none}
/* → 버튼에 올리면 위에 '자세히 보기' 툴팁 (다른 툴팁과 같은 스타일) */
.go-btn{position:relative}
.go-btn::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:5px 9px;border-radius:7px;background:rgba(17,17,17,.92);color:#fff;font-size:var(--text-chip-size);font-weight:var(--text-chip-weight);line-height:16px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.go-btn:hover::after{opacity:1}
.tbl.col-rs td:has(.camp-cell){overflow:visible}
.camp-cell{overflow:visible}