/* =====================================================================
   층층 공통 디자인 (cc-theme.css)
   - 모든 화면이 공유하는 토큰·기본값·부품. 화면별 CSS는 각 HTML 안에 짧게.
   - 기준: _redesign/DESIGN_BRIEF.md 3장, _redesign/design-boards/*.dc.html
   - 규칙(3-2): 색은 남색(버튼·금액·선택)·주황(혜택)만. 탭·면적·층 선택은
     글자+얇은 밑줄(border-bottom, box-shadow 금지). 기본 스크롤바 숨김.
     누를 때 테두리 박스 없음(키보드 포커스만 :focus-visible). 터치 44px 이상.

   부품 목록 (클래스)
   레이아웃  .app .appbar(.appbar-title .appbar-sub .icon-btn) .sec .sec-title
             .layer(.layer-head .layer-body .layer-foot) .bottom-bar .stack-*
   글자      .t-sub .t-muted .t-ink2 .t-navy .t-accent .t-good .b .num .ellipsis
   버튼      .btn + .btn-primary/.btn-outline/.btn-soft/.btn-ghost/.btn-dashed
             크기 .btn-sm/.btn-lg, 폭 .btn-block
   선택      .chip(.on) 연한 선택 · .chip-solid(.on) 남색 채움(메인 필터 칩만)
             .utabs>.utab(.on) 칸 탭 · .uline>.uline-item(.on) 한 줄 밑줄 선택
             .hx 가로로 미는 줄(스크롤바 없음, 마우스 끌기 = cc-ui.js)
   표시      .badge(.badge-stage .badge-benefit .badge-photo .badge-soft .badge-accent)
             .benefit-band(.is-empty) .avatar(.av-42/44/60/72) .kv(.kv-row)
             .list-row .card .card-line .empty .skeleton .divider
   입력      .field .field-label .input .textarea .select .check .seg
   알림      .toast .snack .sheet(.sheet-panel .sheet-handle) .modal(.modal-panel)
   스크롤    .sb-thumb (cc-ui.js가 세로 스크롤 중에만 보여 줌)
   ===================================================================== */

:root{
  --ink:#17202E; --ink-2:#3E4A5C; --sub:#5E6878; --muted:#8A93A3;
  --line:#E6E8EC; --line-2:#ECEEF2; --line-3:#F0F2F5;
  --ground:#F2F3F6; --surface:#FFFFFF;
  --navy:#1B3A5C; --navy-soft:#EAF0F6; --navy-deep:#122A44;   /* 버튼·금액·선택 */
  --accent:#E4572E; --accent-text:#B8431F; --accent-soft:#FDF0EB; /* 혜택 전용 */
  --accent-text-2:#D04A23; --accent-on-dark:#FFD8CB;
  --good:#16834C; --good-soft:#E7F4EC;
  --logo-red:#E0352B; --logo-blue:#1F5BD8;                       /* '층층' 로고에만 */
  /* 시안에서 반복되는 보조 회색 */
  --ctl-line:#D5D9E0;   /* 칩·입력 테두리 */
  --card-line:#E1E5EA;  /* 카드 테두리 */
  --btn-line:#C9D3DF;   /* 테두리 버튼 */
  --soft:#F4F6F9;       /* 옅은 패널 */
  --soft-2:#F7F8FA;
  --avatar-line:#DCE3EC; --avatar-bg:#F1F4F8; --avatar-fg:#D5DCE5;
  --thumb:#9AA4B2;
  --photo-badge:rgba(16,26,42,.72);
  --scrim:rgba(16,26,42,.35); --scrim-strong:rgba(16,26,42,.55);
  --r-card:18px; --r-ctl:12px; --r-pill:999px;
  --font:'IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --app-w:480px;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:only light;
}

/* ---------- 기본값 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;scrollbar-width:none;-ms-overflow-style:none;background:var(--ground)}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:default}
input,textarea,select{font:inherit;color:var(--ink)}
:focus{outline:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 글자 도우미 ---------- */
.t-sub{color:var(--sub)} .t-muted{color:var(--muted)} .t-ink2{color:var(--ink-2)}
.t-navy{color:var(--navy)} .t-accent{color:var(--accent-text)} .t-good{color:var(--good)}
.b{font-weight:700} .sb{font-weight:600} .num{font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.logo{font-size:21px;font-weight:700;letter-spacing:-.5px;white-space:nowrap;line-height:1}
.logo .r{color:var(--logo-red)} .logo .l{color:var(--logo-blue)}

/* ---------- 레이아웃 ---------- */
.app{position:relative;max-width:var(--app-w);margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--ground)}
.app.is-white{background:var(--surface)}
.appbar{position:sticky;top:0;z-index:40;height:60px;display:flex;align-items:center;gap:2px;
  padding:0 16px 0 6px;background:var(--surface);border-bottom:1px solid var(--line-2)}
.appbar.with-logo{padding:0 12px 0 16px;justify-content:space-between;gap:8px}
.appbar-title{font-size:17px;font-weight:700;line-height:1.3}
.appbar-titles{display:flex;flex-direction:column;min-width:0}
.appbar-titles .appbar-title{font-size:16px}
.appbar-sub{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-end{margin-left:auto;display:flex;align-items:center;gap:14px}
.appbar-link{font-size:13px;font-weight:600;color:var(--navy);min-height:44px;display:inline-flex;align-items:center}
.appbar-link.is-quiet{color:var(--sub)}
.icon-btn{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);border-radius:999px}
.icon-btn svg{width:20px;height:20px}
.main{padding-bottom:calc(28px + var(--safe-b))}
.sec{background:var(--surface);padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.sec + .sec,.sec.gap-top{margin-top:10px}
.sec-title{font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.35}
.sec-title.lg{font-size:18px;letter-spacing:-.3px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sec-head .more{font-size:13px;font-weight:600;color:var(--navy);min-height:32px;display:inline-flex;align-items:center}
.sec-note{font-size:12.5px;line-height:1.5;color:var(--sub)}
.pad{padding:0 16px}
.stack-4{display:flex;flex-direction:column;gap:4px} .stack-8{display:flex;flex-direction:column;gap:8px}
.stack-12{display:flex;flex-direction:column;gap:12px} .stack-16{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:8px} .row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.divider{height:1px;background:var(--line-2);border:0;margin:0}

/* 카드(흰 바탕 + 얇은 테두리) */
.card{background:var(--surface);border:1px solid var(--card-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card.flat{border:0}
.card-list{padding:4px 16px}
.card-title{font-size:16px;font-weight:700}
.cards{display:flex;flex-direction:column;gap:12px;padding:12px 16px 28px}

/* 리스트 줄 (› 표시) */
.list-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:13px 0;border-top:1px solid var(--line-3);color:var(--ink)}
.list-row:first-child{border-top:0}
.list-row .chev{flex:none;color:var(--thumb);font-size:16px}
.list-row .lr-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.list-row .lr-title{font-size:14.5px;font-weight:700}
.list-row .lr-desc{font-size:12px;color:var(--sub)}

/* 키-값 목록 (아파트 기본정보 등) */
.kv{display:flex;flex-direction:column}
.kv-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--line-3)}
.kv-row:last-child{border-bottom:0}
.kv-k{font-size:13px;color:var(--sub);line-height:1.5}
.kv-v{font-size:14px;font-weight:600;line-height:1.5;min-width:0}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 16px;
  border-radius:var(--r-ctl);font-size:14.5px;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;
  border:1px solid transparent;transition:background .15s,opacity .15s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:active{background:var(--navy-deep)}
.btn-outline{background:var(--surface);border-color:var(--btn-line);color:var(--navy)}
.btn-outline.ink{color:var(--ink)}
.btn-soft{background:var(--navy-soft);color:var(--navy)}
.btn-ghost{background:transparent;color:var(--navy);height:44px;padding:0 4px}
.btn-dashed{background:transparent;border:1px dashed var(--thumb);color:var(--navy)}
.btn-danger-quiet{background:var(--surface);border-color:var(--btn-line);color:var(--accent-text)}
.btn-sm{height:38px;padding:0 12px;border-radius:10px;font-size:13.5px}
.btn-lg{height:52px;border-radius:14px;font-size:16px}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn.is-busy{opacity:.7;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- 선택: 칩 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:40px;padding:0 14px;
  border-radius:var(--r-pill);border:1px solid var(--ctl-line);background:var(--surface);color:var(--ink-2);
  font-size:14px;font-weight:500;white-space:nowrap}
.chip.on{border-color:var(--navy);background:var(--navy-soft);color:var(--navy);font-weight:700}
.chip-sm{height:36px;padding:0 12px;font-size:13px}
/* 메인 필터 칩: 선택 시 남색 채움 (Home 시안) */
.chip-solid{flex:none;height:36px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--ctl-line);
  background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:600;white-space:nowrap}
.chip-solid.on{border-color:var(--navy);background:var(--navy);color:#fff}

/* ---------- 선택: 밑줄 탭 (박스·채운 칩·box-shadow 금지) ---------- */
.utabs{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;background:var(--surface);border-bottom:1px solid var(--line)}
.utab{height:44px;border:0;border-radius:0;border-bottom:2px solid transparent;background:transparent;
  font-size:13px;font-weight:500;color:var(--sub);white-space:nowrap;padding:0 6px}
.utab.on{border-bottom-color:var(--navy);font-weight:700;color:var(--navy)}
/* 한 줄 밑줄 선택(면적·층). 넘치면 가로로 민다 */
.uline-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:start}
.uline-label{padding-top:11px;font-size:13px;font-weight:600;color:var(--ink-2)}
.uline{display:flex;gap:22px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:3px}
.uline-item{flex:none;white-space:nowrap;height:38px;padding:0;border:0;border-radius:0;border-bottom:2px solid transparent;
  background:transparent;font-size:14.5px;font-weight:500;color:var(--muted)}
.uline-item.on{border-bottom-color:var(--navy);font-weight:700;color:var(--navy)}

/* 가로로 미는 줄 */
.hx{display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
.hx.is-dragging{cursor:grabbing}
.hx.is-dragging a,.hx.is-dragging button{pointer-events:none}
.hx img{-webkit-user-drag:none;user-select:none}

/* 세그먼트(둘 중 하나) */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-bottom:1px solid var(--line)}

/* ---------- 표시 ---------- */
.badge{display:inline-flex;align-items:center;flex:none;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;line-height:1.35;white-space:nowrap}
.badge-stage,.badge-soft{background:var(--navy-soft);color:var(--navy)}
.badge-benefit{padding:2px 7px;border-radius:5px;background:var(--accent);color:#fff;font-size:11px}
.badge-accent{background:var(--accent-soft);color:var(--accent-text)}
.badge-good{background:var(--good-soft);color:var(--good)}
.badge-quiet{background:var(--line-3);color:var(--sub)}
.badge-solid{background:var(--navy);color:#fff;font-size:10.5px;padding:2px 6px;border-radius:5px}
.badge-photo{padding:4px 9px;border-radius:6px;background:var(--photo-badge);color:#fff;font-size:12px;font-weight:600}
.benefit-band{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;background:var(--accent-soft)}
.benefit-band .bt{font-size:15px;font-weight:700;color:var(--accent-text);line-height:1.4;min-width:0}
.benefit-band.is-empty{background:var(--soft)}
.benefit-band.is-empty .badge-benefit{background:var(--thumb)}
.benefit-band.is-empty .bt{color:var(--muted);font-weight:600}
.dot-live{font-size:12px;font-weight:600;color:var(--good)}

/* 담당자 얼굴 (사진 없으면 실루엣) */
.avatar{position:relative;display:inline-flex;flex:none;width:42px;height:42px;border-radius:999px;border:1px solid var(--avatar-line);background:var(--avatar-bg);overflow:hidden}
.avatar img,.avatar svg{width:100%;height:100%;object-fit:cover}
.av-44{width:44px;height:44px}.av-60{width:60px;height:60px}.av-72{width:72px;height:72px}.av-36{width:36px;height:36px}.av-56{width:56px;height:56px}
.avatar-wrap{position:relative;display:inline-flex;flex:none}
.avatar-check{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:999px;background:var(--navy);
  border:2px solid var(--soft);display:flex;align-items:center;justify-content:center}
.avatar-check svg{width:10px;height:10px}

/* 빈 상태·불러오는 중 */
.empty{padding:28px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--card-line);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.empty b{font-size:15px}
.empty p{font-size:13px;line-height:1.5;color:var(--sub)}
.skeleton{background:linear-gradient(90deg,#ECEEF2 0%,#F4F6F9 50%,#ECEEF2 100%);background-size:200% 100%;animation:cc-sk 1.2s linear infinite;border-radius:10px}
@keyframes cc-sk{from{background-position:200% 0}to{background-position:-200% 0}}
.photo-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--soft);color:var(--sub);text-align:center}
.photo-ph svg{width:34px;height:34px}
.photo-ph span{font-size:13px;padding:0 16px}

/* ---------- 입력 ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:14.5px;font-weight:700}
.field-label .opt{font-size:12px;font-weight:500;color:var(--muted);margin-left:2px}
.field-label.sm{font-size:13px;font-weight:600;color:var(--ink-2)}
.field-help{font-size:12px;line-height:1.5;color:var(--sub)}
.field-err{font-size:12.5px;line-height:1.5;color:var(--accent-text)}
.input,.textarea,.select{width:100%;min-width:0;height:48px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--ctl-line);
  background:var(--surface);font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--navy)}
.input.sm{height:44px;border-radius:10px;font-size:15px;padding:0 12px}
.input.num{text-align:right;font-weight:600}
.input.is-bad{border-color:var(--accent)}
.textarea{height:auto;min-height:96px;padding:12px 14px;line-height:1.55;resize:vertical}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E6878' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.55;color:var(--ink-2);min-height:44px;padding:4px 0}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--navy);flex:none}
.stepper{display:flex;align-items:center;gap:4px;border:1px solid var(--ctl-line);border-radius:12px}
.stepper button{width:44px;height:42px;font-size:20px;color:var(--ink-2)}
.stepper b{min-width:40px;text-align:center;font-size:15px}

/* 개인정보 동의 (기존 문구 그대로 · 처음엔 체크 안 됨) */
.consent{display:flex;flex-direction:column}
.consent .check{font-size:13px;color:var(--ink)}
.consent-more summary{list-style:none;cursor:pointer;min-height:32px;display:inline-flex;align-items:center;padding-left:28px;font-size:12.5px;color:var(--sub);text-decoration:underline;text-underline-offset:2px}
.consent-more summary::-webkit-details-marker{display:none}
.consent-more > div{margin-top:4px;padding:12px;border-radius:10px;background:var(--soft);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.consent-more b{color:var(--ink);font-weight:600}

/* ---------- 겹쳐 뜨는 화면 ---------- */
.layer{position:fixed;inset:0;z-index:70;display:flex;justify-content:center;background:var(--scrim)}
.layer-inner{position:relative;width:100%;max-width:var(--app-w);height:100%;background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
.layer-head{flex:none;height:60px;display:flex;align-items:center;gap:2px;padding:0 16px 0 6px;border-bottom:1px solid var(--line-2);background:var(--surface)}
.layer-head.end{padding:0 8px 0 18px;justify-content:space-between}
.layer-body{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.layer-foot{flex:none;padding:12px 20px calc(16px + var(--safe-b));background:var(--surface);border-top:1px solid var(--line-2)}
.bottom-bar{position:sticky;bottom:0;z-index:30;padding:12px 16px calc(14px + var(--safe-b));background:var(--surface);border-top:1px solid var(--line-2)}

/* 아래에서 올라오는 시트 */
.sheet{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-end;background:var(--scrim)}
.sheet-panel{position:relative;width:100%;max-width:var(--app-w);max-height:92vh;max-height:92dvh;overflow-y:auto;background:var(--surface);border-radius:22px 22px 0 0;
  padding:10px 20px calc(24px + var(--safe-b));display:flex;flex-direction:column;gap:16px;animation:cc-up .22s ease-out}
.sheet-handle{align-self:center;flex:none;width:40px;height:4px;border-radius:2px;background:var(--ctl-line)}
@keyframes cc-up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
/* 가운데 창 */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:0 28px;background:var(--scrim-strong)}
.modal-panel{width:100%;max-width:380px;max-height:90vh;overflow-y:auto;background:var(--surface);border-radius:22px;padding:26px 22px 18px;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.modal-title{font-size:18px;font-weight:700}
.modal-text{font-size:13.5px;line-height:1.5;color:var(--sub)}

/* 번호 입력 (관리자 입구·PIN) */
.pin-dots{display:flex;gap:12px;justify-content:center;padding:14px 0 4px}
.pin-dots span{width:14px;height:14px;border-radius:999px;border:1.5px solid var(--btn-line);background:transparent}
.pin-dots span.on{background:var(--navy);border-color:var(--navy)}
.pin-msg{min-height:18px;font-size:12.5px;line-height:1.45;color:var(--accent-text)}
.keypad{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.keypad button{height:62px;border-radius:16px;background:var(--soft);font-size:22px;font-weight:600;color:var(--ink)}
.keypad button:active{background:var(--navy-soft)}
.pin-modal .modal-panel{padding-bottom:12px}

/* 짧은 알림 */
.toast{position:fixed;left:50%;bottom:calc(104px + var(--safe-b));z-index:120;width:calc(100% - 40px);max-width:calc(var(--app-w) - 40px);
  transform:translateX(-50%);padding:12px 16px;border-radius:12px;background:rgba(23,32,46,.92);color:#fff;
  font-size:13.5px;line-height:1.45;text-align:center;pointer-events:none;animation:cc-fade .18s ease-out}
@keyframes cc-fade{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
/* 관심 현장 스낵바 */
.snack{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));z-index:60;width:calc(100% - 32px);max-width:calc(var(--app-w) - 32px);transform:translateX(-50%);
  height:56px;border-radius:16px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 0 18px;box-shadow:0 10px 26px rgba(23,32,46,.3);font-size:14px}
.snack b{font-weight:700}
.snack .snack-act{font-weight:700;color:var(--accent-on-dark);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}

/* 세로 스크롤 중에만 보이는 얇은 선 */
.sb-thumb{position:fixed;top:0;width:3px;border-radius:3px;background:var(--thumb);pointer-events:none;z-index:200;opacity:0;transition:opacity .3s}
.sb-thumb.on{opacity:1}

/* 작게 그린 버튼·칩도 누르는 범위는 44px 가깝게(모양은 그대로) */
.btn-sm,.chip,.chip-solid{position:relative}
.btn-sm::after{content:'';position:absolute;left:0;right:0;top:-3px;bottom:-3px}
.chip::after,.chip-solid::after{content:'';position:absolute;left:0;right:0;top:-4px;bottom:-4px}

/* 큰 글씨·좁은 화면 안전장치 */
@media (max-width:359px){
  .sec{padding-left:14px;padding-right:14px}
  .uline{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 현장 카드 공통 (2차 수정: 손님 메인·개인 홈페이지·파트너 미리보기가 같이 씀): 사진 위 분양 상태 배지 · 명함 표시 · 담당자 줄 ---------- */
.stage-on-photo{position:absolute;left:10px;top:10px;z-index:2;padding:4px 9px;border-radius:6px;background:var(--navy);color:#fff;
  font-size:12px;font-weight:700;line-height:1.35;letter-spacing:-.1px;box-shadow:0 2px 8px rgba(10,18,32,.38);pointer-events:none}
.card-mark{position:relative;flex:none;width:26px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--navy)}
.card-mark.is-empty{color:var(--muted);opacity:.5}
button.card-mark::after{content:'';position:absolute;left:-9px;right:-9px;top:-10px;bottom:-10px}
.card-staff{display:flex;align-items:center;gap:6px;min-width:0}
.card-staff b{font-size:14px;font-weight:700;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-view{width:100%;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--soft)}
.card-view img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain}
.card-modal .modal{gap:14px}
/* '계약금 0원' 진행 순서 3단계 (2차 수정 3-1) — 상세·개인 홈페이지 */
.zero-steps{margin-top:12px;padding:14px 12px;border-radius:12px;background:var(--navy-soft);display:flex;flex-direction:column;gap:10px}
.zero-steps .zs-title{font-size:13.5px;font-weight:700;color:var(--navy)}
.zero-steps ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.zero-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.zero-steps li + li::before{content:'›';position:absolute;left:-7px;top:2px;font-size:16px;font-weight:700;color:var(--navy);opacity:.55}
.zero-steps .n{width:24px;height:24px;border-radius:999px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.zero-steps .t{font-size:12.5px;font-weight:500;line-height:1.4;color:var(--ink-2);word-break:keep-all}
.zero-steps .t b{color:var(--navy)}