/* ============================================================================
   비드북 스타일시트 (web/static/css/app.css)
   ----------------------------------------------------------------------------
   목차
     1. 색상·크기 변수(라이트/다크)       7. 폼(입력 항목, 묶음, 강조 박스)
     2. 기본 요소(버튼·입력창·링크)       8. 목록(표) / 필터
     3. 전체 레이아웃(사이드바+메인)      9. 팝업·토스트·검색·뱃지
     4. 사이드바(메뉴, 광고, 프로필)      10. 캘린더 / 플랜 / 결제
     5. 사이드바 접힘(아이콘만 보기)      11. 대출 세무 상담(카드/광고/게시글)
     6. 상단 바 / 카드                    12. 알림 / 쿠폰 / 관리자 / 그래프
                                          13. 모바일(≤800px)
   ※ 값만 바꾸고 싶을 때는 1번의 변수(:root)부터 수정하세요.
   ============================================================================ */

/* ───────────── 1. 색상·크기 변수 ───────────── */
:root {
  --bg: #f4f6f9;        /* 페이지 배경 */
  --card: #fff;         /* 카드/입력창 배경 */
  --ink: #1c2230;       /* 기본 글자색 */
  --strong: #000;       /* 항목 이름·표 머리글 등 진한 글자색 */
  --mut: #6b7385;       /* 보조(회색) 글자색 */
  --pri: #1f4e9c;       /* 주요 버튼/링크 색(파랑) */
  --line: #dfe3ea;      /* 테두리·구분선 */
  --hl: #fff3c4;        /* 입찰가/매도 금액 강조 배경(연노랑) */
  --sky: #dff1ff;       /* 예상 순수익 강조 배경(하늘색) */
  --sky-b: #3b9be0;     /* 예상 순수익 강조 테두리 */
  --side-w: 260px;      /* 사이드바 너비(서버 환경변수 SIDEBAR_WIDTH 가 덮어씀) */
  --navy: #0f2540;      /* 사이드바 배경(위) */
  --navy2: #163456;     /* 사이드바 보조 네이비 */
  --gold: #c9a227;      /* 포인트(금색) */
  --danger: #c62828;    /* 삭제/오류(빨강) */
  --dot: #e53935;       /* 읽지 않은 알림 빨간 점 */
}
/* 다크 모드(OS 설정) */
@media (prefers-color-scheme: dark) {
  :root { --bg: #12161d; --card: #1b212c; --ink: #e8ebf2; --strong: #fff; --mut: #98a0b3; --line: #2c3342; --hl: #4a3f12; --sky: #12324a; --sky-b: #4aa8e8; }
}

/* ───────────── 2. 기본 요소 ───────────── */
* { box-sizing: border-box; }                                   /* 패딩을 너비에 포함 */
body { margin: 0; font: 14px/1.5 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--ink); }
/* 버튼/입력창/선택/텍스트영역 공통: 둥근 테두리 */
button, input, select, textarea { font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
button { cursor: pointer; }
button.pri { background: var(--pri); color: #fff; border-color: var(--pri); }          /* 주요 동작 버튼(저장 등) */
button.danger { background: var(--danger); color: #fff; border-color: var(--danger); }  /* 삭제 버튼(빨강) */
button:disabled { opacity: .5; cursor: default; }
a { color: var(--pri); }
.mut { color: var(--mut); }                                     /* 회색 보조 글자 */
.row { display: flex; gap: 6px; align-items: center; }          /* 가로 한 줄 배치 */
.err { color: var(--danger); min-height: 1.4em; }               /* 오류/경고 문구 */

/* ───────────── 3. 전체 레이아웃 ───────────── */
#shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }  /* 왼쪽 사이드바 + 오른쪽 메인 */
main { padding: 20px; min-width: 0; }

/* ───────────── 4. 사이드바 ───────────── */
/* 사이드바 본체: 금융·법률 느낌의 네이비, 화면에 고정(sticky) */
aside { background: linear-gradient(180deg, var(--navy), #0b1b30); color: #e6ecf5; padding: 0 12px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: auto; }
/* 간판(비드북) 줄: 왼쪽 이름, 오른쪽 버튼들 + 아래 금색 줄 */
.brand { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px 12px; margin-bottom: 6px; border-bottom: 2px solid var(--gold); }
.bname { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #fff; cursor: pointer; }  /* 누르면 기본 주소(첫 화면)를 새로 열기 */
.bbtn { display: flex; gap: 4px; }                              /* 검색/접기 버튼 묶음 */
.bbtn button { background: transparent; border: 1px solid #ffffff33; color: #e6ecf5; padding: 3px 8px; border-radius: 6px; }
.bbtn button:hover { background: #ffffff1a; }
aside .menu { flex: 1; }                                        /* 메뉴 영역(남는 높이 차지) */
/* 메뉴 링크 한 줄: 아이콘 + 이름 (+ 빨간 점/자물쇠) */
aside a.m { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; color: #cfd8e6; text-decoration: none; font-size: 13px; font-weight: 500; cursor: pointer; }
aside .m-icon { width: 20px; flex: 0 0 20px; text-align: center; font-size: 16px; }
aside a.m:hover { background: #ffffff14; color: #fff; }
aside .sub a.m { padding-left: 20px; }                          /* 하위 메뉴는 들여쓰기 */
a.dis { opacity: .4; cursor: pointer; }                         /* 플랜 때문에 비활성인 메뉴(누르면 플랜 안내 후 플랜 페이지로, layout.ts) */
/* 대분류(부동산/차량/컨설팅/관리자 페이지): 하위 메뉴보다 크고 굵게, 금색 */
aside .grp { color: #f2d77c; font-size: 16px; font-weight: 800; letter-spacing: .5px; margin: 16px 6px 3px; }
/* 구글 광고 영역(미설정 시 자리표시) */
.adside { margin: 10px 0; min-height: 300px; border: 1px dashed #ffffff40; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9fb0c8; }
/* 사이드바 광고 영역: 구글 광고와 프리미엄 광고 카드가 번갈아 표시되는 틀 */
/* 사이드바 광고: 위 프리미엄(자체) 광고 + 아래 구글 광고를 함께 쌓아서 보여 준다(ads.ts sideAd) */
.sidead { margin: 10px 0; display: flex; flex-direction: column; gap: 10px; }
.sidead-slot { min-height: 300px; }
.sidead-self { min-height: 0; }                                  /* 프리미엄 카드는 내용 높이만큼 */
.sidead-slot[hidden] { display: none; }
.inad { margin: 0 0 14px; min-height: 90px; }                  /* 본문 가로 광고(카드 사이): 물건 추가/상세, 관심 리스트 (ads.ts inlineAd) */
.inad-ph { margin: 0; min-height: 90px; border: 1px dashed var(--line); color: var(--mut); background: var(--card); }   /* 테스트 미리보기 자리표시(ADS_PREVIEW=1) */
/* 플랜 한도 초과로 잠긴 매물(관심 리스트): 흐리게, 누르면 플랜 안내(list.ts) */
table.lt tr.locked-row td { opacity: .4; }
table.lt tr.locked-row td.ck { opacity: 1; }                    /* 삭제용 체크박스는 또렷하게 */
table.lt tbody tr.locked-row:hover { background: transparent; }
/* 프로필(사이드바 맨 아래) */
/* 메뉴·광고가 길어 사이드바가 스크롤되어도 항상 맨 아래에 붙어 있도록 sticky + 사이드바 하단색 배경(아래 여백까지 그림자로 덮음) */
.prof { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 0; cursor: pointer; position: sticky; bottom: 0; z-index: 5; background: #0b1b30; box-shadow: 0 12px 0 #0b1b30; border-top: 1px solid #ffffff22; margin-top: 8px; }
.prof:hover { background: #16263c; }
.prof img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
/* 프로필 팝업 메뉴(프로필 위로 뜸). 밖을 누르면 닫힘(layout.ts) */
.pm { position: absolute; bottom: 56px; left: 0; right: 0; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px #0005; padding: 6px; z-index: 20; }
.pm div { padding: 8px 10px; border-radius: 8px; }
.pm div:hover { background: var(--bg); }

/* 읽지 않은 알림 빨간 점(알림 메뉴 옆, 알림 제목 옆) */
.rdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); margin-left: 6px; flex: 0 0 9px; }
.rdot[hidden] { display: none; }

/* 모바일에서 사이드바가 열렸을 때 메인을 덮는 가림막(눌러서 접기). 평소엔 숨김 */
.side-mask { display: none; }

/* ───────────── 5. 사이드바 접힘(아이콘만 보기) ───────────── */
body.side-closed #shell { grid-template-columns: 64px minmax(0, 1fr); }
body.side-closed aside { padding: 0 6px 12px; }
body.side-closed .brand { flex-direction: column; padding: 8px 0; margin-bottom: 6px; }
body.side-closed .bname, body.side-closed .side-close { display: none; }      /* 이름·접기 버튼 숨김 */
body.side-closed .bbtn { flex-direction: column; gap: 6px; }
body:not(.side-closed) .side-open { display: none; }                          /* 펼친 상태에선 펼치기 버튼 숨김 */
body.side-closed .bbtn button { width: 40px; height: 40px; padding: 0; }
body.side-closed aside .grp, body.side-closed aside .m-label, body.side-closed aside .m-lock, body.side-closed aside .adside, body.side-closed aside .sidead { display: none; }
body.side-closed aside a.m { justify-content: center; padding: 8px 0; }
body.side-closed aside .sub a.m { padding-left: 0; }
body.side-closed .prof { justify-content: center; padding: 8px 0; }
body.side-closed .prof > span { display: none; }
body.side-closed .pm { left: calc(100% + 8px); right: auto; bottom: 0; min-width: 200px; }

/* ───────────── 6. 상단 바 / 카드 ───────────── */
/* 페이지 제목 + 오른쪽 버튼들. 모든 페이지 공통으로 스크롤을 따라 화면 위에 고정(sticky)된다.
   main 의 안쪽 여백(20px)만큼 음수 margin 으로 넓혀 가장자리까지 배경을 채운다(내용이 뒤로 비치지 않게). */
.bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20; background: var(--bg); margin: -20px -20px 14px; padding: 14px 20px 10px; border-bottom: 1px solid var(--line); }
/* 제목은 글자 길이만큼 자리를 차지(auto) → 한 줄에 다 안 들어가면 제목을 세로로 접지 않고 버튼들을 다음 줄로 보낸다 */
.bar h2 { margin: 0; flex: 1 1 auto; font-size: 20px; }
.bar-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }   /* 오른쪽 버튼 묶음: 다음 줄로 내려가도 오른쪽 정렬 */
.hb { display: none; }                                                                     /* ☰ 버튼: 모바일에서만 보임 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }

/* ───────────── 7. 폼 ───────────── */
/* 입력 항목 격자: 칸 너비는 최소 250px, 화면에 맞춰 자동 줄바꿈 */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }   /* v4.6: 창이 아무리 넓어도 최대 2칸(좁은 화면은 맨 아래 미디어쿼리에서 1칸) */
.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }     /* 항목 하나(이름 + 입력창) */
.f.wide { grid-column: 1 / -1; }                                          /* 한 줄 전체를 차지하는 항목 */
/* 항목 이름: 크고 굵고 검은색. 오른쪽 끝에 평수(.py)를 붙일 수 있게 flex */
.f .ln { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; font-size: 15px; font-weight: 700; color: var(--strong); }
.f .ln .py { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--mut); }   /* 전용/공급 ㎡ 옆 "≈ 25.30평" */
.f .diff { font-size: 11px; font-weight: 500; color: var(--mut); }                       /* 낙찰가 옆 "입찰가 대비 ±…" */
.f .loan-note { font-size: 11px; font-weight: 400; color: var(--mut); }                  /* 항목 이름 옆 작은 안내(예: 보유 부동산 수 최소값) */
/* "예상 대출금 … 클릭하여 입력" 링크 모양 버튼 */
button.loan-suggestion { align-self: flex-start; border: 0; background: transparent; color: var(--pri); padding: 0; font-size: 12px; text-align: left; }
button.loan-suggestion:not(:disabled):hover { text-decoration: underline; }
.f input, .f select, .f textarea { width: 100%; }
.f input[type=checkbox] { width: 20px; height: 20px; }                    /* 체크박스(탑층/조정대상지역/법인) */
/* 묶음 항목(layouts.ts 의 g('7:3', …)): 한 칸 안에 항목 여러 개를 비율대로 나란히. 비율은 인라인 grid-template-columns 로 지정됨 */
.grp-r { display: grid; gap: 8px; min-width: 0; align-items: start; }
.grp-r .ln { font-size: 14px; }                                           /* 좁은 칸이라 이름 글자를 조금 줄임 */
/* 수익 계산 안의 소제목(매수 금액/초기 투자 비용 합계/추가 지출/세금/수익) */
.sub-title { grid-column: 1 / -1; margin: 14px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 800; color: var(--strong); }
/* 조회 상태(비활성): 입력 상자 테두리/배경 제거, 값만 보이게 */
.f input:disabled, .f select:disabled, .f textarea:disabled { border-color: transparent; background: transparent; appearance: none; -webkit-appearance: none; opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); padding-left: 0; resize: none; }
/* 체크박스는 조회 상태에서도 체크 여부가 보이도록 기본 모양을 되살린다 */
.f input[type=checkbox]:disabled { appearance: auto; -webkit-appearance: checkbox; accent-color: var(--pri); opacity: 1; padding: 0; border: 1px solid var(--line); background: var(--card); }
/* 입찰가·매도 금액: 크고 노란 배경 */
.f.big .ln { font-size: 17px; }
.f.big input { font-size: 22px; font-weight: 800; padding: 12px; background: var(--hl); border-color: var(--gold); }
.f.big input:disabled { background: var(--hl); padding-left: 12px; }
/* 자동 계산 값(읽기 전용 회색 박스) */
.f.calc .cv { padding: 8px 10px; border-radius: 8px; background: var(--bg); font-weight: 600; font-variant-numeric: tabular-nums; min-height: 36px; }
/* 예상 순수익: 가장 크고 굵은 하늘색 박스 (예상 수익률은 일반 계산 칸 스타일) */
.f.calc.hero .ln { font-size: 18px; font-weight: 900; }
.f.calc.hero .cv { font-size: 28px; font-weight: 900; background: var(--sky); border: 2px solid var(--sky-b); padding: 12px; }
.xrow { margin-bottom: 6px; }                                             /* 추가 비용 항목 한 줄 */
.xrow input { flex: 1; }
/* 링크 항목의 "열기" 버튼: 기존 대비 가로 1.5배(좌우 여백 확대) */
button.open-btn { padding: 7px 22px; white-space: nowrap; }
/* 법원 드롭다운: 입력창 아래에 겹쳐 뜸(다른 항목을 밀어내지 않음) */
.court { position: relative; }
.sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; list-style: none; margin: 2px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; max-height: 220px; overflow: auto; background: var(--card); box-shadow: 0 6px 18px #0004; }
.sug:empty { display: none; }
.sug li { padding: 6px 10px; cursor: pointer; }
.sug li:hover { background: var(--bg); }
.sug .fav { color: #9aa3b2; margin-right: 8px; font-size: 16px; cursor: pointer; }          /* ☆ 관심 법원 아님 */
.sug .fav.on { color: #f5c400; }                                                           /* ★ 관심 법원(노랑) */
.sug .fav:hover { transform: scale(1.2); display: inline-block; }
/* 파일 첨부 */
.drop { border: 2px dashed var(--line); border-radius: 10px; padding: 10px; text-align: center; color: var(--mut); }
.file img { width: auto; max-width: min(100%, 240px); max-height: 160px; object-fit: contain; border-radius: 8px; display: block; margin-bottom: 6px; }
.file iframe { width: min(100%, 320px); height: 180px; border: 0; margin-bottom: 6px; }
/* 마켓 링크 이미지 미리보기(상위 4개를 격자로) */
/* 링크(마켓·네이버) 이미지 미리보기: 썸네일 4개 한 줄 */
.pv { display: grid; grid-template-columns: repeat(4, 80px); gap: 4px; margin-top: 6px; }
.pv img { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; display: block; }   /* 4:3 비율 */
.pv small { grid-column: 1 / -1; }

/* 부동산·차량 상세: 넓은 화면에서는 입력 영역 폭을 제한하고 오른쪽에 미리보기 영역(감정평가서·매각물건명세서·링크) */
.fside { display: none; }
@media (min-width: 1500px) {
  .fwrap { display: grid; grid-template-columns: minmax(0, 1000px) minmax(300px, 1fr); gap: 16px; align-items: start; }
  .fside { display: block; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
  .fside:empty { display: none; }
  .fwrap.has-side .ipv { display: none; }      /* 오른쪽에 보이므로 입력칸 아래 미리보기는 숨김 */
  .fwrap.has-side .fside { top: 76px; max-height: calc(100vh - 88px); }   /* 고정된 버튼 줄 아래에 붙음 */
}
.sblock { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.stitle { font-weight: 700; margin-bottom: 6px; }
.sfile img { max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: 8px; display: block; margin-bottom: 6px; }
.sfile iframe { width: 100%; height: 60vh; border: 0; margin-bottom: 6px; }

/* 플랜 제한으로 못 쓰는 섹션(내 자산의 차량 섹션 등): 내용을 흐리게 덮고 안내 문구 */
.locked { position: relative; overflow: hidden; }
.locked > :not(.lock-ov) { filter: blur(2px); opacity: .45; pointer-events: none; user-select: none; }
.lock-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lock-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 28px; text-align: center; box-shadow: 0 10px 30px #0003; max-width: min(92%, 380px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lock-icon { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.lock-title { font-size: 16px; font-weight: 800; color: var(--strong); }
.lock-btn { margin-top: 10px; padding: 9px 22px; border-radius: 999px; font-weight: 700; }

.neg { color: var(--danger); font-size: 13px; }   /* 광고 가격표: 정가보다 비쌀 때 */

/* 결제 팝업: 관리자 결제 테스트(승인/실패) */
.admintest { margin: 12px 0 4px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.admintest .row { justify-content: center; }

/* 분류 선택 + [관리] 버튼: 선택칸이 남는 폭을 모두 쓰고, 버튼은 글자 폭만큼(줄바꿈 없이 가로로) */
.catsel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.catsel select { width: 100%; }
.catsel button { white-space: nowrap; }

/* 작은 섹션(상세의 "관리": 평가·분류·결과 한 줄 + 코멘트) — 글자와 여백을 줄여 공간을 덜 차지 */
.card.compact { padding: 10px 14px; }
.card.compact h3 { font-size: 15px; margin-bottom: 6px; }
.card.compact .grid { gap: 8px 12px; }
.card.compact .grp-r { grid-column: 1 / -1; gap: 12px; }
.card.compact .f { gap: 2px; }
.card.compact .f .ln { font-size: 13px; }
.card.compact input, .card.compact select, .card.compact textarea, .card.compact button { font-size: 13px; padding: 5px 8px; }
.card.compact textarea { min-height: 0; height: 52px; }

/* 나의 게시글 광고 영역: 재결제 시 기간 안내 */
.adrenew { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 13px; line-height: 1.7; color: var(--mut); }
.adrenew b { color: var(--ink); }

/* 내 자산 누적 순수익 확인하기/숨기기 버튼 */
.profit-eye { font-size: 12px; padding: 3px 10px; border-radius: 999px; }

/* 쿠폰 관리 표의 버튼 줄: 수정 · 알림 · 삭제를 같은 간격으로. 알림 버튼만 폭 고정(알림 확인 / 이벤트 알림 생성 길이 차이로 줄이 흔들리지 않게) */
.cpacts { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.cpacts button { font-size: 13px; padding: 6px 12px; white-space: nowrap; }
.cpacts .cp-notify { width: 116px; padding: 6px 0; text-align: center; }

/* 분류 관리 팝업 */
.catlist { max-height: 45vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.catrow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.catrow:last-child { border-bottom: 0; }
.catrow > span { flex: 1; }
.catrow.del > span { text-decoration: line-through; opacity: .5; }
.catrow.new > span { font-weight: 700; }
.bottombar { display: flex; gap: 8px; align-items: center; margin: 4px 0 40px; }           /* 폼 맨 아래 버튼 줄(목록/저장/삭제) */

/* ───────────── 8. 목록(표) / 필터 ───────────── */
.tw { overflow: auto; }                                                                    /* 표가 넓으면 가로 스크롤 */
table.lt { border-collapse: collapse; width: 100%; white-space: nowrap; }
table.lt th, table.lt td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
/* 표 머리글: 조금 크고 굵고 검은색 */
table.lt th { cursor: pointer; font-size: 15px; font-weight: 800; color: var(--strong); position: sticky; top: 0; background: var(--card); }
table.lt td { font-size: 14px; }
table.lt .ck { width: 34px; cursor: default; }                                             /* 체크박스 열 */
table.lt tbody tr { cursor: pointer; }
table.lt tbody tr:hover { background: var(--bg); }
.chips label { margin-right: 12px; white-space: nowrap; }                                  /* 필터 체크박스/라디오 */

/* ───────────── 9. 팝업·토스트·검색·뱃지 ───────────── */
.ov { position: fixed; inset: 0; background: #0008; display: flex; align-items: center; justify-content: center; z-index: 50; padding: 14px; }   /* 팝업 뒤 어두운 배경 */
.pop { background: var(--card); border-radius: 14px; padding: 16px; max-width: 560px; width: 100%; text-align: center; max-height: 92vh; overflow: auto; }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); background: #222; color: #fff; padding: 12px 22px; border-radius: 24px; z-index: 99; box-shadow: 0 4px 16px #0006; transition: opacity .4s; }  /* "저장 되었습니다." */
.toast.out { opacity: 0; }
.sr .srow { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; text-align: left; }  /* 검색 결과 행 */
.sr .srow:hover { background: var(--bg); }
.sr { margin-top: 10px; max-height: 60vh; overflow: auto; }
.badge { display: inline-block; background: var(--pri); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 12px; margin: 0 4px; }
.badge.off { background: #888; }            /* 임시/숨김 */
.badge.gold { background: var(--gold); }    /* 프리미엄 */
.badge.c-notice { background: #1f4e9c; } .badge.c-ad { background: #8e44ad; } .badge.c-event { background: #e67e22; } .badge.c-gen { background: #607d8b; }  /* 알림 카테고리 색 */
.cf { position: fixed; top: -30px; font-size: 28px; animation: fall 2.4s linear forwards; z-index: 99; pointer-events: none; }   /* 낙찰 폭죽 */
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

/* ───────────── 10. 캘린더 / 플랜 / 결제 ───────────── */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal div { min-height: 64px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12px; }
.cal .h, .cal .e { min-height: 0; border: 0; cursor: default; text-align: center; color: var(--mut); }   /* 요일 머리글/빈 칸 */
.cal .today { background: var(--hl); }
.cal .on { outline: 2px solid var(--pri); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pri); margin-right: 2px; }   /* 캘린더 매물 표시 점 */
/* 플랜 카드 목록(FREE/BASIC/PRO/BIZ) */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1100px; }
.plans .card { border-radius: 22px; text-align: center; padding: 24px; display: flex; flex-direction: column; }
/* 구독 버튼 위치 통일: 모든 플랜 카드(BIZ 포함)에서 카드 맨 아래 가운데. 혜택 줄 수가 달라도 버튼 높이가 맞는다 */
.plans .card > button { margin-top: auto; align-self: center; min-width: 140px; }
.plans .curplan { border: 2px solid var(--gold); }                                       /* 현재 구독 중 플랜 */
.plans .bizcard { text-align: left; max-width: 420px; }                                  /* BIZ 추가 구독 카드 */
.bizhead { display: flex; align-items: center; gap: 8px; }
/* 월간/연간 결제 탭 버튼: 크기·글자를 키움 */
.plan-tabs { justify-content: center; margin-bottom: 16px; }
.plan-tabs button { font-size: 18px; font-weight: 700; padding: 12px 26px; border-radius: 12px; }
.unit-tabs { justify-content: center; margin-bottom: 10px; }   /* 광고 관리: 일/주/월 단위 버튼(플랜 탭보다 작게) */
.unit-tabs button { font-size: 14px; font-weight: 600; padding: 6px 16px; border-radius: 10px; }
.cancelrow { text-align: center; margin: 30px 0 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }                                  /* 맨 아래 가운데 "구독 취소" 버튼(평범한 흰색) */
/* 결제 팝업 */
.paybtn { display: block; width: 100%; margin: 8px 0; padding: 12px; font-weight: 700; font-size: 15px; border-radius: 10px; }
.paybtn.naver { background: #03c75a; color: #fff; border-color: #03c75a; }
.paybtn.kakao { background: #fee500; color: #191600; border-color: #fee500; }
.paybtn.google { background: #fff; color: #202124; border-color: #dadce0; }
.paysum > div { display: flex; justify-content: space-between; padding: 4px 0; }       /* 정가/할인/최종 금액 줄 */
.paysum .disc { color: var(--danger); }
.paysum .final { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 18px; }

/* ───────────── 11. 대출 세무 상담 ───────────── */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--pri); color: #fff; font-weight: 800; flex: 0 0 auto; }  /* 프로필 사진(없으면 이름 첫 글자) */
.avatar.md { width: 56px; height: 56px; } .avatar.lg { width: 80px; height: 80px; font-size: 28px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }                       /* 해시태그 목록 */
.tag { background: var(--bg); color: var(--pri); border: 1px solid var(--line); border-radius: 12px; padding: 1px 8px; font-size: 12px; }
.tags.pick .tag { cursor: pointer; }                                                      /* 작성 폼의 선택 가능한 태그 */
.tags.pick .tag.on { background: var(--pri); color: #fff; border-color: var(--pri); }
.adbadge { background: var(--gold); color: #fff; border-radius: 4px; padding: 0 5px; font-size: 11px; font-weight: 800; }  /* AD 표시 */
.adbadge.sm { margin-left: 6px; }
/* 프리미엄 광고 세로 카드 */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 260px)); gap: 14px; }
.pcard { position: relative; border: 2px solid var(--gold); border-radius: 16px; padding: 18px 14px; text-align: center; cursor: pointer; background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pcard:hover { box-shadow: 0 4px 18px #0003; }
.pcard .pname { font-size: 18px; font-weight: 800; color: var(--strong); margin-top: 6px; }
.pcard .pco { font-weight: 700; }
.pcard .pmsg { font-size: 13px; margin: 6px 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .adbadge { position: absolute; top: 8px; right: 8px; }
.pcard .avatar.lg { width: 120px; height: 120px; font-size: 42px; }   /* 프리미엄 광고 프로필 사진: 기본 lg(80px)의 1.5배 */
.sidead-slot .pcard .avatar.lg { width: 72px; height: 72px; font-size: 26px; }   /* 사이드바 프리미엄 광고: 위 크기(120px)의 0.6배 */
.sidead-slot .pcard { height: 100%; justify-content: center; background: var(--card); color: var(--ink); }   /* 사이드바 안의 프리미엄 카드 */
/* 일반 광고 가로 행(일반 게시글보다 크게) */
.arow { position: relative; display: flex; gap: 14px; align-items: center; padding: 14px; margin-bottom: 8px; border: 1px solid #b4bac4;   /* 일반 광고: 실버 테두리(프리미엄은 금색) */ border-radius: 12px; cursor: pointer; }
.arow:hover { background: var(--bg); }
.arow .abody { flex: 1; min-width: 0; }
.arow .amsg { margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 메시지는 한 줄만, 넘치면 … (전체는 상세 보기) */
.arow .abody > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 36px; }   /* 이름·업체·직급 줄도 한 줄(오른쪽 AD 배지 자리 비움) */
.arow .adbadge { position: absolute; top: 8px; right: 8px; }
.postdetail { max-width: 520px; }                                                          /* 게시글 상세 팝업 */
.postdetail .contact { text-align: left; margin-top: 12px; line-height: 1.9; }
/* 광고 선택(나의 게시글) */
.tierbtn { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.tierbtn.on { border-color: var(--pri); background: var(--sky); }
.periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.pcard2 { display: flex; flex-direction: column; gap: 2px; align-items: center; border: 2px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.pcard2.on { border-color: var(--pri); background: var(--sky); }
.pcard2 .price { font-size: 18px; font-weight: 800; }
.pcard2 .off { color: var(--danger); font-weight: 700; }                                  /* 할인율 */

/* ───────────── 12. 알림 / 쿠폰 / 관리자 / 그래프 ───────────── */
.nrow { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; }   /* 알림 목록 한 줄 */
.nrow:hover { background: var(--bg); }
.nrow .ntitle { flex: 1; }
.nrow .ntitle.unread { font-weight: 800; }                                                /* 읽지 않은 알림은 굵게 + 빨간 점 */
.nimg { max-width: 100%; max-height: 320px; border-radius: 8px; margin: 6px 0; }          /* 알림 첨부 이미지 */
.couponbox { margin-top: 12px; padding: 12px; border: 2px dashed var(--gold); border-radius: 10px; background: var(--hl); }
.couponbox code { font-size: 18px; font-weight: 800; letter-spacing: 1px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }   /* 통계 카드 줄 */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.stat .num { font-size: 24px; font-weight: 800; color: var(--strong); }
/* 꺾은선 그래프(chart.ts) */
.chartwrap { width: 100%; }
.chart { width: 100%; height: auto; max-height: 280px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ytick, .chart .xtick { fill: var(--mut); font-size: 11px; }
.legend { display: flex; gap: 14px; margin-bottom: 4px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }

/* ───────────── 13. 모바일(≤800px) ───────────── */
@media (max-width: 800px) {
  #shell { grid-template-columns: 1fr; }                      /* 사이드바는 메인 위에 덮이는 서랍(drawer) */
  body.side-closed #shell { grid-template-columns: 1fr; }
  aside { position: fixed; left: 0; top: 0; width: 78%; max-width: var(--side-w); z-index: 30; transform: translateX(-100%); transition: .2s; }
  aside.open { transform: none; }
  /* 사이드바가 열리면 메인 화면을 어둡게 가리고(클릭 막음) 누르면 사이드바를 접는다 */
  aside.open ~ .side-mask { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .45); }
  .hb { display: inline-block; }
  .bar h2 { max-width: calc(100% - 52px); }   /* ☰ 버튼 자리를 남겨 제목이 아주 길어도 ☰ 와 같은 줄에 있게 */
  /* 모바일에서는 "아이콘만 보기" 상태여도 서랍 안은 항상 전체 메뉴를 보여준다 */
  body.side-closed aside { padding: 0 12px 12px; }
  body.side-closed .brand { flex-direction: row; padding: 16px 4px 12px; margin-bottom: 6px; }
  body.side-closed .bname { display: initial; }
  body.side-closed .side-open { display: initial; }
  body.side-closed .bbtn { flex-direction: row; gap: 4px; }
  body.side-closed .bbtn button { width: auto; height: auto; padding: 3px 8px; }
  body.side-closed aside .grp, body.side-closed aside .m-label, body.side-closed aside .m-lock, body.side-closed aside .adside, body.side-closed aside .sidead { display: initial; }
  body.side-closed aside a.m { justify-content: flex-start; padding: 7px 10px; }
  body.side-closed aside .sub a.m { padding-left: 20px; }
  body.side-closed .prof { justify-content: flex-start; padding: 8px; }
  body.side-closed .prof > span { display: initial; }
  body.side-closed .pm { left: 0; right: 0; bottom: 56px; min-width: 0; }
}


/* ═════════════════════ v4.6 추가 스타일 (항목마다 설명) ═════════════════════ */

/* ── 폼: 한 줄을 통째로 쓰는 "행" 항목(예: [취득세, 취득세율] 7:3 처럼 안쪽을 다시 나눔) ── */
.row2 { grid-column: 1 / -1; display: grid; gap: 14px 16px; align-items: start; }   /* 2칸 전체를 차지하고 안쪽 비율은 인라인 grid-template-columns 로 지정 */

/* ── 도움말 "?" 아이콘 + 마우스오버 말풍선 ── */
.help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; background: var(--pri); color: #fff; font-size: 11px; font-weight: 700; cursor: help; user-select: none; }   /* 동그란 ? 버튼 */
.help .tip { display: none; position: absolute; left: 0; top: 24px; z-index: 40; width: max-content; max-width: min(360px, 80vw); padding: 10px 12px; border-radius: 10px; background: #1c2230; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.55; text-align: left; box-shadow: 0 6px 20px #0006; white-space: normal; cursor: default; }   /* 말풍선 본체(평소 숨김) */
.help:hover .tip, .help:focus .tip, .help:focus-within .tip { display: block; }       /* 마우스오버/키보드 포커스 시 표시 */
.tiptable { border-collapse: collapse; margin: 6px 0; font-size: 12px; }             /* 말풍선 안의 표(취득세/자동차세) */
.tiptable th, .tiptable td { border: 1px solid #ffffff55; padding: 3px 8px; text-align: left; }

/* ── 라디오(양도세/종소세 선택, 팝업 내용 종류 등) ── */
/* 조회 상태의 "적용할 세금": 두 가지 모두 표시, 선택된 쪽만 ● + 진하게 */
.taxmode-view { padding: 6px 0; }
.tm-opt { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--mut); }
.tm-opt i { font-style: normal; font-size: 15px; }
.tm-opt.on { color: var(--strong); font-weight: 800; }
.tm-opt.on i { color: var(--pri); }
.radios { flex-wrap: wrap; gap: 14px; }                                              /* 라디오 묶음: 좁으면 줄바꿈 */
.radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; }
.radio input { width: 18px; height: 18px; }

/* ── 분류 추가(＋) 줄: 선택 상자 아래의 입력칸 + 추가 버튼 ── */
.addrow { margin-top: 6px; }
.addrow input { flex: 1; min-width: 0; }

/* ── 리스트 컬럼 드래그 순서 변경 ── */
th.dragcol { cursor: grab; }                                                         /* 끌 수 있다는 표시 */
th.dragging { opacity: .4; }                                                         /* 끌고 있는 컬럼은 흐리게 */
th.drop-l { box-shadow: inset 3px 0 0 var(--gold); }                                 /* 놓일 자리: 왼쪽 선 */
th.drop-r { box-shadow: inset -3px 0 0 var(--gold); }                                /* 놓일 자리: 오른쪽 선 */

/* ── 차트 범례(클릭으로 켜고 끄기) ── */
.legend .lg { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--line); border-radius: 14px; padding: 2px 10px; cursor: pointer; color: var(--ink); font-size: 13px; }
.legend .lg.off { opacity: .4; text-decoration: line-through; }                     /* 꺼진 시리즈 */

/* ── 컨설팅 광고/게시글: 메시지는 왼쪽 정렬, 입력칸은 2배 높이 ── */
.pcard .pmsg, .pmsg.full { text-align: left; align-self: stretch; }                  /* 가운데 정렬 해제 → 왼쪽 정렬 */
.pmsg.full { white-space: pre-wrap; font-size: 14px; display: block; overflow: visible; }   /* 상세 보기: 줄임 없이 전체 */
.msgbox { min-height: 180px; resize: vertical; }                                     /* 기존의 2배 정도(rows=8) */
.tag.own { border-style: dashed; }                                                   /* 내가 추가한 태그는 점선 테두리 */
.postdetail-page { max-width: 760px; }
.postdetail .contact, .postdetail-page .contact { margin-top: 10px; padding: 8px 10px; background: var(--bg); border-radius: 8px; text-align: left; }

/* ── 쿠폰/알림 대상 다중 선택 ── */
.tgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.tgroup .mut { flex-basis: 100%; font-size: 12px; }
.tchk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 14px; }
.tchk input { width: 18px; height: 18px; }
.popset { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }       /* 알림 팝업 설정 상세 */

/* ── 로그인 후 알림 팝업 (글자 선택·드래그 금지, 광고 팝업보다 위) ── */
.npop-ov { z-index: 80; }                                                            /* 다른 팝업/광고보다 위 */
.npop { max-width: 420px; padding: 0; overflow: hidden; text-align: left; }
.npop, .npop * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }   /* 글자 선택/드래그 방지 */
.npop-click { display: block; cursor: pointer; }                                     /* 이미지/글을 누르면 알림 페이지로 이동 */
.npop-img { display: block; width: 100%; max-height: 60vh; object-fit: contain; background: #000; pointer-events: none; }
.npop-text { padding: 18px 18px 8px; }
.npop-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.npop-imgtitle { padding: 2px 4px 0; }                                                  /* 이미지 팝업 위 제목 */
.npop-bodytext { font-size: 14px; line-height: 1.6; white-space: pre-wrap; max-height: 40vh; overflow: hidden; }
.npop-btns { justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--card); }
.popsw { font-size: 12px; padding: 3px 12px; border-radius: 999px; }                  /* 보낸 알림 표: 팝업 켜짐/꺼짐 */
.popsw.on { background: var(--pri); color: #fff; border-color: var(--pri); }

@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }                                              /* 좁은 화면은 1칸 */
  .row2 { grid-template-columns: 1fr !important; }
}

/* ───────────── 14. 소개(랜딩) / 약관·개인정보처리방침 / 베타 안내 ───────────── */
/* 로그인했던 브라우저는 소개 화면을 숨긴다(index.html 의 깜빡임 방지 스크립트가 html.authed 를 붙임) */
html.authed .landing { display: none; }
.landing { max-width: 1040px; margin: 0 auto; padding: 0 20px 40px; }
.lp-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.lp-logo { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--strong); }
.lp-hero { text-align: center; padding: 48px 0 40px; }
.lp-hero h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.25; letter-spacing: -0.03em; margin: 14px 0; color: var(--strong); }
.lp-hero p { font-size: 17px; line-height: 1.7; color: var(--mut); margin: 0 auto 26px; max-width: 640px; }
.lp-cta { font-size: 17px; font-weight: 700; padding: 14px 28px; border-radius: 999px; }
.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lp-features article { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.lp-features h2 { font-size: 18px; margin: 0 0 8px; color: var(--strong); }
.lp-features p { margin: 0; line-height: 1.7; color: var(--ink); }
.lp-how { margin-top: 36px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; }
.lp-how h2 { font-size: 20px; margin: 0 0 10px; }
.lp-how ol { line-height: 1.9; padding-left: 20px; margin: 0 0 10px; }
.lp-how .mut { font-size: 13px; line-height: 1.6; margin: 0; }
.lp-foot, .doc-foot { text-align: center; color: var(--mut); font-size: 13px; line-height: 1.9; margin-top: 36px; }
.lp-foot a, .doc-foot a { color: inherit; }

/* 약관·개인정보처리방침 문서 페이지 */
.doc { max-width: 820px; margin: 0 auto; padding: 24px 20px 48px; line-height: 1.75; }
.doc h1 { font-size: 28px; margin: 8px 0 4px; }
.doc h2 { font-size: 18px; margin: 28px 0 8px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc th { background: var(--bg); }
.doc { overflow-wrap: anywhere; }

/* 플랜 페이지 베타 안내 */
.beta-note { background: var(--hl); border-color: var(--gold); line-height: 1.8; }