/* MGM네트워크 — 구현 보강 스타일 (디자인 토큰은 각 앱 CSS 를 그대로 따릅니다) */

/* 첫 로딩 */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: #F5F2EB; color: #12201C; font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif; }
.boot-mark { font-family: 'Playfair Display', 'Noto Serif KR', serif; font-weight: 800; font-size: 34px; letter-spacing: .02em; }
.boot-sub { font-size: 12px; color: #A6A79F; letter-spacing: .06em; }

/* 공통 유틸 */
.rowflex { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
/* 21차(성능): JetBrains Mono 웹폰트 대신 시스템 모노. 이유는 styles.css:22 주석 참고. */
.mono { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skeleton { background: linear-gradient(90deg, #EFEAE0 25%, #F7F5F0 37%, #EFEAE0 63%); background-size: 400% 100%;
  animation: sk 1.2s ease infinite; border-radius: 4px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 서명 패드 */
.sig-wrap { position: relative; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.sig-pad { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.sig-ph { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  font-size: 12.5px; color: var(--mute-2); pointer-events: none; letter-spacing: .02em; }
.sig-clear { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--mute); background: rgba(255,255,255,.9);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px; }

/* 모바일 보강 */
.app { background: var(--paper); }
.desktop-note { display: none; }
.sheet-x { position: sticky; top: 0; }
.mgm-btn.loading { opacity: .6; }
.tabbar-spacer { height: 8px; }
/* bottom 은 탭바(64px) + 홈인디케이터(≈34px) 보다 위로 — 노치 기기에서 탭바와 겹치지 않게 */
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90;
  background: rgba(18,32,28,.94); color: #fff; font-size: 13px; font-weight: 600;
  padding: 11px 18px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: toastIn .24s cubic-bezier(.2,1.2,.3,1); max-width: 84%; text-align: center; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 백오피스 · 시스템관리 보강 */
.abody { display: flex; align-items: stretch; }
.amain { flex: 1; min-width: 0; padding: 22px 26px 60px; }
.ahead { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ahead h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
.ahead p { margin: 3px 0 0; font-size: 12.5px; color: var(--mute); }
.ahead .sp { flex: 1; }
.panel-t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.panel-t small { font-weight: 600; color: var(--mute); font-size: 11.5px; }
.stack { display: grid; gap: 14px; }
.muted { color: var(--mute); }
.tiny { font-size: 11.5px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.chipbtn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px;
  border-radius: 15px; border: 1px solid var(--line); background: var(--card); font-size: 12.5px; font-weight: 700; }
.chipbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chipbtn:disabled { opacity: .45; }
.empty-row { padding: 26px 12px; text-align: center; color: var(--mute-2); font-size: 13px; }
.lockcard { border: 1px dashed var(--line); border-radius: 6px; padding: 18px; background: #FBF9F4; }
.lockcard b { display: block; font-size: 14px; margin-bottom: 5px; }
.lockcard p { margin: 0 0 12px; font-size: 12.5px; color: var(--mute); line-height: 1.6; }
.pill-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800;
  padding: 3px 9px; border-radius: 11px; background: var(--line-2); color: var(--mute); }
.pill-state.ok { background: rgba(47,138,95,.12); color: var(--ok); }
.pill-state.warn { background: rgba(212,83,43,.1); color: var(--accent); }
.pill-state.brass { background: var(--brass-soft); color: #8A6524; }
.pill-state.ink { background: var(--ink); color: #fff; }

/* 표 */
.tbl2 { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl2 th { text-align: left; font-size: 11.5px; font-weight: 800; color: var(--mute); padding: 9px 10px;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: #FBFAF6; }
.tbl2 td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl2 tr:last-child td { border-bottom: 0; }
.tbl2 tbody tr:hover { background: #FBFAF6; }
.tbl2 .n { text-align: right; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; }
.tbl2 .c { text-align: center; }
.tbl-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }

/* MGM 진행바 */
.stagebar { display: flex; gap: 3px; align-items: center; }
.stagebar i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-2); }
.stagebar i.on { background: var(--forest); }
.stagebar i.cur { background: var(--brass); }

/* 채팅 */
.bochat { display: flex; flex-direction: column; height: 340px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #FBF9F5; }
.bochat .cl { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 8px; align-content: start; }
.bochat .ci { border-top: 1px solid var(--line); background: #fff; display: flex; gap: 8px; padding: 8px; }
.bochat .ci input { flex: 1; height: 34px; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; font-size: 13px; outline: none; }
.bmsg { max-width: 78%; font-size: 13px; line-height: 1.55; padding: 8px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); }
.bmsg.me { justify-self: end; background: var(--ink); color: #fff; border-color: var(--ink); }
.bmsg.sys { justify-self: center; background: var(--brass-soft); color: #6C4E13; border-color: #EBDCBE; font-size: 11.5px; }
.bmsg .who { display: block; font-size: 10.5px; font-weight: 800; color: var(--mute); margin-bottom: 3px; }
.bmsg.me .who { color: rgba(255,255,255,.6); }

/* 로그인 카드 */
/* 100dvh 폴백 — 100vh 만 쓰면 iOS 에서 카드 하단이 툴바에 가립니다. */
.authwrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--paper);
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.authcard { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 28px; box-shadow: 0 24px 70px rgba(18,32,28,.12); }
/* 115차: 서비스명 MGM → 인투인(intoin). 브랜드가 텍스트 → <img> 로 바뀌었습니다.
   원본 워드마크는 491x157(비율 3.13) 이므로 높이만 주고 폭은 auto 로 둡니다. */
.authcard .brand { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 26px; letter-spacing: .01em; }
.authcard .brand img { height: 26px; width: auto; display: block; }
.authcard .brand i { font-style: normal; color: var(--brass); }
.authcard h2 { font-family: 'Noto Serif KR', serif; font-size: 21px; margin: 16px 0 6px; }
.authcard p { font-size: 13px; color: var(--mute); line-height: 1.65; margin: 0 0 20px; }
.socialbtn { width: 100%; height: 54px; border-radius: 4px; font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 9px; }
.socialbtn.naver { background: #03C75A; color: #fff; }
.socialbtn.kakao { background: #FEE500; color: #191919; }
.socialbtn.google { background: #fff; color: #1F1F1F; box-shadow: inset 0 0 0 1px #DADCE0; }
.socialbtn:disabled { opacity: .5; }
.sm-g { display: inline-grid; place-items: center; border-radius: 50%; background: #fff; color: #4285F4;
  font-family: 'Playfair Display', serif; font-weight: 800; box-shadow: inset 0 0 0 1px #DADCE0; line-height: 1; flex: none; }
.sm-k { display: inline-grid; place-items: center; border-radius: 50%; background: #FEE500; position: relative; flex: none; }
.sm-k i { width: 46%; height: 40%; background: #191919; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; position: relative; }
.sm-k i::after { content: ''; position: absolute; left: 50%; bottom: -22%; transform: translateX(-50%);
  border-left: 2px solid transparent; border-right: 2px solid transparent; border-top: 4px solid #191919; }
.sm-n { display: inline-grid; place-items: center; border-radius: 4px; background: #03C75A; color: #fff;
  font-weight: 900; font-family: Arial, sans-serif; line-height: 1; flex: none; }

/* 약정서 인쇄 */
@media print {
  body * { visibility: hidden; }
  .pa-print-area, .pa-print-area * { visibility: visible; }
  .pa-print-area { position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none !important; }
}

/* 반응형 — 모바일웹을 작은 화면에서 꽉 차게 */
@media (max-width: 460px) {
  #root { max-width: none; box-shadow: none; }
}
@media (max-width: 900px) {
  .abody { display: block; }
  .side { width: 100%; height: auto; position: static; display: flex; overflow-x: auto; gap: 4px;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .side .grp { display: none; }
  .side button { width: auto; white-space: nowrap; }
  .amain { padding: 16px; }
}

/* ── 웹 종료 확인 다이얼로그 ───────────────────────────────── */
.exit-bg { position: fixed; inset: 0; z-index: 120; background: rgba(10,18,16,.55);
  display: grid; place-items: center; padding: 28px; animation: fade .18s; }
.exit-box { width: 100%; max-width: 320px; background: var(--paper); border-radius: 12px;
  padding: 26px 22px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.32);
  animation: exitIn .22s cubic-bezier(.2,.9,.3,1.05); }
.exit-box h3 { margin: 0 0 8px; font-size: 17.5px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.exit-box p { margin: 0 0 20px; font-size: 13px; line-height: 1.6; color: var(--mute); }
.exit-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.exit-acts button { height: 46px; border-radius: 6px; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }
.exit-cancel { background: var(--card); border: 1px solid var(--line); color: var(--mute); }
.exit-ok { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
@keyframes exitIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ── VR 화면 — 상단 뒤로가기/제목이 파노라마에 가려지지 않도록 ── */
.vr-ui { z-index: 60; }
.vr-ui .icon-btn { color: #fff; margin: 0; }
.vr-ui b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
/* 하단 예약 CTA 제거 — 탭 바를 화면 맨 아래에 붙입니다 */
.vr-spots { bottom: 0; z-index: 55; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ── 방문예약 — 날짜/시간 체크박스 그리드 ──────────────────── */
.chk-grid { display: grid; gap: 6px; }
.chk-date { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.chk-time { grid-template-columns: repeat(4, 1fr); }
.chk { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 58px; padding: 6px 2px; border: 1px solid var(--line); background: var(--card);
  border-radius: 5px; font-size: 12px; font-weight: 700; color: var(--ink); transition: all .12s; }
.chk small { font-size: 10.5px; font-weight: 600; color: var(--mute); }
.chk b { font-family: var(--mono); font-size: 15px; font-weight: 800; }
.chk .tick { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 3px;
  border: 1.4px solid var(--line); background: var(--paper); display: grid; place-items: center; }
.chk.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.chk.on small { color: rgba(255,255,255,.65); }
.chk.on .tick { background: var(--accent); border-color: var(--accent); }
.chk.sun small { color: var(--accent); }
.chk.sun.on small { color: rgba(255,255,255,.75); }
.chk:disabled { opacity: .34; }
.chk-time .chk { min-height: 44px; }
/* 43차: 정원이 찬 시간대 — '마감'으로 명확히 읽히게 합니다.
   disabled 기본 opacity(.34)만으로는 선택 불가인지 로딩 중인지 구분이 안 됩니다. */
.chk.full { opacity: 1; background: #F4F4F2; border-style: dashed; border-color: #D8D8D4; color: #A8A8A2; cursor: not-allowed; }
.chk.full b { text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 700; }
.chk.full small { color: #A8A8A2 !important; }

/* ── 검색 화면 — 회전 지구본 ───────────────────────────────── */
/* 35차: 검색 화면에서 가로 오버플로가 생기면 #root 가 가로로 스크롤되면서
   화면 전체가 왼쪽으로 밀립니다(측정값 -41px). 어떤 경우에도 넘치지 않게 고정합니다.
   70차: 같은 선택자가 두 줄로 나뉘어 선언돼 있던 것을 한 블록으로 합쳤습니다. */
.search-page { background: #08120F; overflow: hidden; }
.search-page .topbar { background: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 30; color: #fff;
  padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.search-page .topbar .icon-btn { color: #fff; }
/* min-width:0 — flex 자식이 min-content 밑으로 줄지 못해 생기던 오버플로를 막습니다. */
.search-page .search-box { min-width: 0; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.search-page .search-box input { min-width: 0; color: #fff; font-size: 16px; }
.search-page .search-box input::placeholder { color: rgba(255,255,255,.45); }
.sb-clear { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: grid; place-items: center; flex: none; }

.search-chips { position: absolute; top: calc(62px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 30; padding: 4px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.sc-h { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: .07em; margin-bottom: 8px; }
.sc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.search-chips .chip { height: 32px; padding: 0 14px; border-radius: 16px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.09); border: 1px solid rgba(214,170,96,.42); color: #E7CFA3; }
.search-chips .chip:active { background: rgba(214,170,96,.22); }

/* ── 83차: 지구본 삭제 ─────────────────────────────────────────
   .globe-wrap / .globe-stage / .globe-cv / .globe-hint 규칙을 함께 지웠습니다
   (globe.js · geo.js 파일도 삭제). 캡션만 지도용 이름으로 바꿔 남깁니다. */
.map-cap { position: absolute; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); top: calc(62px + env(safe-area-inset-top)); z-index: 25;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px;
  background: rgba(6,14,12,.62); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: mapCapIn .32s cubic-bezier(.2,.9,.3,1); }
.map-cap .mc-pin { width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; flex: none; }
.map-cap b { display: block; font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.map-cap small { display: block; font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes mapCapIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 지도 키가 없거나 SDK 로드에 실패했을 때, 지도 자리에 띄우는 안내.
   지구본이 없어졌으므로 '빈 화면' 대신 이 카드를 보여줍니다. */
.map-empty { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 24px; background: #0A1512; color: #fff; }
.map-empty .me-pin { width: 46px; height: 46px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; margin-bottom: 6px; flex: none; }
.map-empty b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }
.map-empty small { font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.65; }

/* ── 82차: 검색 화면 — 카카오맵 ────────────────────────────────
   .map-wrap 은 검색 화면 전체(inset:0)를 차지합니다. 83차에서 지구본을
   삭제했으므로 이제 이 블록이 검색 화면 배경의 유일한 경로입니다. */
.map-wrap { position: absolute; inset: 0; overflow: hidden; background: #E8EAE6; }
.map-stage { position: absolute; inset: 0; }
.map-cv { position: absolute; inset: 0; }
/* 카카오 타일은 밝습니다. 상단바의 흰 아이콘·입력창이 묻히지 않도록
   지도 모드에서만 위쪽에 스크림을 깝니다(지구본은 배경이 어두워 불필요). */
.search-page.map-mode .topbar { background: linear-gradient(rgba(6,18,14,.58), rgba(6,18,14,0)); }

.map-loading { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center;
  justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(6,18,14,.5); }
.map-spin { width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.28); border-top-color: #fff;
  animation: mapSpin .8s linear infinite; }
@keyframes mapSpin { to { transform: rotate(360deg); } }

/* 커스텀 오버레이 핀. 카카오가 xAnchor 0.5 / yAnchor 1 로 배치하므로
   여기서 translate 를 또 걸면 이중 보정이 됩니다(걸지 않습니다). */
.mpin { position: relative; display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px 0 7px; border: 0; border-radius: 15px; cursor: pointer;
  background: rgba(18,32,28,.93); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.mpin i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.mpin::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid rgba(18,32,28,.93); }
.mpin.on { background: var(--accent); }
.mpin.on i { background: #fff; }
.mpin.on::after { border-top-color: var(--accent); }

/* ── 85차: 지도 측정 도구 (거리 · 면적 · 반경) ──────────────────
   [배치 근거 — 실측]
     · 모바일: 캡션(.map-cap)은 top: calc(62px + safe-area), 높이 약 54px → 116px 에서 끝납니다.
       그래서 도구는 134px 부터 시작해 캡션과 겹치지 않게 했습니다.
     · PC: 캡션은 좌측(최대 520px), 도구는 우측 → 가로로 겹치지 않습니다.
     · 결과판을 도구 기둥 안에 두는 이유: 하단 결과시트(z-index 28)와
       겹치지 않게 하려면 위치를 추정해야 하는데, 추정값은 화면마다 틀립니다.
       기둥에 붙이면 시트 높이와 무관하게 항상 보입니다.
   [포인터 처리 — 실측 근거]
     결과판이 기둥 안으로 들어오면서 .m-tools 의 박스가 54px → 208px 로 넓어집니다.
     그대로 두면 이 투명한 박스가 지도 드래그를 가로챕니다.
     그래서 컨테이너는 pointer-events:none 으로 통과시키고, 실제로 보이는 자식
     (버튼 묶음·결과판·안내)만 auto 로 되돌립니다. */
.m-tools { position: absolute;
  right: max(12px, env(safe-area-inset-right));
  top: calc(134px + env(safe-area-inset-top));
  z-index: 26;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  pointer-events: none; }   /* 컨테이너는 통과, 자식만 받음 */
.m-tools > * { pointer-events: auto; }
.m-tools-b, .m-tools-r { display: flex;
  background: rgba(255,255,255,.97); border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.22); }
/* 측정 도구는 세로, 지우기/취소는 가로.
   [실측 근거] 세로로 쌓으면 390x844 에서 기둥이 결과시트(top 405)를 넘어
   결과판 하단이 시트에 가립니다(tools bottom 437 → covered:true).
   가로로 두면 46px 를 아껴 시트 위에 들어옵니다. */
.m-tools-b { flex-direction: column; }
.m-tools-r { flex-direction: row; }
.mt-b { width: 52px; height: 46px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  border: 0; background: transparent; color: #2A3A34;
  font-size: 10.5px; font-weight: 800; letter-spacing: -.02em;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mt-b + .mt-b { border-top: 1px solid rgba(0,0,0,.08); }
.m-tools-r .mt-b + .mt-b { border-top: 0; border-left: 1px solid rgba(0,0,0,.08); }
.mt-b:active { background: rgba(214,170,96,.18); }
.mt-b.on { background: var(--accent); color: #fff; }
.mt-i { display: block; line-height: 0; }
.mt-i svg { display: block; }
.mt-t { display: block; line-height: 1; }

/* 측정 결과판 — 도구 기둥 아래에 붙습니다. */
.m-result { max-width: 208px; padding: 9px 12px; border-radius: 10px;
  background: rgba(6,14,12,.88); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  text-align: right; }
.m-result b { display: block; font-size: 15px; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.25; word-break: keep-all; }
.m-result small { display: block; margin-top: 3px; font-size: 10.5px;
  color: rgba(255,255,255,.62); line-height: 1.45; word-break: keep-all; }

/* 도구 로딩 실패 안내 — 조용히 깨지지 않게 문구를 띄웁니다. */
.m-tools-msg { max-width: 208px; margin-top: 2px; padding: 8px 10px;
  border-radius: 8px; background: rgba(6,14,12,.88);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.45;
  text-align: right; word-break: keep-all; }

/* 짧은 화면(≤700px 높이) — 도구 기둥이 결과시트에 잠식되지 않도록 축소합니다.
   (iPhone SE 375×667 에서 시트 상단이 약 320px 입니다.) */
@media (max-height: 700px) {
  .m-tools { top: calc(120px + env(safe-area-inset-top)); gap: 5px; }
  .mt-b { width: 48px; height: 40px; font-size: 10px; }
  .m-result, .m-tools-msg { max-width: 184px; padding: 8px 10px; }
  .m-result b { font-size: 14px; }
  .m-result small { font-size: 10px; }
}

.search-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 28; max-height: 52%;
  background: var(--paper); border-radius: 16px 16px 0 0; display: flex; flex-direction: column;
  box-shadow: 0 -14px 44px rgba(0,0,0,.42); animation: sheetUp .3s cubic-bezier(.2,.9,.3,1); }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ss-h { display: flex; align-items: baseline; justify-content: space-between; flex: none;
  padding: 14px 20px 8px; border-bottom: 1px solid var(--line); }
.ss-h b { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.ss-h small { font-size: 12px; color: var(--mute); font-weight: 700; }
.ss-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px 20px;
  scrollbar-width: none; }
.ss-body::-webkit-scrollbar { display: none; }
.ss-pins { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.ss-pins::-webkit-scrollbar { display: none; }
.ss-pin { flex: none; height: 30px; padding: 0 11px; border-radius: 15px; display: inline-flex;
  align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--mute);
  background: var(--card); border: 1px solid var(--line); }
.ss-pin.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ss-empty { padding: 26px 0; text-align: center; font-size: 13.5px; color: var(--mute); }
.search-page .site-pick { background: var(--card); }
.search-page .site-pick b { color: var(--ink); }
.search-page .site-pick small { color: var(--mute); }


/* ══════════════════════════════════════════════════════════════
   좁은 화면(≤640px) — 목록 표를 카드로 변환
   표마다 data-label 을 손으로 붙이지 않고,
   /static/js/card-tables.js 가 thead 텍스트를 읽어 자동 부여합니다.
   대상은 스크립트가 data-cardlist 를 붙인 표뿐입니다.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* 카드 모드에서는 패널 내부 스크롤을 풀고 페이지 스크롤을 사용 */
  .panel.scroll { max-height: none; overflow: visible; }
  .main { padding: 16px 12px 64px; }

  table[data-cardlist] {
    display: block; width: 100% !important;
    border-collapse: separate; border-spacing: 0;
    table-layout: auto !important; font-size: 13px;
  }
  table[data-cardlist] > colgroup,
  table[data-cardlist] > thead { display: none !important; }
  table[data-cardlist] > tbody { display: block; width: 100%; }

  /* 한 행 = 한 장의 카드 */
  table[data-cardlist] > tbody > tr {
    display: block; width: 100%; box-sizing: border-box;
    padding: 12px 14px 11px;
    border-bottom: 1px solid var(--line);
  }
  table[data-cardlist] > tbody > tr:last-child { border-bottom: 0; }
  table[data-cardlist] > tbody > tr:hover > td { background: transparent; }

  /* 셀 기본값 — 표 레이아웃의 여백·테두리·말줄임을 모두 해제 */
  table[data-cardlist] > tbody > tr > td {
    box-sizing: border-box;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; max-height: none !important;
    padding: 3px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    font-size: 13px; line-height: 1.55;
    word-break: keep-all; overflow-wrap: anywhere;
  }

  /* 라벨은 왼쪽 고정폭, 값은 오른쪽 2단 그리드 — 제목/부제가 각각 줄바꿈됩니다 */
  table[data-cardlist] > tbody > tr > td[data-label] {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 10px; align-items: start;
  }
  table[data-cardlist] > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    grid-column: 1; grid-row: 1;
    font-size: 11px; font-weight: 800; color: var(--mute-2);
    letter-spacing: .02em; line-height: 1.6;
    word-break: keep-all;
  }
  /* 셀 안의 요소는 모두 오른쪽 열에 — b/small 이 세로로 쌓입니다 */
  table[data-cardlist] > tbody > tr > td[data-label] > * {
    grid-column: 2; min-width: 0;
  }
  table[data-cardlist] > tbody > tr > td[data-label] > .sub { margin-top: 1px; }
  /* 860px 규칙이 숨긴 4번째 열(분양가)을 카드에서는 되살립니다 */
  table[data-cardlist] > tbody > tr > td:nth-child(4) { display: grid !important; }

  /* 라벨 없는 칸 — 체크박스는 오른쪽 위, 관리 버튼은 하단 구분선 아래 */
  table[data-cardlist] > tbody > tr > td[data-check] {
    position: absolute; right: 12px; top: 10px; padding: 0 !important;
  }
  table[data-cardlist] > tbody > tr { position: relative; }
  table[data-cardlist] > tbody > tr > td[data-acts] {
    margin-top: 9px; padding-top: 9px !important;
    border-top: 1px dashed var(--line-2) !important;
  }
  table[data-cardlist] > tbody > tr > td[colspan] { padding: 8px 0 !important; }

  table[data-cardlist] .rowacts { justify-content: flex-start; width: 100%; }
  table[data-cardlist] .rowacts .abtn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
  table[data-cardlist] .thumb { width: 104px; height: auto; aspect-ratio: 3 / 2; }
  table[data-cardlist] .ell { white-space: normal !important; }
  table[data-cardlist] .num,
  table[data-cardlist] .date { white-space: normal !important; font-size: 12.5px; }
  table[data-cardlist] .tagstack { justify-content: flex-start; }

  /* 이미지 칸은 라벨 없이 카드 맨 위에 단독 배치 */
  table[data-cardlist] > tbody > tr > td[data-thumb] { padding-bottom: 6px !important; }
  table[data-cardlist] > tbody > tr > td[data-thumb]::before { display: none; }
}

/* ── 좁은 화면(≤700px) — 상단 바가 페이지를 가로로 밀지 않도록 ──
   .abar 는 flex-wrap:nowrap / overflow:visible 이라 자식 합계(≈654px)가
   그대로 문서 폭을 늘립니다. 카드 전환(640px)보다 살짝 넓은 구간
   (641~654px)에서도 넘치지 않도록 700px부터 두 줄로 접습니다. */
@media (max-width: 700px) {
  .adm { max-width: 100%; overflow-x: clip; }
  .abar {
    flex-wrap: wrap; height: auto; min-height: 56px;
    padding: 9px 14px; gap: 8px 10px;
    overflow-x: clip;
  }
  .abar .brand b { font-size: 18px; }
  .abar .save-state { order: 3; flex: 1 0 100%; font-size: 11.5px; line-height: 1.4; }
  .abar .sp { display: none; }
  .abar .abtn.onbar { height: 32px; padding: 0 10px; font-size: 12px; }
  /* 데모용 보기 권한 스위치는 넘칠 때만 가로 스크롤 */
  .abar .rolesw {
    order: 2; margin-left: 0; min-width: 0;
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
  }
  .abar .rolesw::-webkit-scrollbar { display: none; }
  .abar .rolesw > span { display: none; }
  .abar .rolesw button { height: 26px; padding: 0 9px; font-size: 12px; }
}

/* ── 좁은 화면(≤380px) — 한글 보호 목록에 빠져 있던 li · 등급 비교표 압축 ── */
@media (max-width: 380px) {
  li { word-break: keep-all; overflow-wrap: anywhere; }
  /* ③ 6열 그리드는 320px 에서 열당 34px → "무제한"(3자, 38px)이 넘칩니다. 좌우 여백만 줄입니다. */
  .mb-compare .row { font-size: 11px; padding: 10px 4px; gap: 1px; }
  .mb-compare .row.h { font-size: 10.5px; }
  .mb-compare p { font-size: 10.5px; padding: 9px 10px 11px; }
}

/* ── 좁은 화면(≤640px) — 도구 모음·입력 폭 정리 ── */
@media (max-width: 640px) {
  /* 표를 감싼 패널은 넘치지 않게 (스크롤 패널은 자체 스크롤 유지) */
  .panel, .tbl-wrap, .datacard { max-width: 100%; }
  .toolbar { gap: 6px; }
  .tfield input, .tfield { width: 100%; }
  .tfield { max-width: 100%; }
}

/* ── 관리자 로그인 (아이디 · 비밀번호) ──────────────────────────
   기존 authcard 톤(paper 배경 · brass 포인트)은 유지하고 입력 필드만 추가합니다.
   iOS 자동 확대를 막기 위해 font-size 를 16px 로 둡니다. */
.adm-field { display: block; margin-bottom: 12px; }
.adm-field > span { display: block; font-size: 12px; font-weight: 800; color: var(--mute);
  letter-spacing: -.01em; margin-bottom: 6px; }
.adm-field input { width: 100%; height: 48px; padding: 0 13px; border-radius: 4px;
  border: 1px solid var(--line); background: #fff; color: inherit;
  font-family: inherit; font-size: 16px; letter-spacing: -.01em; }
.adm-field input:focus { outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(168,132,63,.14); }
.adm-field input:disabled { background: #f5f6f5; color: var(--mute); }
.adm-submit { width: 100%; height: 52px; margin-top: 6px; border: 0; border-radius: 4px;
  background: #12201c; color: #fff; font-family: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: -.02em; cursor: pointer; }
.adm-submit:hover { background: #1c2f29; }
.adm-submit:disabled { opacity: .55; cursor: default; }

/* 31차: 회원가입 동의 체크박스 — 항목별 "보기" 링크
   styles.css 의 .agree 는 width:100% 라서, 링크를 오른쪽에 두려면
   flex 행으로 감싸고 .agree 의 width 를 풀어야 합니다. */
.au-agree .agrow { display: flex; align-items: center; gap: 8px; }
.au-agree .agrow .agree { flex: 1 1 auto; width: auto; min-width: 0; }
.au-agree .agview {
  flex: none; padding: 4px 0 4px 2px;
  font-size: 12px; font-weight: 700; color: var(--mute);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.au-agree .agview:hover, .au-agree .agview:focus-visible { color: var(--brass); }

/* ══ 32차: 구인구직 · 커뮤니티 (모바일) ══════════════════════
   MY › 구인구직 · 커뮤니티 메뉴에서 진입하는 두 화면의 스타일입니다.
   기존 토큰(--ink · --brass · --line)만 사용하고 새 색은 만들지 않았습니다. */

/* 공통 — 태그 · 영상 틀 */
.jtags { display: flex; flex-wrap: wrap; gap: 5px; }
.jtag { display: inline-flex; align-items: center; height: 21px; padding: 0 7px;
  font-size: 11px; font-weight: 700; border-radius: 2px; white-space: nowrap;
  background: #F2F1EE; color: var(--mute); letter-spacing: -.01em; }
.jtag.on { background: var(--brass-soft); color: #7A5A22; }
.jtag.vip { background: #111; color: var(--brass-soft); letter-spacing: .06em; }
.vwrap { border-radius: 6px; overflow: hidden; background: var(--ink); }

/* 검색 필드 */
.jsearch { display: flex; align-items: center; gap: 8px; height: 44px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--card); padding: 0 13px; }
.jsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: inherit; font-size: 14.5px; color: var(--ink); }
.jsearch input::placeholder { color: var(--mute-2); }

/* 구인구직 목록 카드 */
.jobcard { display: flex; gap: 12px; width: 100%; text-align: left; padding: 16px 0;
  border-bottom: 1px solid var(--line-2); }
.jobcard:last-child { border-bottom: 0; }
.jobcard:active { opacity: .72; }
.jobcard .jthumb { flex: none; width: 84px; height: 84px; border-radius: 4px; overflow: hidden; background: var(--line); }
.jobcard .jthumb img { width: 100%; height: 100%; object-fit: cover; }
.jobcard .jbody { flex: 1; min-width: 0; }
.jtitle { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.45;
  margin: 6px 0 4px; letter-spacing: -.03em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jco { display: block; font-size: 12.5px; color: var(--mute); }
.jpay { font-size: 13.5px; font-weight: 700; margin-top: 6px; }
.jfoot { display: flex; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--mute-2); margin-top: 6px; }

/* 구인구직 상세 */
.jd-title { font-size: 21px; font-weight: 800; line-height: 1.4; margin: 0 0 8px; letter-spacing: -.03em; text-wrap: pretty; }
.jd-co { font-size: 13px; color: var(--mute); }
.jd-sum { font-size: 14.5px; line-height: 1.7; color: #2C3632; margin: 14px 0 0; text-wrap: pretty; }
.jd-gal { display: flex; gap: 8px; overflow-x: auto; padding: 18px 20px 0; scrollbar-width: none; }
.jd-gal::-webkit-scrollbar { display: none; }
.jd-shot { flex: none; width: 210px; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line); background: var(--line-2); }
.jd-shot img { width: 100%; height: 100%; object-fit: cover; }
.jd-list { margin: 0; padding-left: 18px; }
.jd-list li { font-size: 14.5px; line-height: 1.8; color: #2C3632; margin-bottom: 4px; text-wrap: pretty; }

/* 커뮤니티 목록 */
.note-mini { background: var(--brass-soft); border-radius: 4px; padding: 13px 15px; }
.note-mini b { display: block; font-size: 13.5px; color: #5A4419; margin-bottom: 4px; }
.note-mini span { font-size: 12px; line-height: 1.6; color: #7A5A22; }
.lessoncard { display: flex; gap: 12px; width: 100%; text-align: left; padding: 16px 0;
  border-bottom: 1px solid var(--line-2); }
.lessoncard:last-child { border-bottom: 0; }
.lessoncard:active { opacity: .72; }
.lessoncard .lthumb { position: relative; flex: none; width: 108px; aspect-ratio: 16 / 11;
  border-radius: 4px; overflow: hidden; background: var(--ink); }
.lessoncard .lthumb img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.lessoncard .lph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.5); }
.lessoncard .lplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(18,32,28,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.lessoncard.locked .lplay { background: rgba(18,32,28,.78); }
.lessoncard .ldur { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 2px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 10.5px; font-weight: 700; }
.lessoncard .lbody { flex: 1; min-width: 0; }
.ltitle { display: block; font-size: 15px; font-weight: 700; line-height: 1.45; margin: 6px 0 4px;
  letter-spacing: -.03em; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.lsum { display: block; font-size: 12.5px; line-height: 1.55; color: var(--mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 커뮤니티 상세 — 잠금 카드 */
.lockcard .lockico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); margin-bottom: 10px; }
.lockcard .mgm-cta { height: 48px; font-size: 15px; margin-top: 2px; border: 0; font-family: inherit; cursor: pointer; }

/* 허브 — MY › 구인구직 · 커뮤니티 */
.boardcard { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); }
.boardcard:active { opacity: .72; }
.boardcard .bico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid;
  place-items: center; background: var(--paper); border: 1px solid var(--line); }
.boardcard .btext { flex: 1; min-width: 0; }
.boardcard .btext b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.boardcard .btext small { display: block; font-size: 12.5px; line-height: 1.55; color: var(--mute); margin-top: 3px; }
.boardcard .btext em { display: inline-block; margin-top: 7px; font-style: normal; font-size: 11px;
  font-weight: 700; color: var(--brass); letter-spacing: -.01em; }

/* ══ 33차: MY › 알림 설정 ════════════════════════════════════
   푸시 · 메시지 수신 스위치. 행 전체를 눌러도 토글되도록 button 으로 만들었습니다
   (작은 스위치만 정확히 누르기 어려운 모바일 특성). */
.ncard { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.nrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 16px; border-bottom: 1px solid var(--line-2); background: none; }
.nrow:last-child { border-bottom: 0; }
.nrow:active { background: var(--paper); }
.nrow:disabled { opacity: .6; }
.nrow .ntext { flex: 1; min-width: 0; }
.nrow .ntext b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.nrow .ntext small { display: block; font-size: 12px; line-height: 1.55; color: var(--mute); margin-top: 3px; }
.nrow .nstate { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--mute-2); min-width: 26px; text-align: right; }
.nrow.on .nstate { color: var(--forest); }
.nrow .nsw { flex: none; position: relative; width: 46px; height: 26px; border-radius: 13px;
  background: var(--line); transition: background .18s; }
.nrow .nsw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .18s; }
.nrow.on .nsw { background: var(--forest); }
.nrow.on .nsw i { transform: translateX(20px); }

/* ══ 34차: MY › 알림함 ═══════════════════════════════════════
   시스템관리에서 보낸 알림 목록. 행 전체가 버튼이라 손가락으로 누르기 쉽습니다.
   .unread 는 아직 읽지 않은 알림 — 왼쪽에 점을 찍어 구분합니다. */
.irow { display: block; width: 100%; text-align: left; padding: 14px 16px;
  border-bottom: 1px solid var(--line-2); background: none; }
.irow:last-child { border-bottom: 0; }
.irow:active { background: var(--paper); }
.irow .ihead { display: flex; align-items: center; gap: 7px; }
.irow .ich { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 3px; background: var(--brass-soft); color: #7A5A22; }
.irow .ititle { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); }
.irow .iwhen { flex: none; font-size: 11px; color: var(--mute-2); }
.irow .ipreview { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.55;
  color: var(--mute-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irow .ibody { display: block; margin-top: 8px; font-size: 13px; line-height: 1.72;
  color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.irow .ilink { display: inline-flex; align-items: center; gap: 3px; margin-top: 10px;
  font-size: 11.5px; font-weight: 700; color: var(--brass); }
/* 안 읽은 알림 — 제목을 진하게, 왼쪽에 점 */
.irow.unread { position: relative; }
.irow.unread::before { content: ''; position: absolute; left: 7px; top: 21px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.irow.unread .ititle { color: var(--ink); font-weight: 800; }
.irow.unread .ipreview { color: var(--mute); }

/* MY 메뉴 안 읽음 배지 (알림함 항목) */
.cnt-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1; }

/* ══ 69차: 첨부 이미지 반영 — 알림 · 구인구직/커뮤니티 · 고객센터 금장 테마 ══

   [왜 전역 선택자를 쓰지 않는가]
   · .chip / .chips      → 분양현장 · 뉴스 · 스튜디오 · 검색 · 백오피스가 함께 씁니다.
   · .note-mini          → m-detail(취소 실패 안내) · m-studio · bo.js 가 함께 씁니다.
   · .hc-tab             → 고객센터(m-help) · 알림(m-inbox) 두 화면만 씁니다.
   이 파일은 styles.css 뒤에 로드되므로(app shell.ts 순서), 전역으로 다시 칠하면
   위 화면들까지 같이 바뀝니다. 그래서 app.js 가 해당 화면에만 붙이는
   스코프 클래스 안으로 한정합니다.
     · .stack-help → 고객센터 · 알림(알림 설정 포함)
     · .stack-list → 게시판 4종 + 구인구직·커뮤니티 허브
   새 색을 만들지 않고 :root 토큰(--ink, --brass 등)을 기준으로 금장 계열만 덧댑니다. */

/* ── 공통: 금장 버튼면(먹색 메탈 + 금테) ────────────────────────
   분양현장 활성 칩(.chips.gold .chip.on)과 같은 어휘를 씁니다.
   padding-box / border-box 2겹 그라디언트로 '금테 + 먹색 면'을 만듭니다. */
.stack-help .hc-tab.on,
.stack-help .chips .chip.on,
.stack-list .chips .chip.on {
  color: #F8F1E1;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #3B342B 0%, #241F18 52%, #15110C 100%) padding-box,
    linear-gradient(150deg, #F7E5BC 0%, #D6B377 30%, #A07B3C 64%, #EBD2A2 100%) border-box;
  box-shadow:
    0 2px 7px rgba(20, 22, 18, .26),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -2px 4px rgba(0, 0, 0, .38);
}

/* ── ① 고객센터 · 알림 상단 탭 ──────────────────────────────────
   첨부 1·3: 활성=먹색 메탈 / 비활성=크림색, 모서리 6px. */
.stack-help .hc-tab {
  height: 40px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #332C25;
  border: 1px solid #DFD6CB;
  background: linear-gradient(180deg, #FBF8F2 0%, #F4EDE2 100%);
  box-shadow: 0 1px 2px rgba(122, 92, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.stack-help .hc-tab:active { opacity: .8; }

/* ── ② 고객센터 검색창 ─────────────────────────────────────────
   첨부 3: 크림 그라디언트 + 금빛 테두리, 모서리 8px. */
.stack-help .hc-search {
  height: 42px;
  border-radius: 8px;
  border: 1px solid #C4B096;
  background: linear-gradient(180deg, #FDFAF5 0%, #F3ECE0 100%);
  box-shadow: inset 0 1px 2px rgba(122, 92, 42, .07);
}
.stack-help .hc-search input::placeholder { color: #8C7E70; }

/* ── ③ 분류 칩 (자주 묻는 질문) ─────────────────────────────────
   첨부 3: 비활성=크림 알약 + 금빛 테두리, 활성=먹색 메탈(위 공통 규칙). */
.stack-help .chips .chip {
  height: 32px;
  padding: 0 15px;
  border-radius: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2B221B;
  border: 1px solid #CFBFAE;
  background: linear-gradient(180deg, #FBF8F2 0%, #EFE7DA 100%);
  box-shadow: 0 1px 2px rgba(122, 92, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* ── ④ 알림 목록 카드 ──────────────────────────────────────────
   첨부 1: 크림 그라디언트 카드 + 금빛 테두리 + 아래로 번지는 부드러운 그림자. */
.stack-help .ncard {
  border-radius: 10px;
  border: 1px solid #C9B49A;
  background: linear-gradient(180deg, #FBF8F2 0%, #F2E9DC 100%);
  box-shadow: 0 4px 12px rgba(60, 45, 26, .08), inset 0 1px 0 rgba(255, 255, 255, .75);
}
/* 행 구분선은 먹색이 아니라 크림-금 계열로 */
.stack-help .ncard .irow { border-bottom: 1px solid #EBDCCB; }
.stack-help .ncard .irow:active { background: rgba(184, 137, 63, .07); }

/* 채널 배지('공지' · '메시지') — 금장 그라디언트 알약, 흰 글자 */
.stack-help .ncard .irow .ich {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #D8BE99 0%, #B3976C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 1.5px rgba(90, 68, 30, .22);
}
.stack-help .ncard .irow .ititle { color: #2B241E; font-weight: 800; }
.stack-help .ncard .irow .ipreview { color: #85786C; }
.stack-help .ncard .irow .iwhen { color: #8C8075; font-weight: 600; }
/* 안 읽음 표시는 그대로 두되, 행 배경으로 한 번 더 구분합니다. */
.stack-help .ncard .irow.unread { background: rgba(184, 137, 63, .055); }
.stack-help .ncard .irow.unread .ititle { color: #1C1612; }

/* ── ⑤ 구인구직 · 커뮤니티 허브 ────────────────────────────────
   첨부 2: 금빛 세로 막대 + 크림 그라디언트 배너. */
.hub-banner {
  position: relative;
  padding: 15px 17px 15px 18px;
  border-radius: 12px;
  border: 1px solid #C8B59E;
  background: linear-gradient(180deg, #FAF6EE 0%, #F0E6D8 100%);
  box-shadow: 0 3px 10px rgba(60, 45, 26, .07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.hub-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #C9A86E, #9C7736);
}
.hub-banner b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #231a12;
  letter-spacing: -.02em;
  margin-bottom: 5px;
}
.hub-banner p,
.hub-badge-sub { margin: 0; }
.hub-banner span { font-size: 12px; line-height: 1.6; color: #6f6356; }

/* 카드 — 금테 + 크림 그라데이션, 금색 원형 아이콘 배지 */
.stack-list .boardcard {
  padding: 15px 16px;
  margin-bottom: 11px;
  border-radius: 12px;
  border: 1px solid #C8B59E;
  background: linear-gradient(180deg, #FAF6F0 0%, #EEE4D5 100%);
  box-shadow: 0 4px 12px rgba(60, 45, 26, .08), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.stack-list .boardcard:active { opacity: .82; }
.stack-list .boardcard .bico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #AB8F67;
  background: radial-gradient(circle at 50% 32%, #3A2E24 0%, #261E18 62%, #1B1510 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .16),
    inset 0 -2px 5px rgba(0, 0, 0, .5),
    0 1px 3px rgba(60, 45, 26, .2);
}
.stack-list .boardcard .bico svg { stroke: #DDC49E; }
.stack-list .boardcard .btext b { font-size: 15.5px; color: #1C1612; }
.stack-list .boardcard .btext small { font-size: 12px; color: #5E5246; }
/* '누구나 열람' · '교육영상 열람 가능' — 크림 알약 태그 */
.stack-list .boardcard .btext em {
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #D2BFAB;
  background: #FBF8F3;
  font-size: 10.5px;
  font-weight: 700;
  color: #7A6855;
  letter-spacing: -.01em;
}
.stack-list .boardcard > svg { stroke: #AB9D8F; }

/* ══ 72차: MY 하단 메뉴 — 사용자 제공 디자인(금테 크림 카드) 반영 ═══════════
   바뀐 것 : 흩어져 있던 메뉴 6줄을 카드 한 장으로 묶고, '로그아웃' 을 카드 밖으로 뺐습니다.
   안 바뀐 것 : 항목·문구·동작·연결 대상, 알림 배지(.cnt-badge), 비회원 MY 블록
                (같은 .list-btn 을 쓰지만 .my-menu-card 밖이라 영향 없음).

   카드 — 크림 바탕 + 금테. 새 색을 만들지 않고 69차 금장 테마와 같은 톤을 씁니다. */
.my-menu-card {
  padding: 2px 20px;
  border-radius: 14px;
  border: 1.5px solid #C9AC85;
  background: linear-gradient(180deg, #FDFBF7 0%, #FAF7F2 100%);
  box-shadow:
    0 2px 8px rgba(60, 45, 26, .10),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* 카드 안에서는 구분선을 카드 여백 안쪽에만 긋고, 마지막 줄은 선을 뺍니다. */
.my-menu-card .list-btn {
  padding: 17px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: #2A2521;
  border-bottom: 1px solid #EFE8DD;
}
.my-menu-card .list-btn:last-child { border-bottom: 0; }
.my-menu-card .list-btn:active { opacity: .62; }
/* 오른쪽 안내문(등급·이용 가능·알림 내역 …)은 톤 다운. */
.my-menu-card .list-btn .cnt {
  color: #8C7F72;
  font-size: 13px;
  font-weight: 500;
}
/* 이용약관·개인정보 처리방침 — 디자인대로 보라 링크 + 밑줄 + 외부링크 아이콘. */
.my-menu-card a.list-btn {
  color: #50206B;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.my-menu-card a.list-btn .cnt { color: #50206B; }

/* 카드 밖 '로그아웃' — 카드 본문과 같은 좌측선에 맞춥니다. */
.my-logout {
  display: block;
  margin: 20px 0 0 20px;
  padding: 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: #2A2521;
  text-align: left;
}
.my-logout:active { opacity: .6; }

/* 114차: MY › 리얼봇 협상 결과 카드 (m-account-addon.css 는 셸에 링크되지 않아 이 파일로 옮겼습니다) */

/* ── 114차: MY 페이지 '나의 리얼봇 가격·조건 협상 결과' 카드 ──────
   .card 를 padding:0 으로 쓰고 행 사이에만 구분선을 넣습니다.
   ⚠️ 이 카드는 mgm_referrals(백오피스 고객보내기)와 별개 데이터입니다. */
.nego-my { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.nego-my:last-child { border-bottom: 0; }
.nego-my .r1 { display: flex; justify-content: space-between; align-items: center; }
.nego-my .r1 small { font-size: 11px; color: var(--mute); }
.nego-my .st { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--ink); color: #EBD096; white-space: nowrap; }
.nego-my b { display: block; font-size: 14.5px; margin-top: 5px; letter-spacing: -.02em; }
.nego-my .sm { font-size: 11.5px; color: var(--mute); margin-top: 2px; }
.nego-my .msg { margin-top: 7px; padding: 9px 10px; border-radius: 3px;
  background: #F7F4EC; font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.nego-my .acts { display: flex; gap: 7px; margin-top: 9px; }
.nego-my .acts .btn.primary { flex: 1; height: 40px; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; text-decoration: none; }
.nego-my .acts .btn.ghost { height: 40px; padding: 0 11px; font-size: 12px; }

/* ── 114차: MY 페이지 "나의 리얼봇 가격·조건 협상 결과" 카드 ──────
   .card 를 padding:0 으로 쓰고 행 사이에만 구분선을 넣습니다.
   ⚠️ 이 카드는 mgm_referrals(백오피스 고객보내기)와 별개 데이터입니다. */
.nego-my { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.nego-my:last-child { border-bottom: 0; }
.nego-my .r1 { display: flex; justify-content: space-between; align-items: center; }
.nego-my .r1 small { font-size: 11px; color: var(--mute); }
.nego-my .st { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--ink); color: #EBD096; white-space: nowrap; }
.nego-my b { display: block; font-size: 14.5px; margin-top: 5px; letter-spacing: -.02em; }
.nego-my .sm { font-size: 11.5px; color: var(--mute); margin-top: 2px; }
.nego-my .msg { margin-top: 7px; padding: 9px 10px; border-radius: 3px;
  background: #F7F4EC; font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.nego-my .acts { display: flex; gap: 7px; margin-top: 9px; }
.nego-my .acts .btn.primary { flex: 1; height: 40px; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; text-decoration: none; }
.nego-my .acts .btn.ghost { height: 40px; padding: 0 11px; font-size: 12px; }