:root {
    color-scheme:light;
    --canvas:#F1F4F8; --surface:#FFFFFF; --subtle:#F2F4F7; --hover:#FAFBFC;
    /* 안내 문구 색(--ink-ph)도 흰 바탕에서 4.5:1 대비를 넘기는 짙기다 */
    --ink:#0C0E14; --ink-2:#4E5361; --ink-3:#5C6270; --ink-4:#6C7181; --ink-ph:#6F7583;
    --line:#E7E9EE; --line-2:#F0F2F5; --line-3:#D6DAE2;
    --accent:#2E5BE6; --accent-h:#2449C4; --accent-d:#1D3A9E; --accent-bg:#EFF3FE; --accent-ln:#C6D3F6;
    /* 완료 딱지 색 — 관리 화면과 같은 값이다 */
    --ok:#0F7048; --ok-bg:#EEF7F2; --ok-ln:#C8E5D7; --warn-ln:#ECDCB8;
    /* 위험 — 기한 지남, 미결제, 안 읽은 알림처럼 눈에 걸려야 하는 것만 */
    --danger:#C33A2E; --danger-h:#A82F25; --danger-d:#8C271E; --danger-bg:#FCF2F1; --danger-ln:#EFD3CF;
    --r-sm:9px; --r:11px;
    --sh-3:0 2px 6px rgba(14,16,25,.06), 0 16px 30px -10px rgba(14,16,25,.14), 0 34px 60px -22px rgba(14,16,25,.18);
    --sh-p:0 1px 2px rgba(29,58,158,.26), 0 3px 10px -3px rgba(29,58,158,.3);

    /* 버튼 한 벌이 쓰는 그림자 — 다른 곳에서 쓰지 않는다 */
    --sh-b:0 1px 1.5px rgba(14,16,25,.05);
    --sh-bh:0 1px 3px rgba(14,16,25,.09);
    --sh-bp:0 1px 2px rgba(29,58,158,.28), inset 0 1px 0 rgba(255,255,255,.2);
    --sh-bph:0 2px 5px rgba(29,58,158,.3), inset 0 1px 0 rgba(255,255,255,.2);
    --ease:cubic-bezier(.32,.72,.29,1); --dur:.16s;
    --safe-b:env(safe-area-inset-bottom, 0px);
    --sans:"Pretendard Variable",Pretendard,"Pretendard 대체",system-ui,sans-serif;
  }
  /* 폰트 대체 시 글자가 내려앉지 않게 세로 수치를 맞춘 얼굴을 Pretendard 뒤에 끼운다 */
  @font-face {
    font-family:"Pretendard 대체";
    src:local("Malgun Gothic"), local("맑은 고딕"), local("Apple SD Gothic Neo"),
        local("Noto Sans KR"), local("Segoe UI");
    ascent-override:102%;
    descent-override:24%;
    line-gap-override:0%;
  }
  body { background:var(--canvas); color:var(--ink); font-family:var(--sans); font-size:15px;
         line-height:1.6; letter-spacing:-.006em; -webkit-font-smoothing:antialiased;
         /* 한글은 기본값이면 낱말 한가운데서 줄이 바뀐다. 띄어쓰기에서만 끊는다 */
         word-break:keep-all; overflow-wrap:break-word; }
  a { color:inherit; text-decoration:none; }
  /* 폼 요소 글꼴 상속은 머리 리셋이 사라졌을 때를 받치는 그물이고 line-height 는 안 물린다 */
  button, input, select, textarea, optgroup { font-family:inherit; }
  .num { font-variant-numeric:tabular-nums; }
  :focus, :focus-visible { outline:none; }
  /* 세로 flex 에서 margin auto 가 폭을 줄이지 않게 width:100% 를 함께 준다 */
  .wrap { width:100%; max-width:860px; margin:0 auto; padding:20px 18px 60px;
          flex:1; display:flex; flex-direction:column; }
  .view > :first-child { margin-top:0; }

  /* ── 페이지 머리글 ── */
  .top { background:var(--surface); box-shadow:0 1px 2px rgba(14,16,25,.05), 0 8px 20px -16px rgba(14,16,25,.2); position:relative; z-index:2; }
  .top-in { max-width:860px; margin:0 auto; padding:20px 18px 22px;
            display:flex; align-items:flex-end; gap:14px 26px; flex-wrap:wrap; }
  .top-l { flex:1 1 300px; min-width:0; }
  .top-k { font-size:12.5px; font-weight:650; color:var(--ink-3); letter-spacing:-.01em;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .top h1 { margin:3px 0 0; font-size:24px; font-weight:750; letter-spacing:-.036em; }
  .top .meta { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px; font-size:13px; color:var(--ink-3); }
  .top .meta b { color:var(--ink-2); font-weight:550; }
  .top-r { flex:none; margin-left:auto; display:flex; align-items:center; gap:14px; padding-bottom:3px; }
  .top-n { font-size:12.5px; color:var(--ink-3); font-weight:600; white-space:nowrap; }
  .top-n b { font-size:15.5px; font-weight:750; color:var(--ink); letter-spacing:-.024em;
             margin-left:5px; font-variant-numeric:tabular-nums; }

  .sum { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .sum-i { background:var(--surface); border:0; border-radius:16px; padding:15px 17px;
           box-shadow:0 0 0 1px rgba(14,16,25,.045), 0 1px 2px rgba(14,16,25,.04), 0 10px 26px -14px rgba(14,16,25,.18); }
  .sum-k { font-size:12px; color:var(--ink-3); font-weight:650; letter-spacing:.004em; }
  .sum-v { font-size:22px; font-weight:750; letter-spacing:-.03em; margin-top:5px; line-height:1.15; font-variant-numeric:tabular-nums; }
  .sum-v small { font-size:.58em; font-weight:550; color:var(--ink-3); margin-left:2px; }
  .sum-d { font-size:12px; color:var(--ink-4); margin-top:3px; }

  .sec { margin-top:26px; }
  /* 제목을 상자 안에 두려고 admin 전용 .card-h 대신 이 화면의 .sec-h 를 그대로 쓴다 */
  .sec-h.in { padding:16px 18px 0; margin-bottom:0; }
  .sec-h.in + .card-p { padding:12px 18px 16px; }
  .sec-h.in + .exsum { padding:12px 18px; border-bottom:1px solid var(--line); }
  .sec-h { display:flex; align-items:baseline; gap:9px; margin-bottom:11px; }
  .sec-h h2 { margin:0; font-size:16.5px; font-weight:750; letter-spacing:-.028em; }
  .sec-h span { font-size:12.5px; color:var(--ink-3); }
  .sec-h .r { margin-left:auto; font-size:12.5px; color:var(--ink-3); }
  /* 달 고르기. 제목 옆의 글자와 같은 무게로 두되 누를 수 있다는 것만 보이면 된다 */
  .sec-h .exsel {
    font:inherit; font-size:12.5px; color:var(--ink-2);
    background:var(--surface); border:1px solid var(--line); border-radius:8px;
    padding:3px 8px; cursor:pointer; max-width:170px;
  }
  .sec-h .exsel:hover { border-color:var(--ink-4); }

  .card { background:var(--surface); border:0; border-radius:16px; overflow:hidden;
          box-shadow:0 0 0 1px rgba(14,16,25,.045), 0 1px 2px rgba(14,16,25,.04), 0 10px 26px -14px rgba(14,16,25,.18); }
  .card + .card { margin-top:12px; }

  .prod { display:flex; align-items:center; gap:13px; padding:17px 18px; width:100%; text-align:left;
          background:none; border:none; cursor:pointer; font:inherit; color:inherit; transition:background .12s; }
  .prod:hover { background:var(--hover); }
  .prod-n { font-size:15px; font-weight:650; letter-spacing:-.018em; }
  .prod-s { font-size:13px; color:var(--ink-3); margin-top:3px; }
  .prod-r { margin-left:auto; flex:none; display:flex; text-align:right; }
  .prod-v { font-size:15px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .prod-more { font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:3px; }
  .prod:hover .prod-more { color:var(--accent); }
  .prod-more svg { width:12px; height:12px; stroke-width:2.2; }

  /* 상태 표식은 세로 막대 붙은 옅은 칩으로 관리 화면과 같은 모양을 쓴다 */
  .bdg { display:inline-flex; align-items:center; gap:6px;
         padding:0 9px 0 11px; height:22px; border-radius:7px; border:0;
         background:var(--subtle);
         box-shadow:inset 2px 0 0 var(--ink-4), inset 0 0 0 1px var(--line);
         font-size:11.5px; font-weight:700; letter-spacing:-.012em; color:var(--ink-3);
         white-space:nowrap; line-height:1; }
  .bdg.ok { background:var(--ok-bg); color:var(--ok);
            box-shadow:inset 2px 0 0 var(--ok), inset 0 0 0 1px var(--ok-ln); }
  .bdg.on { background:var(--accent-bg); color:var(--accent-d);
            box-shadow:inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--accent-ln); }

  /* 버튼은 네 화면이 공유하는 한 벌이라 다섯 크기 값으로만 바꾸고 직접 수치를 안 쓴다 */
  .btn {
    --btn-h:34px; --btn-r:9px; --btn-px:14px; --btn-fs:13.5px; --btn-fw:600; --btn-sv:14px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:var(--btn-h); padding:0 var(--btn-px); border-radius:var(--btn-r);
    font-family:inherit; font-size:var(--btn-fs); font-weight:var(--btn-fw);
    letter-spacing:-.011em; line-height:1;
    background:var(--surface); border:1px solid var(--line-3); color:var(--ink);
    cursor:pointer; white-space:nowrap; user-select:none; box-shadow:var(--sh-b);
    transition:background var(--dur) ease, border-color var(--dur) ease,
               box-shadow var(--dur) ease, transform .08s ease;
  }
  .btn:hover { background:var(--hover); border-color:#C2C7D2; box-shadow:var(--sh-bh); }
  .btn:active { background:var(--subtle); box-shadow:none; transform:translateY(1px); }
  /* 정의가 두 곳이면 뒤가 이겨 cursor:not-allowed 가 죽는다. 여기 하나로 둔다 */
  .btn:disabled { opacity:.62; cursor:not-allowed; box-shadow:none; transform:none; }
  .btn svg { width:var(--btn-sv); height:var(--btn-sv); stroke-width:1.85; flex:none; }

  /* 주요 — 한 화면에 하나가 원칙이다 */
  .btn-p { background:var(--accent); border-color:var(--accent-h); color:#fff; box-shadow:var(--sh-bp); }
  .btn-p:hover { background:var(--accent-h); border-color:var(--accent-d); box-shadow:var(--sh-bph); }
  .btn-p:active { background:var(--accent-d); box-shadow:inset 0 1px 2px rgba(0,0,0,.22); transform:translateY(1px); }

  /* 크기 — 값이 아니라 이 다섯 개를 쓴다 */
  .btn-xs { --btn-h:24px; --btn-r:7px; --btn-px:8px; --btn-fs:12px; --btn-sv:12px; }
  .btn-sm { --btn-h:29px; --btn-r:8px; --btn-px:11px; --btn-fs:12.5px; --btn-sv:13px; }
  .btn-lg { --btn-h:44px; --btn-r:11px; --btn-px:20px; --btn-fs:15px; --btn-sv:16px; }
  .btn-xl { --btn-h:52px; --btn-r:13px; --btn-px:26px; --btn-fs:16.5px; --btn-fw:650; --btn-sv:18px; }

  /* 조용한 — 테두리와 그림자를 걷고 올릴 때만 바닥이 생긴다 */
  .btn-gh { background:none; border-color:transparent; box-shadow:none; color:var(--ink-2); }
  .btn-gh:hover { background:var(--subtle); border-color:transparent; color:var(--ink); box-shadow:none; }
  .btn-gh:active { background:var(--subtle); box-shadow:none; transform:translateY(1px); }

  /* 삭제 — 아이콘 대신 글자로, 위험도가 보이되 과하지 않게 */
  /* 삭제 단추는 평소엔 테두리·글자만 붉게 두고 올렸을 때만 물들인다 */
  .btn-del { background:var(--surface); border-color:var(--danger-ln); color:var(--danger-d);
             box-shadow:var(--sh-b); }
  .btn-del:hover { background:var(--danger-bg); border-color:#DCAFA9; color:var(--danger-h);
                   box-shadow:var(--sh-bh); }
  .btn-del:active { background:#F6DEDA; border-color:#D2A099;
                    box-shadow:inset 0 1px 2px rgba(140,39,30,.12); transform:translateY(1px); }
  .btn-del:focus-visible { border-color:var(--danger); }

  /* 아이콘만 — 너비가 높이를 따라가 늘 정사각이다 */
  .btn-ic { --btn-px:0; width:var(--btn-h); }
  .btn-w { width:100%; }

  /* 요청 강조 */
  .asks { display:grid; gap:10px; }
  .ask { border:0; background:linear-gradient(180deg,#F6F9FE,#fff 70%); border-radius:16px; padding:17px 18px;
         box-shadow:0 0 0 1px rgba(14,16,25,.16), 0 1px 2px rgba(14,16,25,.06), 0 10px 26px -14px rgba(14,16,25,.3); }
  /* 기한이 지난 요청은 같은 회색 카드로 두면 묻힌다 */
  .ask.late { background:linear-gradient(180deg,var(--danger-bg),#fff 70%);
              box-shadow:0 0 0 1px var(--danger-ln), 0 1px 2px rgba(195,58,46,.06), 0 10px 26px -14px rgba(195,58,46,.28); }
  .ask.late .ask-t svg { color:var(--danger); }
  .ask.late .ask-d { color:var(--danger-d); }
  .ask-t { display:flex; align-items:flex-start; gap:10px; }
  .ask-t svg { width:17px; height:17px; color:var(--accent); flex:none; margin-top:2px; }
  .ask-n { font-size:15px; font-weight:650; letter-spacing:-.018em; }
  .ask-s { font-size:13px; color:var(--ink-2); margin-top:3px; }
  .ask-d { font-size:13px; font-weight:650; color:var(--accent); margin-top:6px; }
  .ask-b { display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; }

  /* 메시지함 */
  .mtabs { display:inline-flex; background:var(--subtle); border:1px solid var(--line); border-radius:11px; padding:3px; gap:3px;
           box-shadow:inset 0 1px 2px rgba(14,16,25,.04); }
  /* 탭 단추 치수는 버튼 한 벌의 작게 값과 맞추되 미끄럼 표시 때문에 .btn 은 못 쓴다 */
  .mtabs button { border:1px solid transparent; background:none; height:29px; padding:0 13px; border-radius:8px; cursor:pointer;
                  font-size:12.5px; font-weight:600; color:var(--ink-3); letter-spacing:-.011em;
                  transition:background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease; }
  .mtabs button:hover { color:var(--ink); background:rgba(255,255,255,.72); }
  .mtabs button.on { background:var(--surface); border-color:var(--line); color:var(--ink); font-weight:700;
                     box-shadow:0 1px 2px rgba(14,16,25,.08), 0 2px 6px -2px rgba(14,16,25,.08); }
  /* 메시지는 한 통씩 카드로 둔다. 폭 1120px 띠 하나로 늘어나지 않게 넓은 화면에서는 두 단 */
  .msgs { display:grid; gap:10px; }
  @media (min-width:1180px) { .msgs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .msg { display:flex; align-items:flex-start; gap:11px; padding:16px 18px; background:var(--surface); border-radius:16px;
         box-shadow:0 0 0 1px rgba(14,16,25,.045), 0 1px 2px rgba(14,16,25,.04), 0 10px 26px -14px rgba(14,16,25,.16); }
  .msg.unread { background:linear-gradient(180deg,#FDF6F5,#fff 60%);
                box-shadow:0 0 0 1px rgba(14,16,25,.14), 0 1px 2px rgba(14,16,25,.05), 0 10px 26px -14px rgba(14,16,25,.26); }
  .msg-dot { width:7px; height:7px; border-radius:50%; background:var(--danger); flex:none; margin-top:7px; }
  .msg-dot.read { background:var(--line-3); }
  .msg-t { font-size:14px; font-weight:600; letter-spacing:-.014em; }
  .msg-x { font-size:13px; color:var(--ink-2); margin-top:3px; white-space:pre-wrap; }
  .msg-a { font-size:12px; color:var(--ink-4); margin-top:5px; }
  .msg-r { margin-left:auto; display:flex; gap:6px; flex:none; }

  .li { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-2); transition:background .1s ease; }
  .li:last-child { border-bottom:0; }
  .li-t { font-size:14px; font-weight:600; letter-spacing:-.014em; }
  .li-s { font-size:12.5px; color:var(--ink-3); margin-top:2px; }
  .li-r { margin-left:auto; flex:none; display:flex; align-items:center; gap:8px; }

  /* 블로그·플레이스 탭은 반 칸 폭에 맞춰 메시지함과 같은 .mtabs 를 그대로 쓴다 */
  .cptabs { padding:0 18px 12px; }
  /* 순위는 작을수록 좋다. 열 자리 안은 눈에 띄게 둔다 */
  .cprk { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:999px;
          font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
          background:var(--ok-bg); color:var(--ok); }
  .cprk.hi { background:var(--accent-bg); color:var(--accent-d); }
  .cprk.none { background:var(--line-2); color:var(--ink-3); font-weight:600; }
  .cprk.sub { background:transparent; color:var(--ink-3); font-weight:600; padding-left:0; padding-right:0; }
  .cprk i { font-style:normal; font-size:11px; font-weight:700; }
  .cprk i.up { color:var(--ok); }
  .cprk i.dn { color:var(--danger); }
  .cpnote { margin-top:10px; font-size:12px; color:var(--ink-3); line-height:1.6; }

  /* 빈 화면도 무엇을 기다리는 중인지 알려 준다 */
  .empty { display:grid; justify-items:center; gap:3px; padding:46px 20px; text-align:center; }
  .empty svg { width:24px; height:24px; color:var(--line-3); stroke-width:1.5; margin-bottom:9px; }
  .empty b { font-size:14.5px; font-weight:650; color:var(--ink-2); letter-spacing:-.016em; }
  .empty span { font-size:12.5px; color:var(--ink-3); line-height:1.55; }

  /* 리포트 목록은 요약만 보이고 본문은 창에서 열어 카드 한 장이 안 비대해진다 */
  .repm { font-size:13px; font-weight:700; color:var(--ink-3); letter-spacing:-.01em;
          margin:22px 0 10px; }
  .repm:first-child { margin-top:0; }
  .reps { display:grid; grid-template-columns:1fr; gap:12px; align-items:stretch; }
  @media (min-width:760px) { .reps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (min-width:1240px) { .reps { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .rep { display:flex; flex-direction:column; background:var(--surface); border-radius:16px; padding:18px 18px 15px;
         box-shadow:0 0 0 1px rgba(14,16,25,.045), 0 1px 2px rgba(14,16,25,.04), 0 10px 26px -14px rgba(14,16,25,.16); }
  .rep-t { display:flex; align-items:center; gap:8px; }
  .rep-k { font-size:10.5px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); }
  .rep-n { font-size:16.5px; font-weight:680; letter-spacing:-.028em; line-height:1.32; margin-top:7px; }
  .rep-d { font-size:12.5px; color:var(--ink-3); margin-top:6px; font-variant-numeric:tabular-nums; }
  .rep-f { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:14px; padding-top:13px;
           border-top:1px solid var(--line-2); font-size:12.5px; color:var(--ink-2);
           font-variant-numeric:tabular-nums; }
  .rep-b { margin-top:auto; padding-top:15px; }
  .rep-w { font-size:12px; color:var(--ink-4); margin-bottom:10px; }
  /* 읽었는지를 딱지 하나로 말한다 — 글자는 이 파일의 다른 딱지와 같은 11.5px 이다(11px 은 폰에서 못 읽는다) */
  .rbdg { margin-left:auto; flex:none; font-size:11.5px; font-weight:650; letter-spacing:-.008em;
          padding:3px 8px; border-radius:999px; background:var(--subtle); color:var(--ink-3); }
  .rbdg.new { background:var(--accent-bg); color:var(--accent-d); }
  .rbdg.hot { background:var(--danger-bg); color:var(--danger-d); }

  /* ── 리포트 상세 ── */
  .rspan { font-size:13px; color:var(--ink-3); margin-bottom:16px; font-variant-numeric:tabular-nums; }
  .rmet { display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:10px; }
  .rmet-i { background:var(--subtle); border-radius:12px; padding:13px 14px; min-width:0; }
  .rmet-i span { display:block; font-size:12px; color:var(--ink-3); }
  .rmet-i b { display:block; font-size:19px; font-weight:720; letter-spacing:-.03em; margin-top:5px;
              font-variant-numeric:tabular-nums; }
  .rdel { display:block; font-style:normal; font-size:11.5px; font-weight:650; margin-top:4px; color:var(--ink-4); }
  .rdel.up { color:var(--ok); }
  .rdel.dn { color:var(--danger); }
  .rnote { font-size:12.5px; color:var(--ink-3); line-height:1.6; margin-top:10px; }
  /* 사장님이 가장 궁금한 것은 「그래서 이번 주에 뭘 하나」다. 그것만 배경을 준다 */
  .ract { background:var(--accent-bg); border:1px solid var(--accent-ln); border-radius:14px;
          padding:16px 18px 15px; margin-top:20px; }
  .ract-h { font-size:13px; font-weight:720; color:var(--accent-d); letter-spacing:-.014em; }
  .ract ol { margin:11px 0 0; padding-left:19px; }
  .ract li { margin-top:9px; font-size:13.5px; line-height:1.6; }
  .ract li b { font-weight:680; letter-spacing:-.014em; }
  .ract li span { display:block; color:var(--ink-2); font-size:13px; margin-top:2px; }
  .rrow { border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
  .rrow-i { display:flex; align-items:center; gap:12px; padding:11px 14px;
            border-bottom:1px solid var(--line-2); }
  .rrow-i:last-child { border-bottom:0; }
  .rrow-k { font-size:13.5px; font-weight:650; letter-spacing:-.014em; }
  .rrow-m { font-size:12px; color:var(--ink-3); margin-top:3px; font-variant-numeric:tabular-nums; }
  /* 마크다운 본문은 제목 크기만 정하고 나머지는 문단 기본값을 쓴다 */
  .mdbody { font-size:14px; line-height:1.8; color:var(--ink-2); }
  .mdbody h2, .mdbody h3, .mdbody h4, .mdbody h5 {
    color:var(--ink); letter-spacing:-.024em; margin:22px 0 8px; }
  .mdbody h2 { font-size:18.5px; font-weight:720; }
  .mdbody h3 { font-size:16px; font-weight:700; }
  .mdbody h4, .mdbody h5 { font-size:14.5px; font-weight:680; }
  .mdbody > :first-child { margin-top:0; }
  .mdbody p { margin:0 0 11px; }
  .mdbody ul, .mdbody ol { margin:0 0 12px; padding-left:20px; }
  .mdbody li { margin-bottom:5px; }
  .mdbody b { color:var(--ink); font-weight:680; }
  .mdbody code { background:var(--subtle); border-radius:5px; padding:1px 5px; font-size:12.5px; }
  .mdbody hr { border:0; border-top:1px solid var(--line); margin:18px 0; }

  /* Drawer */
  .dmask { position:fixed; inset:0; background:rgba(11,11,15,.32); z-index:100;
           -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); animation:fin .16s ease; }
  @keyframes fin { from { opacity:0; } }
  .drawer { position:fixed; top:0; right:0; bottom:0; width:min(480px,100%); z-index:110; background:var(--surface);
            box-shadow:-24px 0 60px rgba(11,11,15,.18); display:flex; flex-direction:column;
            animation:dwin .24s cubic-bezier(.32,.72,.29,1); }
  @keyframes dwin { from { transform:translateX(30px); opacity:.5; } }
  .drawer-h { padding:17px 20px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:10px; }
  .drawer-h h3 { margin:0; font-size:16px; font-weight:680; letter-spacing:-.022em; }
  /* 시트 끝에서 더 밀어도 뒷 페이지가 안 딸려 가게 overscroll 을 가둔다 */
  .drawer-b { padding:18px 20px 30px; overflow:auto; flex:1; overscroll-behavior:contain; }
  .kv { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-2);
        border-radius:var(--r-sm); overflow:hidden; }
  .kv-i { background:var(--surface); padding:11px 13px; }
  .kv-k { font-size:11.5px; color:var(--ink-3); font-weight:500; }
  .kv-v { font-size:14px; font-weight:600; letter-spacing:-.012em; margin-top:2px; font-variant-numeric:tabular-nums; }
  .dh { font-size:12px; font-weight:700; color:var(--ink-4); letter-spacing:.05em; text-transform:uppercase; margin:20px 0 8px; }
  .dl { font-size:13.5px; color:var(--ink-2); padding-left:14px; position:relative; margin-bottom:6px; }
  .dl::before { content:""; position:absolute; left:0; top:.6em; width:4px; height:4px; border-radius:50%; background:var(--ink-4); }
  .note { background:#FCFCFD; border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px;
          font-size:13.5px; line-height:1.7; color:var(--ink-2); white-space:pre-wrap; }

  .toasts { position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:200; display:grid; gap:8px; }
  .toast { background:#17181D; color:#fff; border-radius:var(--r); padding:11px 16px; font-size:13.5px; font-weight:500;
           box-shadow:0 12px 32px rgba(11,11,15,.24); animation:tin .22s cubic-bezier(.32,.72,.29,1); }
  /* 본문 있는 알림만 넓히고 em 은 강조가 아니라 설명이라 기울임을 되돌린다 */
  .toast.two { max-width:420px; font-weight:600; text-align:left; line-height:1.45; }
  .toast em { display:block; margin-top:7px; font-style:normal; font-weight:450;
              font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.72); }
  @keyframes tin { from { opacity:0; transform:translateY(10px); } }

  /* margin-top:auto — 내용이 짧아도 푸터가 허공에 뜨지 않고 화면 아래에 붙는다 */
  .foot { margin-top:auto; padding-top:40px; }
  .foot-b { display:flex; align-items:center; gap:9px; padding-top:17px; border-top:1px solid var(--line); }
  .foot-m { width:20px; height:20px; flex:none; background:#080404; opacity:.55;
            -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat; }
  .foot-c { font-size:12px; color:var(--ink-3); }
  .foot-b .btn { margin-left:auto; }
  /* 넓은 화면에서는 사이드바에 로그아웃이 늘 보이므로 푸터에서 겹쳐 두지 않는다 */
  @media (min-width:900px) { .foot-b .btn { display:none; } }

  /* ── 결제 ── */
  /* 고르는 줄은 결제 띠와 같은 상자로 서서 목록에 속한 줄로 보인다 */
  .paypick { display:flex; align-items:center; gap:10px; margin:0 0 12px;
             padding:11px 16px; border-radius:14px; background:var(--surface);
             box-shadow:0 0 0 1px rgba(14,16,25,.05), 0 1px 2px rgba(14,16,25,.04),
                        0 10px 26px -14px rgba(14,16,25,.18); }
  .paypick-a { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px;
               font-weight:620; color:var(--ink-2); letter-spacing:-.014em; }
  .paypick-a:hover { color:var(--ink); }
  /* 몇 건을 골랐는지는 알약 하나로 보여 준다. 하나라도 고르면 색이 살아난다 */
  .paypick-n { margin-left:auto; padding:4px 11px; border-radius:999px;
               font-size:12px; font-weight:600; color:var(--ink-3);
               background:var(--subtle); box-shadow:inset 0 0 0 1px var(--line);
               transition:background var(--dur) ease, color var(--dur) ease,
                          box-shadow var(--dur) ease; }
  .paypick-n b { font-weight:750; }
  .paypick-n.on { color:var(--accent); background:var(--accent-bg);
                  box-shadow:inset 0 0 0 1px var(--accent-ln); }
  /* 운영 금액은 상품에서 할인을 빼 최종액이 되는 흐름을 위아래 순서로 보여준다 */
  .omn { padding:6px 18px 8px; }
  .omn-r { display:flex; align-items:baseline; gap:12px; padding:9px 0; font-size:13.5px;
           font-weight:600; color:var(--ink-2); letter-spacing:-.012em; }
  .omn-r b { margin-left:auto; font-size:15.5px; font-weight:700; letter-spacing:-.03em;
             color:var(--ink); white-space:nowrap; }
  .omn-cut b { color:var(--accent); }
  .omn-tot { margin-top:2px; padding-top:13px; border-top:1px solid var(--line); }
  .omn-tot span { color:var(--ink); font-weight:680; }
  .omn-tot b { font-size:21px; font-weight:750; letter-spacing:-.035em; }
  /* 위 `.omn-r b` 보다 셈이 낮으면 색이 안 먹는다 — 두 자리를 함께 적는다 */
  .omn-r b.omn-left { color:var(--danger); }
  .omn-warn { margin:6px 0 8px; padding:11px 13px; border-radius:11px; font-size:12.5px;
              line-height:1.55; color:var(--danger-d); background:var(--danger-bg);
              box-shadow:inset 0 0 0 1px var(--danger-ln); }
  .omn-warn b { font-weight:750; }
  .paywait { display:grid; gap:12px; }
  /* 체크 상자는 관리 화면과 같은 모양이다 */
  input[type=checkbox] {
    appearance:none; -webkit-appearance:none; margin:0;
    width:18px; height:18px; border-radius:5px; flex:none; position:relative; cursor:pointer;
    border:1.5px solid var(--line-3); background:var(--surface);
    box-shadow:inset 0 1px 1px rgba(14,16,25,.03);
    transition:background var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
  }
  input[type=checkbox]:hover { border-color:#B9BFCB; }
  input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); box-shadow:var(--sh-p); }
  /* 체크 표시는 잉크가 쏠린 만큼 되밀어 상자 정중앙으로 보이게 한다 */
  input[type=checkbox]:checked::after {
    content:""; position:absolute; left:50%; top:50%; width:4.5px; height:8.5px;
    border:solid #fff; border-width:0 2.2px 2.2px 0;
    transform:translate(-50%,-50%) translate(.19px,-1.31px) rotate(43deg);
  }
  input[type=checkbox]:disabled { opacity:.45; cursor:not-allowed; }
  label.pw { display:block; cursor:pointer; }
  label.pw:hover { box-shadow:0 0 0 1.5px #DCC48E, 0 1px 2px rgba(14,16,25,.04), 0 12px 28px -16px rgba(126,82,0,.28); }
  /* 고른 카드는 테두리 색이 바뀐다 — 청구(노랑) 에서 고름(파랑) 으로 */
  label.pw.on { box-shadow:0 0 0 1.5px var(--accent), 0 1px 2px rgba(14,16,25,.04),
                           0 12px 28px -16px rgba(46,91,230,.3); }
  /* 고른 금액과 결제 단추가 함께 서는 띠. 목록 밑에 붙어 늘 같은 자리에 있다 */
  .paybar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px;
            padding:14px 16px; border-radius:14px; background:var(--surface);
            box-shadow:0 0 0 1px rgba(14,16,25,.05), 0 1px 2px rgba(14,16,25,.04),
                       0 10px 26px -14px rgba(14,16,25,.18); }
  .paybar-s { display:flex; align-items:baseline; gap:9px; font-size:13px; font-weight:600;
              color:var(--ink-2); letter-spacing:-.012em; }
  .paybar-s b { font-size:21px; font-weight:750; letter-spacing:-.035em; color:var(--ink); }
  .paybar .btn { margin-left:auto; }
  @media (max-width:560px) { .paybar .btn { margin-left:0; width:100%; } }
  /* 창 안의 건별 목록 — 무엇을 얼마에 내는지 내기 전에 다시 보여 준다 */
  .pay-list { margin-bottom:14px; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
  .pay-li { display:flex; align-items:baseline; gap:10px; padding:9px 13px; font-size:12.5px;
            color:var(--ink-2); }
  .pay-li + .pay-li { border-top:1px solid var(--line-2); }
  .pay-li b { margin-left:auto; font-weight:650; color:var(--ink); }
  .pw { background:var(--surface); border-radius:16px; padding:17px 18px 15px;
        box-shadow:0 0 0 1.5px var(--warn-ln), 0 1px 2px rgba(14,16,25,.04), 0 12px 28px -16px rgba(126,82,0,.24); }
  .pw-h { display:flex; align-items:flex-start; gap:12px; margin-bottom:13px; }
  .pw-n { font-size:15.5px; font-weight:680; letter-spacing:-.024em; }
  .pw-s { font-size:12.5px; color:var(--ink-3); margin-top:5px; line-height:1.5; }
  .pw-v { margin-left:auto; font-size:21px; font-weight:750; letter-spacing:-.035em; white-space:nowrap; }
  .pw-v small { font-size:12.5px; font-weight:600; color:var(--ink-3); margin-left:2px; }
  .paid { font-size:12px; font-weight:650; color:var(--ok); }
  .pay-sum { display:flex; align-items:baseline; gap:12px; padding-bottom:15px; margin-bottom:17px;
             border-bottom:1px solid var(--line); }
  .pay-sum span { font-size:13.5px; font-weight:600; color:var(--ink-2); }
  .pay-sum b { margin-left:auto; font-size:21px; font-weight:750; letter-spacing:-.035em; }
  .pay-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
  .pay-note { font-size:12px; color:var(--ink-3); line-height:1.5; }

  /* 결제 창 입력칸의 이름표와 간격 */
  .of-f { margin-bottom:16px; }
  .of-k { display:block; font-size:12px; font-weight:650; color:var(--ink-3); margin-bottom:8px; }

  /* ── 사장님 로그인 ── */
  body.gate .top { display:none; }
  .gate-wrap { min-height:100vh; display:grid; place-items:center; padding:24px 0 60px; }
  .gate-card {
    width:100%; max-width:400px; background:var(--surface); border-radius:20px; padding:30px 28px 26px;
    box-shadow:0 0 0 1px rgba(14,16,25,.05), 0 2px 4px rgba(14,16,25,.04), 0 20px 44px -20px rgba(14,16,25,.28);
  }
  .gate-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
  .gate-mark {
    width:48px; height:48px; flex:none;
    background:#080404;
    -webkit-mask:var(--logo) center/contain no-repeat;
    mask:var(--logo) center/contain no-repeat;
  }
  .gate-s { font-size:11.5px; font-weight:650; color:var(--accent); letter-spacing:.02em; }
  .gate-t { font-size:17px; font-weight:750; letter-spacing:-.028em; }
  .gate-f { margin-bottom:13px; }
  .gate-k { display:block; font-size:12.5px; font-weight:650; color:var(--ink-2); margin-bottom:7px; }
  .gate-card .inp {
    width:100%; height:46px; border:1px solid var(--line-3); border-radius:var(--r); padding:0 13px;
    background:var(--surface); color:var(--ink);
    transition:border-color var(--dur) ease, box-shadow var(--dur) ease;
  }
  .gate-card .inp:focus { outline:none; border-color:var(--ink-4); box-shadow:none; }
  .gate-card .btn-lg { margin-top:4px; }
  .gate-err {
    margin-bottom:16px; padding:11px 13px; border-radius:var(--r); font-size:13px; line-height:1.55;
    background:var(--accent-bg); color:var(--accent-d); box-shadow:inset 0 0 0 1px var(--accent-ln);
  }

  /* 모달, 입력 다이얼로그 (브라우저 prompt 대체) */
  .mask { position:fixed; inset:0; background:rgba(11,12,18,.36); z-index:120; display:grid; place-items:center; padding:18px;
          -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fin .16s ease; }
  /* 스크롤은 본문에서만. 창 전체를 스크롤하면 둥근 모서리 밖으로 스크롤바가 삐져나온다 */
  .modal { background:var(--surface); border-radius:18px; box-shadow:var(--sh-3); width:100%; max-width:440px;
           max-height:88vh; overflow:hidden; display:flex; flex-direction:column; animation:min .22s var(--ease); }
  @keyframes min { from { opacity:0; transform:translateY(12px) scale(.982); } }
  .modal-h { padding:21px 22px 0; flex:none; }
  .modal-h h3 { margin:0 0 6px; font-size:16.5px; font-weight:680; letter-spacing:-.024em; }
  .modal-h p { margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.65; }
  .modal-b { padding:16px 22px 0; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
  .modal-f { padding:18px 22px 20px; display:flex; gap:8px; justify-content:flex-end; flex:none; }
  .modal-f .btn { min-width:90px; }
  /* 로그인 화면 밖(결제창 등)에서도 입력칸이 같은 모양과 폭을 갖도록 */
  .inp { width:100%; height:46px; border:1px solid var(--line-3); border-radius:var(--r); padding:0 13px;
         background:var(--surface); color:var(--ink); min-width:0;
         transition:border-color var(--dur) ease, box-shadow var(--dur) ease; }
  .inp:hover { border-color:#C3C8D2; }
  .inp:focus { outline:none; border-color:var(--ink-4); box-shadow:none; }
  .inp::placeholder { color:var(--ink-ph); }
  .ta { width:100%; min-height:106px; border:1px solid var(--line-3); border-radius:var(--r); padding:11px 13px;
        line-height:1.65; color:var(--ink); background:var(--surface); resize:vertical;
        box-shadow:inset 0 1px 1px rgba(14,16,25,.02);
        transition:border-color var(--dur) ease, box-shadow var(--dur) ease; }
  .ta:hover { border-color:#C3C8D2; }
  .ta:focus { outline:none; border-color:var(--ink-4); box-shadow:none; }
  .ta::placeholder { color:var(--ink-ph); }

  /* 입력칸은 16px 를 지켜야 iOS 확대 뒤 안 풀리는 가로 스크롤을 막는다 */
  .inp, .gate-card .inp { font-size:16px; }
  .ta { font-size:16px; }
  @media (pointer:fine) {
    .inp, .gate-card .inp { font-size:15px; }
    .ta { font-size:14px; }
  }

  /* ── 사이드바 셸 ── */
  .cshell { display:flex; min-height:100vh; }
  .cbody { flex:1; min-width:0; display:flex; flex-direction:column; }
  .cside { display:none; }
  .ctab { display:none; }

  .cs-brand { display:flex; align-items:center; gap:10px; padding:20px 18px 18px; }
  .cs-m { width:30px; height:30px; flex:none; background:#080404;
          -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat; }
  .cs-t { font-size:14px; font-weight:700; letter-spacing:-.022em; line-height:1.25;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cs-s { font-size:11.5px; color:var(--ink-3); margin-top:2px; }
  .cs-nav { padding:4px 10px; display:grid; gap:2px; }
  .cs-b {
    display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:0 11px;
    border:0; border-radius:11px; background:none; cursor:pointer; text-align:left;
    font-size:13.5px; font-weight:600; color:var(--ink-2); letter-spacing:-.014em;
    transition:background var(--dur) ease, color var(--dur) ease;
  }
  .cs-b svg { width:18px; height:18px; flex:none; stroke-width:1.7; }
  .cs-b > span:first-of-type { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cs-b:hover { background:var(--subtle); color:var(--ink); }
  .cs-b.on { background:var(--accent-bg); color:var(--accent-d); font-weight:700; }
  .cs-b .ct { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .cs-b.on .ct { color:var(--accent-d); }
  .cs-b .ct.hot { color:var(--danger); }
  /* 선택된 항목은 바탕이 분홍이라 밝은 빨강이면 대비가 4.4:1로 떨어진다 */
  .cs-b.on .ct.hot { color:var(--danger-d); }
  .cs-foot { margin-top:auto; padding:14px 16px calc(18px + var(--safe-b)); }
  .cs-foot .btn { width:100%; }

  @media (min-width:900px) {
    .cside {
      display:flex; flex-direction:column; width:236px; flex:none;
      background:var(--surface); border-right:1px solid var(--line); position:sticky; top:0; height:100vh;
    }
    body.gate .cside { display:none; }
    /* 넓은 화면에서는 좁은 기둥에 가두지 않는다. 머리글과 본문이 같은 폭으로 맞춰진다 */
    .top-in, .wrap { max-width:1180px; padding-left:32px; padding-right:32px; }
    .wrap { padding-top:26px; padding-bottom:52px; }
    .top-in { padding-top:26px; padding-bottom:26px; }
    .top h1 { font-size:26px; }
    .sec { margin-top:30px; }
  }
  @media (min-width:1500px) {
    .top-in, .wrap { max-width:1360px; }
  }
  /* 현황 — 넓으면 좌우로 나눈다 */
  @media (min-width:1180px) {
    /* 자식의 margin-top을 지우므로 위 여백은 컨테이너가 들고 있어야 한다 */
    .home-g { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; align-items:stretch; margin-top:30px; }
    /* 나란히 놓인 두 상자는 세로 길이를 맞춘다 */
    .home-g > .sec { margin-top:0; display:flex; flex-direction:column; }
    .home-g > .sec > .card { flex:1; display:flex; flex-direction:column; }
    /* 빈 상태 글은 남는 높이를 받아 카드 정중앙에 서게 한다 */
    .home-g > .sec > .card > .empty { flex:1; align-content:center; }
    .paywait { grid-template-columns:repeat(2,minmax(0,1fr)); }
    /* 요청이 한 건뿐일 때 폭 1120px 띠가 되지 않도록 나눈다 */
    .asks { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (max-width:899px) {
    /* 좁은 화면에서는 아래 탭바로 나눈다 — backdrop-filter 는 스크롤마다 GPU 부담만 커 안 쓴다 */
    .ctab {
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
      background:rgba(255,255,255,.94);
      border-top:1px solid var(--line); padding-bottom:var(--safe-b);
    }
    body.gate .ctab { display:none; }
    .ctab a {
      flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:3px; min-height:56px; text-decoration:none; color:var(--ink-3);
      font-size:11px; font-weight:650; letter-spacing:-.01em; position:relative;
    }
    .ctab a.on { color:var(--accent); }
    .ctab a svg { width:21px; height:21px; stroke-width:1.7; }
    .ctab .ct {
      position:absolute; top:6px; left:calc(50% + 8px); min-width:16px; height:16px; padding:0 4px;
      border-radius:999px; background:var(--danger); color:#fff; font-size:10px; font-weight:750;
      display:grid; place-items:center; font-variant-numeric:tabular-nums;
    }
    .wrap { padding-bottom:calc(86px + var(--safe-b)); }
  }

  @media (max-width:640px) {
    body { font-size:14.5px; }
    /* 하단 탭바에 마지막 내용이 가리지 않도록 탭바 높이만큼 비운다 */
    .wrap { padding:16px 14px calc(86px + var(--safe-b)); }
    .top-in { padding:16px 14px 18px; }
    .top h1 { font-size:20px; }
    .top-r { margin-left:0; width:100%; }
    .sum { gap:8px; }
    .sum-v { font-size:19px; }
    .mtabs button { height:34px; }
    .prod { padding:14px 15px; }
    .li, .msg { padding:13px 15px; }
    /* 시트는 dvh 대신 svh 를 써 주소창 접힘으로 흔들리지 않게 한다 */
    .drawer { top:auto; left:0; right:0; width:100%; height:min(92vh,100%); border-radius:20px 20px 0 0;
              box-shadow:0 -18px 50px rgba(11,11,15,.22); animation:sheetin .28s var(--ease); }
    .drawer { height:min(92svh,100%); }
    .drawer-b { padding-bottom:calc(30px + var(--safe-b)); }
    /* 키보드만큼 올릴 때 max-height 도 함께 줄여야 시트 위가 화면 밖으로 안 나간다 */
    .mask { padding:0; place-items:end stretch; bottom:var(--kb,0px); }
    .modal { max-width:none; border-radius:20px 20px 0 0; padding-bottom:var(--safe-b); animation:sheetin .28s var(--ease);
             max-height:min(88vh,100%); }
    .modal { max-height:min(88svh,100%); }
    .toasts { left:14px; right:14px; transform:none; bottom:calc(16px + var(--safe-b)); }
  }
  @keyframes sheetin { from { opacity:.4; transform:translateY(26px); } }

  /* 화면을 바꿀 때만 살짝 올라오며 나타난다. 짧게 — 매번 보는 연출이다 */
  @keyframes viewin { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  .view.vin { animation:viewin .18s cubic-bezier(.22,.61,.36,1) both; }

  /* 담당자가 확인용으로 연 미리보기 띠. 광고주 로그인으로 들어오면 나오지 않는다 */
  .robar { margin:0 0 14px; padding:10px 14px; border-radius:11px; font-size:12.5px; font-weight:650;
           color:var(--ink-2); background:var(--subtle); box-shadow:inset 0 0 0 1px var(--line); }

  /* 인쇄에서는 사이드바·탭바·버튼을 빼 종이에 쓸모없는 것을 없앤다 */
  @media print {
    @page { margin:14mm 12mm; }
    html, body { background:#fff !important; }
    .cside, .ctab, .top-r, .foot, .toasts, #modalHost, #drawerHost, #intro,
    .drawer, .mask, .btn, .mtabs, .robar { display:none !important; }
    .cshell { display:block !important; }
    .wrap, .view { padding:0 !important; max-width:none !important; }
    .top { position:static !important; background:#fff !important; border-bottom:1px solid #C9CDD6 !important; }
    .card, .rep, .msg, .ask {
      box-shadow:none !important; border:1px solid #C9CDD6 !important;
      break-inside:avoid; page-break-inside:avoid;
    }
    .reps, .msgs, .asks, .home-g, .home-g2, .paywait { display:block !important; }
    .reps > *, .msgs > *, .asks > *, .home-g > *, .home-g2 > * { margin-bottom:10px !important; }
    /* 노출 현황 탭 글자는 인쇄에도 남겨 어느 지면 표인지 알 수 있게 한다 */
    .cptabs .mtabs { display:inline-flex !important; padding:0 !important;
                     border:0 !important; background:none !important; box-shadow:none !important; }
    .cptabs .mtabs button { display:none !important; }
    .cptabs .mtabs button.on { display:inline-flex !important; align-items:center;
                               padding:0 !important; border:0 !important;
                               background:none !important; box-shadow:none !important; }
    .view.vin { animation:none !important; }
    * { text-shadow:none !important; }
  }

/* 요약을 상자 안에 담고 아래 표와는 선 하나로만 갈라 한 상자로 읽히게 한다 */
.exsum {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
/* 카드 수만큼 칸을 박는다(exSection 의 c1·c2·c3) — 둘이면 양 끝에 딱 맞는다 */
.exsum.c1 { grid-template-columns:minmax(0, 1fr); }
.exsum.c3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:1100px) { .exsum.c3 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.exsum:last-child { border-bottom:0; }
/* 카드는 머리·키워드·발 셋으로 나눠 알약 대신 크기·굵기·선으로만 뜻을 싣는다 */
.exsum-i {
  display:flex; flex-direction:column; min-width:0; padding:15px 16px 12px;
  border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line);
}
.exsum-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; }
.exsum-h b { min-width:0; font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.012em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exsum-v { flex:none; font-size:12.5px; font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.exsum-v em { font-style:normal; color:var(--ink-3); }
/* 센 날과 정산 금액은 색 대신 크기와 굵기로 두드러지게 세운다 */
.exsum-i strong { font-size:17px; font-weight:750; color:var(--ink); letter-spacing:-.015em; }
.exsum-v u { text-decoration:none; margin-left:7px; font-weight:650; color:var(--ink-2); }
/* 진행 막대 — 얼마나 찼는가만 말한다. 좋고 나쁨의 색을 안 입힌다 */
.exsum-bar { height:4px; margin:10px 0 4px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.exsum-bar i { display:block; height:100%; border-radius:2px; background:var(--ink-2); }
/* 키워드 목록: 두 칸으로 줄 맞추고 줄마다 얇은 선. 센 날이 0 인 키워드는 한 단 흐리게 */
.exsum-k { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:22px; margin-top:8px; }
.exsum-kr {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0;
  padding:8px 0; border-bottom:1px solid var(--line-2); font-size:13px;
}
.exsum-kn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.exsum-kd { flex:none; font-size:12.5px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; }
/* 키워드별 금액은 오른쪽 끝을 맞추고 부족하면 이름부터 말줄임한다 */
.exsum-kn { flex:1 1 auto; }
.exsum-k.one { grid-template-columns:minmax(0, 1fr); }
.exsum-k.one .exsum-kd { min-width:40px; text-align:right; }
.exsum-k.one .exsum-ka { min-width:96px; }
.exsum-ka { flex:none; min-width:74px; text-align:right; font-size:12.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.exsum-kr.zero .exsum-ka { color:var(--ink-4); font-weight:400; }
/* 상품을 모두 더한 합산 총액 — 카드 격자 한 줄을 통째로 쓴다. 카드와 같은 테두리에 바탕 한 단 */
.exsum-tot {
  grid-column:1 / -1; display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:13px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--hover);
  font-size:13px; font-weight:600; color:var(--ink-2);
}
.exsum-tot em { display:block; margin-top:2px; font-style:normal; font-size:11.5px; font-weight:400; color:var(--ink-4); }
.exsum-tot strong { font-size:18px; }
.exsum-kr.zero .exsum-kn, .exsum-kr.zero .exsum-kd { color:var(--ink-4); font-weight:400; }
.exsum-none { margin-top:10px; font-size:12.5px; color:var(--ink-4); }
/* 발: 정산 예정과 지난 사이클. 목록 밑선 위에 한 토막으로 선다 */
.exsum-f { display:flex; flex-direction:column; gap:3px; margin-top:10px; }
.exsum-fr { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px; font-weight:500; color:var(--ink-3); }
.exsum-fr strong { font-size:15px; }
.exsum-i .exsum-p { font-size:11.5px; font-style:normal; color:var(--ink-4); }
@media (max-width:680px) {
  .exsum, .exsum.c1, .exsum.c3 { grid-template-columns:minmax(0, 1fr); padding:12px; }
  .exsum-k { column-gap:16px; }
}
.extb .exk .excyc { font-size:10.5px; font-style:normal; color:var(--ink-4); margin-left:5px; }
.extb { overflow:auto; max-height:min(60vh,560px); }
/* 날짜 칸은 --exn 으로 받은 수만큼 남는 폭을 나눠 가져 빈 자리가 안 남는다 */
.extb table {
  border-collapse:separate; border-spacing:0; table-layout:fixed;
  width:100%; min-width:calc(302px + var(--exn, 31) * 25px);
}
.extb th, .extb td { padding:0; }
.extb thead th { position:sticky; top:0; z-index:3; background:var(--subtle); box-shadow:inset 0 -1px 0 var(--line); }
/* 키워드 칸은 셋을 인다 — 키워드, 상품, 발행 주소 */
.extb .exk {
  position:sticky; left:0; z-index:2; width:230px; min-width:230px; max-width:230px;
  padding:5px 11px; background:var(--surface); text-align:left; font-size:12.5px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:inset -1px 0 0 var(--line);
}
.extb .exk-n { overflow:hidden; text-overflow:ellipsis; line-height:1.4; }
/* 11.5px 밑으로는 폰에서 못 읽는다 (cmobile 이 그 문턱을 잰다) */
.extb .exk-m {
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; line-height:1.35; color:var(--ink-4); overflow:hidden;
}
.extb .exk-m i { font-style:normal; overflow:hidden; text-overflow:ellipsis; min-width:0; }
/* 키워드와 노출된 글 N 을 한 줄에 두고 글자 크기가 달라 밑줄로 맞춘다 */
.extb .exk-r { display:flex; align-items:baseline; gap:8px; min-width:0; }
.extb .exk-r .exk-n { min-width:0; }
/* 게시글 N 단추 — 위아래 14px 안깃으로 닿는 자리를 키우고 바깥 여백을 당겨 줄 높이는 그대로 둔다 */
.extb .exk-p {
  flex:none; margin:-14px -6px -14px auto; padding:14px 6px; border:0; background:none;
  font:inherit; font-size:11.5px; font-weight:600; color:var(--accent); cursor:pointer; white-space:nowrap;
  position:relative; z-index:1;
}
.extb .exk-p:hover { text-decoration:underline; }
.extb .exk-none { flex:none; margin-left:auto; font-size:11.5px; color:var(--ink-4); }
/* 서랍 안 글 목록 (exPostsDrawer) */
.exp-h { margin:-4px 0 12px; font-size:12.5px; color:var(--ink-3); }
.exp-r { display:flex; align-items:center; gap:10px; flex:none; }
.exp-rk { font-size:12.5px; font-weight:650; color:var(--accent); white-space:nowrap; }
.exp-none { font-size:12px; color:var(--ink-4); white-space:nowrap; }
/* 머리 칸 키워드도 가운데 정렬해 몸통 키워드 줄과 맞춘다 */
.extb thead .exk { z-index:4; background:var(--subtle); text-align:center; }
/* 키워드 줄은 키워드와 노출된 글 N 을 한 덩이로 가운데 세우고 글 줄만 왼쪽에 둔다 */
.extb tr.exkw .exk-r { justify-content:center; }
.extb tr.exkw .exk-p, .extb tr.exkw .exk-none { margin-left:0; }
.extb .exk a { color:var(--ink); text-decoration:none; }
.extb .exk a:hover { color:var(--accent); text-decoration:underline; }
.extb .exc {
  position:sticky; left:230px; z-index:2; width:72px; min-width:72px;
  padding:7px 8px; background:var(--surface); text-align:center;
  font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink-2);
  box-shadow:inset -1px 0 0 var(--line);
}
.extb thead .exc { z-index:4; background:var(--subtle); }
.extb .exc.ok { color:var(--ok); font-weight:700; }
.extb .exd {
  /* 칸 폭을 안 적어 table-layout:fixed 가 남는 폭을 고르게 나눈다 — 붙박이 칸은 제자리를 지킨다 */
  height:34px; text-align:center;
  font-size:11px; font-variant-numeric:tabular-nums; color:var(--ink-3);
  box-shadow:inset 0 -1px 0 var(--line-2), inset -1px 0 0 var(--line-2);
}
.extb thead .exd { color:var(--ink-3); font-weight:600; }
.extb .exd.on { background:var(--ok-bg); color:var(--ok); font-weight:700; }
/* 미노출은 하이픈 대신 회색 짧은 선으로 그려 글꼴마다 안 어긋나게 한다 */
.extb .exd.exno { position:relative; }
.extb .exd.exno::after {
  content:""; position:absolute; left:50%; top:50%; width:10px; height:2px; margin:-1px 0 0 -5px;
  border-radius:1px; background:var(--ink-4); opacity:.4;
}
/* 키워드 줄 날짜 자리는 한 칸으로 합쳐 세로 격자선 없이 비워 둔다 */
.extb .exd.exnone { box-shadow:inset 0 -1px 0 var(--line-2); }
.exft { padding:10px 13px 12px; font-size:12px; color:var(--ink-3); }
/* 잰 날 칸은 색 대신 글자만 진하게 해 안 잰 날과 가른다 */
.extb .exd.vw { color:var(--ink-2); font-weight:600; }
/* 글 줄은 들여 써서 딸린 키워드를 보이고 제목 글자는 한 단 작게 둔다 */
.extb tr.exsub .exk-n { font-size:12px; }
.extb tr.exsub .exk-n a { color:var(--ink-2); }
/* 키워드 묶음은 바탕 한 단·윗선·안내선으로만 갈라 색으로 뜻을 안 싣는다 */
.extb tr.exkw > .exk, .extb tr.exkw > .exc, .extb tr.exkw > .exd { background:var(--hover); height:36px; }
.extb tr.exkw > .exk { box-shadow:inset -1px 0 0 var(--line), inset 0 1px 0 var(--line); }
.extb tr.exkw > .exc { box-shadow:inset -1px 0 0 var(--line), inset 0 1px 0 var(--line); color:var(--ink); font-weight:600; }
.extb tr.exkw > .exd.exnone { box-shadow:inset 0 1px 0 var(--line); }
.extb tr.exgrp + tr.exkw > .exk, .extb tr.exgrp + tr.exkw > .exc { box-shadow:inset -1px 0 0 var(--line); }
.extb tr.exgrp + tr.exkw > .exd.exnone { box-shadow:none; }
.extb tr.exkw .exk-n { font-size:13px; font-weight:650; letter-spacing:-.012em; }
.extb tr.exkw .exk-p { color:var(--ink-3); font-weight:500; }
.extb tr.exkw .exk-p::after { content:" \203A"; }
.extb tr.exkw .exk-p:hover { color:var(--accent); }
.extb tr.exsub > .exk, .extb tr.exsub > .exc { box-shadow:inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line-2); }
.extb tr.exsub > .exk { padding:6px 11px 6px 28px; }
.extb tr.exsub > .exk::before { content:""; position:absolute; left:15px; top:0; bottom:0; width:1px; background:var(--line-3); }
/* 1일차 앞 칸은 흐린 바탕으로 걸려도 이번 사이클 밖임을 보이고 1일차는 왼쪽 선으로 가른다 */
.extb .exd.pre { background:var(--line-2); color:var(--ink-4); font-weight:400; }
.extb .exd.from { box-shadow:inset 2px 0 0 var(--ink-3), inset 0 -1px 0 var(--line-2), inset -1px 0 0 var(--line-2); }
/* 상품 묶음 머리는 붙박이 칸까지 같은 바탕을 칠해 띠 하나로 읽히고 높이는 줄에 준다(칸에 주면 칸 안깃이 더해진다) */
.extb tr.exgrp { height:34px; }
.extb tr.exgrp > * { padding-top:0; padding-bottom:0; background:var(--subtle); box-shadow:inset 0 -1px 0 var(--line); }
.extb tbody + tbody tr.exgrp > * { box-shadow:inset 0 1px 0 var(--line-3), inset 0 -1px 0 var(--line); }
/* 묶음 머리는 flex 로 가운데 맞추고 이름이 길면 그쪽이 말줄임된다 */
.exgrp-h { display:flex; align-items:baseline; justify-content:center; gap:8px; min-width:0; }
.exgrp-h b { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-.016em; }
.exgrp-h span { flex:none; font-size:11.5px; font-weight:500; color:var(--ink-3); }
/* 게시글 조회수 표만 exvtb 로 가려 게시글 칸을 가운데 정렬한다 */
.extb.exvtb .exk { text-align:center; }
.extb.exvtb .exk-m { justify-content:center; }

/* 찍은 화면 — 키워드마다 테두리 상자와 접이 단추를 두고 그림은 위쪽만 잘라 세우며 누르면 새 탭에서 원본을 연다 */
.exsh-k { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); overflow:hidden; }
.exsh-k + .exsh-k { margin-top:10px; }
.exsh-kh {
  display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:0 14px;
  border:0; background:var(--subtle); font:inherit; color:var(--ink); text-align:left; cursor:pointer;
}
.exsh-w { box-shadow:inset 0 1px 0 var(--line); }
.exsh-kh { transition:background-color .15s ease; }
.exsh-kh:hover { background:var(--line); }
.exsh-kh:focus-visible { outline:none; }
/* ▸ ▾ 는 작은 세모 글자라 18px 로 키운다 — 작으면 점만 하게 찍힌다 */
.exsh-kx { flex:none; width:16px; font-size:18px; line-height:1; text-align:center; color:var(--ink-2); transition:transform .22s cubic-bezier(.2,0,0,1); }
.exsh-kh[aria-expanded="false"] .exsh-kx { transform:rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .exsh-kx, .exsh-kh { transition:none; } }
.exsh-kn {
  min-width:0; font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.016em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.exsh-kc { flex:none; margin-left:auto; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.exsh-g { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; padding:12px 14px 14px; }
.exsh-w[hidden] { display:none; }
.exsh-c { display:block; min-width:0; color:inherit; text-decoration:none; }
.exsh-c img {
  display:block; width:100%; height:150px;
  object-fit:cover; object-position:top;
  border:1px solid var(--line); border-radius:8px; background:var(--subtle);
}
.exsh-c:hover img { border-color:var(--line-3); }
.exsh-i { display:block; margin-top:7px; min-width:0; }
.exsh-n {
  display:block; font-size:12.5px; font-weight:640; color:var(--ink); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.exsh-c:hover .exsh-n { text-decoration:underline; }
.exsh-m { display:block; margin-top:2px; font-size:11.5px; color:var(--ink-3); }
@media (max-width:680px) {
  .exsh-g { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; padding:10px 12px 12px; }
  .exsh-kh { padding:0 12px; }
  .exsh-c img { height:120px; }
}

/* 회차 고르개 — 고른 회차는 강조색 바탕으로 갈린다 */
.tabs { display:flex; flex-wrap:wrap; gap:6px; }
.tab {
  display:inline-flex; align-items:center; white-space:nowrap;
  height:29px; padding:0 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); font:inherit; font-size:12.5px; font-weight:600;
  letter-spacing:-.01em; color:var(--ink-3); cursor:pointer;
}
.tab:hover { color:var(--ink); border-color:var(--line-3); }
.tab.on { background:var(--accent-bg); border-color:var(--accent-ln); color:var(--accent-d); font-weight:700; }
.tab:focus-visible { outline:none; box-shadow:none; }
/* 안 보이는 지난 회차를 적는 자리. 단추가 아니므로 단추처럼 그리지 않는다 */
.tabs-note { display:inline-flex; align-items:center; height:29px; font-size:12px; color:var(--ink-3); }

/* 보이는 크기는 그대로 두고 안 보이는 상자로 세로만 넓혀 닿는 자리를 만든다 */
@media (max-width:899px) {
  /* 계단을 올릴 땐 다섯 크기 규칙을 다 적어야 서로 안 덮어쓴다 */
  .btn    { --btn-h:44px; --btn-r:11px; --btn-px:20px; --btn-sv:16px; }
  .btn-xs { --btn-h:29px; --btn-r:8px;  --btn-px:9px;  --btn-sv:13px; }
  .btn-sm { --btn-h:34px; --btn-r:9px;  --btn-px:13px; --btn-sv:14px; }
  .btn-lg { --btn-h:44px; --btn-r:11px; --btn-px:20px; --btn-sv:16px; }
  .btn-xl { --btn-h:52px; --btn-r:13px; --btn-px:26px; --btn-sv:18px; }
  .tab { height:34px; }

  /* 달 고르기는 select 라 가상 요소가 안 그려진다 — 상자 자체를 키운다 */
  .sec-h .exsel { min-height:44px; font-size:16px; padding:6px 10px; }

  /* 닿는 자리를 44px 로 */
  .btn-sm, .btn-xs, .tab, .mtabs button { position:relative; }
  .btn-sm::after, .btn-xs::after, .tab::after, .mtabs button::after {
    content:""; position:absolute; left:0; right:0; top:-6px; bottom:-6px;
  }
  /* 체크 상자는 18px 그대로 두고 닿는 자리만 넓혀 결제 선택이 안 막히게 한다 */
  .paypick-a > input[type="checkbox"], .pw-h > .pw-ck { position:relative; }
  .paypick-a > input[type="checkbox"]::after, .pw-h > .pw-ck::after {
    content:""; position:absolute; left:-13px; right:-13px; top:-13px; bottom:-13px;
  }

  /* 키워드 링크는 칸 여백을 눌리는 자리로 옮겨 줄 높이를 안 늘리고 넓힌다 */
  .extb .exk { padding:2px 11px; }
  /* 줄 안 상자 링크는 폭을 칸에 묶고 안에서 말줄임해 제목이 안 잘려 보인다 */
  .extb .exk a { display:inline-block; padding:13px 0; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:top; }

  /* 폰에서 안 읽히는 작은 글자 가운데 뜻을 지닌 것만 크기를 올린다 */
  .cprk i { font-size:12px; }
  .extb .exk .excyc { font-size:12px; }
  .rep-k { font-size:12px; }
}

/* 상품 카드 — 머리에 이름과 금액(오른쪽 끝), 아래에 키워드 목록을 두고 칸 수는 상자 폭을 나눠 채운다 */
.vcon { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:12px; }
.vcon-i {
  min-width:0; padding:14px 16px 6px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface);
}
@media (max-width:680px)  { .vcon { grid-template-columns:minmax(0, 1fr); } }
.vcon-h {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding-bottom:11px; border-bottom:1px solid var(--line);
}
.vcon-t { display:flex; flex-direction:column; gap:3px; min-width:0; }
.vcon-t b { font-size:14px; font-weight:680; color:var(--ink); line-height:1.35; }
.vcon-t em { font-style:normal; font-size:12px; color:var(--ink-3); }
.vcon-s {
  flex:none; font-size:16px; font-weight:700; color:var(--ink); line-height:1.3;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.vcon-none { font-style:normal; font-size:12.5px; font-weight:500; color:var(--ink-3); }
.vcon-k { display:flex; flex-direction:column; }
.vcon-r {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13px;
}
.vcon-r:last-child { border-bottom:0; }
.vcon-kn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.vcon-kp { flex:none; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.vcon-e { margin:10px 0 8px; font-size:12.5px; color:var(--ink-3); }

/* 운영 캘린더는 날짜·무엇을·어디까지 셋만 보이고 담당자·기한 초과는 안 온다 */
.ocal { display:flex; flex-direction:column; }
.ocal-i {
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--line-2); min-height:44px;
}
.ocal-i:last-child { border-bottom:0; }
.ocal-d {
  flex:0 0 46px; font-size:12.5px; font-weight:650; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.ocal-n {
  flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ocal-s {
  flex:0 0 auto; font-size:12px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-3); background:var(--surface);
}
.ocal-i.run .ocal-s { border-color:var(--accent-ln); background:var(--accent-bg); color:var(--accent-d); }
.ocal-i.done .ocal-d, .ocal-i.done .ocal-n { color:var(--ink-3); }
.ocal-i.done .ocal-s { border-color:var(--ok-ln); background:var(--ok-bg); color:var(--ok); }
@media (max-width:719px) {
  .ocal-i { gap:9px; padding:10px 13px; }
  .ocal-d { flex:0 0 40px; }
}

/* 아래 두 묶음도 두 칸으로 두되 키는 안 맞추고 하나만 있으면 두 칸을 다 쓴다 */
.home-g2 { display:grid; gap:20px; margin-top:26px; }
.home-g2 > .sec { margin-top:0; }
@media (min-width:900px) {
  .home-g2 { grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
  .home-g2 > :last-child:nth-child(odd) { grid-column:1 / -1; }
}

/* 요약 카드가 두 장이면 두 칸이다 */
.sum.sum2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
/* 카드가 한 장뿐이면 폭을 다 써 왼쪽 반에만 붙어 서지 않는다 */
.sum > :only-child { grid-column:1 / -1; }
/* 카드가 **못 센 것**을 그 자리에서 말하는 줄. 값 설명(.sum-d)보다 한 칸 낮고 흐리다 */
.sum-n { margin-top:6px; font-size:11.5px; color:var(--ink-3); line-height:1.45; }
/* 운영 캘린더와 운영 현황 가운데 하나만 서는 팀이 있다. 한 장이면 폭을 다 쓴다 */
.home-g > :only-child { grid-column:1 / -1; }
/* 발행 내역의 묶음 머리. 상품마다 상자를 세우지 않고 한 카드 안에서 줄로 가른다 */
.pubg { background:var(--subtle); }
.pubg .li-t { font-weight:700; letter-spacing:-.02em; }
.pubg .li-r { font-size:12.5px; color:var(--ink-3); }

/* ══ 현황 화면 ══ */

/* 회차 고르개를 상자에 담아 아래 카드에 딸린 줄임을 보이게 한다 */
.tbox {
  background:var(--surface); border-radius:14px; padding:10px 12px; margin-bottom:12px;
  box-shadow:0 0 0 1px rgba(14,16,25,.045), 0 1px 2px rgba(14,16,25,.03);
}

/* 요약 카드 속은 위에서부터 쌓는다 */
.sum-i { display:flex; flex-direction:column; }

/* 상품 줄은 값과 꺾쇠를 한 줄에 둔다 */
.prod-r { flex-direction:row; align-items:center; gap:10px; }
.prod-more { color:var(--ink-4); }

/* 회차 고르개 상자는 위 요약 카드와 띄운다 */
.tbox { margin-top:14px; }

/* 노출 현황에서 자른 나머지로 들어가는 줄. 목록 마지막에 붙으므로 위만 선으로 가른다 */
.cpmore {
  display:block; width:100%; padding:12px 16px; border:0; border-top:1px solid var(--line-2);
  background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-3);
  cursor:pointer; text-align:center; transition:background .12s, color .12s;
}
.cpmore:hover { background:var(--hover); color:var(--accent); }

/* 묶음 이름과 내용을 한 상자에 담고 안 카드는 배경·그림자를 벗어 겹쳐 안 보이게 한다 */
.sec.box {
  background:var(--surface); border-radius:16px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(14,16,25,.045), 0 1px 2px rgba(14,16,25,.04),
             0 10px 26px -14px rgba(14,16,25,.18);
}
.sec.box > .sec-h { margin:0; padding:15px 18px 12px; }
.sec.box > .sec-h h2 { font-size:15px; font-weight:700; letter-spacing:-.024em; }
.sec.box > .card { background:none; box-shadow:none; border-radius:0; }
.sec.box > .card + .card { margin-top:0; }
.sec.box .cpnote { margin:0; padding:0 18px 14px; }
/* 빈 상태 글은 머리줄 높이를 셈에 넣어 상자 전체의 한가운데에 맞춘다 */
.sec.box { --sec-head-h:51px; }   /* 머리줄 높이: 위 15 + 제목 한 줄 24(15px×1.6) + 아래 12 */
.sec.box > .card > .empty {
  padding-top:34px;
  padding-bottom:calc(34px + var(--sec-head-h));
}

/* 탭 줄 높이를 한 곳에만 적어 두 규칙이 같이 써야 빈 글 위치가 안 어긋난다 */
.sec.box.cpbox { --cptab-h:49px; --sec-head-h:calc(51px + var(--cptab-h)); }
@media (max-width:899px) { .sec.box.cpbox { --cptab-h:54px; } }
.cptabs { height:var(--cptab-h); }
/* ══ 요식업 첫 화면 — 계약 상품, 운영 현황, 노출 현황 ══ */
/* 월 마케팅 비용 카드. 품목 합계는 그은 채 한 줄, 실 집행 비용은 그 밑에 크게 선다 */
.fmon-r {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line-2); font-size:13px; color:var(--ink-2);
}
.fmon-r b { font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; }
.fmon-r s { font-weight:600; color:var(--ink-4); font-variant-numeric:tabular-nums; text-decoration-thickness:1.5px; }
.fmon-t { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:13px 0 12px; }
.fmon-t span { font-size:13px; font-weight:600; color:var(--ink-2); }
.fmon-t strong { font-size:21px; font-weight:750; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
/* 운영 현황 두 칸 — 계약 상품 줄과 리포트 줄은 같은 높이의 줄로 맞춘다 */
.exsum.fops { align-items:start; }
.fops .exsum-h { padding-bottom:10px; border-bottom:1px solid var(--line); }
.fop { border-bottom:1px solid var(--line-2); }
.fop:last-child { border-bottom:0; }
.fop-h {
  display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:9px 2px;
  border:0; background:none; font:inherit; color:inherit; text-align:left;
}
button.fop-h { cursor:pointer; }
button.fop-h:hover .fop-t b { color:var(--accent); }
.fop-t { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.fop-t b { font-size:13.5px; font-weight:650; color:var(--ink); letter-spacing:-.014em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fop-t em { font-style:normal; font-size:12px; color:var(--ink-3); }
.fop-v { flex:none; font-size:13.5px; font-weight:650; color:var(--ink); white-space:nowrap; }
.fop-x { flex:none; width:16px; display:grid; place-items:center; color:var(--ink-4); }
.fop-x svg { width:13px; height:13px; stroke-width:2.2; }
button.fop-h:hover .fop-x { color:var(--accent); }
/* 실행 내역 창 — 발행일, 제목, 링크 세 칸의 목록이고 줄이 많으면 창 몸만 굴린다 */
.modal.wide { max-width:600px; }
.frun { display:flex; flex-direction:column; }
.frun-r {
  display:grid; grid-template-columns:62px minmax(0, 1fr) auto; gap:4px 14px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line-2); font-size:13.5px;
}
.frun-r:last-child { border-bottom:0; }
.frun-d { font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.frun-t { min-width:0; color:var(--ink); line-height:1.55; overflow-wrap:anywhere; }
.frun-t .bdg { margin-left:8px; vertical-align:1px; }
.frun-d.none, .frun-t.none { color:var(--ink-4); }
.frun-l {
  justify-self:end; max-width:200px; padding:0; border:0; background:none; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
a.frun-l:hover, button.frun-l:hover { text-decoration:underline; }
.frun-none { padding:4px 0 2px; font-size:13.5px; color:var(--ink-3); }
@media (max-width:640px) {
  .frun-r { grid-template-columns:minmax(0, 1fr) auto; }
  .frun-d { grid-column:1; grid-row:1; }
  /* 닿는 자리는 위아래 안쪽 여백으로 넓히고 바깥 여백으로 되갚아 줄 높이는 그대로 둔다 */
  .frun-l { grid-column:2; grid-row:1; padding:12px 0; margin:-12px 0; }
  .frun-t { grid-column:1 / -1; grid-row:2; }
}
/* 메시지 수신함 — 노출 현황 표 폭이고 몸은 줄 대여섯 개 높이에서 세로로 굴린다 */
.fmsg > .sec-h.in { align-items:center; }
.fmsg .mtabs { margin-left:auto; }
.fmsg-b {
  height:340px; overflow-y:auto; overscroll-behavior:contain;
  margin-top:12px; border-top:1px solid var(--line);
}
.fmsg-i {
  position:relative; display:flex; align-items:flex-start; gap:14px;
  width:100%; padding:12px 18px; border:0; border-bottom:1px solid var(--line-2);
  background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; transition:background .1s ease;
}
.fmsg-i:hover { background:var(--hover); }
/* 안 읽은 줄은 날짜 앞 점과 굵은 글자로 가른다 */
.fmsg-i.new::before {
  content:""; position:absolute; left:7px; top:20px; width:6px; height:6px; border-radius:50%; background:var(--danger);
}
.fmsg-d { flex:0 0 62px; font-size:12.5px; line-height:21px; color:var(--ink-3); white-space:nowrap; }
.fmsg-t {
  flex:1 1 auto; min-width:0; font-size:13.5px; line-height:21px; color:var(--ink-2); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.fmsg-i.new .fmsg-d { color:var(--ink); font-weight:650; }
.fmsg-i.new .fmsg-t { color:var(--ink); font-weight:650; }
.fmsg-none { display:grid; place-items:center; height:100%; font-size:13.5px; color:var(--ink-3); }
.card-p > .fmsg-none { display:block; height:auto; }
@media (max-width:640px) {
  .fmsg-b { height:320px; }
  .fmsg-i { gap:12px; padding:12px 15px; }
  .fmsg-d { flex-basis:52px; }
  .fmsg-i.new::before { left:5px; }
}
@media print {
  .fmsg-b { height:auto; overflow:visible; }
}
/* 리포트 줄 — 이름, 발행일, 안 읽음·읽음 */
.frp {
  display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:9px 2px;
  border:0; border-bottom:1px solid var(--line-2); background:none; font:inherit; color:inherit; text-align:left;
}
.frp:last-child { border-bottom:0; }
button.frp { cursor:pointer; }
button.frp:hover .frp-n { color:var(--accent); }
.frp-n { flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:650; color:var(--ink); letter-spacing:-.014em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frp-d { flex:none; font-size:12px; color:var(--ink-3); }
.frp-s {
  flex:none; min-width:52px; text-align:center; font-size:11.5px; font-weight:650; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-3); background:var(--surface);
}
.frp-s.new { border-color:var(--accent-ln); background:var(--accent-bg); color:var(--accent-d); }
.frp.off .frp-n { color:var(--ink-4); font-weight:500; }
/* 노출 현황 표는 머리줄 바로 밑에서 선 하나로 갈라 시작한다 */
.sec-h.in + .extb { margin-top:12px; border-top:1px solid var(--line); }