/* ===================== SAGUO 공통 스타일 ===================== */
:root{
  --indigo:#111; --violet:#111; --indigo-dark:#000;
  --bg:#F2F2F2; --card:#ffffff; --ink:#0a0a0a; --muted:#6b6b6b;
  --line:#e4e4e4; --soft:#ececec;
  --red:#111; --green:#2f2f2f; --amber:#7a5b00; --blue:#111;
  --shadow:0 8px 30px rgba(0,0,0,.07);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --radius:12px; --radius-sm:9px;
  --grad:#111;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Pretendard','Pretendard Variable','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
::selection{background:#000;color:#F2F2F2}
button{font-family:inherit}
a{color:inherit}
.hidden{display:none !important}

/* ---- 모바일 앱 컨테이너 ---- */
.app{max-width:480px; margin:0 auto; min-height:100vh; background:var(--bg);
  position:relative; display:flex; flex-direction:column;
  box-shadow:0 0 60px rgba(24,25,45,.06);}
@media(min-width:520px){ .app{min-height:100dvh} }

/* ---- 상단바 ---- */
.appbar{position:sticky; top:0; z-index:30; padding:calc(12px + var(--safe-top)) 18px 12px;
  background:#F2F2F2; color:#000; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--line);}
.appbar .logo{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:#111; color:#fff; font-weight:800; font-size:17px;}
.appbar h1{font-size:16px; margin:0; font-weight:800; letter-spacing:-.2px}
.appbar .sub{font-size:11px; opacity:.5; margin-top:1px; letter-spacing:.02em; text-transform:uppercase}
.appbar .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.iconbtn{position:relative;width:38px;height:38px;border:none;background:transparent;color:#000;
  border-radius:10px; display:grid; place-items:center; cursor:pointer; font-size:18px}
.iconbtn:active{transform:scale(.94)}
.ic-badge{position:absolute;top:0;right:0}
.ic-badge .badge{min-width:16px;height:16px;font-size:10px;padding:0 4px;box-shadow:0 0 0 2px #F2F2F2}
.iconbtn.active{background:var(--soft)}

/* ---- 본문 ---- */
.screen{flex:1; padding:16px 16px 96px; }
.section-title{font-size:13px; font-weight:700; color:var(--muted); margin:18px 4px 10px; letter-spacing:.2px}
.section-title:first-child{margin-top:4px}
.page-title{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--ink);margin:2px 2px 14px}

/* ---- 카드 ---- */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:16px; border:1px solid var(--line);}
.card + .card{margin-top:12px}
.list .card{margin-bottom:12px}

/* ---- 공지 카드 ---- */
.ann{position:relative; cursor:pointer; transition:transform .08s}
.ann:active{transform:scale(.99)}
.ann .top{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.ann h3{font-size:16px; margin:0; font-weight:700; flex:1; line-height:1.35}
.ann .body{font-size:14px; color:#3c3f52; margin:4px 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ann .meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted)}
.dot-unread{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;box-shadow:0 0 0 4px rgba(0,0,0,.10)}

/* ---- 칩/뱃지 ---- */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--indigo-dark)}
.chip.gray{background:#eef0f4;color:#5b6070}
.chip.pin{background:#111;color:#fff}
.chip.read{background:#e8e8e8;color:#3a3a3a}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;
  font-size:11px;font-weight:800;display:inline-grid;place-items:center}

/* ---- 버튼 ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:none;border-radius:10px;padding:14px 16px;font-size:15px;font-weight:700;cursor:pointer;
  background:var(--grad);color:#fff;box-shadow:none; transition:transform .08s, opacity .2s}
.btn:active{transform:translateY(1px) scale(.995)}
.btn:disabled{opacity:.55;cursor:default}
.btn.secondary{background:var(--soft);color:var(--indigo-dark);box-shadow:none;border:1px solid var(--line)}
.btn.ghost{background:transparent;color:var(--indigo);box-shadow:none}
.btn.danger{background:#fff;color:var(--red);border:1px solid #fad6df;box-shadow:none}
.btn.small{width:auto;padding:9px 14px;font-size:13px;border-radius:11px}
.btn.block{width:100%}
.btn-row{display:flex;gap:10px}
.btn-row .btn{width:100%}

/* ---- 입력 ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:#41435a;margin:0 2px 6px}
.input,.textarea,select.input{width:100%;border:1px solid var(--line);background:#fbfbfe;border-radius:13px;
  padding:13px 14px;font-size:15px;color:var(--ink);outline:none;transition:border .15s, box-shadow .15s}
.input:focus,.textarea:focus,select.input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(0,0,0,.10);background:#fff}
.textarea{min-height:120px;resize:vertical;line-height:1.55}
.row2{display:flex;gap:10px}
.row2 > *{flex:1}
.hint{font-size:12px;color:var(--muted);margin:6px 2px 0}
.form-divider{height:1px;background:var(--line);margin:18px 0}
.consent{display:flex;align-items:center;gap:9px;font-size:13px;color:#41435a;margin:2px 2px 14px;cursor:pointer}
.consent input{width:18px;height:18px;flex:none;accent-color:#111}
.consent a{color:var(--ink);text-decoration:underline}

/* ---- 하단 탭바 ---- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;z-index:40;
  display:flex;background:#fff;border-top:1px solid var(--line);overflow:visible;
  padding:8px 8px calc(8px + var(--safe-bottom));}
.tab{flex:1;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 0;color:var(--muted);font-size:10px;font-weight:600;position:relative}
.tab svg{width:21px;height:21px}
.tab.active{color:var(--indigo)}
.tab .tabbadge{position:absolute;top:-2px;right:50%;margin-right:-22px}
.tab-home{color:var(--muted)}
.tab-home.active{color:var(--ink)}
.tab-home .home-circle{width:46px;height:46px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;margin-top:-22px;margin-bottom:1px;box-shadow:0 5px 14px rgba(0,0,0,.30)}
.tab-home .home-circle svg{width:23px;height:23px}
.tab-home:active .home-circle{transform:scale(.94)}

/* ---- 캘린더 ---- */
.cal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:14px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head b{font-size:16px}
.cal-head .nav{display:flex;gap:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-grid .dow{text-align:center;font-size:11px;color:var(--muted);font-weight:700;padding:4px 0}
.cal-cell{aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:13px;cursor:pointer;position:relative;color:#2b2d40}
.cal-cell.muted{color:#c3c6d4}
.cal-cell.today{background:var(--soft);font-weight:800;color:var(--indigo-dark)}
.cal-cell.selected{background:var(--grad);color:#fff;font-weight:800}
.cal-cell .ev{position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--violet)}
.cal-cell.selected .ev{background:#fff}
.cal-cell.sun{color:#0a0a0a}
.cal-cell.selected.sun{color:#fff}

/* ---- 일정 항목 ---- */
.sch{display:flex;gap:12px;align-items:stretch}
.sch .when{flex:none;width:54px;text-align:center;background:var(--soft);border-radius:12px;padding:8px 4px}
.sch .when .d{font-size:18px;font-weight:800;color:var(--indigo-dark);line-height:1}
.sch .when .mo{font-size:11px;color:var(--muted);margin-top:2px}
.sch .info{flex:1}
.sch .info h4{margin:0 0 4px;font-size:15px}
.sch .info .line{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-top:3px}

/* ---- 시트/모달 ---- */
.overlay{position:fixed;inset:0;background:rgba(15,16,32,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.show{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:480px;background:var(--card);border-radius:22px 22px 0 0;padding:8px 18px calc(22px + var(--safe-bottom));
  max-height:88vh;overflow:auto;transform:translateY(20px);transition:transform .25s}
.overlay.show .sheet{transform:translateY(0)}
.sheet .grab{width:42px;height:5px;border-radius:3px;background:#dcdee8;margin:8px auto 14px}
.sheet h2{font-size:19px;margin:2px 0 4px}
.sheet .sheet-meta{font-size:12px;color:var(--muted);margin-bottom:14px}
.sheet .content{font-size:15px;line-height:1.65;color:#2c2e40;white-space:pre-wrap;word-break:break-word}

/* ---- 토스트 ---- */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(12px);z-index:90;
  background:#16172b;color:#fff;padding:12px 18px;border-radius:13px;font-size:14px;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.25s;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#9f1239}
.toast.ok{background:#065f46}

/* ---- 빈 상태 ---- */
.empty{text-align:center;color:var(--muted);padding:48px 20px}
.empty .ico{font-size:40px;margin-bottom:10px;opacity:.5}
.empty p{font-size:14px;margin:4px 0}

/* ---- 인증 화면 ---- */
.auth{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:28px 22px calc(28px + var(--safe-bottom));max-width:480px;margin:0 auto;background:var(--bg)}
.auth .brand{text-align:center;margin-bottom:26px}
.auth .brand .mark{width:72px;height:72px;border-radius:20px;background:var(--grad);display:grid;place-items:center;
  font-size:38px;font-weight:800;color:#fff;margin:0 auto 14px;box-shadow:0 12px 30px rgba(79,70,229,.35)}
.auth .brand h1{font-size:22px;margin:0;font-weight:800}
.auth .brand p{color:var(--muted);font-size:14px;margin:6px 0 0}
.auth .switch{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}
.auth .switch a{color:var(--indigo);font-weight:700;cursor:pointer;text-decoration:none}
.demo-box{margin-top:18px;background:#ececec;border:1px dashed #cfcfcf;border-radius:10px;padding:12px 14px;font-size:12.5px;color:#555}
.demo-box b{color:#000}
.pending-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;max-width:480px;margin:0 auto}
.pending-screen .ico{font-size:54px;margin-bottom:14px}

/* ---- 헤더 카드(홈) ---- */
.hero{background:var(--grad);color:#fff;border-radius:var(--radius);padding:20px;box-shadow:none;margin-bottom:6px}
.hero .hi{font-size:14px;opacity:.9}
.hero .name{font-size:22px;font-weight:800;margin:2px 0 12px}
.hero .stats{display:flex;gap:10px}
.hero .stat{flex:1;background:rgba(255,255,255,.16);border-radius:14px;padding:12px}
.hero .stat .n{font-size:22px;font-weight:800;line-height:1}
.hero .stat .l{font-size:12px;opacity:.9;margin-top:4px}

/* ---- 토글 ---- */
.toggle{width:48px;height:28px;border-radius:999px;background:#d7d9e6;position:relative;cursor:pointer;transition:.2s;border:none;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.on{background:var(--indigo)}
.toggle.on::after{left:23px}
.setting-row{display:flex;align-items:center;gap:12px;padding:14px 2px}
.setting-row .t{flex:1}
.setting-row .t b{font-size:15px;display:block}
.setting-row .t small{color:var(--muted);font-size:12.5px}

/* ===================== 관리자 콘솔 ===================== */
.admin-wrap{max-width:1080px;margin:0 auto;padding:0 0 60px}
.admin-top{background:var(--grad);color:#fff;padding:18px 24px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}
.admin-top .logo{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:800;font-size:19px}
.admin-top h1{font-size:18px;margin:0;font-weight:800}
.admin-top .sub{font-size:12px;opacity:.85}
.admin-top .right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px}
.admin-nav{display:flex;gap:4px;padding:0 16px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;overflow-x:auto}
.admin-nav button{border:none;background:none;padding:15px 16px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.admin-nav button.active{color:var(--indigo);border-bottom-color:var(--indigo)}
.admin-body{padding:22px 16px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:8px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.stat-card .n{font-size:30px;font-weight:800;color:var(--indigo-dark)}
.stat-card .l{font-size:13px;color:var(--muted);margin-top:4px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:16px;margin:0}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:12px;color:var(--muted);font-weight:700;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfe}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table .actions{display:flex;gap:6px;justify-content:flex-end}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill.green{background:#e7f6ef;color:var(--green)} .pill.amber{background:#fef3e2;color:var(--amber)}
.pill.red{background:#fde8ee;color:var(--red)} .pill.gray{background:#eef0f4;color:#5b6070}
.pill.indigo{background:var(--soft);color:var(--indigo-dark)}
.mini{padding:7px 12px;font-size:13px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:600;color:var(--ink)}
.mini:hover{background:var(--soft)}
.mini.primary{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.mini.green{background:var(--green);color:#fff;border-color:var(--green)}
.mini.red{background:#fff;color:var(--red);border-color:#fad6df}
.read-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--soft);font-size:14px}
.read-row:last-child{border:none}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.bar{height:8px;border-radius:999px;background:var(--soft);overflow:hidden;margin-top:6px}
.bar > i{display:block;height:100%;background:var(--grad);border-radius:999px}
@media(max-width:640px){
  .admin-body{padding:16px 10px}
  .table th:nth-child(3),.table td:nth-child(3){display:none}
}
.modal-card{width:100%;max-width:560px;background:var(--card);border-radius:20px;padding:22px;max-height:90vh;overflow:auto;align-self:center;transform:translateY(20px);transition:transform .25s}
.overlay.center{align-items:center}
.overlay.show .modal-card{transform:translateY(0)}
.modal-card h2{margin:0 0 16px;font-size:18px}
.field-inline{display:flex;gap:10px}
.field-inline > *{flex:1}
.tag-select{display:flex;flex-wrap:wrap;gap:8px}
.tag-opt{padding:8px 14px;border-radius:11px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;font-weight:600}
.tag-opt.sel{background:var(--soft);border-color:var(--indigo);color:var(--indigo-dark)}

/* ===================== 진입 랜딩(스플래시) — saguo.co.kr 모션 ===================== */
.landing{position:fixed;inset:0;z-index:9999;background:#F2F2F2;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;user-select:none}
.landing .l-ring{position:absolute;top:50%;left:50%;width:18vw;height:18vw;min-width:150px;min-height:150px;border-radius:50%;border:1px solid rgba(0,0,0,.18);opacity:0;animation:l-ring 3.2s ease-out infinite}
@keyframes l-ring{0%{transform:translate(-50%,-50%) scale(.4);opacity:.35}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}
.landing .l-hline{position:absolute;top:50%;height:1px;background:rgba(0,0,0,.12);transform:scaleX(0);width:calc(50% - 26vw);animation:l-hline .9s cubic-bezier(.7,0,.2,1) forwards, l-line-breathe 3.6s ease-in-out infinite;animation-delay:1s, 2s}
.landing .l-hline.l{left:0;transform-origin:right center}
.landing .l-hline.r{right:0;transform-origin:left center}
@keyframes l-hline{to{transform:scaleX(1)}}
@keyframes l-line-breathe{0%,100%{opacity:1}50%{opacity:.3}}
.landing .l-scan{position:absolute;top:0;bottom:0;width:1px;left:0;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 60%,transparent 100%);animation:l-scan 4s linear infinite;animation-delay:1.6s}
@keyframes l-scan{0%{left:-1px;opacity:0}4%{opacity:.7}96%{opacity:.7}100%{left:100%;opacity:0}}
.landing .l-mark{position:relative;display:inline-flex}
.landing .l-mark .l-br{position:absolute;width:16px;height:16px;opacity:0;animation:l-br .4s ease forwards}
.landing .l-mark .l-br.tl{top:-16px;left:-16px;border-top:1px solid #000;border-left:1px solid #000;animation-delay:1.1s}
.landing .l-mark .l-br.tr{top:-16px;right:-16px;border-top:1px solid #000;border-right:1px solid #000;animation-delay:1.2s}
.landing .l-mark .l-br.bl{bottom:-16px;left:-16px;border-bottom:1px solid #000;border-left:1px solid #000;animation-delay:1.3s}
.landing .l-mark .l-br.brr{bottom:-16px;right:-16px;border-bottom:1px solid #000;border-right:1px solid #000;animation-delay:1.4s}
@keyframes l-br{to{opacity:1}}
.landing .l-logo{display:block;width:clamp(170px,50vw,300px);height:auto;opacity:0;pointer-events:none;animation:l-fade .8s ease forwards;animation-delay:.3s}
.landing .l-wm{font-family:'Arial Black','Helvetica Neue',Arial,sans-serif;font-weight:900;font-size:clamp(40px,12vw,74px);letter-spacing:-2px;color:#111;line-height:1;opacity:0;animation:l-fade .8s ease forwards;animation-delay:.3s}
@keyframes l-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.landing .l-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:#000;opacity:0}
@keyframes l-appear{to{opacity:1}}
@keyframes l-float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(var(--dx,0),var(--dy,0)) scale(1.25)}100%{transform:translate(0,0) scale(1)}}
.page-wipe{position:fixed;inset:0;pointer-events:none;z-index:10000}
.page-wipe .slab{position:absolute;left:0;right:0;height:calc(50% + 1px);background:#000;transition:transform .55s cubic-bezier(.7,0,.2,1);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.page-wipe .slab.top{top:0;transform:translateY(-100%)}
.page-wipe .slab.bottom{bottom:0;transform:translateY(100%)}
.page-wipe.closing .slab.top,.page-wipe.closing .slab.bottom{transform:translateY(0)}
.page-wipe.opening .slab.top{transform:translateY(-100%);transition-delay:.12s}
.page-wipe.opening .slab.bottom{transform:translateY(100%);transition-delay:.12s}
@media(prefers-reduced-motion:reduce){.landing .l-ring,.landing .l-scan{animation:none;opacity:0}.landing .l-logo,.landing .l-wm,.landing .l-br,.landing .l-dot,.landing .l-hline{animation-duration:.01ms}}

/* ===================== 로고 이미지 (logo.png 있을 때 사용) ===================== */
.brand-logo{height:42px;width:auto;display:block;margin:0 auto 16px}
.ab-left{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start}
.ab-center{flex:0 0 auto;display:flex;align-items:center}
.ab-right{flex:1;display:flex;align-items:center;justify-content:flex-end}
.appbar-logo{height:20px;width:auto;display:block;filter:brightness(0)}
.ab-fallback{font-family:'Arial Black','Helvetica Neue',Arial,sans-serif;font-weight:900;font-size:18px;letter-spacing:-1px;color:#000}

/* ===================== 매니저톡 / 마이페이지 ===================== */
.talk-head{display:flex;align-items:center;justify-content:center;gap:8px;padding:2px 0 14px;color:var(--muted);font-size:12px}
.talk-head b{color:var(--ink);font-size:13px}
.talk-day{text-align:center;font-size:11px;color:var(--muted);margin:12px 0 8px}
.talk-msgs{display:flex;flex-direction:column;gap:8px;padding-bottom:150px}
.bubble-row{display:flex;flex-direction:column;gap:3px}
.bubble{max-width:78%;padding:10px 13px;border-radius:15px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.bubble.me{background:#111;color:#fff;border-bottom-right-radius:5px}
.bubble.them{background:#fff;color:#111;border:1px solid var(--line);border-bottom-left-radius:5px}
.bubble-time{font-size:10px;color:var(--muted);padding:0 4px}
.composer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(70px + var(--safe-bottom));width:100%;max-width:480px;z-index:45;display:flex;gap:8px;padding:8px 12px;background:#F2F2F2;border-top:1px solid var(--line)}
.composer .input{flex:1}
.composer .btn{width:auto;padding:0 18px;border-radius:10px}
.info-row{display:flex;justify-content:space-between;gap:12px;padding:13px 2px;border-bottom:1px solid var(--soft);font-size:14px}
.info-row:last-child{border:none}
.info-row .k{color:var(--muted)}
.info-row .v{font-weight:600;text-align:right;word-break:break-all}
.thread{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.thread:hover{background:var(--soft)}
.thread:last-child{border:none}
.thread-last{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.th-msgs{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding:10px;background:var(--bg);border-radius:10px}

/* ===================== 마이페이지 계약/정산/피드백 ===================== */
.row-card{display:flex;align-items:center;gap:12px;cursor:pointer}
.row-card .sub-line{font-size:12.5px;color:var(--muted);margin-top:3px}
.row-card .chev{color:var(--muted);font-size:20px}
.feedback-snip{font-size:13px;color:var(--muted);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.stat-mini{flex:1;background:var(--soft);border-radius:10px;padding:12px}
.stat-mini .n{font-size:17px;font-weight:800}
.stat-mini .l{font-size:11px;color:var(--muted);margin-top:3px}
.settle-list{display:flex;flex-direction:column}
.settle-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:13px 2px;border-bottom:1px solid var(--soft)}
.settle-row:last-child{border:none}
.mm-row{display:grid;grid-template-columns:1.2fr 1.5fr 1.1fr 1fr auto;gap:6px;align-items:center;margin-bottom:8px}
.mm-row .input{padding:9px 10px;font-size:13px}
.mm-row .mm-del{padding:8px 11px}
@media(max-width:560px){.mm-row{grid-template-columns:1fr 1fr}.mm-row .mm-del{grid-column:2;justify-self:end}}
.fb-row{display:grid;grid-template-columns:1.2fr 2.6fr auto;gap:6px;align-items:center;margin-bottom:8px}
.fb-row .input{padding:9px 10px;font-size:13px}
.tg-art{display:inline-flex;align-items:center;gap:6px;margin:4px 10px 4px 0;font-size:13px;cursor:pointer}
.tg-art input{width:16px;height:16px;accent-color:#111}