@charset "UTF-8";
/* ==========================================================================
   서희부동산 — 디자인 토큰 (공개 화면 site.css · 관리 화면 admin.css 가 함께 읽는다)

   세 층이다. 아래 층만 위 층을 가리킨다.
     1. 원시(primitive)  : 값 그 자체. 이름에 쓰임새가 없다(--navy-900, --space-4).
     2. 의미(semantic)   : 쓰임새 이름. 원시 토큰만 가리킨다(--color-text-muted).
     3. 컴포넌트          : 버튼·입력칸·매물표처럼 두 파일이 같이 쓰는 부품의 값. 의미 토큰만 가리킨다.
   site.css · admin.css 의 규칙은 2·3층만 쓴다. 원시 토큰이나 #색 값을 규칙에 직접 쓰지 않는다.

   ★ 색은 로고에서 잰 값이 뿌리다(scripts/MakeBrandAssets.java). 명함의 벽돌색(#b3362a)은 인쇄용이라 쓰지 않는다.
   ★ 대비: 글자 4.5:1, 입력칸 테두리 3:1 이상. 대비가 모자란 색은 의미 토큰 이름에 "장식 전용" 이라고 적었다.
   ★ 간격은 4px 격자다. 글자 크기는 8단계(13·15·17·20·24·28·34·40px)다. 본문은 17px 이다.
   ★ 누르는 것은 48px 이상(관리 화면·바닥 링크는 44px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 원시
   -------------------------------------------------------------------------- */
:root {
    /* 남색 — 로고 "서희부동산" 글씨 */
    --navy-900: #0a1d40;
    --navy-950: #06132c;

    /* 청회색 — 남색과 같은 색상(약 220°)의 무채색 단계. 숫자가 클수록 어둡다 */
    --slate-50: #f5f7fb;
    --slate-100: #eef1f7;
    --slate-150: #e4e9f2;
    --slate-200: #dde2ea;
    --slate-250: #d5dbe6;
    --slate-300: #c9d2e3;
    --slate-350: #b3bdcd;
    --slate-400: #9aa3b5;
    --slate-500: #7f899d;
    --slate-600: #5a6275;
    --slate-900: #16203a;

    --white: #ffffff;

    /* 금색 — 로고 지붕선(500). 700 은 금색을 글자로 쓸 때 */
    --gold-50: #fffaf0;
    --gold-100: #f6ecda;
    --gold-200: #e0c08a;
    --gold-300: #e2b86f;
    --gold-500: #bf8837;
    --gold-700: #8a5a14;

    /* 분홍 — 로고 하트(500, 지금은 로고 그림 안에만 있다). 700 은 글자·도장 */
    --rose-500: #de4477;
    --rose-700: #b0245a;

    --red-50: #fdecec;
    --red-200: #e8bcb9;
    --red-700: #b3261e;

    --green-50: #eaf5ee;
    --green-200: #b7dcc4;
    --green-700: #2c7a3f;
    --green-800: #1f5c2f;

    --blue-600: #1f5fa9;

    /* 카카오 채널 버튼 */
    --yellow-400: #fee500;
    --yellow-500: #f4dc00;
    --brown-950: #191600;

    /* 사무소 사진 뒤 따뜻한 판 */
    --sand-100: #f6f2ec;

    /* 반투명 — 남색 유리 위에 겹치는 흰색, 그림자 */
    --white-a97: rgba(255, 255, 255, 0.97);
    --white-a70: rgba(255, 255, 255, 0.7);
    --white-a15: rgba(255, 255, 255, 0.15);
    --white-a10: rgba(255, 255, 255, 0.1);
    --white-a055: rgba(255, 255, 255, 0.055);
    --white-a035: rgba(255, 255, 255, 0.035);
    --navy-900-a05: rgba(10, 29, 64, 0.05);
    --navy-950-a50: rgba(6, 19, 44, 0.5);
    --navy-950-a78: rgba(6, 19, 44, 0.78);
    --black-a85: rgba(0, 0, 0, 0.85);
    --gold-300-a18: rgba(226, 184, 111, 0.18);
    --blue-600-a25: rgba(31, 95, 169, 0.25);

    /* 글꼴 */
    --font-family-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Malgun Gothic", "Noto Sans KR", sans-serif;

    /* 글자 크기 8단계 — 17px 에서 위아래로 약 1.2배씩 */
    --font-size-xs: 0.8125rem;   /* 13 */
    --font-size-sm: 0.9375rem;   /* 15 */
    --font-size-base: 1.0625rem; /* 17 */
    --font-size-lg: 1.25rem;     /* 20 */
    --font-size-xl: 1.5rem;      /* 24 */
    --font-size-2xl: 1.75rem;    /* 28 */
    --font-size-3xl: 2.125rem;   /* 34 */
    --font-size-4xl: 2.5rem;     /* 40 */

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    --tracking-tight: -0.03em;
    --tracking-snug: -0.02em;

    /* 간격 — 4px 격자 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-18: 72px;
    --space-20: 80px;
    --space-24: 96px;

    /* 모서리 */
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-full: 999px;

    --duration-120: 120ms;
}

/* --------------------------------------------------------------------------
   2. 의미
   -------------------------------------------------------------------------- */
:root {
    /* 바탕 */
    --color-bg: var(--white);
    --color-bg-sunken: var(--slate-50);              /* 관리 화면 바탕 */
    --color-surface: var(--white);                   /* 종이·카드·입력칸 */
    --color-surface-tint: var(--slate-100);          /* 연한 남색 구역 */
    --color-surface-warm: var(--sand-100);
    --color-surface-translucent: var(--white-a97);   /* 붙박이 머리·아래 띠 */
    --color-surface-brand: var(--navy-900);          /* 남색 판(유리·안내 상자) */
    --color-surface-brand-deep: var(--navy-950);     /* 바닥 */
    --color-surface-media: var(--navy-950);          /* 사진 여백 */
    --color-scrim: var(--navy-950-a78);              /* 사진 위 글자 받침 */

    /* 글자 */
    --color-text: var(--slate-900);
    --color-text-muted: var(--slate-600);
    --color-text-subtle: var(--slate-400);           /* 장식·비활성 전용(흰 바탕 2.5:1) — 읽어야 하는 글에 쓰지 않는다 */
    --color-text-brand: var(--navy-900);             /* 제목·강조 글자 */
    --color-heading: var(--color-text-brand);

    /* 남색 판 위 */
    --color-on-brand: var(--white);
    --color-on-brand-soft: var(--slate-150);
    --color-on-brand-muted: var(--slate-300);
    --color-on-brand-dim: var(--slate-400);
    --color-on-brand-accent: var(--gold-300);
    --color-on-brand-accent-soft: var(--gold-300-a18);
    --color-on-brand-hover: var(--white-a10);        /* 남색 위 누르는 것의 hover 바탕 */

    /* 선 */
    --color-border: var(--slate-200);
    --color-border-strong: var(--slate-250);
    --color-border-control: var(--slate-500);        /* 입력칸 테두리 — 흰 바탕 3.5:1 */
    --color-border-on-brand: var(--white-a15);
    --color-border-on-brand-strong: var(--white-a70);

    /* 브랜드 · 강조 */
    --color-brand: var(--navy-900);                  /* 주 버튼·선택된 탭 */
    --color-brand-hover: var(--navy-950);
    --color-accent: var(--gold-500);                 /* 선·장식 전용(흰 바탕 3.1:1) — 글자에 쓰지 않는다 */
    --color-accent-ink: var(--gold-700);             /* 금색 글자 5.9:1 */
    --color-accent-soft: var(--gold-100);
    --color-accent-faint: var(--gold-50);
    --color-highlight-ink: var(--rose-700);          /* 필수 표시 */

    --color-kakao: var(--yellow-400);
    --color-kakao-hover: var(--yellow-500);
    --color-on-kakao: var(--brown-950);

    /* 거래 형태 — 매물표 색 띠·점. 세 색은 서로 헷갈리면 안 된다(흰 글자 5.9:1 이상) */
    --color-deal-sale: var(--navy-900);
    --color-deal-jeonse: var(--gold-700);
    --color-deal-monthly: var(--rose-700);

    /* 상태 — 관리 화면 배지·알림, 공개 화면 알림 */
    --color-danger: var(--red-700);
    --color-danger-soft: var(--red-50);
    --color-danger-border: var(--red-200);
    --color-success: var(--green-700);
    --color-success-hover: var(--green-800);
    --color-success-soft: var(--green-50);
    --color-success-border: var(--green-200);
    --color-attention: var(--gold-700);              /* 새 상담·추천·고정: 손이 가야 하는 것 */
    --color-attention-soft: var(--gold-100);
    --color-attention-border: var(--gold-200);
    --color-progress: var(--navy-900);               /* 연락함·거래완료: 진행 중이거나 끝난 것 */
    --color-progress-soft: var(--slate-100);
    --color-progress-border: var(--slate-250);
    --color-neutral: var(--slate-600);               /* 비공개·숨김·기본 글 */
    --color-neutral-soft: var(--white);
    --color-neutral-border: var(--slate-300);

    /* 창틀(첫 화면 유리창) */
    --color-frame: var(--slate-300);
    --color-frame-edge: var(--slate-350);
    --color-glass-glint: var(--white-a055);
    --color-glass-glint-faint: var(--white-a035);

    /* 초점 — 흰 테 + 파란 테 두 겹이라 흰 바탕·남색 바탕 어디서나 보인다 */
    --focus-ring: 0 0 0 3px var(--white), 0 0 0 6px var(--blue-600);
    --focus-ring-control: 0 0 0 3px var(--blue-600-a25);

    /* 높이(그림자) */
    --shadow-paper: 0 1px 0 var(--navy-900-a05);                  /* 바닥에 놓인 종이 */
    --shadow-paper-on-glass: 0 16px 26px -18px var(--black-a85);  /* 유리에 붙은 종이 */
    --shadow-float: 0 16px 30px -24px var(--navy-950-a50);        /* 떠 있는 상자(창턱·요약) */
    --shadow-float-up: 0 -8px 20px -14px var(--navy-950-a50);     /* 아래에 붙은 띠 */
    --shadow-overlay: 0 16px 30px -18px var(--navy-950-a50);      /* 펼침 메뉴 */

    /* 모서리 — 종이는 거의 각지고, 누르는 것은 조금 둥글다. 한 값으로 통일하지 않는다 */
    --radius-paper: var(--radius-2);
    --radius-inset: var(--radius-6);                 /* 메뉴 안 항목·창틀 모서리 */
    --radius-control: var(--radius-8);               /* 누르는 것·상자 */
    --radius-pill: var(--radius-full);
    --radius-focus: var(--radius-4);

    /* 글자 */
    --font-sans: var(--font-family-sans);
    --font-size-body: var(--font-size-base);
    --font-size-display: clamp(1.625rem, 2.6vw, 2.25rem); /* 첫 화면 제목 — 휴대폰 26px ~ 넓은 화면 36px */
    --line-height-body: var(--leading-relaxed);

    /* 누르는 크기 */
    --size-touch: 48px;
    --size-touch-lg: 56px;
    --size-touch-sm: 44px;

    /* 틀 */
    --wrap: 1180px;
    --gutter: var(--space-5);
    --header-h: 76px;
    --measure: 72ch;                                 /* 긴 글 한 줄 폭 */
    --space-section: var(--space-16);
    --space-section-sm: var(--space-11);
    --space-card: var(--space-6);                    /* 상자 안 여백 */

    --z-header: 40;
    --z-callbar: 50;
    --z-skip-link: 100;

    --duration-fast: var(--duration-120);
}

@media (max-width: 960px) {
    :root {
        --header-h: 64px;
    }
}

/* --------------------------------------------------------------------------
   3. 컴포넌트 — 두 파일이 같이 쓰는 부품
   -------------------------------------------------------------------------- */
:root {
    /* 버튼(.btn · .adm-btn) */
    --btn-height: var(--size-touch);
    --btn-height-lg: var(--size-touch-lg);
    --btn-padding-x: var(--space-6);
    --btn-padding-y: var(--space-2);
    --btn-gap: var(--space-2);
    --btn-border-width: 2px;
    --btn-radius: var(--radius-control);
    --btn-bg: var(--color-brand);
    --btn-bg-hover: var(--color-brand-hover);
    --btn-fg: var(--color-on-brand);
    --btn-font-size: var(--font-size-base);

    /* 입력칸(.input · .select · .textarea · .choice · .adm-input …) */
    --control-height: var(--size-touch);
    --control-padding-x: var(--space-3);
    --control-padding-y: var(--space-2);
    --control-bg: var(--color-surface);
    --control-border: var(--color-border-control);
    --control-border-focus: var(--color-brand);
    --control-radius: var(--radius-control);
    --control-focus-ring: var(--focus-ring-control);

    /* 매물표(.sheet) — 인쇄 매물표 한 장 */
    --sheet-bg: var(--color-surface);
    --sheet-border: var(--color-border);
    --sheet-radius: var(--radius-paper);
    --sheet-shadow: var(--shadow-paper);
    --sheet-price-size: var(--font-size-2xl);

    /* 작은 딱지(.pin · .sheet__featured · .person__qual · .adm-badge) */
    --tag-font-size: var(--font-size-xs);
    --tag-padding-x: var(--space-2);
    --tag-radius: var(--radius-paper);

    /* 상자(.panel · .aside-card · .result · .adm-card …) */
    --card-padding: var(--space-card);
    --card-radius: var(--radius-control);
    --card-border: var(--color-border);
}