/* 굿프렌드 셀러 — 데모 화면 공용 스타일
 *
 * ★ 2026-08-23 — 응대 화면(manager-inbox)의 디자인으로 **여섯 화면을 통일**했다.
 *   전에는 응대 화면만 새 디자인이고 나머지 다섯은 옛 스타일이었다. 데모를 둘러보는
 *   사람에게는 «화면마다 다른 서비스» 로 보인다 — 영업 자리에서 가장 나쁜 인상이다.
 *
 * ★ 앞부분(토큰·껍데기·목록)은 응대 화면 시안에서 왔다. 여기가 정본이다.
 *   뒷부분은 각 화면의 콘텐츠 전용 규칙(표·카드·차트)이며, 시안이 정의한 이름과
 *   겹치는 것은 전부 걷어냈다 — 같은 이름을 두 번 정의하면 나중 것이 이기고,
 *   그 «나중»이 어디인지 아무도 기억하지 못한다.
 *
 * 정적 파일이라 빌드가 없다. 여기만 고치면 여섯 화면에 동시에 반영된다.
 */

:root{
    --ground:#f4f7fc; --surface:#ffffff; --surface-2:#f8fafd; --surface-3:#eef2f9;
    --line:#e2e9f5; --line-strong:#cfd9ec;
    --ink:#1b2b4b; --ink-2:#43536f; --muted:#6b7c9b;
    --brand:#2e6fe0; --brand-press:#245bc4; --brand-soft:#eff5ff; --brand-line:#bdd3fd;
    --warn:#b45309; --warn-soft:#fff7ed; --warn-line:#fcd9a8;
    --ok:#15803d; --ok-soft:#ecfdf3; --ok-line:#b7e4c7;
    --band:#0ac14e; --kakao:#8a6d00; --kakao-soft:#fff9e0; --kakao-line:#f0dc9a;
    --on-brand:#ffffff;
    --shadow:0 1px 2px rgba(27,43,75,.05), 0 6px 18px rgba(27,43,75,.05);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0e1524; --surface:#151d31; --surface-2:#1a2340; --surface-3:#1f2a49;
      --line:#28334d; --line-strong:#3a4763;
      --ink:#e8eefb; --ink-2:#c2cee6; --muted:#94a3c0;
      --brand:#5d90f6; --brand-press:#7ba6f8; --brand-soft:#1b2b4b; --brand-line:#31456d;
      --warn:#f0b366; --warn-soft:#2c2415; --warn-line:#4d3d1f;
      --ok:#6ee7a8; --ok-soft:#14261e; --ok-line:#22452f;
      --band:#33d17a; --kakao:#e8c25a; --kakao-soft:#2a2413; --kakao-line:#4a3f1c;
      --on-brand:#0e1524;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.25);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0e1524; --surface:#151d31; --surface-2:#1a2340; --surface-3:#1f2a49;
    --line:#28334d; --line-strong:#3a4763;
    --ink:#e8eefb; --ink-2:#c2cee6; --muted:#94a3c0;
    --brand:#5d90f6; --brand-press:#7ba6f8; --brand-soft:#1b2b4b; --brand-line:#31456d;
    --warn:#f0b366; --warn-soft:#2c2415; --warn-line:#4d3d1f;
    --ok:#6ee7a8; --ok-soft:#14261e; --ok-line:#22452f;
    --band:#33d17a; --kakao:#e8c25a; --kakao-soft:#2a2413; --kakao-line:#4a3f1c;
    --on-brand:#0e1524;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.25);
  }

  *,*::before,*::after{box-sizing:border-box;}
  body{
    margin:0;background:var(--ground);color:var(--ink);
    font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Noto Sans KR","Malgun Gothic",sans-serif;
    font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
  }
  button{font:inherit;color:inherit;}
  .tnum{font-variant-numeric:tabular-nums;}

  .shell{height:100dvh;display:grid;grid-template-columns:236px minmax(0,1fr);}

  /* 사이드바 */
  .side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;}
  .brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid var(--line);}
  .brand .mark{width:32px;height:32px;border-radius:9px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:700;font-size:14px;}
  .brand b{font-size:15.5px;}
  .side nav{overflow-y:auto;padding:10px 8px 14px;flex:1;min-height:0;}
  .grp{font-size:11.5px;color:var(--muted);padding:12px 10px 6px;letter-spacing:.02em;}
  .nav-i{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;color:var(--ink-2);font-size:14px;text-decoration:none;}
  .nav-i:hover{background:var(--surface-2);}
  .nav-i.on{background:var(--brand-soft);color:var(--brand);font-weight:700;}
  .side-foot{border-top:1px solid var(--line);padding:10px 8px;font-size:13px;color:var(--muted);}

  /* 상단바 */
  .main{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;}
  .topbar{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--line);}
  .topbar .date{font-size:13.5px;color:var(--muted);}
  .topbar .right{margin-left:auto;display:flex;align-items:center;gap:8px;}
  .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink-2);white-space:nowrap;}
  .chip.mode{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn);font-weight:700;}
  .dot{width:9px;height:9px;border-radius:3px;background:var(--band);display:inline-block;}

  /* 본문 */
  .page{overflow-y:auto;min-height:0;padding:16px 18px 28px;}
  .page > *{max-width:1240px;margin-left:auto;margin-right:auto;}
  .page-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
  .page-head h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;}
  .page-head p{margin:0;font-size:13.5px;color:var(--muted);}
  .page-head .scope{margin-left:auto;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 11px;background:var(--surface);}

  /* 상태 스트립 — 경고·모드·직접넣기를 한 줄로 */
  .strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin-bottom:12px;box-shadow:var(--shadow);}
  .strip .sep{width:1px;height:20px;background:var(--line);}
  .quota-bar{width:70px;height:7px;border-radius:99px;background:var(--line);overflow:hidden;display:inline-block;}
  .quota-fill{display:block;height:100%;background:var(--brand);}
  .strip .right{margin-left:auto;display:flex;align-items:center;gap:8px;}
  .btn{border-radius:9px;padding:8px 13px;font-size:13.5px;font-weight:700;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);display:inline-flex;align-items:center;gap:6px;}
  .btn:hover{border-color:var(--brand);color:var(--brand);}
  .btn.sm{padding:6px 11px;font-size:13px;font-weight:500;}
  .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
  .btn.primary:hover{background:var(--brand-press);border-color:var(--brand-press);color:var(--on-brand);}
  .btn.auto{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok);}
  .btn.auto:hover{border-color:var(--ok);color:var(--ok);}
  .btn[disabled]{opacity:.5;cursor:default;}
  .btn:focus-visible,.tab:focus-visible,.crow-head:focus-visible,.sortbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

  /* 탭 */
  .tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;margin-bottom:12px;position:sticky;top:0;z-index:5;
        background:linear-gradient(var(--ground) 76%, transparent);padding-top:2px;}
  .tab{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px;white-space:nowrap;cursor:pointer;
       border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:500;}
  .tab .cnt{font-size:13px;font-weight:700;background:var(--surface-3);border-radius:999px;padding:1px 8px;color:var(--ink-2);}
  .tab:hover{border-color:var(--line-strong);}
  .tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700;}
  .tab[aria-selected="true"] .cnt{background:rgba(255,255,255,.22);color:inherit;}
  .tab.warn[aria-selected="true"]{background:var(--warn);border-color:var(--warn);}
  .tab.ok[aria-selected="true"]{background:var(--ok);border-color:var(--ok);}

  /* 밴드 원글 카드 */
  .post{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
        border-radius:12px;padding:11px 14px;margin-bottom:10px;box-shadow:var(--shadow);}
  .post b{font-size:15px;}
  .post .meta{font-size:12.5px;color:var(--muted);}
  .post .right{margin-left:auto;font-size:12.5px;color:var(--muted);}

  /* 목록 */
  .board{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);}
  .thead{display:grid;grid-template-columns:112px minmax(0,1fr) 128px 104px 40px;gap:10px;align-items:center;
         padding:9px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:12px;color:var(--muted);}
  .thead .r{text-align:right;}
  .sortbtn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font-size:12px;}
  .sortbtn.on{color:var(--brand);font-weight:700;}
  .crow{border-bottom:1px solid var(--line);}
  .crow:last-child{border-bottom:0;}
  .crow-head{display:grid;grid-template-columns:112px minmax(0,1fr) 128px 104px 40px;gap:10px;align-items:start;
             width:100%;text-align:left;background:none;border:0;padding:12px 14px;cursor:pointer;}
  .crow-head:hover{background:var(--surface-2);}
  .crow.open .crow-head{background:var(--surface-2);}
  .st{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap;}
  .st-done{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok);}
  .st-wait{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand);}
  .st-need{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn);}
  .crow-head > span{display:block;min-width:0;}
  .who{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .who b{font-size:14.5px;}
  .who .id,.who .t{font-size:11.5px;color:var(--muted);}
  .src{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 7px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);}
  .src.kakao{background:var(--kakao-soft);border-color:var(--kakao-line);color:var(--kakao);}
  .raw{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word;}
  .reply-peek{display:block;margin-top:5px;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  .reply-peek.draftpeek{color:var(--brand);font-weight:500;}
  .recv{display:flex;flex-direction:column;gap:3px;align-items:flex-start;}
  .pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);font-size:12px;color:var(--ink-2);white-space:nowrap;}
  .pill.deliver{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand);}
  .won{text-align:right;font-size:15px;font-weight:700;}
  .caret{display:grid;place-items:center;color:var(--muted);font-size:12px;transition:transform .15s;}
  .crow.open .caret{transform:rotate(180deg);}

  /* 펼침 영역 — 밴드 화면 그대로 */
  .panel{display:none;padding:0 14px 14px;}
  .crow.open .panel{display:block;}
  .thread{border-left:2px solid var(--line);margin-left:8px;padding-left:14px;display:flex;flex-direction:column;gap:10px;}
  .bubble{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:11px 13px;}
  .bubble.reply{background:var(--brand-soft);border-color:var(--brand-line);}
  .bubble.draft{background:var(--surface);border-color:var(--brand-line);border-style:dashed;}
  .bubble.warn{background:var(--warn-soft);border-color:var(--warn-line);}
  .bhead{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap;}
  .bhead b{color:var(--ink-2);font-size:12.5px;}
  .bhead .r{margin-left:auto;}
  .btext{font-size:14.5px;white-space:pre-wrap;line-height:1.6;word-break:break-word;max-width:68ch;}
  .bubble{max-width:920px;}
  .money{font-weight:700;color:var(--brand);background:rgba(46,111,224,.10);border-radius:5px;padding:0 4px;}
  .link{color:var(--brand);font-weight:700;word-break:break-all;}
  .lock{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:2px 7px;background:var(--surface);}
  .items{margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);}
  .items table{width:100%;border-collapse:collapse;font-size:13.5px;}
  .items th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:500;padding:7px 11px;border-bottom:1px solid var(--line);}
  .items td{padding:7px 11px;border-bottom:1px solid var(--line);}
  .items tr:last-child td{border-bottom:0;}
  .items .r{text-align:right;}
  .items .tot td{background:var(--surface-2);font-weight:700;}
  .miss{color:var(--warn);font-weight:700;}
  .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
  .acts .note{font-size:12px;color:var(--muted);width:100%;}

  .empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:14px;}
  .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--ink);color:var(--ground);
         padding:11px 18px;border-radius:999px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;
         transition:opacity .18s,transform .18s;z-index:60;box-shadow:var(--shadow);}
  .toast.on{opacity:1;transform:translate(-50%,0);}

  .won-inline{display:none;margin-top:6px;width:fit-content;}
  @media (max-width:1180px){
    .thead,.crow-head{grid-template-columns:104px minmax(0,1fr) 112px 40px;}
    .thead .c-won,.crow-head .c-won{display:none;}
    .won-inline{display:inline-flex;font-weight:700;}
  }
  @media (max-width:860px){
    .shell{grid-template-columns:1fr;}
    .side{display:none;}
    .thead{display:none;}
    .crow-head{grid-template-columns:minmax(0,1fr) 34px;row-gap:7px;align-items:start;}
    .crow-head .c-st{grid-column:1;grid-row:1;}
    .crow-head .c-main{grid-column:1;grid-row:2;}
    .crow-head .c-recv{grid-column:1;grid-row:3;flex-direction:row;gap:6px;}
    .crow-head .caret{grid-column:2;grid-row:1;}
    .page{padding:12px 12px 24px;}
    .strip{gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:9px 11px;}
    .strip .right{margin-left:8px;}
    .strip .chip,.strip .btn{white-space:nowrap;flex:0 0 auto;}
    .page-head p{display:none;}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none !important;}}

  /* 데모 안내 띠 — 다른 데모 화면과 같은 규격 */
  .demobar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    background:#E5A03C;color:#3b2a10;padding:9px 18px;font-size:12.5px;font-weight:500}
  .demobar b{font-weight:700}
  .demobar a{margin-left:auto;background:#fff;border-radius:999px;padding:4px 12px;
    font-size:12px;font-weight:700;color:#8a5a12;text-decoration:none;white-space:nowrap}
  .demobar a+a{margin-left:0}


/* ─────────────────────────────────────────────
   화면별 콘텐츠 (오늘 · 상품목록 · 주문목록 · 매출 리포트 · 사진등록)
   ───────────────────────────────────────────── */

.nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13.5px;font-weight:500;
  border-left:3px solid transparent;color:#33456B}
.nav-item i{font-style:normal;font-size:15px;line-height:1}
/* 데모가 있는 메뉴는 링크. 없는 메뉴는 흐리게 — 눌러도 안 된다는 걸 보이게 */
a.nav-item:hover{background:#F1F6FE;color:#1B2E5C}
.nav-item.dim{color:#9AA6BE}
.ext{display:flex;align-items:center;gap:9px;padding:8px 16px;font-size:13px;color:#4A5B7C}
.ext i{font-style:normal;font-size:14px}
.ext span:nth-child(2){flex:1}
.ext em{font-style:normal;font-size:11px;color:#A3AEC4}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:18px 30px;background:#fff;border-bottom:1px solid #E2E9F5}
.wrap{padding:26px 30px 60px;display:flex;flex-direction:column;gap:26px}
.page-title{margin:0;font-size:20px;font-weight:900;letter-spacing:-.5px;color:#1B2E5C}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sec-head span{font-size:12px;color:#8B99B4;white-space:nowrap}
/* 큰 액션 2개 */
.act2{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.act{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:10px;
  font-size:14px;font-weight:700;background:#fff;border:1px solid #E2E9F5;color:#33456B}
.open3{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px}
.tile{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;background:#fff;
  border:1px solid #E2E9F5;border-radius:10px;font-size:13.5px;font-weight:500;color:#33456B}
/* 지표 카드 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:#fff;border:1px solid #E2E9F5;border-radius:12px;padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:4px}
.stat .lbl{font-size:12.5px;color:#6B7C9C;font-weight:500}
.stat .row{display:flex;align-items:baseline;gap:3px}
.stat .v{font-size:30px;font-weight:900;letter-spacing:-1px;color:#1B2E5C}
.stat .v.accent{color:#2e6fe0}
.stat .u{font-size:13px;font-weight:500;color:#5A6B8C}
/* 필터 칩 */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.f{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  border:1px solid #E2E9F5;background:#fff;font-size:12.5px;font-weight:500;color:#4A5B7C}
.f b{font-weight:700;color:#8B99B4}
.card{background:#fff;border:1px solid #E2E9F5;border-radius:12px;overflow:hidden}
.card-scroll{overflow-x:auto}
td.num,th.num{text-align:right;white-space:nowrap}
.prod{display:flex;align-items:center;gap:10px}
.prod .ic{font-size:18px;line-height:1}
.prod b{display:block;font-weight:700;color:#1B2E5C}
.prod small{display:block;font-size:11px;color:#A3AEC4;margin-top:1px}
.cat{display:inline-flex;padding:3px 9px;border-radius:6px;background:#F1F5FB;
  font-size:11.5px;font-weight:500;color:#5A6B8C;white-space:nowrap}
.price{font-weight:700;color:#1B2E5C}
.who2{font-weight:700;color:#1B2E5C}
.who2 small{display:block;font-size:11px;color:#A3AEC4;font-weight:400;margin-top:1px}
/* 상태 배지 */
.b{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
.b-pub{background:#E8F2E9;color:#2F6B3A}
/* 발행됨 */
.b-resv{background:#eff5ff;color:#245bc4}
/* 보드예약 */
.b-none{background:#F2F4F8;color:#7C8AA3}
/* 미발행 */
.b-show{background:#E8F2E9;color:#2F6B3A}
/* 노출중 */
.b-hide{background:#F2F4F8;color:#7C8AA3}
/* 숨김 */
.b-wait{background:#FDECE4;color:#C2410C}
/* 입금대기 */
.b-paid{background:#E8F2E9;color:#2F6B3A}
/* 결제완료 */
.b-ready{background:#eff5ff;color:#245bc4}
/* 준비완료 */
.b-sold{background:#F2F4F8;color:#7C8AA3}
/* 품절 */
.low{color:#C2410C;font-weight:700}
/* 재고 부족 */

/* 매진 임박 */
.soon{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid #EDF2FA;font-size:13.5px}
.soon:last-child{border-bottom:0}
.soon .nm{display:flex;align-items:center;gap:9px;font-weight:700;color:#33456B}
.soon .nm i{font-style:normal;font-size:16px}
.soon .left{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;
  color:#C2410C;background:#FFF1E6;border-radius:999px;padding:3px 10px}
/* 바로가기 */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.q{display:flex;align-items:center;justify-content:center;gap:8px;height:56px;background:#fff;
  border:1px solid #E2E9F5;border-radius:10px;font-size:13.5px;font-weight:500;color:#33456B}
.q i{font-style:normal;font-size:15px}
/* 요일별 매출 막대 */
.chartbox{background:#fff;border:1px solid #E2E9F5;border-radius:12px;padding:20px 22px 14px}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;align-items:end;height:180px}
.bar{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bar .fill{width:100%;max-width:52px;border-radius:8px 8px 3px 3px;background:#6E9AE0}
.bar.peak .fill{background:#E5A03C}
.bar .d{font-size:12px;color:#8B99B4;font-weight:500}
.chartfoot{display:flex;justify-content:space-between;gap:12px;margin-top:14px;
  padding-top:12px;border-top:1px solid #F2F6FC;font-size:11.5px;color:#9AA6BE}
/* TOP 5 */
.rank{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid #F2F6FC;font-size:13.5px}
.rank:last-child{border-bottom:0}
.rank .l{display:flex;align-items:center;gap:12px;font-weight:500;color:#33456B}
.rank .n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  border-radius:999px;background:#F1F5FB;color:#7C8AA3;font-size:12px;font-weight:700}
.rank.first .n{background:#2e6fe0;color:#fff;min-width:34px}
.rank.first .l{font-weight:700;color:#1B2E5C}
.rank .c{font-weight:700;color:#1B2E5C}
.hint{font-size:12px;color:#9AA6BE;margin:2px 0 0}
.foot{padding:0 30px 40px;font-size:12px;color:#9AA6BE;line-height:1.7}
/* 예시 한 덩어리 */
.ex{background:#fff;border:1px solid #E2E9F5;border-radius:12px;overflow:hidden}
.ex-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 18px;background:#FAFCFF;border-bottom:1px solid #EDF2FA}
.ex-bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
/* 밴드 댓글 말풍선 */
.cmt{display:flex;gap:11px}
.cmt .av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#DCE6F6;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#5A6B8C}
.cmt .bd{flex:1;min-width:0}
.cmt .nm{font-size:12.5px;font-weight:700;color:#1B2E5C}
.cmt .tx{margin-top:4px;background:#F2F6FC;border-radius:4px 12px 12px 12px;padding:10px 14px;
  font-size:13.5px;line-height:1.6;color:#25324D}
.cmt .mt{margin-top:5px;font-size:11.5px;color:#A3AEC4}
/* 대댓글은 들여쓴다 */
.cmt.re{margin-left:26px}
.cmt.re .tx{background:#FFF6EA}
/* 처리 화살표 */
.flow{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:#8B99B4;
  padding:2px 0 2px 45px}
.flow .ar{color:#2e6fe0;font-size:14px}
/* AI 파싱 결과 표 */
.parse{border:1px solid #E2E9F5;border-radius:10px;overflow:hidden;margin-left:45px}
.parse table{min-width:0}
.parse th{background:#F7FAFF;padding:9px 14px;font-size:11.5px}
.parse td{padding:10px 14px;font-size:13px}
.parse .src-txt{color:#8B99B4;font-size:12px}
.parse tfoot td{background:#FAFCFF;font-weight:700;color:#1B2E5C;border-top:1px solid #E2E9F5}
.parse tfoot td small{display:block;font-weight:400;font-size:11px;color:#9AA6BE;margin-top:2px}
/* AI 답글 초안 */
.ai{margin-left:45px;border:1px solid #bdd3fd;border-radius:10px;overflow:hidden}
.ai .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:9px 14px;background:#eff5ff;font-size:12px;font-weight:700;color:#245bc4}
.ai .tx{padding:13px 16px;font-size:13.5px;line-height:1.75;color:#25324D;white-space:pre-line}
.ai .lnk{color:#245bc4;font-weight:700}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 14px}
.diff{margin-left:45px;display:flex;flex-direction:column;gap:5px;background:#FAFCFF;
  border:1px solid #E2E9F5;border-radius:9px;padding:11px 14px;font-size:12.5px;color:#4A5B7C}
.diff .ln{display:flex;gap:8px;align-items:baseline}
.diff .minus{color:#B4451F;font-weight:700}
.diff .plus{color:#2F6B3A;font-weight:700}
.b-ok{background:#E8F2E9;color:#2F6B3A}
/* 인식 완료 */
.b-chk{background:#FDECE4;color:#C2410C}
/* 확인 필요 */
.b-appr{background:#eff5ff;color:#245bc4}
/* ────────────────────────────────────────────────────────────
   사진으로 상품등록 (촬영 → 두 칸 → 등록)
   manager-capture.html 에서만 씁니다.
   ──────────────────────────────────────────────────────────── */

/* 세 걸음 요약 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{background:#fff;border:1px solid #E2E9F5;border-radius:12px;padding:16px 18px}
.step .no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#2e6fe0;color:#fff;font-size:12px;font-weight:700}
.step .ti{margin-top:9px;font-size:14.5px;font-weight:700;color:#1B2E5C}
.step .de{margin-top:5px;font-size:12.5px;line-height:1.65;color:#5A6B8C}
.step .se{margin-top:9px;display:inline-block;font-size:11.5px;font-weight:700;
  background:#eff5ff;color:#245bc4;border-radius:999px;padding:3px 10px}
/* 휴대폰 화면 목업 + 설명 2단 */
.cap{display:grid;grid-template-columns:248px 1fr;gap:22px;align-items:start}
.phone{border:1px solid #D8E2F2;border-radius:20px;background:#fff;padding:10px;
  box-shadow:0 6px 20px rgba(27,46,92,.09)}
.phone .scr{background:#F4F7FC;border-radius:12px;overflow:hidden}
/* 촬영 자리 */
.shot{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;background:#EDF2F9;color:#7C8CA8}
.shot .ic{font-size:30px}
.shot .tx{font-size:12.5px;font-weight:700}
.shot.filled{background:linear-gradient(135deg,#F2C57C,#D98E3B);color:#fff;position:relative}
.shot.filled .tx{font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.25)}
/* 입력 두 칸 */
.fields{padding:11px;display:flex;flex-direction:column;gap:8px}
.field{background:#fff;border:1px solid #E2E9F5;border-radius:8px;padding:7px 10px}
.field .k{font-size:10.5px;font-weight:700;color:#8B99B4}
.field .v{margin-top:2px;font-size:13px;font-weight:700;color:#1B2E5C}
.field.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:none;border:0;padding:0}
.fold{display:flex;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid #E2E9F5;border-radius:8px;padding:8px 10px;
  font-size:12px;font-weight:700;color:#8B99B4}
.savebtn{height:38px;border-radius:8px;background:#2e6fe0;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700}
/* 설명 목록 */
.why{display:flex;flex-direction:column;gap:11px}
.why .it{display:flex;gap:10px;font-size:13.5px;line-height:1.7;color:#33456B}
.why .it i{font-style:normal;font-size:15px;flex:0 0 20px}
.why .it b{color:#1B2E5C}

/* 화면 머리의 안내 띠 (사진으로 상품등록).
   ★ 이름을 `.src` 에서 바꿨다 — 응대 화면의 `.src` 는 «어느 채널에서 왔나» 를 나타내는
     작은 칩이라 뜻이 다르다. 같은 이름을 두 뜻으로 쓰면 한쪽을 고칠 때 다른 쪽이 깨진다. */
.hero-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#eff5ff;border:1px solid #bdd3fd;border-radius:10px;
  padding:11px 15px;font-size:12.5px;color:#245bc4}
.hero-note b{font-weight:700}
.hero-tag{display:inline-flex;align-items:center;gap:5px;background:#fff;
  border:1px solid #bdd3fd;border-radius:999px;padding:3px 10px;
  font-size:11.5px;font-weight:700;color:#245bc4;white-space:nowrap}

/* 하위 메뉴 들여쓰기 — 「광고&홍보」 아래의 콜라쥬·종합발행.
   ★ 들여쓰기만으로 위계를 보인다. 접었다 펴는 아코디언을 만들지 않았다 —
     항목이 둘뿐이라 접어 두면 «없는 메뉴»가 되고, 펴 두면 접는 장치가 낭비다. */
.nav-i.sub{padding-left:28px;font-size:13.5px}

/* ── 오늘발행 진열 그리드 (manager-board.html) ─────────────────────────
   실제 콘솔과 같은 계약: 모바일 3열 · 태블릿 4열 · PC 6열.
   6·3 은 상·하한이라 여기서 임의로 바꾸지 않는다.                       */
.cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:2px}
.cbtn{flex:0 0 auto;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
.cbtn.on{background:var(--brand);border-color:var(--brand);color:#fff}

.btop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 10px}
.btop .q{height:40px;flex:0 0 auto;padding:0 14px;font-size:14px}
.bcount{font-size:13px;color:var(--muted)}
.bcount b{color:var(--ink)}
.bcount b.accent{color:var(--brand)}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:700px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.pgrid{grid-template-columns:repeat(6,1fr)}}

.pcard{position:relative;display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.pcard.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.pimg{display:block;width:100%;aspect-ratio:1/1;background:#eef2f9;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
/* 매진은 숨기지 않는다 — 흐리게 두되 목록에 남긴다 (절대규칙 9) */
.pcard.sold .pimg{opacity:.4}
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  gap:2px;font-size:20px;color:#9aa8c2}
.ph i{font-style:normal;font-size:10px}
.pmeta{display:block;padding:5px 6px 2px}
.pnm{display:block;font-size:12px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sold-b{display:inline-block;margin-right:3px;padding:0 4px;border-radius:4px;
  background:#e5eaf3;color:#5b6b88;font-size:10px;vertical-align:1px}
.ppr{display:block;font-size:11px;color:var(--muted)}
.ptg{display:block;padding:3px 6px;border-top:1px solid var(--line);
  font-size:11px;font-weight:700;color:#9aa8c2;background:var(--surface)}
.pcard.on .ptg{color:var(--brand);background:var(--brand-soft);border-top-color:var(--brand-line)}

.pick{position:absolute;right:4px;top:4px;z-index:2;width:22px;height:22px;border-radius:999px;
  border:2px solid rgba(255,255,255,.9);background:rgba(0,0,0,.25);color:transparent;
  font-size:11px;font-weight:900;line-height:1;cursor:pointer;padding:0}
.pick.on{background:var(--brand);border-color:var(--brand);color:#fff}

.bprev .bt{margin:0;padding:12px 14px 0;font-size:13px;color:var(--muted)}
.bprev .bt span{font-weight:400;color:#9aa8c2}
.modes{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0}
.mode{padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--muted);font-size:12px;font-weight:700}
.mode.on{background:var(--brand);border-color:var(--brand);color:#fff}
.bwarn{margin:0;padding:10px 14px 14px;font-size:12px;font-weight:700;color:var(--warn)}

/* ── 동작하는 메뉴는 진한 글씨 (사장님 지시 2026-08-23) ────────────────
   시안에는 아직 화면이 없는 메뉴가 섞여 있다. 어느 것을 눌러야 무언가
   보이는지가 눈에 안 보이면, 사장님은 아무 데나 눌러 보고 아무 일도
   일어나지 않는 경험을 한다.

   ★ 흐리게 하지 않고 **진하게** 한다 (사장님 정정).
     안 되는 것을 흐리게 하면 「고장난 화면」처럼 보인다.
     되는 것을 진하게 하면 「여기부터 보세요」가 된다.

   ★ 마크업이 아니라 href 로 판정한다.
     실제 화면이 생기는 순간 자동으로 진해진다 — 클래스를 손으로 붙이면
     화면을 만들고 클래스 붙이는 것을 잊는 날이 온다.

   현재 페이지(.on)는 브랜드색이 이기게 둔다.

   ★ `$=` 가 아니라 `*=` 다. 광고 메뉴는 `manager-ads.html#collage` 처럼
     앵커가 붙어 있어서 끝자리로 찾으면 **동작하는데도 흐리게** 나온다.
     실제로 한 번 그렇게 나왔다.                                        */
.nav-i[href*=".html"]:not(.on){color:var(--ink);font-weight:600}

/* ── 모바일 메뉴 서랍 (사장님 지시 2026-08-24) ─────────────────────────
   모바일에서 .side 가 display:none 이라 **메뉴가 아예 없었다.**
   폰으로 데모를 열면 안내띠와 지금 화면 하나만 보이고 다른 화면으로 갈 길이 없었다.
   숨기는 대신 서랍으로 밀어 두고, 우측 상단 햄버거로 꺼낸다.                */
.menubtn{display:none}

@media (max-width:860px){
  /* 안내띠가 화면 절반을 먹지 않게 — 문구는 남기되 자리를 줄인다.
     지우지는 않는다. 「이건 데모입니다」는 방문자가 반드시 봐야 하는 문장이다.

     ★ 두 링크를 **양 끝으로 떼어 놓는다** (사장님 제보 2026-08-24)
       나란히 붙어 있으면 폰에서 잘못 누른다. 실제로 「랜딩페이지 돌아가기」를
       누르려다 「무료 체험 신청」이 눌려 페이지 80% 지점(신청 폼)으로 떨어졌다.
       왼쪽 = 돌아가기 · 오른쪽 = 신청 · 아래 = 안내 문구.                      */
  .demobar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    gap:6px 8px;padding:7px 12px;font-size:11.5px;line-height:1.45}
  .demobar a{padding:4px 10px;font-size:11px;margin:0}
  .demobar a:first-of-type{grid-column:1;grid-row:1;justify-self:start}
  .demobar a:last-of-type{grid-column:3;grid-row:1;justify-self:end}
  .demobar span{grid-column:1 / -1;grid-row:2}

  /* 사이드바를 없애지 않고 서랍으로 둔다 */
  .side{
    display:flex;position:fixed;z-index:60;top:0;left:0;bottom:0;width:270px;max-width:84vw;
    transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:0 0 0 rgba(0,0,0,0);overflow-y:auto
  }
  .side.open{transform:translateX(0);box-shadow:8px 0 28px rgba(16,32,64,.28)}

  .navback{position:fixed;inset:0;z-index:55;background:rgba(16,32,64,.42);
    opacity:0;pointer-events:none;transition:opacity .2s ease}
  .navback.on{opacity:1;pointer-events:auto}

  /* 햄버거 — 우측 상단. 터치 목표는 44px 이상 (장갑 낀 손·주방에서도 눌린다) */
  .menubtn{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 11px;
    margin-left:auto;border:1px solid var(--line-strong);border-radius:9px;
    background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer}
  .menubtn span{font-size:15px;line-height:1}

  .topbar{display:flex;align-items:center;gap:8px}
  .topbar .right{display:flex;align-items:center;gap:6px;margin-left:auto;flex:1;min-width:0}
  /* 좁은 폭에서 상단바 칩이 햄버거를 밀어내지 않게 */
  .topbar .chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}